1.1: CSS Modulization - Create 8 modular CSS files
- 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>
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Base Styles
|
||||
CSS Module: Foundation & Resets
|
||||
============================================================ */
|
||||
|
||||
/* Root Variables */
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--bs-primary: #2196f3;
|
||||
--bs-primary-rgb: 33, 150, 243;
|
||||
--bs-secondary: #757575;
|
||||
--bs-success: #4caf50;
|
||||
--bs-success-rgb: 76, 175, 80;
|
||||
--bs-danger: #f44336;
|
||||
--bs-danger-rgb: 244, 67, 54;
|
||||
--bs-warning: #ff9800;
|
||||
--bs-warning-rgb: 255, 152, 0;
|
||||
--bs-info: #00bcd4;
|
||||
--bs-info-rgb: 0, 188, 212;
|
||||
|
||||
/* Neutral Colors */
|
||||
--bs-light: #f5f5f5;
|
||||
--bs-dark: #212121;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
|
||||
/* Spacing */
|
||||
--bs-spacer: 1rem;
|
||||
|
||||
/* Borders */
|
||||
--bs-border-radius: 0.25rem;
|
||||
--bs-border-radius-sm: 0.1875rem;
|
||||
--bs-border-radius-lg: 0.375rem;
|
||||
--bs-border-radius-xl: 0.5rem;
|
||||
--bs-border-radius-2xl: 1rem;
|
||||
--bs-border-radius-pill: 50rem;
|
||||
|
||||
/* Shadows */
|
||||
--bs-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075);
|
||||
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
/* Dark Mode Variables */
|
||||
[data-bs-theme="dark"] {
|
||||
--bs-body-bg: #121212;
|
||||
--bs-body-color: #ffffff;
|
||||
--bs-gray-100: #212121;
|
||||
--bs-gray-200: #303030;
|
||||
--bs-gray-300: #424242;
|
||||
--bs-gray-400: #616161;
|
||||
--bs-gray-500: #757575;
|
||||
--bs-gray-600: #9e9e9e;
|
||||
}
|
||||
|
||||
/* Reset & Base */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Typography Base */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.75rem; }
|
||||
h3 { font-size: 1.5rem; }
|
||||
h4 { font-size: 1.25rem; }
|
||||
h5 { font-size: 1.1rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
small, .small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
code, pre {
|
||||
background-color: var(--bs-gray-100);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--bs-border-radius);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bs-gray-200);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--bs-gray-400);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bs-gray-500);
|
||||
}
|
||||
|
||||
/* Selection */
|
||||
::selection {
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
a:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible {
|
||||
outline: 2px solid var(--bs-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.no-print,
|
||||
.d-print-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,436 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Components
|
||||
CSS Module: Buttons, Cards, Badges, Alerts, Modals
|
||||
============================================================ */
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
border-radius: var(--bs-border-radius);
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
/* Button Variants */
|
||||
.btn-primary {
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1976d2;
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--bs-success);
|
||||
color: white;
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background-color: #45a049;
|
||||
border-color: #45a049;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--bs-danger);
|
||||
color: white;
|
||||
border-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #da190b;
|
||||
border-color: #da190b;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--bs-warning);
|
||||
color: white;
|
||||
border-color: var(--bs-warning);
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #e68900;
|
||||
border-color: #e68900;
|
||||
}
|
||||
|
||||
/* Button Groups */
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
border: 1px solid var(--bs-gray-200);
|
||||
border-radius: var(--bs-border-radius-lg);
|
||||
box-shadow: var(--bs-box-shadow);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--bs-box-shadow-lg);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: var(--bs-gray-50);
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
padding: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-header {
|
||||
background-color: var(--bs-gray-800);
|
||||
border-bottom-color: var(--bs-gray-700);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: var(--bs-gray-50);
|
||||
border-top: 1px solid var(--bs-gray-200);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-footer {
|
||||
background-color: var(--bs-gray-800);
|
||||
border-top-color: var(--bs-gray-700);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: var(--bs-gray-600);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: var(--bs-border-radius-pill);
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: var(--bs-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: var(--bs-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: var(--bs-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background-color: var(--bs-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background-color: var(--bs-info);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background-color: var(--bs-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
padding-left: 0.6em;
|
||||
padding-right: 0.6em;
|
||||
border-radius: var(--bs-border-radius-pill);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--bs-border-radius);
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #90caf9;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-primary {
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
border-color: #90caf9;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #e8f5e9;
|
||||
border-color: #81c784;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-success {
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
border-color: #81c784;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #ffebee;
|
||||
border-color: #ef9a9a;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-danger {
|
||||
background-color: rgba(244, 67, 54, 0.1);
|
||||
border-color: #ef9a9a;
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: #fff3e0;
|
||||
border-color: #ffb74d;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-warning {
|
||||
background-color: rgba(255, 152, 0, 0.1);
|
||||
border-color: #ffb74d;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #e0f2f1;
|
||||
border-color: #80deea;
|
||||
color: #00695c;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-info {
|
||||
background-color: rgba(0, 188, 212, 0.1);
|
||||
border-color: #80deea;
|
||||
color: #80deea;
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
padding: 0.25rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
opacity: 0.5;
|
||||
float: right;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-close:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1040;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: 1.75rem auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.modal-dialog.modal-sm {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.modal-dialog.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.modal-dialog.modal-xl {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--bs-body-bg);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: var(--bs-border-radius-lg);
|
||||
box-shadow: var(--bs-box-shadow-lg);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
/* Spinners */
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border: 0.25em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 0.2em;
|
||||
}
|
||||
|
||||
@keyframes spinner-border {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 50%;
|
||||
animation: spinner-grow 0.75s linear infinite;
|
||||
background-color: currentColor;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tooltips & Popovers */
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 1070;
|
||||
display: none;
|
||||
max-width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-top: 0.1rem;
|
||||
font-size: 0.875rem;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.tooltip.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
max-width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
text-align: center;
|
||||
background-color: #000;
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Dark Mode
|
||||
CSS Module: Dark Theme Variables & Overrides
|
||||
============================================================ */
|
||||
|
||||
/* Dark Mode Root Variables */
|
||||
[data-bs-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Background & Text */
|
||||
--bs-body-bg: #121212;
|
||||
--bs-body-color: #ffffff;
|
||||
|
||||
/* Gray Scale */
|
||||
--bs-gray-100: #1e1e1e;
|
||||
--bs-gray-200: #2a2a2a;
|
||||
--bs-gray-300: #383838;
|
||||
--bs-gray-400: #484848;
|
||||
--bs-gray-500: #6a6a6a;
|
||||
--bs-gray-600: #909090;
|
||||
--bs-gray-700: #b0b0b0;
|
||||
--bs-gray-800: #e0e0e0;
|
||||
--bs-gray-900: #f5f5f5;
|
||||
|
||||
/* Borders */
|
||||
--bs-border-color: #383838;
|
||||
|
||||
/* Components */
|
||||
--bs-component-bg: #1e1e1e;
|
||||
--bs-component-border: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Text Colors */
|
||||
[data-bs-theme="dark"] {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] p,
|
||||
[data-bs-theme="dark"] small,
|
||||
[data-bs-theme="dark"] .small {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] h1,
|
||||
[data-bs-theme="dark"] h2,
|
||||
[data-bs-theme="dark"] h3,
|
||||
[data-bs-theme="dark"] h4,
|
||||
[data-bs-theme="dark"] h5,
|
||||
[data-bs-theme="dark"] h6 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Dark Mode Cards */
|
||||
[data-bs-theme="dark"] .card {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-header {
|
||||
background-color: #282828;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-footer {
|
||||
background-color: #282828;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-text {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
/* Dark Mode Buttons */
|
||||
[data-bs-theme="dark"] .btn-outline-primary {
|
||||
color: #90caf9;
|
||||
border-color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-outline-primary:hover {
|
||||
color: #ffffff;
|
||||
background-color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-light {
|
||||
background-color: #383838;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-light:hover {
|
||||
background-color: #484848;
|
||||
border-color: #484848;
|
||||
}
|
||||
|
||||
/* Dark Mode Forms */
|
||||
[data-bs-theme="dark"] .form-control,
|
||||
[data-bs-theme="dark"] .form-select,
|
||||
[data-bs-theme="dark"] .form-range {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control:focus,
|
||||
[data-bs-theme="dark"] .form-select:focus {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #2196f3;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control::placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .input-group-text {
|
||||
background-color: #282828;
|
||||
border-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-check-input {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-check-input:checked {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Tables */
|
||||
[data-bs-theme="dark"] .table {
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > :not(caption) > * > * {
|
||||
background-color: #121212;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > thead th {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > tfoot th {
|
||||
background-color: #1e1e1e;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-bordered {
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Alerts */
|
||||
[data-bs-theme="dark"] .alert-primary {
|
||||
background-color: rgba(33, 150, 243, 0.15);
|
||||
border-color: #2196f3;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-success {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
border-color: #4caf50;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-danger {
|
||||
background-color: rgba(244, 67, 54, 0.15);
|
||||
border-color: #f44336;
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-warning {
|
||||
background-color: rgba(255, 152, 0, 0.15);
|
||||
border-color: #ff9800;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .alert-info {
|
||||
background-color: rgba(0, 188, 212, 0.15);
|
||||
border-color: #00bcd4;
|
||||
color: #80deea;
|
||||
}
|
||||
|
||||
/* Dark Mode Modals */
|
||||
[data-bs-theme="dark"] .modal-content {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-header {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-body {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-footer {
|
||||
background-color: #1e1e1e;
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Backgrounds */
|
||||
[data-bs-theme="dark"] .bg-light {
|
||||
background-color: #282828 !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bg-secondary {
|
||||
background-color: #383838 !important;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bg-dark {
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
/* Dark Mode Code */
|
||||
[data-bs-theme="dark"] code,
|
||||
[data-bs-theme="dark"] pre {
|
||||
background-color: #282828;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] code {
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
|
||||
/* Dark Mode Navbar */
|
||||
[data-bs-theme="dark"] .navbar {
|
||||
background-color: #1e1e1e;
|
||||
border-bottom-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .navbar-brand {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Dark Mode Pagination */
|
||||
[data-bs-theme="dark"] .pagination .page-link {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .pagination .page-link:hover {
|
||||
background-color: #282828;
|
||||
border-color: #383838;
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .pagination .page-link.active {
|
||||
background-color: #2196f3;
|
||||
border-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Badges */
|
||||
[data-bs-theme="dark"] .badge-secondary {
|
||||
background-color: #484848;
|
||||
}
|
||||
|
||||
/* Dark Mode Scrollbar */
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
|
||||
background: #484848;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
|
||||
background: #606060;
|
||||
}
|
||||
|
||||
/* Dark Mode Links */
|
||||
[data-bs-theme="dark"] a {
|
||||
color: #90caf9;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] a:hover {
|
||||
color: #b3d9ff;
|
||||
}
|
||||
|
||||
/* Dark Mode HR */
|
||||
[data-bs-theme="dark"] hr {
|
||||
border-top-color: #383838;
|
||||
}
|
||||
|
||||
/* Dark Mode Dropdown */
|
||||
[data-bs-theme="dark"] .dropdown-menu {
|
||||
background-color: #1e1e1e;
|
||||
border-color: #383838;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item:hover,
|
||||
[data-bs-theme="dark"] .dropdown-item:focus {
|
||||
background-color: #282828;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-item.active {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Dark Mode Breadcrumb */
|
||||
[data-bs-theme="dark"] .breadcrumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .breadcrumb-item.active {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
/* Transition Support */
|
||||
html {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
@@ -0,0 +1,398 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Forms
|
||||
CSS Module: Input Fields, Validation, Checkboxes, Radio
|
||||
============================================================ */
|
||||
|
||||
/* Form Controls */
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-range {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: var(--bs-border-radius);
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bs-primary);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
.form-control:disabled,
|
||||
.form-select:disabled {
|
||||
background-color: var(--bs-gray-100);
|
||||
opacity: 1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--bs-gray-500);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Form Sizes */
|
||||
.form-control-sm {
|
||||
min-height: calc(1.5em + 0.5rem + 2px);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
min-height: calc(1.5em + 1rem + 2px);
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-radius: var(--bs-border-radius-lg);
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
textarea.form-control {
|
||||
min-height: 5rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
textarea.form-control-sm {
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
textarea.form-control-lg {
|
||||
min-height: 7.5rem;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
.form-select {
|
||||
padding-right: 4.125rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
/* Form Groups */
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-group label.required::after {
|
||||
content: " *";
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: var(--bs-gray-600);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Form Row */
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-row.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.form-row .col {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Input Groups */
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-group > .form-control,
|
||||
.input-group > .form-select {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: var(--bs-body-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: var(--bs-gray-100);
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .input-group-text {
|
||||
background-color: var(--bs-gray-700);
|
||||
border-color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
display: flex;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
display: flex;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.input-group-prepend .btn,
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .btn,
|
||||
.input-group-append .input-group-text {
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
/* Checkboxes & Radio Buttons */
|
||||
.form-check {
|
||||
display: block;
|
||||
min-height: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
float: left;
|
||||
margin-left: -1.5rem;
|
||||
margin-top: 0.3em;
|
||||
accent-color: var(--bs-primary);
|
||||
cursor: pointer;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
border-radius: 0.25em;
|
||||
appearance: none;
|
||||
background-color: var(--bs-body-bg);
|
||||
background-image: none;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
border-color: var(--bs-gray-300);
|
||||
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.form-check-input:checked::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: var(--bs-primary);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
.form-check-input:disabled {
|
||||
pointer-events: none;
|
||||
filter: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* Radio */
|
||||
.form-check-input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
.form-switch .form-check-input {
|
||||
width: 2.5em;
|
||||
margin-left: -2.5em;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cpath stroke='%23fff' d='M-3 0a3 3 0 0 0 6 0'/%3e%3c/svg%3e");
|
||||
background-position: left center;
|
||||
border-radius: 2em;
|
||||
transition: background-position 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input:checked {
|
||||
background-position: right center;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3cpath stroke='%23fff' d='M3 0a3 3 0 0 0-6 0'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Validation States */
|
||||
.form-control.is-valid,
|
||||
.form-select.is-valid {
|
||||
border-color: var(--bs-success);
|
||||
}
|
||||
|
||||
.form-control.is-valid:focus,
|
||||
.form-select.is-valid:focus {
|
||||
border-color: var(--bs-success);
|
||||
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
|
||||
}
|
||||
|
||||
.form-control.is-invalid,
|
||||
.form-select.is-invalid {
|
||||
border-color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.form-control.is-invalid:focus,
|
||||
.form-select.is-invalid:focus {
|
||||
border-color: var(--bs-danger);
|
||||
box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, 0.25);
|
||||
}
|
||||
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.valid-feedback {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: var(--bs-danger);
|
||||
}
|
||||
|
||||
.was-validated .form-control:invalid ~ .invalid-feedback,
|
||||
.form-control.is-invalid ~ .invalid-feedback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid ~ .valid-feedback,
|
||||
.form-control.is-valid ~ .valid-feedback {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Fieldset */
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Range Input */
|
||||
.form-range {
|
||||
width: 100%;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: var(--bs-primary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb:active {
|
||||
background-color: #90caf9;
|
||||
box-shadow: 0 0 0 0.5rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
background-color: var(--bs-gray-300);
|
||||
border-color: transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.form-range::-moz-range-thumb {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: var(--bs-primary);
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.form-range::-moz-range-thumb:active {
|
||||
background-color: #90caf9;
|
||||
box-shadow: 0 0 0 0.5rem rgba(33, 150, 243, 0.25);
|
||||
}
|
||||
|
||||
.form-range::-moz-range-track {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-range::-moz-range-progress {
|
||||
background-color: var(--bs-primary);
|
||||
border-radius: 1rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
@@ -0,0 +1,380 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Layout
|
||||
CSS Module: Header, Sidebar, Navigation, Grid
|
||||
============================================================ */
|
||||
|
||||
/* App Wrapper */
|
||||
.app-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
grid-column: 1 / -1;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1020;
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
grid-row: 2;
|
||||
background-color: var(--bs-gray-50);
|
||||
border-right: 1px solid var(--bs-gray-200);
|
||||
width: 260px;
|
||||
overflow-y: auto;
|
||||
transition: transform 0.3s ease, width 0.3s ease;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .app-sidebar {
|
||||
background-color: var(--bs-gray-800);
|
||||
border-right-color: var(--bs-gray-700);
|
||||
}
|
||||
|
||||
.app-content {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
/* Header Components */
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
color: var(--bs-primary);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-logo svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-logo:hover {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Mobile Menu Toggle */
|
||||
.mobile-menu-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--bs-body-color);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.mobile-menu-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
/* Header Nav */
|
||||
.app-header-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.app-header-nav .nav-link {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.app-header-nav .nav-link:hover {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.app-header-nav .nav-link.active {
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
/* Sidebar Nav */
|
||||
.app-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-nav-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.app-nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-nav-link:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: var(--bs-primary);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .app-nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.app-nav-link.active {
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
color: var(--bs-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-nav-link.active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.app-nav-link svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-nav-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--bs-gray-600);
|
||||
padding: 0.75rem 1rem 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Submenu */
|
||||
.app-nav-submenu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.app-nav-item.open > .app-nav-submenu {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.app-nav-submenu .app-nav-link {
|
||||
padding-left: 3rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.app-nav-submenu .app-nav-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: currentColor;
|
||||
border-radius: 50%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.app-nav-submenu .app-nav-link.active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
gap: 0.5rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: var(--bs-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: "/";
|
||||
padding: 0 0.5rem;
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
/* Grid Container */
|
||||
.container,
|
||||
.container-sm,
|
||||
.container-md,
|
||||
.container-lg,
|
||||
.container-xl,
|
||||
.container-xxl {
|
||||
width: 100%;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.container-sm {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.container-md {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.container-lg {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.container-xl {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.container-xxl {
|
||||
max-width: 1320px;
|
||||
}
|
||||
|
||||
/* Row & Columns */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
}
|
||||
|
||||
.row > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-right: 0.75rem;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
/* Grid Sizes */
|
||||
@media (min-width: 576px) {
|
||||
.container-sm {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container-md {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container-lg {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container-xl {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl {
|
||||
max-width: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-header .page-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Sidebar Collapse */
|
||||
.app-sidebar-collapsed .app-sidebar {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.app-sidebar-collapsed .app-nav-link {
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.app-sidebar-collapsed .app-nav-label,
|
||||
.app-sidebar-collapsed .app-nav-link span:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-sidebar-collapsed .app-nav-submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
.app-mobile-menu-open .app-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
z-index: 1019;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,364 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Tables
|
||||
CSS Module: Table Styles, Responsive, Data Tables
|
||||
============================================================ */
|
||||
|
||||
/* Base Table */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--bs-body-color);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table > :not(caption) > * > * {
|
||||
padding: 0.75rem;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-bottom: 1px solid var(--bs-gray-200);
|
||||
}
|
||||
|
||||
.table > tbody {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.table > thead {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.table > thead th {
|
||||
background-color: var(--bs-gray-100);
|
||||
border-bottom: 2px solid var(--bs-gray-300);
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table > thead th {
|
||||
background-color: var(--bs-gray-800);
|
||||
border-bottom-color: var(--bs-gray-700);
|
||||
}
|
||||
|
||||
.table > tfoot th {
|
||||
background-color: var(--bs-gray-100);
|
||||
border-top: 2px solid var(--bs-gray-300);
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Table Variants */
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.table-hover > tbody > tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.table-bordered > :not(caption) > * {
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
.table-bordered > :not(caption) > * > * {
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.table-borderless > :not(caption) > * > * {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.table-borderless > :not(caption) > tr:first-child > * {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
/* Table Sizes */
|
||||
.table-sm > :not(caption) > * > * {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.table-lg > :not(caption) > * > * {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Table Backgrounds */
|
||||
.table-primary {
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.table-primary th,
|
||||
.table-primary td,
|
||||
.table-primary thead th,
|
||||
.table-primary tbody + tbody {
|
||||
border-color: #90caf9;
|
||||
}
|
||||
|
||||
.table-success {
|
||||
background-color: #e8f5e9;
|
||||
}
|
||||
|
||||
.table-success th,
|
||||
.table-success td,
|
||||
.table-success thead th,
|
||||
.table-success tbody + tbody {
|
||||
border-color: #81c784;
|
||||
}
|
||||
|
||||
.table-danger {
|
||||
background-color: #ffebee;
|
||||
}
|
||||
|
||||
.table-danger th,
|
||||
.table-danger td,
|
||||
.table-danger thead th,
|
||||
.table-danger tbody + tbody {
|
||||
border-color: #ef9a9a;
|
||||
}
|
||||
|
||||
.table-warning {
|
||||
background-color: #fff3e0;
|
||||
}
|
||||
|
||||
.table-warning th,
|
||||
.table-warning td,
|
||||
.table-warning thead th,
|
||||
.table-warning tbody + tbody {
|
||||
border-color: #ffb74d;
|
||||
}
|
||||
|
||||
.table-info {
|
||||
background-color: #e0f2f1;
|
||||
}
|
||||
|
||||
.table-info th,
|
||||
.table-info td,
|
||||
.table-info thead th,
|
||||
.table-info tbody + tbody {
|
||||
border-color: #80deea;
|
||||
}
|
||||
|
||||
.table-active {
|
||||
background-color: rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
/* Responsive Table */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table-responsive > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Table Actions */
|
||||
.table .btn {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.table .btn-sm {
|
||||
padding: 0.15rem 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Table Toolbar */
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.table-toolbar-search {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.table-toolbar-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Table Header Sorting */
|
||||
.table th[data-sortable] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding-right: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table th[data-sortable]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm5 9V5.41L5.7 7.7a.5.5 0 1 1-.4-.8l3-3a.5.5 0 0 1 .8 0l3 3a.5.5 0 0 1-.4.8L8 5.41V11a.5.5 0 0 1-1 0z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.table th[data-sort="asc"]::after {
|
||||
opacity: 1;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.table th[data-sort="desc"]::after {
|
||||
opacity: 1;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
/* Table Pagination */
|
||||
.table-pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-pagination {
|
||||
background-color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
.table-pagination .pagination {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
border-radius: var(--bs-border-radius);
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-left: -1px;
|
||||
line-height: 1.25;
|
||||
color: var(--bs-primary);
|
||||
background-color: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-gray-300);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
color: var(--bs-primary);
|
||||
background-color: var(--bs-gray-100);
|
||||
border-color: var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.pagination .page-link:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
|
||||
color: var(--bs-primary);
|
||||
background-color: var(--bs-gray-100);
|
||||
border-color: var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.pagination .page-link.active {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
background-color: var(--bs-primary);
|
||||
border-color: var(--bs-primary);
|
||||
}
|
||||
|
||||
.pagination .page-link.disabled {
|
||||
color: var(--bs-gray-500);
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bs-gray-300);
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.pagination-lg .page-link {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Table Empty State */
|
||||
.table-empty {
|
||||
text-align: center;
|
||||
padding: 3rem !important;
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
||||
.table-empty svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.table-empty h5 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
/* Thead Sticky */
|
||||
.table-sticky thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: var(--bs-gray-100);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table-sticky thead {
|
||||
background-color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
/* Selectable Rows */
|
||||
.table-selectable tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-selectable tbody tr.selected {
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.table-selectable .form-check {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
/* ============================================================
|
||||
SmartAdmin Bootstrap 5 - Utilities
|
||||
CSS Module: Spacing, Colors, Text, Helpers
|
||||
============================================================ */
|
||||
|
||||
/* Margin & Padding Utilities */
|
||||
.m-0 { margin: 0 !important; }
|
||||
.m-1 { margin: 0.25rem !important; }
|
||||
.m-2 { margin: 0.5rem !important; }
|
||||
.m-3 { margin: 1rem !important; }
|
||||
.m-4 { margin: 1.5rem !important; }
|
||||
.m-5 { margin: 3rem !important; }
|
||||
|
||||
.mt-0 { margin-top: 0 !important; }
|
||||
.mt-1 { margin-top: 0.25rem !important; }
|
||||
.mt-2 { margin-top: 0.5rem !important; }
|
||||
.mt-3 { margin-top: 1rem !important; }
|
||||
.mt-4 { margin-top: 1.5rem !important; }
|
||||
.mt-5 { margin-top: 3rem !important; }
|
||||
|
||||
.mb-0 { margin-bottom: 0 !important; }
|
||||
.mb-1 { margin-bottom: 0.25rem !important; }
|
||||
.mb-2 { margin-bottom: 0.5rem !important; }
|
||||
.mb-3 { margin-bottom: 1rem !important; }
|
||||
.mb-4 { margin-bottom: 1.5rem !important; }
|
||||
.mb-5 { margin-bottom: 3rem !important; }
|
||||
|
||||
.ms-0 { margin-left: 0 !important; }
|
||||
.ms-1 { margin-left: 0.25rem !important; }
|
||||
.ms-2 { margin-left: 0.5rem !important; }
|
||||
.ms-3 { margin-left: 1rem !important; }
|
||||
.ms-4 { margin-left: 1.5rem !important; }
|
||||
.ms-5 { margin-left: 3rem !important; }
|
||||
|
||||
.me-0 { margin-right: 0 !important; }
|
||||
.me-1 { margin-right: 0.25rem !important; }
|
||||
.me-2 { margin-right: 0.5rem !important; }
|
||||
.me-3 { margin-right: 1rem !important; }
|
||||
.me-4 { margin-right: 1.5rem !important; }
|
||||
.me-5 { margin-right: 3rem !important; }
|
||||
|
||||
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
|
||||
|
||||
.p-0 { padding: 0 !important; }
|
||||
.p-1 { padding: 0.25rem !important; }
|
||||
.p-2 { padding: 0.5rem !important; }
|
||||
.p-3 { padding: 1rem !important; }
|
||||
.p-4 { padding: 1.5rem !important; }
|
||||
.p-5 { padding: 3rem !important; }
|
||||
|
||||
.pt-0 { padding-top: 0 !important; }
|
||||
.pt-1 { padding-top: 0.25rem !important; }
|
||||
.pt-2 { padding-top: 0.5rem !important; }
|
||||
.pt-3 { padding-top: 1rem !important; }
|
||||
|
||||
.pb-0 { padding-bottom: 0 !important; }
|
||||
.pb-1 { padding-bottom: 0.25rem !important; }
|
||||
.pb-2 { padding-bottom: 0.5rem !important; }
|
||||
.pb-3 { padding-bottom: 1rem !important; }
|
||||
|
||||
.ps-0 { padding-left: 0 !important; }
|
||||
.ps-1 { padding-left: 0.25rem !important; }
|
||||
.ps-2 { padding-left: 0.5rem !important; }
|
||||
.ps-3 { padding-left: 1rem !important; }
|
||||
|
||||
.pe-0 { padding-right: 0 !important; }
|
||||
.pe-1 { padding-right: 0.25rem !important; }
|
||||
.pe-2 { padding-right: 0.5rem !important; }
|
||||
.pe-3 { padding-right: 1rem !important; }
|
||||
|
||||
/* Width & Height */
|
||||
.w-0 { width: 0 !important; }
|
||||
.w-25 { width: 25% !important; }
|
||||
.w-50 { width: 50% !important; }
|
||||
.w-75 { width: 75% !important; }
|
||||
.w-100 { width: 100% !important; }
|
||||
.w-auto { width: auto !important; }
|
||||
|
||||
.h-0 { height: 0 !important; }
|
||||
.h-25 { height: 25% !important; }
|
||||
.h-50 { height: 50% !important; }
|
||||
.h-75 { height: 75% !important; }
|
||||
.h-100 { height: 100% !important; }
|
||||
.h-auto { height: auto !important; }
|
||||
|
||||
.mw-100 { max-width: 100% !important; }
|
||||
.mh-100 { max-height: 100% !important; }
|
||||
|
||||
/* Text Utilities */
|
||||
.text-start { text-align: left !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-end { text-align: right !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
|
||||
.text-muted { color: var(--bs-gray-600) !important; }
|
||||
.text-primary { color: var(--bs-primary) !important; }
|
||||
.text-secondary { color: var(--bs-secondary) !important; }
|
||||
.text-success { color: var(--bs-success) !important; }
|
||||
.text-danger { color: var(--bs-danger) !important; }
|
||||
.text-warning { color: var(--bs-warning) !important; }
|
||||
.text-info { color: var(--bs-info) !important; }
|
||||
|
||||
.text-bold { font-weight: 700 !important; }
|
||||
.text-semi-bold { font-weight: 600 !important; }
|
||||
.text-normal { font-weight: 400 !important; }
|
||||
|
||||
.text-italic { font-style: italic !important; }
|
||||
.text-underline { text-decoration: underline !important; }
|
||||
.text-line-through { text-decoration: line-through !important; }
|
||||
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
.text-break { word-break: break-word !important; }
|
||||
.text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Font Size */
|
||||
.fs-1 { font-size: 2rem !important; }
|
||||
.fs-2 { font-size: 1.75rem !important; }
|
||||
.fs-3 { font-size: 1.5rem !important; }
|
||||
.fs-4 { font-size: 1.25rem !important; }
|
||||
.fs-5 { font-size: 1.1rem !important; }
|
||||
.fs-6 { font-size: 1rem !important; }
|
||||
.fs-small { font-size: 0.875rem !important; }
|
||||
.fs-smaller { font-size: 0.75rem !important; }
|
||||
|
||||
/* Flexbox Utilities */
|
||||
.flex-row { flex-direction: row !important; }
|
||||
.flex-column { flex-direction: column !important; }
|
||||
.flex-wrap { flex-wrap: wrap !important; }
|
||||
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||
|
||||
.justify-content-start { justify-content: flex-start !important; }
|
||||
.justify-content-center { justify-content: center !important; }
|
||||
.justify-content-end { justify-content: flex-end !important; }
|
||||
.justify-content-between { justify-content: space-between !important; }
|
||||
.justify-content-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-start { align-items: flex-start !important; }
|
||||
.align-items-center { align-items: center !important; }
|
||||
.align-items-end { align-items: flex-end !important; }
|
||||
.align-items-stretch { align-items: stretch !important; }
|
||||
.align-items-baseline { align-items: baseline !important; }
|
||||
|
||||
.flex-fill { flex: 1 1 auto !important; }
|
||||
.flex-grow-0 { flex-grow: 0 !important; }
|
||||
.flex-grow-1 { flex-grow: 1 !important; }
|
||||
.flex-shrink-0 { flex-shrink: 0 !important; }
|
||||
.flex-shrink-1 { flex-shrink: 1 !important; }
|
||||
|
||||
.gap-0 { gap: 0 !important; }
|
||||
.gap-1 { gap: 0.25rem !important; }
|
||||
.gap-2 { gap: 0.5rem !important; }
|
||||
.gap-3 { gap: 1rem !important; }
|
||||
.gap-4 { gap: 1.5rem !important; }
|
||||
.gap-5 { gap: 3rem !important; }
|
||||
|
||||
/* Background Colors */
|
||||
.bg-primary { background-color: var(--bs-primary) !important; color: white !important; }
|
||||
.bg-secondary { background-color: var(--bs-secondary) !important; color: white !important; }
|
||||
.bg-success { background-color: var(--bs-success) !important; color: white !important; }
|
||||
.bg-danger { background-color: var(--bs-danger) !important; color: white !important; }
|
||||
.bg-warning { background-color: var(--bs-warning) !important; color: white !important; }
|
||||
.bg-info { background-color: var(--bs-info) !important; color: white !important; }
|
||||
.bg-light { background-color: var(--bs-light) !important; }
|
||||
.bg-dark { background-color: var(--bs-dark) !important; color: white !important; }
|
||||
.bg-white { background-color: white !important; }
|
||||
.bg-transparent { background-color: transparent !important; }
|
||||
|
||||
/* Border Utilities */
|
||||
.border { border: 1px solid var(--bs-border-color) !important; }
|
||||
.border-0 { border: 0 !important; }
|
||||
|
||||
.border-top { border-top: 1px solid var(--bs-border-color) !important; }
|
||||
.border-top-0 { border-top: 0 !important; }
|
||||
|
||||
.border-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
|
||||
.border-bottom-0 { border-bottom: 0 !important; }
|
||||
|
||||
.border-primary { border-color: var(--bs-primary) !important; }
|
||||
.border-success { border-color: var(--bs-success) !important; }
|
||||
.border-danger { border-color: var(--bs-danger) !important; }
|
||||
|
||||
.rounded { border-radius: var(--bs-border-radius) !important; }
|
||||
.rounded-0 { border-radius: 0 !important; }
|
||||
.rounded-1 { border-radius: 0.1875rem !important; }
|
||||
.rounded-2 { border-radius: 0.375rem !important; }
|
||||
.rounded-3 { border-radius: 0.5rem !important; }
|
||||
.rounded-circle { border-radius: 50% !important; }
|
||||
.rounded-pill { border-radius: 50rem !important; }
|
||||
|
||||
/* Display */
|
||||
.overflow-auto { overflow: auto !important; }
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
.overflow-x-auto { overflow-x: auto !important; }
|
||||
.overflow-y-auto { overflow-y: auto !important; }
|
||||
|
||||
.overflow-x-hidden { overflow-x: hidden !important; }
|
||||
.overflow-y-hidden { overflow-y: hidden !important; }
|
||||
|
||||
/* Position */
|
||||
.position-static { position: static !important; }
|
||||
.position-relative { position: relative !important; }
|
||||
.position-absolute { position: absolute !important; }
|
||||
.position-fixed { position: fixed !important; }
|
||||
.position-sticky { position: sticky !important; }
|
||||
|
||||
.top-0 { top: 0 !important; }
|
||||
.top-50 { top: 50% !important; }
|
||||
.top-100 { top: 100% !important; }
|
||||
|
||||
.bottom-0 { bottom: 0 !important; }
|
||||
.bottom-50 { bottom: 50% !important; }
|
||||
|
||||
.start-0 { left: 0 !important; }
|
||||
.start-50 { left: 50% !important; }
|
||||
|
||||
.end-0 { right: 0 !important; }
|
||||
.end-50 { right: 50% !important; }
|
||||
|
||||
/* Z-Index */
|
||||
.z-0 { z-index: 0 !important; }
|
||||
.z-1 { z-index: 1 !important; }
|
||||
.z-2 { z-index: 2 !important; }
|
||||
.z-3 { z-index: 3 !important; }
|
||||
.z-auto { z-index: auto !important; }
|
||||
|
||||
/* Opacity */
|
||||
.opacity-0 { opacity: 0 !important; }
|
||||
.opacity-25 { opacity: 0.25 !important; }
|
||||
.opacity-50 { opacity: 0.5 !important; }
|
||||
.opacity-75 { opacity: 0.75 !important; }
|
||||
.opacity-100 { opacity: 1 !important; }
|
||||
|
||||
/* Cursor */
|
||||
.cursor-pointer { cursor: pointer !important; }
|
||||
.cursor-auto { cursor: auto !important; }
|
||||
.cursor-default { cursor: default !important; }
|
||||
.cursor-not-allowed { cursor: not-allowed !important; }
|
||||
|
||||
/* Visibility */
|
||||
.visible { visibility: visible !important; }
|
||||
.invisible { visibility: hidden !important; }
|
||||
|
||||
/* Float */
|
||||
.float-start { float: left !important; }
|
||||
.float-end { float: right !important; }
|
||||
.float-none { float: none !important; }
|
||||
|
||||
/* Clearfix */
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Shadow */
|
||||
.shadow { box-shadow: var(--bs-box-shadow) !important; }
|
||||
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }
|
||||
.shadow-lg { box-shadow: var(--bs-box-shadow-lg) !important; }
|
||||
.shadow-none { box-shadow: none !important; }
|
||||
|
||||
/* Transform */
|
||||
.translate-middle {
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
|
||||
.translate-middle-x {
|
||||
transform: translateX(-50%) !important;
|
||||
}
|
||||
|
||||
.translate-middle-y {
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
/* Aspect Ratio */
|
||||
.ratio {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ratio::before {
|
||||
display: block;
|
||||
padding-top: var(--bs-aspect-ratio);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.ratio > * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ratio-1x1 { --bs-aspect-ratio: 100%; }
|
||||
.ratio-4x3 { --bs-aspect-ratio: 75%; }
|
||||
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
|
||||
.ratio-21x9 { --bs-aspect-ratio: 42.857%; }
|
||||
|
||||
/* Link Styles */
|
||||
.link-primary { color: var(--bs-primary) !important; }
|
||||
.link-primary:hover { color: #1976d2 !important; }
|
||||
|
||||
.link-secondary { color: var(--bs-secondary) !important; }
|
||||
.link-secondary:hover { color: #6c757d !important; }
|
||||
|
||||
.link-success { color: var(--bs-success) !important; }
|
||||
.link-success:hover { color: #45a049 !important; }
|
||||
|
||||
.link-danger { color: var(--bs-danger) !important; }
|
||||
.link-danger:hover { color: #da190b !important; }
|
||||
|
||||
/* Content Alignment */
|
||||
.content-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Truncate Multi-line */
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user