Skip to content

Instantly share code, notes, and snippets.

@Twikito
Created June 9, 2023 17:55
Show Gist options
  • Save Twikito/1722ed2ef39f46ffba85b133ecaacd6f to your computer and use it in GitHub Desktop.
Save Twikito/1722ed2ef39f46ffba85b133ecaacd6f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@function dash-join($args...) {
$result: null;
$first-add: true;
$glue: '-';
@for $i from 1 through length($args) {
$e: nth($args, $i);
@if $e != null and $e != '' {
$result: if($i == 1 or $first-add == true, #{$e}, #{$result}#{$glue}#{$e});
$first-add: false;
}
}
@return $result;
}
@function pixel-to-rem($value) {
@return if(type-of($value) == 'number' and unitless($value), rem($value), $value);
}
$sizings: ('0': 0, '0\\\.5': 2, '1': 4, '2': 8, '3': 12, '4': 16, '5': 20, '6': 24, '7': 28, '8': 32, '10': 40, '11': 44, '12': 48, '14': 56, 'full': 100%, 'auto': 'auto');
$directions: (w: inline, h: block);
$boudaries: (min, '' , max);
$queries: (
default: 'all',
sm: '>xsmall',
md: '>small',
lg: '>medium',
xl: '>large',
);
@each $breakpointname, $query in $queries {
@media($query) {
@each $direction, $property in $directions {
@each $boundary in $boudaries {
$propname: dash-join($boundary, $property, 'size');
@each $sizingname, $size in $sizings {
$classname: #{if($breakpointname == 'default', '', $breakpointname + '\\\:')}#{dash-join($boundary, $direction, $sizingname)};
.#{$classname} {
#{$propname}: #{pixel-to-rem($size)};
}
}
$classname: #{if($breakpointname == 'default', '', $breakpointname + '\\\:')}#{dash-join($boundary, $direction, 'custom')};
$value: #{if($breakpointname == 'default', '', $breakpointname + '-')}#{dash-join($boundary, $direction, 'custom')};
.#{$classname} {
&#{&} { // Specificity fail 😒
#{$propname}: var(--#{$value});
}
}
}
}
}
}
@media (all) {
.min-w-0 {
min-inline-size: rem(0);
}
.min-w-0\.5 {
min-inline-size: rem(2);
}
.min-w-1 {
min-inline-size: rem(4);
}
.min-w-2 {
min-inline-size: rem(8);
}
.min-w-3 {
min-inline-size: rem(12);
}
.min-w-4 {
min-inline-size: rem(16);
}
.min-w-5 {
min-inline-size: rem(20);
}
.min-w-6 {
min-inline-size: rem(24);
}
.min-w-7 {
min-inline-size: rem(28);
}
.min-w-8 {
min-inline-size: rem(32);
}
.min-w-10 {
min-inline-size: rem(40);
}
.min-w-11 {
min-inline-size: rem(44);
}
.min-w-12 {
min-inline-size: rem(48);
}
.min-w-14 {
min-inline-size: rem(56);
}
.min-w-full {
min-inline-size: 100%;
}
.min-w-auto {
min-inline-size: auto;
}
.min-w-custom.min-w-custom {
min-inline-size: var(--min-w-custom);
}
.w-0 {
inline-size: rem(0);
}
.w-0\.5 {
inline-size: rem(2);
}
.w-1 {
inline-size: rem(4);
}
.w-2 {
inline-size: rem(8);
}
.w-3 {
inline-size: rem(12);
}
.w-4 {
inline-size: rem(16);
}
.w-5 {
inline-size: rem(20);
}
.w-6 {
inline-size: rem(24);
}
.w-7 {
inline-size: rem(28);
}
.w-8 {
inline-size: rem(32);
}
.w-10 {
inline-size: rem(40);
}
.w-11 {
inline-size: rem(44);
}
.w-12 {
inline-size: rem(48);
}
.w-14 {
inline-size: rem(56);
}
.w-full {
inline-size: 100%;
}
.w-auto {
inline-size: auto;
}
.w-custom.w-custom {
inline-size: var(--w-custom);
}
.max-w-0 {
max-inline-size: rem(0);
}
.max-w-0\.5 {
max-inline-size: rem(2);
}
.max-w-1 {
max-inline-size: rem(4);
}
.max-w-2 {
max-inline-size: rem(8);
}
.max-w-3 {
max-inline-size: rem(12);
}
.max-w-4 {
max-inline-size: rem(16);
}
.max-w-5 {
max-inline-size: rem(20);
}
.max-w-6 {
max-inline-size: rem(24);
}
.max-w-7 {
max-inline-size: rem(28);
}
.max-w-8 {
max-inline-size: rem(32);
}
.max-w-10 {
max-inline-size: rem(40);
}
.max-w-11 {
max-inline-size: rem(44);
}
.max-w-12 {
max-inline-size: rem(48);
}
.max-w-14 {
max-inline-size: rem(56);
}
.max-w-full {
max-inline-size: 100%;
}
.max-w-auto {
max-inline-size: auto;
}
.max-w-custom.max-w-custom {
max-inline-size: var(--max-w-custom);
}
.min-h-0 {
min-block-size: rem(0);
}
.min-h-0\.5 {
min-block-size: rem(2);
}
.min-h-1 {
min-block-size: rem(4);
}
.min-h-2 {
min-block-size: rem(8);
}
.min-h-3 {
min-block-size: rem(12);
}
.min-h-4 {
min-block-size: rem(16);
}
.min-h-5 {
min-block-size: rem(20);
}
.min-h-6 {
min-block-size: rem(24);
}
.min-h-7 {
min-block-size: rem(28);
}
.min-h-8 {
min-block-size: rem(32);
}
.min-h-10 {
min-block-size: rem(40);
}
.min-h-11 {
min-block-size: rem(44);
}
.min-h-12 {
min-block-size: rem(48);
}
.min-h-14 {
min-block-size: rem(56);
}
.min-h-full {
min-block-size: 100%;
}
.min-h-auto {
min-block-size: auto;
}
.min-h-custom.min-h-custom {
min-block-size: var(--min-h-custom);
}
.h-0 {
block-size: rem(0);
}
.h-0\.5 {
block-size: rem(2);
}
.h-1 {
block-size: rem(4);
}
.h-2 {
block-size: rem(8);
}
.h-3 {
block-size: rem(12);
}
.h-4 {
block-size: rem(16);
}
.h-5 {
block-size: rem(20);
}
.h-6 {
block-size: rem(24);
}
.h-7 {
block-size: rem(28);
}
.h-8 {
block-size: rem(32);
}
.h-10 {
block-size: rem(40);
}
.h-11 {
block-size: rem(44);
}
.h-12 {
block-size: rem(48);
}
.h-14 {
block-size: rem(56);
}
.h-full {
block-size: 100%;
}
.h-auto {
block-size: auto;
}
.h-custom.h-custom {
block-size: var(--h-custom);
}
.max-h-0 {
max-block-size: rem(0);
}
.max-h-0\.5 {
max-block-size: rem(2);
}
.max-h-1 {
max-block-size: rem(4);
}
.max-h-2 {
max-block-size: rem(8);
}
.max-h-3 {
max-block-size: rem(12);
}
.max-h-4 {
max-block-size: rem(16);
}
.max-h-5 {
max-block-size: rem(20);
}
.max-h-6 {
max-block-size: rem(24);
}
.max-h-7 {
max-block-size: rem(28);
}
.max-h-8 {
max-block-size: rem(32);
}
.max-h-10 {
max-block-size: rem(40);
}
.max-h-11 {
max-block-size: rem(44);
}
.max-h-12 {
max-block-size: rem(48);
}
.max-h-14 {
max-block-size: rem(56);
}
.max-h-full {
max-block-size: 100%;
}
.max-h-auto {
max-block-size: auto;
}
.max-h-custom.max-h-custom {
max-block-size: var(--max-h-custom);
}
}
@media (>xsmall) {
.sm\:min-w-0 {
min-inline-size: rem(0);
}
.sm\:min-w-0\.5 {
min-inline-size: rem(2);
}
.sm\:min-w-1 {
min-inline-size: rem(4);
}
.sm\:min-w-2 {
min-inline-size: rem(8);
}
.sm\:min-w-3 {
min-inline-size: rem(12);
}
.sm\:min-w-4 {
min-inline-size: rem(16);
}
.sm\:min-w-5 {
min-inline-size: rem(20);
}
.sm\:min-w-6 {
min-inline-size: rem(24);
}
.sm\:min-w-7 {
min-inline-size: rem(28);
}
.sm\:min-w-8 {
min-inline-size: rem(32);
}
.sm\:min-w-10 {
min-inline-size: rem(40);
}
.sm\:min-w-11 {
min-inline-size: rem(44);
}
.sm\:min-w-12 {
min-inline-size: rem(48);
}
.sm\:min-w-14 {
min-inline-size: rem(56);
}
.sm\:min-w-full {
min-inline-size: 100%;
}
.sm\:min-w-auto {
min-inline-size: auto;
}
.sm\:min-w-custom.sm\:min-w-custom {
min-inline-size: var(--sm-min-w-custom);
}
.sm\:w-0 {
inline-size: rem(0);
}
.sm\:w-0\.5 {
inline-size: rem(2);
}
.sm\:w-1 {
inline-size: rem(4);
}
.sm\:w-2 {
inline-size: rem(8);
}
.sm\:w-3 {
inline-size: rem(12);
}
.sm\:w-4 {
inline-size: rem(16);
}
.sm\:w-5 {
inline-size: rem(20);
}
.sm\:w-6 {
inline-size: rem(24);
}
.sm\:w-7 {
inline-size: rem(28);
}
.sm\:w-8 {
inline-size: rem(32);
}
.sm\:w-10 {
inline-size: rem(40);
}
.sm\:w-11 {
inline-size: rem(44);
}
.sm\:w-12 {
inline-size: rem(48);
}
.sm\:w-14 {
inline-size: rem(56);
}
.sm\:w-full {
inline-size: 100%;
}
.sm\:w-auto {
inline-size: auto;
}
.sm\:w-custom.sm\:w-custom {
inline-size: var(--sm-w-custom);
}
.sm\:max-w-0 {
max-inline-size: rem(0);
}
.sm\:max-w-0\.5 {
max-inline-size: rem(2);
}
.sm\:max-w-1 {
max-inline-size: rem(4);
}
.sm\:max-w-2 {
max-inline-size: rem(8);
}
.sm\:max-w-3 {
max-inline-size: rem(12);
}
.sm\:max-w-4 {
max-inline-size: rem(16);
}
.sm\:max-w-5 {
max-inline-size: rem(20);
}
.sm\:max-w-6 {
max-inline-size: rem(24);
}
.sm\:max-w-7 {
max-inline-size: rem(28);
}
.sm\:max-w-8 {
max-inline-size: rem(32);
}
.sm\:max-w-10 {
max-inline-size: rem(40);
}
.sm\:max-w-11 {
max-inline-size: rem(44);
}
.sm\:max-w-12 {
max-inline-size: rem(48);
}
.sm\:max-w-14 {
max-inline-size: rem(56);
}
.sm\:max-w-full {
max-inline-size: 100%;
}
.sm\:max-w-auto {
max-inline-size: auto;
}
.sm\:max-w-custom.sm\:max-w-custom {
max-inline-size: var(--sm-max-w-custom);
}
.sm\:min-h-0 {
min-block-size: rem(0);
}
.sm\:min-h-0\.5 {
min-block-size: rem(2);
}
.sm\:min-h-1 {
min-block-size: rem(4);
}
.sm\:min-h-2 {
min-block-size: rem(8);
}
.sm\:min-h-3 {
min-block-size: rem(12);
}
.sm\:min-h-4 {
min-block-size: rem(16);
}
.sm\:min-h-5 {
min-block-size: rem(20);
}
.sm\:min-h-6 {
min-block-size: rem(24);
}
.sm\:min-h-7 {
min-block-size: rem(28);
}
.sm\:min-h-8 {
min-block-size: rem(32);
}
.sm\:min-h-10 {
min-block-size: rem(40);
}
.sm\:min-h-11 {
min-block-size: rem(44);
}
.sm\:min-h-12 {
min-block-size: rem(48);
}
.sm\:min-h-14 {
min-block-size: rem(56);
}
.sm\:min-h-full {
min-block-size: 100%;
}
.sm\:min-h-auto {
min-block-size: auto;
}
.sm\:min-h-custom.sm\:min-h-custom {
min-block-size: var(--sm-min-h-custom);
}
.sm\:h-0 {
block-size: rem(0);
}
.sm\:h-0\.5 {
block-size: rem(2);
}
.sm\:h-1 {
block-size: rem(4);
}
.sm\:h-2 {
block-size: rem(8);
}
.sm\:h-3 {
block-size: rem(12);
}
.sm\:h-4 {
block-size: rem(16);
}
.sm\:h-5 {
block-size: rem(20);
}
.sm\:h-6 {
block-size: rem(24);
}
.sm\:h-7 {
block-size: rem(28);
}
.sm\:h-8 {
block-size: rem(32);
}
.sm\:h-10 {
block-size: rem(40);
}
.sm\:h-11 {
block-size: rem(44);
}
.sm\:h-12 {
block-size: rem(48);
}
.sm\:h-14 {
block-size: rem(56);
}
.sm\:h-full {
block-size: 100%;
}
.sm\:h-auto {
block-size: auto;
}
.sm\:h-custom.sm\:h-custom {
block-size: var(--sm-h-custom);
}
.sm\:max-h-0 {
max-block-size: rem(0);
}
.sm\:max-h-0\.5 {
max-block-size: rem(2);
}
.sm\:max-h-1 {
max-block-size: rem(4);
}
.sm\:max-h-2 {
max-block-size: rem(8);
}
.sm\:max-h-3 {
max-block-size: rem(12);
}
.sm\:max-h-4 {
max-block-size: rem(16);
}
.sm\:max-h-5 {
max-block-size: rem(20);
}
.sm\:max-h-6 {
max-block-size: rem(24);
}
.sm\:max-h-7 {
max-block-size: rem(28);
}
.sm\:max-h-8 {
max-block-size: rem(32);
}
.sm\:max-h-10 {
max-block-size: rem(40);
}
.sm\:max-h-11 {
max-block-size: rem(44);
}
.sm\:max-h-12 {
max-block-size: rem(48);
}
.sm\:max-h-14 {
max-block-size: rem(56);
}
.sm\:max-h-full {
max-block-size: 100%;
}
.sm\:max-h-auto {
max-block-size: auto;
}
.sm\:max-h-custom.sm\:max-h-custom {
max-block-size: var(--sm-max-h-custom);
}
}
@media (>small) {
.md\:min-w-0 {
min-inline-size: rem(0);
}
.md\:min-w-0\.5 {
min-inline-size: rem(2);
}
.md\:min-w-1 {
min-inline-size: rem(4);
}
.md\:min-w-2 {
min-inline-size: rem(8);
}
.md\:min-w-3 {
min-inline-size: rem(12);
}
.md\:min-w-4 {
min-inline-size: rem(16);
}
.md\:min-w-5 {
min-inline-size: rem(20);
}
.md\:min-w-6 {
min-inline-size: rem(24);
}
.md\:min-w-7 {
min-inline-size: rem(28);
}
.md\:min-w-8 {
min-inline-size: rem(32);
}
.md\:min-w-10 {
min-inline-size: rem(40);
}
.md\:min-w-11 {
min-inline-size: rem(44);
}
.md\:min-w-12 {
min-inline-size: rem(48);
}
.md\:min-w-14 {
min-inline-size: rem(56);
}
.md\:min-w-full {
min-inline-size: 100%;
}
.md\:min-w-auto {
min-inline-size: auto;
}
.md\:min-w-custom.md\:min-w-custom {
min-inline-size: var(--md-min-w-custom);
}
.md\:w-0 {
inline-size: rem(0);
}
.md\:w-0\.5 {
inline-size: rem(2);
}
.md\:w-1 {
inline-size: rem(4);
}
.md\:w-2 {
inline-size: rem(8);
}
.md\:w-3 {
inline-size: rem(12);
}
.md\:w-4 {
inline-size: rem(16);
}
.md\:w-5 {
inline-size: rem(20);
}
.md\:w-6 {
inline-size: rem(24);
}
.md\:w-7 {
inline-size: rem(28);
}
.md\:w-8 {
inline-size: rem(32);
}
.md\:w-10 {
inline-size: rem(40);
}
.md\:w-11 {
inline-size: rem(44);
}
.md\:w-12 {
inline-size: rem(48);
}
.md\:w-14 {
inline-size: rem(56);
}
.md\:w-full {
inline-size: 100%;
}
.md\:w-auto {
inline-size: auto;
}
.md\:w-custom.md\:w-custom {
inline-size: var(--md-w-custom);
}
.md\:max-w-0 {
max-inline-size: rem(0);
}
.md\:max-w-0\.5 {
max-inline-size: rem(2);
}
.md\:max-w-1 {
max-inline-size: rem(4);
}
.md\:max-w-2 {
max-inline-size: rem(8);
}
.md\:max-w-3 {
max-inline-size: rem(12);
}
.md\:max-w-4 {
max-inline-size: rem(16);
}
.md\:max-w-5 {
max-inline-size: rem(20);
}
.md\:max-w-6 {
max-inline-size: rem(24);
}
.md\:max-w-7 {
max-inline-size: rem(28);
}
.md\:max-w-8 {
max-inline-size: rem(32);
}
.md\:max-w-10 {
max-inline-size: rem(40);
}
.md\:max-w-11 {
max-inline-size: rem(44);
}
.md\:max-w-12 {
max-inline-size: rem(48);
}
.md\:max-w-14 {
max-inline-size: rem(56);
}
.md\:max-w-full {
max-inline-size: 100%;
}
.md\:max-w-auto {
max-inline-size: auto;
}
.md\:max-w-custom.md\:max-w-custom {
max-inline-size: var(--md-max-w-custom);
}
.md\:min-h-0 {
min-block-size: rem(0);
}
.md\:min-h-0\.5 {
min-block-size: rem(2);
}
.md\:min-h-1 {
min-block-size: rem(4);
}
.md\:min-h-2 {
min-block-size: rem(8);
}
.md\:min-h-3 {
min-block-size: rem(12);
}
.md\:min-h-4 {
min-block-size: rem(16);
}
.md\:min-h-5 {
min-block-size: rem(20);
}
.md\:min-h-6 {
min-block-size: rem(24);
}
.md\:min-h-7 {
min-block-size: rem(28);
}
.md\:min-h-8 {
min-block-size: rem(32);
}
.md\:min-h-10 {
min-block-size: rem(40);
}
.md\:min-h-11 {
min-block-size: rem(44);
}
.md\:min-h-12 {
min-block-size: rem(48);
}
.md\:min-h-14 {
min-block-size: rem(56);
}
.md\:min-h-full {
min-block-size: 100%;
}
.md\:min-h-auto {
min-block-size: auto;
}
.md\:min-h-custom.md\:min-h-custom {
min-block-size: var(--md-min-h-custom);
}
.md\:h-0 {
block-size: rem(0);
}
.md\:h-0\.5 {
block-size: rem(2);
}
.md\:h-1 {
block-size: rem(4);
}
.md\:h-2 {
block-size: rem(8);
}
.md\:h-3 {
block-size: rem(12);
}
.md\:h-4 {
block-size: rem(16);
}
.md\:h-5 {
block-size: rem(20);
}
.md\:h-6 {
block-size: rem(24);
}
.md\:h-7 {
block-size: rem(28);
}
.md\:h-8 {
block-size: rem(32);
}
.md\:h-10 {
block-size: rem(40);
}
.md\:h-11 {
block-size: rem(44);
}
.md\:h-12 {
block-size: rem(48);
}
.md\:h-14 {
block-size: rem(56);
}
.md\:h-full {
block-size: 100%;
}
.md\:h-auto {
block-size: auto;
}
.md\:h-custom.md\:h-custom {
block-size: var(--md-h-custom);
}
.md\:max-h-0 {
max-block-size: rem(0);
}
.md\:max-h-0\.5 {
max-block-size: rem(2);
}
.md\:max-h-1 {
max-block-size: rem(4);
}
.md\:max-h-2 {
max-block-size: rem(8);
}
.md\:max-h-3 {
max-block-size: rem(12);
}
.md\:max-h-4 {
max-block-size: rem(16);
}
.md\:max-h-5 {
max-block-size: rem(20);
}
.md\:max-h-6 {
max-block-size: rem(24);
}
.md\:max-h-7 {
max-block-size: rem(28);
}
.md\:max-h-8 {
max-block-size: rem(32);
}
.md\:max-h-10 {
max-block-size: rem(40);
}
.md\:max-h-11 {
max-block-size: rem(44);
}
.md\:max-h-12 {
max-block-size: rem(48);
}
.md\:max-h-14 {
max-block-size: rem(56);
}
.md\:max-h-full {
max-block-size: 100%;
}
.md\:max-h-auto {
max-block-size: auto;
}
.md\:max-h-custom.md\:max-h-custom {
max-block-size: var(--md-max-h-custom);
}
}
@media (>medium) {
.lg\:min-w-0 {
min-inline-size: rem(0);
}
.lg\:min-w-0\.5 {
min-inline-size: rem(2);
}
.lg\:min-w-1 {
min-inline-size: rem(4);
}
.lg\:min-w-2 {
min-inline-size: rem(8);
}
.lg\:min-w-3 {
min-inline-size: rem(12);
}
.lg\:min-w-4 {
min-inline-size: rem(16);
}
.lg\:min-w-5 {
min-inline-size: rem(20);
}
.lg\:min-w-6 {
min-inline-size: rem(24);
}
.lg\:min-w-7 {
min-inline-size: rem(28);
}
.lg\:min-w-8 {
min-inline-size: rem(32);
}
.lg\:min-w-10 {
min-inline-size: rem(40);
}
.lg\:min-w-11 {
min-inline-size: rem(44);
}
.lg\:min-w-12 {
min-inline-size: rem(48);
}
.lg\:min-w-14 {
min-inline-size: rem(56);
}
.lg\:min-w-full {
min-inline-size: 100%;
}
.lg\:min-w-auto {
min-inline-size: auto;
}
.lg\:min-w-custom.lg\:min-w-custom {
min-inline-size: var(--lg-min-w-custom);
}
.lg\:w-0 {
inline-size: rem(0);
}
.lg\:w-0\.5 {
inline-size: rem(2);
}
.lg\:w-1 {
inline-size: rem(4);
}
.lg\:w-2 {
inline-size: rem(8);
}
.lg\:w-3 {
inline-size: rem(12);
}
.lg\:w-4 {
inline-size: rem(16);
}
.lg\:w-5 {
inline-size: rem(20);
}
.lg\:w-6 {
inline-size: rem(24);
}
.lg\:w-7 {
inline-size: rem(28);
}
.lg\:w-8 {
inline-size: rem(32);
}
.lg\:w-10 {
inline-size: rem(40);
}
.lg\:w-11 {
inline-size: rem(44);
}
.lg\:w-12 {
inline-size: rem(48);
}
.lg\:w-14 {
inline-size: rem(56);
}
.lg\:w-full {
inline-size: 100%;
}
.lg\:w-auto {
inline-size: auto;
}
.lg\:w-custom.lg\:w-custom {
inline-size: var(--lg-w-custom);
}
.lg\:max-w-0 {
max-inline-size: rem(0);
}
.lg\:max-w-0\.5 {
max-inline-size: rem(2);
}
.lg\:max-w-1 {
max-inline-size: rem(4);
}
.lg\:max-w-2 {
max-inline-size: rem(8);
}
.lg\:max-w-3 {
max-inline-size: rem(12);
}
.lg\:max-w-4 {
max-inline-size: rem(16);
}
.lg\:max-w-5 {
max-inline-size: rem(20);
}
.lg\:max-w-6 {
max-inline-size: rem(24);
}
.lg\:max-w-7 {
max-inline-size: rem(28);
}
.lg\:max-w-8 {
max-inline-size: rem(32);
}
.lg\:max-w-10 {
max-inline-size: rem(40);
}
.lg\:max-w-11 {
max-inline-size: rem(44);
}
.lg\:max-w-12 {
max-inline-size: rem(48);
}
.lg\:max-w-14 {
max-inline-size: rem(56);
}
.lg\:max-w-full {
max-inline-size: 100%;
}
.lg\:max-w-auto {
max-inline-size: auto;
}
.lg\:max-w-custom.lg\:max-w-custom {
max-inline-size: var(--lg-max-w-custom);
}
.lg\:min-h-0 {
min-block-size: rem(0);
}
.lg\:min-h-0\.5 {
min-block-size: rem(2);
}
.lg\:min-h-1 {
min-block-size: rem(4);
}
.lg\:min-h-2 {
min-block-size: rem(8);
}
.lg\:min-h-3 {
min-block-size: rem(12);
}
.lg\:min-h-4 {
min-block-size: rem(16);
}
.lg\:min-h-5 {
min-block-size: rem(20);
}
.lg\:min-h-6 {
min-block-size: rem(24);
}
.lg\:min-h-7 {
min-block-size: rem(28);
}
.lg\:min-h-8 {
min-block-size: rem(32);
}
.lg\:min-h-10 {
min-block-size: rem(40);
}
.lg\:min-h-11 {
min-block-size: rem(44);
}
.lg\:min-h-12 {
min-block-size: rem(48);
}
.lg\:min-h-14 {
min-block-size: rem(56);
}
.lg\:min-h-full {
min-block-size: 100%;
}
.lg\:min-h-auto {
min-block-size: auto;
}
.lg\:min-h-custom.lg\:min-h-custom {
min-block-size: var(--lg-min-h-custom);
}
.lg\:h-0 {
block-size: rem(0);
}
.lg\:h-0\.5 {
block-size: rem(2);
}
.lg\:h-1 {
block-size: rem(4);
}
.lg\:h-2 {
block-size: rem(8);
}
.lg\:h-3 {
block-size: rem(12);
}
.lg\:h-4 {
block-size: rem(16);
}
.lg\:h-5 {
block-size: rem(20);
}
.lg\:h-6 {
block-size: rem(24);
}
.lg\:h-7 {
block-size: rem(28);
}
.lg\:h-8 {
block-size: rem(32);
}
.lg\:h-10 {
block-size: rem(40);
}
.lg\:h-11 {
block-size: rem(44);
}
.lg\:h-12 {
block-size: rem(48);
}
.lg\:h-14 {
block-size: rem(56);
}
.lg\:h-full {
block-size: 100%;
}
.lg\:h-auto {
block-size: auto;
}
.lg\:h-custom.lg\:h-custom {
block-size: var(--lg-h-custom);
}
.lg\:max-h-0 {
max-block-size: rem(0);
}
.lg\:max-h-0\.5 {
max-block-size: rem(2);
}
.lg\:max-h-1 {
max-block-size: rem(4);
}
.lg\:max-h-2 {
max-block-size: rem(8);
}
.lg\:max-h-3 {
max-block-size: rem(12);
}
.lg\:max-h-4 {
max-block-size: rem(16);
}
.lg\:max-h-5 {
max-block-size: rem(20);
}
.lg\:max-h-6 {
max-block-size: rem(24);
}
.lg\:max-h-7 {
max-block-size: rem(28);
}
.lg\:max-h-8 {
max-block-size: rem(32);
}
.lg\:max-h-10 {
max-block-size: rem(40);
}
.lg\:max-h-11 {
max-block-size: rem(44);
}
.lg\:max-h-12 {
max-block-size: rem(48);
}
.lg\:max-h-14 {
max-block-size: rem(56);
}
.lg\:max-h-full {
max-block-size: 100%;
}
.lg\:max-h-auto {
max-block-size: auto;
}
.lg\:max-h-custom.lg\:max-h-custom {
max-block-size: var(--lg-max-h-custom);
}
}
@media (>large) {
.xl\:min-w-0 {
min-inline-size: rem(0);
}
.xl\:min-w-0\.5 {
min-inline-size: rem(2);
}
.xl\:min-w-1 {
min-inline-size: rem(4);
}
.xl\:min-w-2 {
min-inline-size: rem(8);
}
.xl\:min-w-3 {
min-inline-size: rem(12);
}
.xl\:min-w-4 {
min-inline-size: rem(16);
}
.xl\:min-w-5 {
min-inline-size: rem(20);
}
.xl\:min-w-6 {
min-inline-size: rem(24);
}
.xl\:min-w-7 {
min-inline-size: rem(28);
}
.xl\:min-w-8 {
min-inline-size: rem(32);
}
.xl\:min-w-10 {
min-inline-size: rem(40);
}
.xl\:min-w-11 {
min-inline-size: rem(44);
}
.xl\:min-w-12 {
min-inline-size: rem(48);
}
.xl\:min-w-14 {
min-inline-size: rem(56);
}
.xl\:min-w-full {
min-inline-size: 100%;
}
.xl\:min-w-auto {
min-inline-size: auto;
}
.xl\:min-w-custom.xl\:min-w-custom {
min-inline-size: var(--xl-min-w-custom);
}
.xl\:w-0 {
inline-size: rem(0);
}
.xl\:w-0\.5 {
inline-size: rem(2);
}
.xl\:w-1 {
inline-size: rem(4);
}
.xl\:w-2 {
inline-size: rem(8);
}
.xl\:w-3 {
inline-size: rem(12);
}
.xl\:w-4 {
inline-size: rem(16);
}
.xl\:w-5 {
inline-size: rem(20);
}
.xl\:w-6 {
inline-size: rem(24);
}
.xl\:w-7 {
inline-size: rem(28);
}
.xl\:w-8 {
inline-size: rem(32);
}
.xl\:w-10 {
inline-size: rem(40);
}
.xl\:w-11 {
inline-size: rem(44);
}
.xl\:w-12 {
inline-size: rem(48);
}
.xl\:w-14 {
inline-size: rem(56);
}
.xl\:w-full {
inline-size: 100%;
}
.xl\:w-auto {
inline-size: auto;
}
.xl\:w-custom.xl\:w-custom {
inline-size: var(--xl-w-custom);
}
.xl\:max-w-0 {
max-inline-size: rem(0);
}
.xl\:max-w-0\.5 {
max-inline-size: rem(2);
}
.xl\:max-w-1 {
max-inline-size: rem(4);
}
.xl\:max-w-2 {
max-inline-size: rem(8);
}
.xl\:max-w-3 {
max-inline-size: rem(12);
}
.xl\:max-w-4 {
max-inline-size: rem(16);
}
.xl\:max-w-5 {
max-inline-size: rem(20);
}
.xl\:max-w-6 {
max-inline-size: rem(24);
}
.xl\:max-w-7 {
max-inline-size: rem(28);
}
.xl\:max-w-8 {
max-inline-size: rem(32);
}
.xl\:max-w-10 {
max-inline-size: rem(40);
}
.xl\:max-w-11 {
max-inline-size: rem(44);
}
.xl\:max-w-12 {
max-inline-size: rem(48);
}
.xl\:max-w-14 {
max-inline-size: rem(56);
}
.xl\:max-w-full {
max-inline-size: 100%;
}
.xl\:max-w-auto {
max-inline-size: auto;
}
.xl\:max-w-custom.xl\:max-w-custom {
max-inline-size: var(--xl-max-w-custom);
}
.xl\:min-h-0 {
min-block-size: rem(0);
}
.xl\:min-h-0\.5 {
min-block-size: rem(2);
}
.xl\:min-h-1 {
min-block-size: rem(4);
}
.xl\:min-h-2 {
min-block-size: rem(8);
}
.xl\:min-h-3 {
min-block-size: rem(12);
}
.xl\:min-h-4 {
min-block-size: rem(16);
}
.xl\:min-h-5 {
min-block-size: rem(20);
}
.xl\:min-h-6 {
min-block-size: rem(24);
}
.xl\:min-h-7 {
min-block-size: rem(28);
}
.xl\:min-h-8 {
min-block-size: rem(32);
}
.xl\:min-h-10 {
min-block-size: rem(40);
}
.xl\:min-h-11 {
min-block-size: rem(44);
}
.xl\:min-h-12 {
min-block-size: rem(48);
}
.xl\:min-h-14 {
min-block-size: rem(56);
}
.xl\:min-h-full {
min-block-size: 100%;
}
.xl\:min-h-auto {
min-block-size: auto;
}
.xl\:min-h-custom.xl\:min-h-custom {
min-block-size: var(--xl-min-h-custom);
}
.xl\:h-0 {
block-size: rem(0);
}
.xl\:h-0\.5 {
block-size: rem(2);
}
.xl\:h-1 {
block-size: rem(4);
}
.xl\:h-2 {
block-size: rem(8);
}
.xl\:h-3 {
block-size: rem(12);
}
.xl\:h-4 {
block-size: rem(16);
}
.xl\:h-5 {
block-size: rem(20);
}
.xl\:h-6 {
block-size: rem(24);
}
.xl\:h-7 {
block-size: rem(28);
}
.xl\:h-8 {
block-size: rem(32);
}
.xl\:h-10 {
block-size: rem(40);
}
.xl\:h-11 {
block-size: rem(44);
}
.xl\:h-12 {
block-size: rem(48);
}
.xl\:h-14 {
block-size: rem(56);
}
.xl\:h-full {
block-size: 100%;
}
.xl\:h-auto {
block-size: auto;
}
.xl\:h-custom.xl\:h-custom {
block-size: var(--xl-h-custom);
}
.xl\:max-h-0 {
max-block-size: rem(0);
}
.xl\:max-h-0\.5 {
max-block-size: rem(2);
}
.xl\:max-h-1 {
max-block-size: rem(4);
}
.xl\:max-h-2 {
max-block-size: rem(8);
}
.xl\:max-h-3 {
max-block-size: rem(12);
}
.xl\:max-h-4 {
max-block-size: rem(16);
}
.xl\:max-h-5 {
max-block-size: rem(20);
}
.xl\:max-h-6 {
max-block-size: rem(24);
}
.xl\:max-h-7 {
max-block-size: rem(28);
}
.xl\:max-h-8 {
max-block-size: rem(32);
}
.xl\:max-h-10 {
max-block-size: rem(40);
}
.xl\:max-h-11 {
max-block-size: rem(44);
}
.xl\:max-h-12 {
max-block-size: rem(48);
}
.xl\:max-h-14 {
max-block-size: rem(56);
}
.xl\:max-h-full {
max-block-size: 100%;
}
.xl\:max-h-auto {
max-block-size: auto;
}
.xl\:max-h-custom.xl\:max-h-custom {
max-block-size: var(--xl-max-h-custom);
}
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment