Spaces:
Sleeping
Sleeping
| // SAAP Utility Classes | |
| // === DISPLAY === | |
| .block { display: block; } | |
| .inline-block { display: inline-block; } | |
| .inline { display: inline; } | |
| .flex { display: flex; } | |
| .inline-flex { display: inline-flex; } | |
| .grid { display: grid; } | |
| .hidden { display: none; } | |
| // === FLEX UTILITIES === | |
| .flex-row { flex-direction: row; } | |
| .flex-col { flex-direction: column; } | |
| .flex-wrap { flex-wrap: wrap; } | |
| .flex-nowrap { flex-wrap: nowrap; } | |
| .items-start { align-items: flex-start; } | |
| .items-center { align-items: center; } | |
| .items-end { align-items: flex-end; } | |
| .items-stretch { align-items: stretch; } | |
| .justify-start { justify-content: flex-start; } | |
| .justify-center { justify-content: center; } | |
| .justify-end { justify-content: flex-end; } | |
| .justify-between { justify-content: space-between; } | |
| .justify-around { justify-content: space-around; } | |
| .justify-evenly { justify-content: space-evenly; } | |
| .flex-1 { flex: 1 1 0%; } | |
| .flex-auto { flex: 1 1 auto; } | |
| .flex-initial { flex: 0 1 auto; } | |
| .flex-none { flex: none; } | |
| .grow { flex-grow: 1; } | |
| .grow-0 { flex-grow: 0; } | |
| .shrink { flex-shrink: 1; } | |
| .shrink-0 { flex-shrink: 0; } | |
| // === GAP === | |
| .gap-0 { gap: 0; } | |
| .gap-1 { gap: var(--saap-space-1); } | |
| .gap-2 { gap: var(--saap-space-2); } | |
| .gap-3 { gap: var(--saap-space-3); } | |
| .gap-4 { gap: var(--saap-space-4); } | |
| .gap-5 { gap: var(--saap-space-5); } | |
| .gap-6 { gap: var(--saap-space-6); } | |
| .gap-8 { gap: var(--saap-space-8); } | |
| .gap-10 { gap: var(--saap-space-10); } | |
| .gap-12 { gap: var(--saap-space-12); } | |
| // === SPACING === | |
| // Margin | |
| .m-0 { margin: 0; } | |
| .m-1 { margin: var(--saap-space-1); } | |
| .m-2 { margin: var(--saap-space-2); } | |
| .m-3 { margin: var(--saap-space-3); } | |
| .m-4 { margin: var(--saap-space-4); } | |
| .m-5 { margin: var(--saap-space-5); } | |
| .m-6 { margin: var(--saap-space-6); } | |
| .m-8 { margin: var(--saap-space-8); } | |
| .m-auto { margin: auto; } | |
| // Margin Top | |
| .mt-0 { margin-top: 0; } | |
| .mt-1 { margin-top: var(--saap-space-1); } | |
| .mt-2 { margin-top: var(--saap-space-2); } | |
| .mt-3 { margin-top: var(--saap-space-3); } | |
| .mt-4 { margin-top: var(--saap-space-4); } | |
| .mt-5 { margin-top: var(--saap-space-5); } | |
| .mt-6 { margin-top: var(--saap-space-6); } | |
| .mt-8 { margin-top: var(--saap-space-8); } | |
| // Margin Bottom | |
| .mb-0 { margin-bottom: 0; } | |
| .mb-1 { margin-bottom: var(--saap-space-1); } | |
| .mb-2 { margin-bottom: var(--saap-space-2); } | |
| .mb-3 { margin-bottom: var(--saap-space-3); } | |
| .mb-4 { margin-bottom: var(--saap-space-4); } | |
| .mb-5 { margin-bottom: var(--saap-space-5); } | |
| .mb-6 { margin-bottom: var(--saap-space-6); } | |
| .mb-8 { margin-bottom: var(--saap-space-8); } | |
| // Padding | |
| .p-0 { padding: 0; } | |
| .p-1 { padding: var(--saap-space-1); } | |
| .p-2 { padding: var(--saap-space-2); } | |
| .p-3 { padding: var(--saap-space-3); } | |
| .p-4 { padding: var(--saap-space-4); } | |
| .p-5 { padding: var(--saap-space-5); } | |
| .p-6 { padding: var(--saap-space-6); } | |
| .p-8 { padding: var(--saap-space-8); } | |
| // === BORDER RADIUS === | |
| .rounded-none { border-radius: 0; } | |
| .rounded-sm { border-radius: var(--saap-border-radius-sm); } | |
| .rounded { border-radius: var(--saap-border-radius); } | |
| .rounded-lg { border-radius: var(--saap-border-radius-lg); } | |
| .rounded-xl { border-radius: var(--saap-border-radius-xl); } | |
| .rounded-full { border-radius: var(--saap-border-radius-full); } | |
| // === TEXT UTILITIES === | |
| .text-left { text-align: left; } | |
| .text-center { text-align: center; } | |
| .text-right { text-align: right; } | |
| .text-justify { text-align: justify; } | |
| .text-xs { font-size: var(--saap-text-xs); } | |
| .text-sm { font-size: var(--saap-text-sm); } | |
| .text-base { font-size: var(--saap-text-base); } | |
| .text-lg { font-size: var(--saap-text-lg); } | |
| .text-xl { font-size: var(--saap-text-xl); } | |
| .text-2xl { font-size: var(--saap-text-2xl); } | |
| .text-3xl { font-size: var(--saap-text-3xl); } | |
| .text-4xl { font-size: var(--saap-text-4xl); } | |
| .text-5xl { font-size: var(--saap-text-5xl); } | |
| .text-6xl { font-size: var(--saap-text-6xl); } | |
| .font-light { font-weight: var(--saap-font-light); } | |
| .font-normal { font-weight: var(--saap-font-normal); } | |
| .font-medium { font-weight: var(--saap-font-medium); } | |
| .font-semibold { font-weight: var(--saap-font-semibold); } | |
| .font-bold { font-weight: var(--saap-font-bold); } | |
| .leading-tight { line-height: var(--saap-leading-tight); } | |
| .leading-snug { line-height: var(--saap-leading-snug); } | |
| .leading-normal { line-height: var(--saap-leading-normal); } | |
| .leading-relaxed { line-height: var(--saap-leading-relaxed); } | |
| .leading-loose { line-height: var(--saap-leading-loose); } | |
| .uppercase { text-transform: uppercase; } | |
| .lowercase { text-transform: lowercase; } | |
| .capitalize { text-transform: capitalize; } | |
| .normal-case { text-transform: none; } | |
| .truncate { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| // === COLORS === | |
| .text-primary-600 { color: var(--saap-primary-600); } | |
| .text-primary-800 { color: var(--saap-primary-800); } | |
| .text-secondary-600 { color: var(--saap-secondary-600); } | |
| .text-accent-600 { color: var(--saap-accent-600); } | |
| .text-neutral-500 { color: var(--saap-neutral-500); } | |
| .text-neutral-600 { color: var(--saap-neutral-600); } | |
| .text-neutral-700 { color: var(--saap-neutral-700); } | |
| .text-neutral-800 { color: var(--saap-neutral-800); } | |
| .text-neutral-900 { color: var(--saap-neutral-900); } | |
| .text-success { color: var(--saap-success); } | |
| .text-warning { color: var(--saap-warning); } | |
| .text-error { color: var(--saap-error); } | |
| .text-info { color: var(--saap-info); } | |
| .text-white { color: white; } | |
| // Background Colors | |
| .bg-primary-600 { background-color: var(--saap-primary-600); } | |
| .bg-primary-800 { background-color: var(--saap-primary-800); } | |
| .bg-secondary-600 { background-color: var(--saap-secondary-600); } | |
| .bg-accent-600 { background-color: var(--saap-accent-600); } | |
| .bg-neutral-50 { background-color: var(--saap-neutral-50); } | |
| .bg-neutral-100 { background-color: var(--saap-neutral-100); } | |
| .bg-neutral-200 { background-color: var(--saap-neutral-200); } | |
| .bg-success { background-color: var(--saap-success); } | |
| .bg-warning { background-color: var(--saap-warning); } | |
| .bg-error { background-color: var(--saap-error); } | |
| .bg-info { background-color: var(--saap-info); } | |
| .bg-white { background-color: white; } | |
| .bg-transparent { background-color: transparent; } | |
| // === SHADOWS === | |
| .shadow-sm { box-shadow: var(--saap-shadow-sm); } | |
| .shadow-md { box-shadow: var(--saap-shadow-md); } | |
| .shadow-lg { box-shadow: var(--saap-shadow-lg); } | |
| .shadow-xl { box-shadow: var(--saap-shadow-xl); } | |
| .shadow-none { box-shadow: none; } | |
| // === POSITION === | |
| .relative { position: relative; } | |
| .absolute { position: absolute; } | |
| .fixed { position: fixed; } | |
| .sticky { position: sticky; } | |
| .static { position: static; } | |
| // === WIDTH & HEIGHT === | |
| .w-full { width: 100%; } | |
| .w-auto { width: auto; } | |
| .w-fit { width: fit-content; } | |
| .w-screen { width: 100vw; } | |
| .h-full { height: 100%; } | |
| .h-auto { height: auto; } | |
| .h-fit { height: fit-content; } | |
| .h-screen { height: 100vh; } | |
| .min-h-screen { min-height: 100vh; } | |
| .max-w-full { max-width: 100%; } | |
| .max-h-full { max-height: 100%; } | |
| // === OVERFLOW === | |
| .overflow-hidden { overflow: hidden; } | |
| .overflow-auto { overflow: auto; } | |
| .overflow-scroll { overflow: scroll; } | |
| .overflow-visible { overflow: visible; } | |
| .overflow-x-hidden { overflow-x: hidden; } | |
| .overflow-y-hidden { overflow-y: hidden; } | |
| .overflow-x-auto { overflow-x: auto; } | |
| .overflow-y-auto { overflow-y: auto; } | |
| // === OPACITY === | |
| .opacity-0 { opacity: 0; } | |
| .opacity-50 { opacity: 0.5; } | |
| .opacity-75 { opacity: 0.75; } | |
| .opacity-100 { opacity: 1; } | |
| // === CURSOR === | |
| .cursor-pointer { cursor: pointer; } | |
| .cursor-not-allowed { cursor: not-allowed; } | |
| .cursor-default { cursor: default; } | |
| .cursor-text { cursor: text; } | |
| .cursor-move { cursor: move; } | |
| // === USER SELECT === | |
| .select-none { user-select: none; } | |
| .select-text { user-select: text; } | |
| .select-all { user-select: all; } | |
| .select-auto { user-select: auto; } | |
| // === POINTER EVENTS === | |
| .pointer-events-none { pointer-events: none; } | |
| .pointer-events-auto { pointer-events: auto; } | |
| // === TRANSITIONS === | |
| .transition { transition: var(--saap-transition); } | |
| .transition-fast { transition: var(--saap-transition-fast); } | |
| .transition-slow { transition: var(--saap-transition-slow); } | |
| .transition-none { transition: none; } | |
| // === TRANSFORM === | |
| .transform { transform: translateZ(0); } | |
| .scale-95 { transform: scale(0.95); } | |
| .scale-100 { transform: scale(1); } | |
| .scale-105 { transform: scale(1.05); } | |
| .scale-110 { transform: scale(1.1); } | |
| .rotate-45 { transform: rotate(45deg); } | |
| .rotate-90 { transform: rotate(90deg); } | |
| .rotate-180 { transform: rotate(180deg); } | |
| .translate-x-full { transform: translateX(100%); } | |
| .translate-y-full { transform: translateY(100%); } | |
| .-translate-x-full { transform: translateX(-100%); } | |
| .-translate-y-full { transform: translateY(-100%); } | |
| // === Z-INDEX === | |
| .z-0 { z-index: 0; } | |
| .z-10 { z-index: 10; } | |
| .z-20 { z-index: 20; } | |
| .z-30 { z-index: 30; } | |
| .z-40 { z-index: 40; } | |
| .z-50 { z-index: 50; } | |
| .z-dropdown { z-index: var(--saap-z-dropdown); } | |
| .z-modal { z-index: var(--saap-z-modal); } | |
| .z-tooltip { z-index: var(--saap-z-tooltip); } | |