mirror of
https://github.com/R0m1k3/Regisflow.git
synced 2026-10-12 01:39:58 +02:00
michaelschal
4333a9ae12
Updates the styles of input fields, vendor sections, and filter cards to provide better visual consistency. Replit-Commit-Author: Agent Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/19d76f99-63e3-4717-987b-4fafe960e234.jpg
745 lines
16 KiB
CSS
745 lines
16 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
/* Modern neutral palette */
|
|
--background: hsl(0, 0%, 100%);
|
|
--foreground: hsl(222, 15%, 11%);
|
|
--muted: hsl(220, 13%, 96%);
|
|
--muted-foreground: hsl(220, 9%, 46%);
|
|
--popover: hsl(0, 0%, 100%);
|
|
--popover-foreground: hsl(222, 15%, 11%);
|
|
--card: hsl(0, 0%, 100%);
|
|
--card-foreground: hsl(222, 15%, 11%);
|
|
--border: hsl(220, 13%, 91%);
|
|
--input: hsl(220, 13%, 91%);
|
|
|
|
/* Modern dark theme palette */
|
|
--primary: hsl(220, 13%, 18%);
|
|
--primary-foreground: hsl(0, 0%, 98%);
|
|
--secondary: hsl(220, 13%, 95%);
|
|
--secondary-foreground: hsl(220, 13%, 18%);
|
|
--accent: hsl(220, 13%, 95%);
|
|
--accent-foreground: hsl(220, 13%, 18%);
|
|
|
|
/* Status colors */
|
|
--destructive: hsl(0, 72%, 51%);
|
|
--destructive-foreground: hsl(0, 0%, 98%);
|
|
--success: hsl(142, 69%, 45%);
|
|
--success-foreground: hsl(0, 0%, 98%);
|
|
--warning: hsl(38, 92%, 50%);
|
|
--warning-foreground: hsl(0, 0%, 98%);
|
|
--info: hsl(210, 100%, 56%);
|
|
--info-foreground: hsl(0, 0%, 98%);
|
|
|
|
/* Interactive elements */
|
|
--ring: hsl(220, 13%, 18%);
|
|
--radius: 0.375rem;
|
|
|
|
/* Gradient colors */
|
|
--gradient-from: hsl(232, 97%, 59%);
|
|
--gradient-to: hsl(262, 100%, 59%);
|
|
--gradient-accent: hsl(282, 100%, 59%);
|
|
}
|
|
|
|
.dark {
|
|
/* Dark neutral palette */
|
|
--background: hsl(222, 20%, 4%);
|
|
--foreground: hsl(210, 40%, 95%);
|
|
--muted: hsl(222, 15%, 8%);
|
|
--muted-foreground: hsl(215, 20%, 65%);
|
|
--popover: hsl(222, 15%, 6%);
|
|
--popover-foreground: hsl(210, 40%, 95%);
|
|
--card: hsl(222, 15%, 6%);
|
|
--card-foreground: hsl(210, 40%, 95%);
|
|
--border: hsl(215, 28%, 17%);
|
|
--input: hsl(215, 28%, 17%);
|
|
|
|
/* Dark mode palette */
|
|
--primary: hsl(0, 0%, 98%);
|
|
--primary-foreground: hsl(222, 20%, 4%);
|
|
--secondary: hsl(215, 28%, 17%);
|
|
--secondary-foreground: hsl(210, 40%, 95%);
|
|
--accent: hsl(215, 28%, 17%);
|
|
--accent-foreground: hsl(210, 40%, 95%);
|
|
|
|
/* Dark status colors */
|
|
--destructive: hsl(0, 85%, 65%);
|
|
--destructive-foreground: hsl(0, 0%, 98%);
|
|
--success: hsl(142, 71%, 55%);
|
|
--success-foreground: hsl(0, 0%, 98%);
|
|
--warning: hsl(38, 92%, 60%);
|
|
--warning-foreground: hsl(0, 0%, 98%);
|
|
--info: hsl(210, 100%, 65%);
|
|
--info-foreground: hsl(0, 0%, 98%);
|
|
|
|
--ring: hsl(0, 0%, 98%);
|
|
}
|
|
|
|
/* Modern Design Utilities */
|
|
.modern-card {
|
|
border: 1px solid hsl(var(--border));
|
|
background: hsl(var(--card));
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.modern-button {
|
|
border: 1px solid hsl(var(--border));
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-weight: 500;
|
|
padding: 8px 16px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modern-button:hover {
|
|
background: hsl(var(--muted));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.modern-button-primary {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: 1px solid hsl(var(--primary));
|
|
}
|
|
|
|
.modern-button-primary:hover {
|
|
background: hsl(var(--primary) / 0.9);
|
|
}
|
|
|
|
.modern-input {
|
|
border: 2px solid hsl(220, 13%, 75%);
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
padding: 10px 14px;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.modern-input:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
.modern-input:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.modern-section {
|
|
border: 2px solid hsl(var(--border));
|
|
background: hsl(var(--card));
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.05);
|
|
}
|
|
|
|
.modern-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 2px solid hsl(var(--border));
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.modern-icon-container {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid hsl(var(--primary));
|
|
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
/* Section-specific styles */
|
|
.modern-section-vendor {
|
|
border-left: 4px solid hsl(262, 83%, 58%);
|
|
background: hsl(262, 83%, 98%);
|
|
}
|
|
|
|
.modern-section-product {
|
|
border-left: 4px solid hsl(210, 100%, 50%);
|
|
background: hsl(210, 100%, 98%);
|
|
}
|
|
|
|
.modern-section-customer {
|
|
border-left: 4px solid hsl(142, 69%, 45%);
|
|
background: hsl(142, 69%, 98%);
|
|
}
|
|
|
|
.modern-section-identity {
|
|
border-left: 4px solid hsl(38, 92%, 50%);
|
|
background: hsl(38, 92%, 98%);
|
|
}
|
|
|
|
.modern-select-trigger {
|
|
border: 2px solid hsl(220, 13%, 75%);
|
|
background: hsl(var(--background));
|
|
padding: 10px 14px;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.modern-select-trigger:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.modern-select-trigger:focus {
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
/* Modern filter card styles */
|
|
.modern-filter-card {
|
|
border: 2px solid hsl(220, 13%, 85%);
|
|
background: hsl(220, 13%, 96%);
|
|
padding: 16px;
|
|
border-radius: 0;
|
|
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
|
|
}
|
|
|
|
/* Enhanced keyframes for mobile animations */
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes cardAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes mobileModalEnter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes mobileModalExit {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply font-sans antialiased bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
letter-spacing: -0.01em;
|
|
/* Optimize for mobile */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
/* Prevent horizontal scroll on mobile */
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Enhanced mobile viewport handling */
|
|
html {
|
|
/* Prevent zoom on double tap */
|
|
touch-action: manipulation;
|
|
/* Smooth scrolling */
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Disable text selection for UI elements */
|
|
.select-none {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Improve touch interactions */
|
|
button,
|
|
[role="button"],
|
|
input[type="submit"],
|
|
input[type="button"] {
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
*:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Smooth scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground));
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Mobile-first responsive utilities */
|
|
.mobile-container {
|
|
@apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.mobile-grid {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6;
|
|
}
|
|
|
|
.mobile-stack {
|
|
@apply flex flex-col space-y-4 sm:space-y-6;
|
|
}
|
|
|
|
.mobile-row {
|
|
@apply flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center;
|
|
}
|
|
|
|
/* Responsive spacing */
|
|
.mobile-spacing {
|
|
@apply space-y-4 sm:space-y-6 lg:space-y-8;
|
|
}
|
|
|
|
.mobile-padding {
|
|
@apply p-4 sm:p-6 lg:p-8;
|
|
}
|
|
|
|
.mobile-margin {
|
|
@apply m-4 sm:m-6 lg:m-8;
|
|
}
|
|
|
|
/* Touch-friendly interactions */
|
|
.touch-target {
|
|
@apply min-h-[44px] min-w-[44px] flex items-center justify-center;
|
|
}
|
|
|
|
.touch-button {
|
|
@apply touch-target px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-medium transition-all duration-200 ease-out;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.touch-input {
|
|
@apply h-12 sm:h-10 px-4 text-base sm:text-sm transition-all duration-200 ease-out;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Modern animations with mobile optimization */
|
|
.slide-in-right {
|
|
animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide-in-left {
|
|
animation: slideInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide-in-up {
|
|
animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide-in-down {
|
|
animation: slideInDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.scale-in {
|
|
animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.smooth-transition {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.smooth-transform {
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.mobile-smooth {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
/* Mobile-optimized states */
|
|
.mobile-hover {
|
|
@apply transition-all duration-200 ease-out;
|
|
}
|
|
|
|
.mobile-hover:hover {
|
|
@apply transform scale-[1.02];
|
|
}
|
|
|
|
.mobile-active {
|
|
@apply transition-all duration-100 ease-out;
|
|
}
|
|
|
|
.mobile-active:active {
|
|
@apply transform scale-[0.98];
|
|
}
|
|
|
|
/* Card animations */
|
|
.card-appear {
|
|
animation: cardAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover {
|
|
@apply transition-all duration-300 ease-out hover:shadow-lg hover:scale-[1.01];
|
|
}
|
|
|
|
/* Modern gradients */
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-to) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Mobile navigation */
|
|
.mobile-nav {
|
|
@apply fixed bottom-0 left-0 right-0 bg-white bg-opacity-95 backdrop-blur-sm border-t border-border z-50;
|
|
@apply flex items-center justify-around py-2 sm:hidden;
|
|
}
|
|
|
|
.mobile-nav-item {
|
|
@apply flex flex-col items-center space-y-1 px-3 py-2 rounded-lg transition-all duration-200;
|
|
}
|
|
|
|
.mobile-nav-item.active {
|
|
@apply bg-primary bg-opacity-10 text-primary;
|
|
}
|
|
|
|
/* Typography responsive */
|
|
.responsive-title {
|
|
@apply text-lg sm:text-xl lg:text-2xl xl:text-3xl font-bold;
|
|
}
|
|
|
|
.responsive-subtitle {
|
|
@apply text-base sm:text-lg lg:text-xl font-semibold;
|
|
}
|
|
|
|
.responsive-body {
|
|
@apply text-sm sm:text-base;
|
|
}
|
|
|
|
.responsive-caption {
|
|
@apply text-xs sm:text-sm;
|
|
}
|
|
|
|
/* Form responsive styles */
|
|
.mobile-form {
|
|
@apply space-y-4 sm:space-y-6;
|
|
}
|
|
|
|
.mobile-form-group {
|
|
@apply space-y-2 sm:space-y-3;
|
|
}
|
|
|
|
.mobile-form-row {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6;
|
|
}
|
|
|
|
.mobile-form-section {
|
|
@apply p-4 sm:p-6 bg-muted bg-opacity-30 rounded-xl space-y-4 sm:space-y-6;
|
|
}
|
|
|
|
/* Table responsive */
|
|
.mobile-table {
|
|
@apply overflow-x-auto -mx-4 sm:mx-0;
|
|
}
|
|
|
|
.mobile-table table {
|
|
@apply min-w-full;
|
|
}
|
|
|
|
.mobile-table-cell {
|
|
@apply px-2 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm;
|
|
}
|
|
|
|
/* Modal responsive */
|
|
.mobile-modal {
|
|
@apply fixed inset-0 z-50 flex items-end sm:items-center justify-center;
|
|
}
|
|
|
|
.mobile-modal-content {
|
|
@apply w-full sm:w-auto sm:max-w-lg mx-4 sm:mx-0 bg-white rounded-t-xl sm:rounded-xl;
|
|
@apply max-h-[90vh] overflow-y-auto;
|
|
}
|
|
|
|
.mobile-modal-enter {
|
|
animation: mobileModalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.mobile-modal-exit {
|
|
animation: mobileModalExit 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Glass morphism */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Modern card styles */
|
|
.modern-card {
|
|
@apply bg-card border border-border rounded-xl shadow-sm hover:shadow-lg smooth-transition backdrop-blur-sm;
|
|
}
|
|
|
|
.modern-card-elevated {
|
|
@apply modern-card shadow-lg hover:shadow-xl;
|
|
}
|
|
|
|
/* Status styles */
|
|
.status-success {
|
|
@apply bg-green-50 text-green-700 border border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800;
|
|
}
|
|
|
|
.status-warning {
|
|
@apply bg-yellow-50 text-yellow-700 border border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800;
|
|
}
|
|
|
|
.status-error {
|
|
@apply bg-red-50 text-red-700 border border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800;
|
|
}
|
|
|
|
.status-info {
|
|
@apply bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
|
|
}
|
|
|
|
/* Camera preview */
|
|
.camera-preview {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Mobile responsive utilities */
|
|
.mobile-padding {
|
|
@apply px-3 sm:px-4 md:px-6 lg:px-8;
|
|
}
|
|
|
|
.mobile-text-responsive {
|
|
@apply text-sm sm:text-base lg:text-lg;
|
|
}
|
|
|
|
.mobile-header-responsive {
|
|
@apply text-lg sm:text-xl lg:text-2xl;
|
|
}
|
|
|
|
.mobile-button-responsive {
|
|
@apply text-xs sm:text-sm lg:text-base px-3 sm:px-4 py-2 sm:py-2.5;
|
|
}
|
|
|
|
.mobile-grid-responsive {
|
|
@apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3;
|
|
}
|
|
|
|
.mobile-gap-responsive {
|
|
@apply gap-2 sm:gap-4 lg:gap-6;
|
|
}
|
|
|
|
.mobile-form-responsive {
|
|
@apply space-y-4 sm:space-y-6 lg:space-y-8;
|
|
}
|
|
|
|
/* Touch-friendly interactive elements */
|
|
.touch-friendly {
|
|
@apply min-h-[44px] min-w-[44px];
|
|
}
|
|
|
|
.touch-friendly-button {
|
|
@apply h-11 sm:h-10 lg:h-9 px-4 sm:px-3 lg:px-4;
|
|
}
|
|
|
|
/* Responsive text sizes */
|
|
.responsive-title {
|
|
@apply text-xl sm:text-2xl lg:text-3xl;
|
|
}
|
|
|
|
.responsive-subtitle {
|
|
@apply text-sm sm:text-base lg:text-lg;
|
|
}
|
|
|
|
.responsive-body {
|
|
@apply text-sm sm:text-base;
|
|
}
|
|
|
|
.responsive-caption {
|
|
@apply text-xs sm:text-sm;
|
|
}
|
|
|
|
/* Mobile-first form improvements */
|
|
.mobile-form-section {
|
|
@apply p-4 sm:p-6 lg:p-8;
|
|
}
|
|
|
|
.mobile-card-header {
|
|
@apply p-4 sm:p-6 lg:p-8;
|
|
}
|
|
|
|
.mobile-card-content {
|
|
@apply p-6 sm:p-8 lg:p-10;
|
|
}
|
|
|
|
/* Additional utility classes */
|
|
.mobile-form-responsive {
|
|
@apply space-y-6 sm:space-y-8;
|
|
}
|
|
|
|
.mobile-gap-responsive {
|
|
@apply gap-4 sm:gap-6;
|
|
}
|
|
|
|
.mobile-header-responsive {
|
|
@apply text-base sm:text-lg lg:text-xl;
|
|
}
|
|
|
|
.touch-friendly-button {
|
|
@apply min-h-[44px] touch-target;
|
|
}
|
|
|
|
/* Modal responsive */
|
|
.mobile-modal-content {
|
|
@apply m-4 sm:m-6 max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)];
|
|
}
|
|
|
|
/* Form group mobile */
|
|
.mobile-form-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
/* Touch input */
|
|
.touch-input {
|
|
@apply min-h-[44px] px-3 py-2;
|
|
}
|
|
|
|
/* Responsive subtitle */
|
|
.responsive-subtitle {
|
|
@apply text-sm sm:text-base lg:text-lg font-semibold;
|
|
}
|
|
}
|