/* ============================================================ 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; }