109 lines
2.8 KiB
SCSS
109 lines
2.8 KiB
SCSS
// Utility Classes
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
// Spacing utilities
|
|
.space-y-2 > * + * { margin-top: $spacing-sm; }
|
|
.space-y-3 > * + * { margin-top: $spacing-md; }
|
|
.space-y-4 > * + * { margin-top: $spacing-lg; }
|
|
.space-y-6 > * + * { margin-top: $spacing-xl; }
|
|
|
|
.space-x-2 > * + * { margin-left: $spacing-sm; }
|
|
.space-x-3 > * + * { margin-left: $spacing-md; }
|
|
.space-x-4 > * + * { margin-left: $spacing-lg; }
|
|
|
|
// Margin utilities
|
|
.m-0 { margin: 0; }
|
|
.mb-1 { margin-bottom: $spacing-xs; }
|
|
.mb-2 { margin-bottom: $spacing-sm; }
|
|
.mb-3 { margin-bottom: $spacing-md; }
|
|
.mb-4 { margin-bottom: $spacing-lg; }
|
|
|
|
.mt-1 { margin-top: $spacing-xs; }
|
|
.mt-2 { margin-top: $spacing-sm; }
|
|
.mt-3 { margin-top: $spacing-md; }
|
|
.mt-4 { margin-top: $spacing-lg; }
|
|
|
|
// Padding utilities
|
|
.p-0 { padding: 0; }
|
|
.p-1 { padding: $spacing-xs; }
|
|
.p-2 { padding: $spacing-sm; }
|
|
.p-3 { padding: $spacing-md; }
|
|
.p-4 { padding: $spacing-lg; }
|
|
|
|
// Width utilities
|
|
.w-full { width: 100%; }
|
|
.w-auto { width: auto; }
|
|
|
|
// Height utilities
|
|
.h-full { height: 100%; }
|
|
.h-auto { height: auto; }
|
|
|
|
// Color utilities
|
|
.text-primary { color: $primary; }
|
|
.text-secondary { color: $secondary; }
|
|
.text-success { color: $success; }
|
|
.text-warning { color: $warning; }
|
|
.text-danger { color: $danger; }
|
|
|
|
.text-gray-400 { color: $gray-400; }
|
|
.text-gray-500 { color: $gray-500; }
|
|
.text-gray-600 { color: $gray-600; }
|
|
.text-gray-700 { color: $gray-700; }
|
|
.text-gray-900 { color: $gray-900; }
|
|
|
|
// Background utilities
|
|
.bg-primary { background-color: $primary; }
|
|
.bg-white { background-color: white; }
|
|
.bg-gray-50 { background-color: $gray-50; }
|
|
.bg-gray-100 { background-color: $gray-100; }
|
|
|
|
// Border utilities
|
|
.border { border: 1px solid $gray-200; }
|
|
.border-0 { border: 0; }
|
|
.border-gray-100 { border-color: $gray-100; }
|
|
.border-gray-200 { border-color: $gray-200; }
|
|
|
|
// Border radius utilities
|
|
.rounded { border-radius: $radius-md; }
|
|
.rounded-lg { border-radius: $radius-lg; }
|
|
.rounded-xl { border-radius: $radius-xl; }
|
|
.rounded-2xl { border-radius: $radius-2xl; }
|
|
.rounded-full { border-radius: 9999px; }
|
|
|
|
// Shadow utilities
|
|
.shadow-sm { box-shadow: $shadow-sm; }
|
|
.shadow-md { box-shadow: $shadow-md; }
|
|
.shadow-lg { box-shadow: $shadow-lg; }
|
|
.shadow-xl { box-shadow: $shadow-xl; }
|
|
|
|
// Position utilities
|
|
.relative { position: relative; }
|
|
.absolute { position: absolute; }
|
|
.fixed { position: fixed; }
|
|
|
|
// Z-index utilities
|
|
.z-10 { z-index: 10; }
|
|
.z-20 { z-index: 20; }
|
|
.z-50 { z-index: 50; }
|
|
|
|
// Overflow utilities
|
|
.overflow-hidden { overflow: hidden; }
|
|
.overflow-y-auto { overflow-y: auto; }
|
|
|
|
// Cursor utilities
|
|
.cursor-pointer { cursor: pointer; }
|
|
.cursor-not-allowed { cursor: not-allowed; }
|
|
|
|
// Opacity utilities
|
|
.opacity-50 { opacity: 0.5; }
|
|
.opacity-75 { opacity: 0.75; } |