// 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); }