kjh2064
0d81ace5da
- base.css: Foundation styles, typography, resets - components.css: Buttons, cards, badges, alerts, modals - forms.css: Input fields, validation, checkboxes, radio - tables.css: Table styles, responsive, pagination - layout.css: Header, sidebar, navigation, grid - darkmode.css: Dark theme variables and overrides - responsive.css: Mobile-first, breakpoints, grid columns - utilities.css: Spacing, colors, text, helpers All files support Bootstrap 5 + SmartAdmin theme - Total CSS: ~1800 lines (organized, maintainable) - Supports dark mode via data-bs-theme="dark" - Mobile-first responsive design - Preserved smartapp.min.css for legacy compatibility Load order: 1. base → components → forms → tables → layout 2. darkmode → responsive → utilities 3. smartapp.min.css (fallback) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
366 lines
7.5 KiB
CSS
366 lines
7.5 KiB
CSS
/* ============================================================
|
|
SmartAdmin Bootstrap 5 - Responsive
|
|
CSS Module: Mobile-First Design & Breakpoints
|
|
============================================================ */
|
|
|
|
/* Breakpoints */
|
|
/* Mobile: 320px - 575px */
|
|
/* Tablet (sm): 576px - 767px */
|
|
/* Tablet (md): 768px - 991px */
|
|
/* Desktop (lg): 992px - 1199px */
|
|
/* Desktop (xl): 1200px - 1399px */
|
|
/* Desktop (xxl): 1400px+ */
|
|
|
|
/* Mobile First - Base Styles */
|
|
|
|
/* Hide Elements on Mobile */
|
|
.d-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
/* Small Screens (≥576px - Tablet) */
|
|
@media (min-width: 576px) {
|
|
.d-sm-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-sm-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-sm-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-sm-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-sm-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-sm-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.col-sm {
|
|
flex: 1 0 0% !important;
|
|
}
|
|
|
|
.col-sm-1 { width: 8.33333333% !important; }
|
|
.col-sm-2 { width: 16.66666667% !important; }
|
|
.col-sm-3 { width: 25% !important; }
|
|
.col-sm-4 { width: 33.33333333% !important; }
|
|
.col-sm-5 { width: 41.66666667% !important; }
|
|
.col-sm-6 { width: 50% !important; }
|
|
.col-sm-7 { width: 58.33333333% !important; }
|
|
.col-sm-8 { width: 66.66666667% !important; }
|
|
.col-sm-9 { width: 75% !important; }
|
|
.col-sm-10 { width: 83.33333333% !important; }
|
|
.col-sm-11 { width: 91.66666667% !important; }
|
|
.col-sm-12 { width: 100% !important; }
|
|
|
|
.ms-sm-auto { margin-left: auto !important; }
|
|
.me-sm-auto { margin-right: auto !important; }
|
|
.p-sm-2 { padding: 0.5rem !important; }
|
|
.p-sm-3 { padding: 1rem !important; }
|
|
|
|
.app-sidebar {
|
|
width: 200px !important;
|
|
}
|
|
}
|
|
|
|
/* Medium Screens (≥768px) */
|
|
@media (min-width: 768px) {
|
|
.d-md-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-md-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-md-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-md-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-md-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-md-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.col-md {
|
|
flex: 1 0 0% !important;
|
|
}
|
|
|
|
.col-md-1 { width: 8.33333333% !important; }
|
|
.col-md-2 { width: 16.66666667% !important; }
|
|
.col-md-3 { width: 25% !important; }
|
|
.col-md-4 { width: 33.33333333% !important; }
|
|
.col-md-5 { width: 41.66666667% !important; }
|
|
.col-md-6 { width: 50% !important; }
|
|
.col-md-7 { width: 58.33333333% !important; }
|
|
.col-md-8 { width: 66.66666667% !important; }
|
|
.col-md-9 { width: 75% !important; }
|
|
.col-md-10 { width: 83.33333333% !important; }
|
|
.col-md-11 { width: 91.66666667% !important; }
|
|
.col-md-12 { width: 100% !important; }
|
|
|
|
.ms-md-auto { margin-left: auto !important; }
|
|
.me-md-auto { margin-right: auto !important; }
|
|
.p-md-3 { padding: 1rem !important; }
|
|
.p-md-4 { padding: 1.5rem !important; }
|
|
|
|
.app-content {
|
|
padding: 2rem !important;
|
|
}
|
|
|
|
.mobile-menu-icon {
|
|
display: none !important;
|
|
}
|
|
|
|
.app-mobile-menu-open .app-sidebar {
|
|
position: relative !important;
|
|
top: auto !important;
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
/* Large Screens (≥992px) */
|
|
@media (min-width: 992px) {
|
|
.d-lg-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-lg-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-lg-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-lg-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-lg-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-lg-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.col-lg {
|
|
flex: 1 0 0% !important;
|
|
}
|
|
|
|
.col-lg-1 { width: 8.33333333% !important; }
|
|
.col-lg-2 { width: 16.66666667% !important; }
|
|
.col-lg-3 { width: 25% !important; }
|
|
.col-lg-4 { width: 33.33333333% !important; }
|
|
.col-lg-5 { width: 41.66666667% !important; }
|
|
.col-lg-6 { width: 50% !important; }
|
|
.col-lg-7 { width: 58.33333333% !important; }
|
|
.col-lg-8 { width: 66.66666667% !important; }
|
|
.col-lg-9 { width: 75% !important; }
|
|
.col-lg-10 { width: 83.33333333% !important; }
|
|
.col-lg-11 { width: 91.66666667% !important; }
|
|
.col-lg-12 { width: 100% !important; }
|
|
|
|
.ms-lg-auto { margin-left: auto !important; }
|
|
.me-lg-auto { margin-right: auto !important; }
|
|
.p-lg-4 { padding: 1.5rem !important; }
|
|
}
|
|
|
|
/* Extra Large Screens (≥1200px) */
|
|
@media (min-width: 1200px) {
|
|
.d-xl-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-xl-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-xl-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-xl-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-xl-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-xl-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.col-xl {
|
|
flex: 1 0 0% !important;
|
|
}
|
|
|
|
.col-xl-1 { width: 8.33333333% !important; }
|
|
.col-xl-2 { width: 16.66666667% !important; }
|
|
.col-xl-3 { width: 25% !important; }
|
|
.col-xl-4 { width: 33.33333333% !important; }
|
|
.col-xl-5 { width: 41.66666667% !important; }
|
|
.col-xl-6 { width: 50% !important; }
|
|
.col-xl-7 { width: 58.33333333% !important; }
|
|
.col-xl-8 { width: 66.66666667% !important; }
|
|
.col-xl-9 { width: 75% !important; }
|
|
.col-xl-10 { width: 83.33333333% !important; }
|
|
.col-xl-11 { width: 91.66666667% !important; }
|
|
.col-xl-12 { width: 100% !important; }
|
|
|
|
.app-sidebar {
|
|
width: 260px !important;
|
|
}
|
|
}
|
|
|
|
/* Extra Extra Large Screens (≥1400px) */
|
|
@media (min-width: 1400px) {
|
|
.d-xxl-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-xxl-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-xxl-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-xxl-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.d-xxl-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.d-xxl-grid {
|
|
display: grid !important;
|
|
}
|
|
|
|
.col-xxl {
|
|
flex: 1 0 0% !important;
|
|
}
|
|
|
|
.col-xxl-1 { width: 8.33333333% !important; }
|
|
.col-xxl-2 { width: 16.66666667% !important; }
|
|
.col-xxl-3 { width: 25% !important; }
|
|
.col-xxl-4 { width: 33.33333333% !important; }
|
|
.col-xxl-5 { width: 41.66666667% !important; }
|
|
.col-xxl-6 { width: 50% !important; }
|
|
.col-xxl-7 { width: 58.33333333% !important; }
|
|
.col-xxl-8 { width: 66.66666667% !important; }
|
|
.col-xxl-9 { width: 75% !important; }
|
|
.col-xxl-10 { width: 83.33333333% !important; }
|
|
.col-xxl-11 { width: 91.66666667% !important; }
|
|
.col-xxl-12 { width: 100% !important; }
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.no-print,
|
|
.d-print-none {
|
|
display: none !important;
|
|
}
|
|
|
|
.d-print-block {
|
|
display: block !important;
|
|
}
|
|
|
|
.d-print-inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.d-print-inline-block {
|
|
display: inline-block !important;
|
|
}
|
|
}
|
|
|
|
/* Touch-Friendly Targets */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
button,
|
|
a,
|
|
input[type="button"],
|
|
input[type="submit"],
|
|
input[type="reset"],
|
|
.btn {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.form-check-input {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Landscape Mobile */
|
|
@media (max-height: 500px) and (orientation: landscape) {
|
|
.app-header {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.app-content {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* High DPI Displays */
|
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
.btn,
|
|
.form-control {
|
|
border-width: 1px;
|
|
}
|
|
}
|
|
|
|
/* Prefers Reduced Motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|