mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-24 13:54:57 +00:00
86 lines
1.9 KiB
SCSS
86 lines
1.9 KiB
SCSS
// Sizing utility classes — width, height, min/max
|
|
|
|
$sizes: (
|
|
'0': 0,
|
|
'1': 4px,
|
|
'2': 8px,
|
|
'3': 12px,
|
|
'4': 16px,
|
|
'5': 20px,
|
|
'6': 24px,
|
|
'7': 28px,
|
|
'8': 32px,
|
|
'9': 36px,
|
|
'10': 40px,
|
|
'12': 48px,
|
|
'14': 56px,
|
|
'16': 64px,
|
|
'20': 80px,
|
|
'24': 96px,
|
|
'32': 128px,
|
|
'40': 160px,
|
|
'48': 192px,
|
|
'56': 224px,
|
|
'64': 256px,
|
|
'72': 288px,
|
|
'80': 320px,
|
|
'96': 384px,
|
|
'px': 1px,
|
|
);
|
|
|
|
@each $key, $value in $sizes {
|
|
.w-#{$key} { width: $value }
|
|
.h-#{$key} { height: $value }
|
|
.size-#{$key} { width: $value; height: $value }
|
|
.min-w-#{$key} { min-width: $value }
|
|
.min-h-#{$key} { min-height: $value }
|
|
.max-w-#{$key} { max-width: $value }
|
|
.max-h-#{$key} { max-height: $value }
|
|
}
|
|
|
|
// Special size keywords
|
|
.w-auto { width: auto }
|
|
.h-auto { height: auto }
|
|
.w-full { width: 100% }
|
|
.h-full { height: 100% }
|
|
.w-screen { width: 100vw }
|
|
.h-screen { height: 100vh }
|
|
.min-w-full { min-width: 100% }
|
|
.min-h-full { min-height: 100% }
|
|
.min-h-screen { min-height: 100vh }
|
|
.min-w-0 { min-width: 0 }
|
|
.min-h-0 { min-height: 0 }
|
|
.max-w-none { max-width: none }
|
|
.max-h-full { max-height: 100% }
|
|
.max-h-screen { max-height: 100vh }
|
|
|
|
// Fractional widths
|
|
.w-1\/2 { width: 50% }
|
|
.w-1\/3 { width: 33.333333% }
|
|
.w-2\/3 { width: 66.666667% }
|
|
.w-1\/4 { width: 25% }
|
|
.w-3\/4 { width: 75% }
|
|
.w-1\/5 { width: 20% }
|
|
.w-2\/5 { width: 40% }
|
|
.w-3\/5 { width: 60% }
|
|
.w-4\/5 { width: 80% }
|
|
|
|
// Named max-widths
|
|
.max-w-xs { max-width: 320px }
|
|
.max-w-sm { max-width: 384px }
|
|
.max-w-md { max-width: 448px }
|
|
.max-w-lg { max-width: 512px }
|
|
.max-w-xl { max-width: 576px }
|
|
.max-w-2xl { max-width: 672px }
|
|
.max-w-3xl { max-width: 768px }
|
|
.max-w-4xl { max-width: 896px }
|
|
.max-w-5xl { max-width: 1024px }
|
|
.max-w-6xl { max-width: 1152px }
|
|
.max-w-7xl { max-width: 1280px }
|
|
.max-w-full { max-width: 100% }
|
|
.max-w-prose { max-width: 65ch }
|
|
.max-w-screen-sm { max-width: 640px }
|
|
.max-w-screen-md { max-width: 768px }
|
|
.max-w-screen-lg { max-width: 1024px }
|
|
.max-w-screen-xl { max-width: 1280px }
|