diff --git a/_index.scss b/_index.scss index e95df50..fec8d82 100644 --- a/_index.scss +++ b/_index.scss @@ -16,7 +16,7 @@ $homework-is-modern: true !default; @import "scss/u-misc"; @import "scss/basis-core"; -@import "scss/basis-font"; +@import "scss/basis-typo"; @import "scss/basis-grid"; @import "scss/basis-theme"; @@ -30,14 +30,15 @@ $homework-is-modern: true !default; @import "scss/reset"; @import "scss/setup-core"; -@import "scss/setup-wrap"; -@import "scss/setup-frame"; +@import "scss/setup-page"; @import "scss/setup-stack"; -@import "scss/setup-font"; -@import "scss/setup-flow"; +@import "scss/setup-grid"; +@import "scss/setup-cell"; +@import "scss/setup-typo"; @import "scss/setup-atomic"; @import "scss/setup-helper"; @import "scss/setup-theme"; +@import "scss/setup-state"; @import "scss/setup-debug"; @import "scss/setup"; diff --git a/assets/TODO.md b/assets/TODO.md index cc12458..251b28d 100644 --- a/assets/TODO.md +++ b/assets/TODO.md @@ -21,20 +21,20 @@ stack homework/ reset [element].reset -- element specific resets - setup-modern-core (implicit) + setup-core (implicit) (m), :root - setup-modern-page (explicit) + setup-page (explicit) wrap, peel, frame, bleed, - setup-modern-stack (implicit) + setup-stack (implicit) stack, plain, chain, (shim) - setup-modern-grid (implicit) + setup-grid (implicit) grid, flow, cols, rows - setup-modern-cell (explicit) + setup-cell (explicit) span, push, pull, col, row - setup-modern-typo (implicit) + setup-typo (implicit) f, trim `.caps` (and `.smcp`) co-class(es) for `.f-` classes, with different spacing - setup-modern-atomic (explicit) + setup-atomic (explicit) m+, p+, w, h, minh, maxh, minw, maxw NB: add w-viewport, h-viewport d, z (00-90) @@ -45,7 +45,7 @@ homework/ op -- (opacity) 00,02,04,06,08,10 * replace fit with obj: .obj-contain /-cover /-fill /-none /-scale-down /-bottom /-center /-left /-left-bottom /-left-top /-right /-right-bottom /-right-top /-top (scroll-[auto|touch]) -- should maybe just be in reset - setup-modern-helper (static||explicit) + setup-helper (static||explicit) (optional) clearfix, flt-left/-right/-none, clr-left/-right/-none skip -- see https://medium.freecodecamp.org/how-to-design-website-layouts-for-screen-readers-347b7b06e9cc clip, over-[auto|scroll|hidden|visible], clip-[x|y], over-[x|y]-[auto|scroll|hidden|visible] @@ -58,7 +58,7 @@ homework/ resize -- x|y|none|both cursor -- pointer|default select -- none, auto, text - setup-modern-theme + setup-theme $colors, $patterns, $weights, $radii, $shadows, $outlines theme-[color] c-, bgc-, bdc- ,fill- ,stroke- @@ -80,7 +80,7 @@ homework/ none/0 -ol- sm, md, lg - setup-modern-state + setup-state .hover__ .focus__ .active__ diff --git a/scss/_basis-core.scss b/scss/_basis-core.scss index 1daf351..65faf55 100644 --- a/scss/_basis-core.scss +++ b/scss/_basis-core.scss @@ -153,7 +153,7 @@ $media-defaults: ( ////////////////// private ////////////////// ///////////////////////////////////////////// -@mixin --medium-properties($medium) { +@mixin --output-medium-props($medium) { @each $key, $val in $medium { @if not index('list' 'map', type-of($val)) { --#{$key}: #{$val}; diff --git a/scss/_basis-font.scss b/scss/_basis-typo.scss similarity index 100% rename from scss/_basis-font.scss rename to scss/_basis-typo.scss diff --git a/scss/_setup-frame.scss b/scss/_deprec/_setup-frame.scss similarity index 100% rename from scss/_setup-frame.scss rename to scss/_deprec/_setup-frame.scss diff --git a/scss/_setup-wrap.scss b/scss/_deprec/_setup-wrap.scss similarity index 100% rename from scss/_setup-wrap.scss rename to scss/_deprec/_setup-wrap.scss diff --git a/scss/_setup-atomic.scss b/scss/_setup-atomic.scss index e726bc3..9736519 100644 --- a/scss/_setup-atomic.scss +++ b/scss/_setup-atomic.scss @@ -5,6 +5,17 @@ // | (_| | || (_) | | | | | | | (__ // \__,_|\__\___/|_| |_| |_|_|\___| +// m+, p+, w, h, minh, maxh, minw, maxw +// NB: add w-viewport, h-viewport +// d, z (00-90) +// rel, fix, abs, show, hide, vhide, vshow +// ? fs- italic, normal +// ? fw- bold, bolder, light, etc. normal +// a, ac, as, jc, ai, flex, fit +// op -- (opacity) 00,02,04,06,08,10 +// * replace fit with obj: .obj-contain /-cover /-fill /-none /-scale-down /-bottom /-center /-left /-left-bottom /-left-top /-right /-right-bottom /-right-top /-top +// (scroll-[auto|touch]) -- should maybe just be in reset + @mixin homework-setup-atomic($modern: $homework-is-modern) { // join with null, to also output suffix-less class diff --git a/scss/_setup-cell.scss b/scss/_setup-cell.scss new file mode 100644 index 0000000..7f047f3 --- /dev/null +++ b/scss/_setup-cell.scss @@ -0,0 +1,8 @@ +// _ _ +// | | | +// ___ ___| | | +// / __/ _ \ | | +// | (_| __/ | | +// \___\___|_|_| + +// span, push, pull, col, row diff --git a/scss/_setup-core.scss b/scss/_setup-core.scss index 9a41452..b76b12f 100644 --- a/scss/_setup-core.scss +++ b/scss/_setup-core.scss @@ -1,12 +1,9 @@ -// _ -// | | -// ___ ___ _ __ ___ ______ ___ ___| |_ _ _ _ __ -// / __/ _ \| '__/ _ \______/ __|/ _ \ __| | | | '_ \ -// | (_| (_) | | | __/ \__ \ __/ |_| |_| | |_) | -// \___\___/|_| \___| |___/\___|\__|\__,_| .__/ -// | | -// |_| +// ___ ___ _ __ ___ +// / __/ _ \| '__/ _ \ +// | (_| (_) | | | __/ +// \___\___/|_| \___| +// (m), :root -- implicitly responsive @mixin homework-setup-root($modern: $homework-is-modern, $trim: true, $output: true) { @@ -19,7 +16,7 @@ @if $modern { :root { - @include --medium-properties($root); + @include --output-medium-props($root); --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left))); } html { @@ -46,11 +43,17 @@ $media: map-merge($media, ($m: $outgoing-medium)) !global; @if $output { + + // TODO for wrap/peel + // :root + // --outer-width-#{$m}: ? + // --inner-width-#{$m}: ? + @media #{--query-string(map-get($incoming-medium, 'breakpoint'))} { @if $modern { :root { - @include --medium-properties($incoming-medium); + @include --output-medium-props($incoming-medium); --outer-width: #{map-get($outgoing-medium, 'outer-width')}; } } @else { diff --git a/scss/_setup-flow.scss b/scss/_setup-grid.scss similarity index 88% rename from scss/_setup-flow.scss rename to scss/_setup-grid.scss index e71af53..aaacff8 100644 --- a/scss/_setup-flow.scss +++ b/scss/_setup-grid.scss @@ -1,22 +1,20 @@ -// __ _ _____ _ _ _ -// / _| | / __ \ | | | | (_) -// | |_| | _____ __`' / /' | |_ ___ ___| |_ _ _ __ __ _ -// | _| |/ _ \ \ /\ / / / / | __/ _ \/ __| __| | '_ \ / _` | -// | | | | (_) \ V V / ./ /___ | || __/\__ \ |_| | | | | (_| | -// |_| |_|\___/ \_/\_/ \_____/ \__\___||___/\__|_|_| |_|\__, | -// __/ | -// |___/ +// _ _ +// (_) | | +// __ _ _ __ _ __| | +// / _` | '__| |/ _` | +// | (_| | | | | (_| | +// \__, |_| |_|\__,_| +// __/ | +// |___/ - -///////////////////////////////////////////// -//////////////// SETUP MIXIN //////////////// -///////////////////////////////////////////// +// grid, flow, cols, rows // TODO / THINK // - replace --col-base, --row-base with --col-count, --row-count // - reconsider grid-template-rows value for 'grid' base class? -@mixin homework-setup-flow($max-columns: max-columns(), $row-classes: false) { + +@mixin homework-setup-grid($max-columns: max-columns(), $row-classes: false) { *, *:before, *:after { --push-l: initial; diff --git a/scss/_setup-helper.scss b/scss/_setup-helper.scss index 3e9c3dc..53fee25 100644 --- a/scss/_setup-helper.scss +++ b/scss/_setup-helper.scss @@ -1,11 +1,25 @@ -// _ _ _ -// | | | | | | -// | |__ ___| |_ __ ___ _ __ ______ ___ ___| |_ _ _ _ __ -// | '_ \ / _ \ | '_ \ / _ \ '__|______/ __|/ _ \ __| | | | '_ \ -// | | | | __/ | |_) | __/ | \__ \ __/ |_| |_| | |_) | -// |_| |_|\___|_| .__/ \___|_| |___/\___|\__|\__,_| .__/ -// | | | | -// |_| |_| +// _ _ +// | | | | +// | |__ ___| |_ __ ___ _ __ +// | '_ \ / _ \ | '_ \ / _ \ '__| +// | | | | __/ | |_) | __/ | +// |_| |_|\___|_| .__/ \___|_| +// | | +// |_| + +// (optional) clearfix, flt-left/-right/-none, clr-left/-right/-none +// skip -- see https://medium.freecodecamp.org/how-to-design-website-layouts-for-screen-readers-347b7b06e9cc +// clip, over-[auto|scroll|hidden|visible], clip-[x|y], over-[x|y]-[auto|scroll|hidden|visible] +// trim, trap, stop, +// fade (opacity) +// pill (border-radius: 50vmin) +// truncate, break, ws (white-space) +// aspect +// pe (pointer-events) +// resize -- x|y|none|both +// cursor -- pointer|default +// select -- none, auto, text + @mixin homework-setup-helper($modern: $homework-is-modern) { diff --git a/scss/_setup-page.scss b/scss/_setup-page.scss new file mode 100644 index 0000000..1a38fd3 --- /dev/null +++ b/scss/_setup-page.scss @@ -0,0 +1,125 @@ +// _ __ __ _ __ _ ___ +// | '_ \ / _` |/ _` |/ _ \ +// | |_) | (_| | (_| | __/ +// | .__/ \__,_|\__, |\___| +// | | __/ | +// |_| |___/ + +// wrap, peel, frame, bleed -- explicit/implicit + +// TODO +// - output --outer-width-[m] (and --inner-width-[m]) properties in core +// - classes should be +// wrap-m / wrap-last, +// [m__]wrap-each + + +@mixin homework-setup-page($modern: $homework-is-modern) { + + $last-m: last(media-keys()); + + ///////////////////////////////////////////// + //////////////////// wrap /////////////////// + ///////////////////////////////////////////// + + :root { --wrap-width: 100%; } + + @each $m in join((null), media-keys()) { + @include m($m) { + + #{m-base-class('wrap')} { + margin-right: auto; + margin-left: auto; + width: 100%; + max-width: if($modern, var(--wrap-width), 100%); + } + + $m__: m-prefix(); + + .#{$m__}wrap-left { margin-left: 0; } + .#{$m__}wrap-right { margin-right: 0; } + // .#{$m__}wrap-each { --wrap-width: var(--outer-width); } + + .#{$m__}wrap, #{if($m, '.wrap-#{$m}', '')}, #{if($m == $last-m, '.wrap-last', '')} { + --wrap-width: var(--outer-width); + } + } + } + + ///////////////////////////////////////////// + //////////////////// peel /////////////////// + ///////////////////////////////////////////// + + // .peel { + // margin-right: 0; + // margin-left: 0; + // max-width: none; + // width: 100vw; + // } + + // @include mm-for('outer-right', 'outer-left') { + + // $outer-right: m-var('outer-right'); + // $outer-left: m-var('outer-left'); + // $wrap-offset: subtract($outer-right, $outer-left); + // $peel-margin: subtract(100%, 100vw); + // $peel-margin-right: divide(subtract($peel-margin, $wrap-offset), 2); + // $peel-margin-left: divide(add($peel-margin, $wrap-offset), 2); + + // .peel { + // &--right { width: add(100vw, $peel-margin-left);} + // &--left { width: add(100vw, $peel-margin-right);} + // &, &--right { margin-right: $peel-margin-right; } + // &, &--left { margin-left: $peel-margin-left; } + // } + + // .peel--from-right { + // &, &.peel--right { margin-right: - $outer-right;} + // &, &.peel--left { margin-left: add($peel-margin, $outer-right); } + // &.peel--right { + // width: add(100%, $outer-right); + // margin-left: 0; + // } + // &.peel--left { + // width: subtract(100vw, $outer-right); + // margin-right: 0; + // } + // } + + // .peel--from-left { + // &, &.peel--right { margin-right: add($peel-margin, $outer-left); } + // &, &.peel--left { margin-left: - $outer-left; } + // &.peel--right { + // width: subtract(100vw, $outer-left); + // margin-left: 0; + // } + // &.peel--left { + // width: add(100%, $outer-left); + // margin-right: 0; + // } + // } + // } + + ///////////////////////////////////////////// + //////////////// frame/bleed //////////////// + ///////////////////////////////////////////// + + @each $m in join((null), map-keys($media)) { + @include m($m) { + + $m__: m-prefix(); + + #{m-base-class('bleed')} { width: unset !important; } + + .#{$m__}frame, .#{$m__}frame-x, .#{$m__}frame-right { padding-right: var(--outer-right); } + .#{$m__}frame, .#{$m__}frame-x, .#{$m__}frame-left { padding-left: var(--outer-left); } + .#{$m__}frame-y, .#{$m__}frame-top { padding-top: var(--outer-top); } + .#{$m__}frame-y, .#{$m__}frame-bottom { padding-bottom: var(--outer-bottom); } + + .#{$m__}bleed, .#{$m__}bleed-x, .#{$m__}bleed-right { margin-right: calc(var(--outer-right) * -1); } + .#{$m__}bleed, .#{$m__}bleed-x, .#{$m__}bleed-left { margin-left: calc(var(--outer-left) * -1); } + .#{$m__}bleed-y, .#{$m__}bleed-top { margin-top: calc(var(--outer-top) * -1); } + .#{$m__}bleed-y, .#{$m__}bleed-bottom { margin-bottom: calc(var(--outer-bottom) * -1); } + } + } +} diff --git a/scss/_setup-stack.scss b/scss/_setup-stack.scss index 3281048..0c44480 100644 --- a/scss/_setup-stack.scss +++ b/scss/_setup-stack.scss @@ -1,10 +1,11 @@ -// _ _ __ _ _ -// | | | | / / | | (_) -// ___| |_ __ _ ___| | __ / / ___| |__ __ _ _ _ __ -// / __| __/ _` |/ __| |/ / / / / __| '_ \ / _` | | '_ \ -// \__ \ || (_| | (__| < / / | (__| | | | (_| | | | | | -// |___/\__\__,_|\___|_|\_\ /_/ \___|_| |_|\__,_|_|_| |_| - +// _ _ +// | | | | +// ___| |_ __ _ ___| | __ +// / __| __/ _` |/ __| |/ / +// \__ \ || (_| | (__| < +// |___/\__\__,_|\___|_|\_\ + +// stack, plain, chain, (shim) -- implicitly responsive // @mixin stack($modern: $homework-is-modern) { // display: flex; diff --git a/scss/_setup-state.scss b/scss/_setup-state.scss new file mode 100644 index 0000000..e85afea --- /dev/null +++ b/scss/_setup-state.scss @@ -0,0 +1,19 @@ +// _ _ +// | | | | +// ___| |_ __ _| |_ ___ +// / __| __/ _` | __/ _ \ +// \__ \ || (_| | || __/ +// |___/\__\__,_|\__\___| + +// .hover__ +// .focus__ +// .active__ +// .gr-hover__ +// .group-hover__ (requires group) +// .focus-in__ +// .focus-within__ + + +@mixin homework-setup-state() { + +} diff --git a/scss/_setup-theme.scss b/scss/_setup-theme.scss index d2eda6b..924d53f 100644 --- a/scss/_setup-theme.scss +++ b/scss/_setup-theme.scss @@ -1,11 +1,32 @@ -// _ _ _ -// | | | | | | -// | |_| |__ ___ _ __ ___ ___ ______ ___ ___| |_ _ _ _ __ -// | __| '_ \ / _ \ '_ ` _ \ / _ \______/ __|/ _ \ __| | | | '_ \ -// | |_| | | | __/ | | | | | __/ \__ \ __/ |_| |_| | |_) | -// \__|_| |_|\___|_| |_| |_|\___| |___/\___|\__|\__,_| .__/ -// | | -// |_| +// _ _ +// | | | | +// | |_| |__ ___ _ __ ___ ___ +// | __| '_ \ / _ \ '_ ` _ \ / _ \ +// | |_| | | | __/ | | | | | __/ +// \__|_| |_|\___|_| |_| |_|\___| + +// $colors, $patterns, $weights, $radii, $shadows, $outlines +// theme-[color] +// c-, bgc-, bdc- ,fill- ,stroke- +// -[color] +// -theme +// -contrast +// -current +// bd- bdt-, bdr-, bdb-, bdl- +// -1,-2,-3,-4,-5,-6,-7 +// -s,-m,-l,... +// bg-none/0, bd-none/0, ol-0/none +// bg-[position], bg-[attachment] +// bd-collapse/-separate +// radius- t-, r-, b-, l-, tl-, tr-, bl-, br-, +// s, m, l, max, +// oval +// shadow +// sm, md, lg +// none/0 +// -ol- +// sm, md, lg + @mixin homework-setup-theme($modern: $homework-is-modern, $lite: true) { diff --git a/scss/_setup-font.scss b/scss/_setup-typo.scss similarity index 93% rename from scss/_setup-font.scss rename to scss/_setup-typo.scss index 8119e83..7a325d2 100644 --- a/scss/_setup-font.scss +++ b/scss/_setup-typo.scss @@ -1,11 +1,14 @@ -// __ _ _ -// / _| | | | | -// | |_ ___ _ __ | |_ ______ ___ ___| |_ _ _ _ __ -// | _/ _ \| '_ \| __|______/ __|/ _ \ __| | | | '_ \ -// | || (_) | | | | |_ \__ \ __/ |_| |_| | |_) | -// |_| \___/|_| |_|\__| |___/\___|\__|\__,_| .__/ -// | | -// |_| +// _ +// | | +// | |_ _ _ _ __ ___ +// | __| | | | '_ \ / _ \ +// | |_| |_| | |_) | (_) | +// \__|\__, | .__/ \___/ +// __/ | | +// |___/|_| + +// f, trim -- implicitly repsonsive +// `.caps` (and `.smcp`) co-class(es) for `.f-` classes, with different spacing $homework-plain-elements: p ul ol dl h3 h4 h5 h6 blockquote; diff --git a/tests/_holding/legacy-core-root.scss b/tests/_holding/legacy-core-root.scss index 12d2f58..ec523b8 100644 --- a/tests/_holding/legacy-core-root.scss +++ b/tests/_holding/legacy-core-root.scss @@ -57,5 +57,5 @@ $media: ( /* #{map-inspect($media)} */ @include homework-setup-core(false); -@include homework-setup-root(false); +@include homework-setup-core(false); /* #{map-inspect($media)} */ diff --git a/tests/_visual/app.scss b/tests/_visual/app.scss index b6a0d41..3bbde60 100644 --- a/tests/_visual/app.scss +++ b/tests/_visual/app.scss @@ -99,7 +99,7 @@ $colors: ( @include homework-reset; -@include homework-setup-root(); +@include homework-setup-core(); @include homework-setup-wrap(); @include homework-setup-frame(); @include homework-setup-flow(); diff --git a/tests/_visual/new/flow2.scss b/tests/_visual/new/flow2.scss index 0fdbf85..b28c641 100644 --- a/tests/_visual/new/flow2.scss +++ b/tests/_visual/new/flow2.scss @@ -22,7 +22,7 @@ $media: ( c: (breakpoint: 40em), ); -@include homework-setup-root($output: false); +@include homework-setup-core($output: false); ///////////////////////////////////////////// ////////////////// NEW CODE ///////////////// diff --git a/tests/modern-wrap.scss b/tests/modern-wrap.scss deleted file mode 100644 index cfe5fcb..0000000 --- a/tests/modern-wrap.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import 'index'; - -$root: ( - inner-x: 2rem, - inner-x-mods: ( - s: 0.5, - form: 10px, - ), - inner-y-mods: ( - s: 1, - m: 2, - l: 4rem - ) -); - -$media: ( - a: (breakpoint: 20em), - b: ( - inner-x: 3rem, - breakpoint: 30em - ), - c: (breakpoint: 40em), -); - -@include homework-setup-root($output: false); -@include homework-setup-wrap(); diff --git a/tests/modern-atomic.scss b/tests/output-atomic.scss similarity index 95% rename from tests/modern-atomic.scss rename to tests/output-atomic.scss index a35095d..bda77ca 100644 --- a/tests/modern-atomic.scss +++ b/tests/output-atomic.scss @@ -52,7 +52,7 @@ $media: ( ), ); -@include homework-setup-root($output: false); +@include homework-setup-core($output: false); @include homework-setup-atomic(); // .test { diff --git a/tests/modern-root.scss b/tests/output-core.scss similarity index 96% rename from tests/modern-root.scss rename to tests/output-core.scss index 96ddaf5..b305df1 100644 --- a/tests/modern-root.scss +++ b/tests/output-core.scss @@ -59,6 +59,6 @@ $media: ( // /* #{map-inspect($root)} */ /* #{map-inspect($media)} */ -@include homework-setup-root(); +@include homework-setup-core(); // /* #{map-inspect($root)} */ /* #{map-inspect($media)} */ diff --git a/tests/modern-flow.scss b/tests/output-grid.scss similarity index 87% rename from tests/modern-flow.scss rename to tests/output-grid.scss index 7da5373..cdb6783 100644 --- a/tests/modern-flow.scss +++ b/tests/output-grid.scss @@ -22,8 +22,8 @@ $media: ( c: (breakpoint: 40em), ); -@include homework-setup-root($output: false); -@include homework-setup-flow(); +@include homework-setup-core($output: false); +@include homework-setup-grid(); // .test { @include span(1, -1, 2); } // .test { @include span(2, -1, 2); } diff --git a/tests/modern-helper.scss b/tests/output-helper.scss similarity index 95% rename from tests/modern-helper.scss rename to tests/output-helper.scss index 30906f9..5112135 100644 --- a/tests/modern-helper.scss +++ b/tests/output-helper.scss @@ -52,5 +52,5 @@ $media: ( ), ); -@include homework-setup-root(); +@include homework-setup-core(); @include homework-setup-helper(); diff --git a/tests/modern-frame.scss b/tests/output-page.scss similarity index 86% rename from tests/modern-frame.scss rename to tests/output-page.scss index d3ef6e0..08488c4 100644 --- a/tests/modern-frame.scss +++ b/tests/output-page.scss @@ -31,5 +31,5 @@ $media: ( ), ); -@include homework-setup-root($output: false); -@include homework-setup-frame(); +@include homework-setup-core($output: false); +@include homework-setup-page(); diff --git a/tests/modern-stack.scss b/tests/output-stack.scss similarity index 86% rename from tests/modern-stack.scss rename to tests/output-stack.scss index fae4823..542836b 100644 --- a/tests/modern-stack.scss +++ b/tests/output-stack.scss @@ -22,5 +22,5 @@ $media: ( c: (breakpoint: 40em), ); -@include homework-setup-root($output: false); +@include homework-setup-core($output: false); @include homework-setup-stack(); diff --git a/tests/modern-theme.scss b/tests/output-theme.scss similarity index 100% rename from tests/modern-theme.scss rename to tests/output-theme.scss diff --git a/tests/modern-font.scss b/tests/output-typo.scss similarity index 89% rename from tests/modern-font.scss rename to tests/output-typo.scss index bcc2766..8da1604 100644 --- a/tests/modern-font.scss +++ b/tests/output-typo.scss @@ -49,8 +49,8 @@ $fonts: ( ), ); -@include homework-setup-root($trim: true, $output: false); -@include homework-setup-font($trim: true); +@include homework-setup-core($trim: true, $output: false); +@include homework-setup-typo($trim: true); .plain { diff --git a/tests/renders/modern-atomic.dartsass.css b/tests/renders/modern-atomic.dartsass.css deleted file mode 100644 index 2c4b98a..0000000 --- a/tests/renders/modern-atomic.dartsass.css +++ /dev/null @@ -1,950 +0,0 @@ -.w-unset { - width: unset; -} - -.h-unset { - height: unset; -} - -.w-auto { - width: auto; -} - -.h-auto { - height: auto; -} - -.w-100 { - width: 100%; -} - -.h-100 { - height: 100%; -} - -.w-0 { - width: 0; -} - -.h-0 { - height: 0; -} - -.my-auto, .mt-auto { - margin-top: auto; -} - -.mx-auto, .mr-auto { - margin-right: auto; -} - -.my-auto, .mb-auto { - margin-bottom: auto; -} - -.mx-auto, .ml-auto { - margin-left: auto; -} - -.my-0, .mt-0 { - margin-top: 0; -} - -.mx-0, .mr-0 { - margin-right: 0; -} - -.my-0, .mb-0 { - margin-bottom: 0; -} - -.mx-0, .ml-0 { - margin-left: 0; -} - -.py-0, .pt-0 { - padding-top: 0; -} - -.px-0, .pr-0 { - padding-right: 0; -} - -.py-0, .pb-0 { - padding-bottom: 0; -} - -.px-0, .pl-0 { - padding-left: 0; -} - -@media screen and (min-width: 30em) { - .a__w-unset { - width: unset; - } - - .a__h-unset { - height: unset; - } - - .a__w-auto { - width: auto; - } - - .a__h-auto { - height: auto; - } - - .a__w-100 { - width: 100%; - } - - .a__h-100 { - height: 100%; - } - - .a__w-0 { - width: 0; - } - - .a__h-0 { - height: 0; - } - - .a__my-auto, .a__mt-auto { - margin-top: auto; - } - - .a__mx-auto, .a__mr-auto { - margin-right: auto; - } - - .a__my-auto, .a__mb-auto { - margin-bottom: auto; - } - - .a__mx-auto, .a__ml-auto { - margin-left: auto; - } - - .a__my-0, .a__mt-0 { - margin-top: 0; - } - - .a__mx-0, .a__mr-0 { - margin-right: 0; - } - - .a__my-0, .a__mb-0 { - margin-bottom: 0; - } - - .a__mx-0, .a__ml-0 { - margin-left: 0; - } - - .a__py-0, .a__pt-0 { - padding-top: 0; - } - - .a__px-0, .a__pr-0 { - padding-right: 0; - } - - .a__py-0, .a__pb-0 { - padding-bottom: 0; - } - - .a__px-0, .a__pl-0 { - padding-left: 0; - } -} -@media screen and (min-width: 40em) { - .b__w-unset { - width: unset; - } - - .b__h-unset { - height: unset; - } - - .b__w-auto { - width: auto; - } - - .b__h-auto { - height: auto; - } - - .b__w-100 { - width: 100%; - } - - .b__h-100 { - height: 100%; - } - - .b__w-0 { - width: 0; - } - - .b__h-0 { - height: 0; - } - - .b__my-auto, .b__mt-auto { - margin-top: auto; - } - - .b__mx-auto, .b__mr-auto { - margin-right: auto; - } - - .b__my-auto, .b__mb-auto { - margin-bottom: auto; - } - - .b__mx-auto, .b__ml-auto { - margin-left: auto; - } - - .b__my-0, .b__mt-0 { - margin-top: 0; - } - - .b__mx-0, .b__mr-0 { - margin-right: 0; - } - - .b__my-0, .b__mb-0 { - margin-bottom: 0; - } - - .b__mx-0, .b__ml-0 { - margin-left: 0; - } - - .b__py-0, .b__pt-0 { - padding-top: 0; - } - - .b__px-0, .b__pr-0 { - padding-right: 0; - } - - .b__py-0, .b__pb-0 { - padding-bottom: 0; - } - - .b__px-0, .b__pl-0 { - padding-left: 0; - } -} -@media screen and (min-width: 60em) { - .c__w-unset { - width: unset; - } - - .c__h-unset { - height: unset; - } - - .c__w-auto { - width: auto; - } - - .c__h-auto { - height: auto; - } - - .c__w-100 { - width: 100%; - } - - .c__h-100 { - height: 100%; - } - - .c__w-0 { - width: 0; - } - - .c__h-0 { - height: 0; - } - - .c__my-auto, .c__mt-auto { - margin-top: auto; - } - - .c__mx-auto, .c__mr-auto { - margin-right: auto; - } - - .c__my-auto, .c__mb-auto { - margin-bottom: auto; - } - - .c__mx-auto, .c__ml-auto { - margin-left: auto; - } - - .c__my-0, .c__mt-0 { - margin-top: 0; - } - - .c__mx-0, .c__mr-0 { - margin-right: 0; - } - - .c__my-0, .c__mb-0 { - margin-bottom: 0; - } - - .c__mx-0, .c__ml-0 { - margin-left: 0; - } - - .c__py-0, .c__pt-0 { - padding-top: 0; - } - - .c__px-0, .c__pr-0 { - padding-right: 0; - } - - .c__py-0, .c__pb-0 { - padding-bottom: 0; - } - - .c__px-0, .c__pl-0 { - padding-left: 0; - } -} -[class^=mt-], [class*=" mt-"], [class^=my-], [class*=" my-"] { - margin-top: var(--mt); -} - -[class^=mr-], [class*=" mr-"], [class^=mx-], [class*=" mx-"] { - margin-right: var(--mr); -} - -[class^=mb-], [class*=" mb-"], [class^=my-], [class*=" my-"] { - margin-bottom: var(--mb); -} - -[class^=ml-], [class*=" ml-"], [class^=mx-], [class*=" mx-"] { - margin-left: var(--ml); -} - -[class^=mt-neg-], [class*=" mt-neg-"], [class^=my-neg-], [class*=" my-neg-"] { - margin-top: calc(var(--mt) * -1); -} - -[class^=mr-neg-], [class*=" mr-neg-"], [class^=mx-neg-], [class*=" mx-neg-"] { - margin-right: calc(var(--mr) * -1); -} - -[class^=mb-neg-], [class*=" mb-neg-"], [class^=my-neg-], [class*=" my-neg-"] { - margin-bottom: calc(var(--mb) * -1); -} - -[class^=ml-neg-], [class*=" ml-neg-"], [class^=mx-neg-], [class*=" mx-neg-"] { - margin-left: calc(var(--ml) * -1); -} - -[class^=pt-], [class*=" pt-"], [class^=py-], [class*=" py-"] { - padding-top: var(--pt); -} - -[class^=pr-], [class*=" pr-"], [class^=px-], [class*=" px-"] { - padding-right: var(--pr); -} - -[class^=pb-], [class*=" pb-"], [class^=py-], [class*=" py-"] { - padding-bottom: var(--pb); -} - -[class^=pl-], [class*=" pl-"], [class^=px-], [class*=" px-"] { - padding-left: var(--pl); -} - -.my-neg-s, .mt-neg-s, -.my-s, .mt-s { - --mt: var(--inner-y-s); -} - -.my-neg-s, .mb-neg-s, -.my-s, .mb-s { - --mb: var(--inner-y-s); -} - -.py-s, .pt-s { - --pt: var(--inner-y-s); -} - -.py-s, .pb-s { - --pb: var(--inner-y-s); -} - -.my-neg-m, .mt-neg-m, -.my-m, .mt-m { - --mt: var(--inner-y-m); -} - -.my-neg-m, .mb-neg-m, -.my-m, .mb-m { - --mb: var(--inner-y-m); -} - -.py-m, .pt-m { - --pt: var(--inner-y-m); -} - -.py-m, .pb-m { - --pb: var(--inner-y-m); -} - -.my-neg-l, .mt-neg-l, -.my-l, .mt-l { - --mt: var(--inner-y-l); -} - -.my-neg-l, .mb-neg-l, -.my-l, .mb-l { - --mb: var(--inner-y-l); -} - -.py-l, .pt-l { - --pt: var(--inner-y-l); -} - -.py-l, .pb-l { - --pb: var(--inner-y-l); -} - -.mx-neg-s, .mr-neg-s, -.mx-s, .mr-s { - --mr: var(--inner-x-s); -} - -.mx-neg-s, .ml-neg-s, -.mx-s, .ml-s { - --ml: var(--inner-x-s); -} - -.px-s, .pr-s { - --pr: var(--inner-x-s); -} - -.px-s, .pl-s { - --pl: var(--inner-x-s); -} - -.mx-neg-m, .mr-neg-m, -.mx-m, .mr-m { - --mr: var(--inner-x-m); -} - -.mx-neg-m, .ml-neg-m, -.mx-m, .ml-m { - --ml: var(--inner-x-m); -} - -.px-m, .pr-m { - --pr: var(--inner-x-m); -} - -.px-m, .pl-m { - --pl: var(--inner-x-m); -} - -.mx-neg-l, .mr-neg-l, -.mx-l, .mr-l { - --mr: var(--inner-x-l); -} - -.mx-neg-l, .ml-neg-l, -.mx-l, .ml-l { - --ml: var(--inner-x-l); -} - -.px-l, .pr-l { - --pr: var(--inner-x-l); -} - -.px-l, .pl-l { - --pl: var(--inner-x-l); -} - -@media screen and (min-width: 30em) { - [class^=a__mt-], [class*=" a__mt-"], [class^=a__my-], [class*=" a__my-"] { - margin-top: var(--mt); - } - - [class^=a__mr-], [class*=" a__mr-"], [class^=a__mx-], [class*=" a__mx-"] { - margin-right: var(--mr); - } - - [class^=a__mb-], [class*=" a__mb-"], [class^=a__my-], [class*=" a__my-"] { - margin-bottom: var(--mb); - } - - [class^=a__ml-], [class*=" a__ml-"], [class^=a__mx-], [class*=" a__mx-"] { - margin-left: var(--ml); - } - - [class^=a__mt-neg-], [class*=" a__mt-neg-"], [class^=a__my-neg-], [class*=" a__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - - [class^=a__mr-neg-], [class*=" a__mr-neg-"], [class^=a__mx-neg-], [class*=" a__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - - [class^=a__mb-neg-], [class*=" a__mb-neg-"], [class^=a__my-neg-], [class*=" a__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - - [class^=a__ml-neg-], [class*=" a__ml-neg-"], [class^=a__mx-neg-], [class*=" a__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - - [class^=a__pt-], [class*=" a__pt-"], [class^=a__py-], [class*=" a__py-"] { - padding-top: var(--pt); - } - - [class^=a__pr-], [class*=" a__pr-"], [class^=a__px-], [class*=" a__px-"] { - padding-right: var(--pr); - } - - [class^=a__pb-], [class*=" a__pb-"], [class^=a__py-], [class*=" a__py-"] { - padding-bottom: var(--pb); - } - - [class^=a__pl-], [class*=" a__pl-"], [class^=a__px-], [class*=" a__px-"] { - padding-left: var(--pl); - } - - .a__my-neg-s, .a__mt-neg-s, -.a__my-s, .a__mt-s { - --mt: var(--inner-y-s); - } - - .a__my-neg-s, .a__mb-neg-s, -.a__my-s, .a__mb-s { - --mb: var(--inner-y-s); - } - - .a__py-s, .a__pt-s { - --pt: var(--inner-y-s); - } - - .a__py-s, .a__pb-s { - --pb: var(--inner-y-s); - } - - .a__my-neg-m, .a__mt-neg-m, -.a__my-m, .a__mt-m { - --mt: var(--inner-y-m); - } - - .a__my-neg-m, .a__mb-neg-m, -.a__my-m, .a__mb-m { - --mb: var(--inner-y-m); - } - - .a__py-m, .a__pt-m { - --pt: var(--inner-y-m); - } - - .a__py-m, .a__pb-m { - --pb: var(--inner-y-m); - } - - .a__my-neg-l, .a__mt-neg-l, -.a__my-l, .a__mt-l { - --mt: var(--inner-y-l); - } - - .a__my-neg-l, .a__mb-neg-l, -.a__my-l, .a__mb-l { - --mb: var(--inner-y-l); - } - - .a__py-l, .a__pt-l { - --pt: var(--inner-y-l); - } - - .a__py-l, .a__pb-l { - --pb: var(--inner-y-l); - } - - .a__mx-neg-s, .a__mr-neg-s, -.a__mx-s, .a__mr-s { - --mr: var(--inner-x-s); - } - - .a__mx-neg-s, .a__ml-neg-s, -.a__mx-s, .a__ml-s { - --ml: var(--inner-x-s); - } - - .a__px-s, .a__pr-s { - --pr: var(--inner-x-s); - } - - .a__px-s, .a__pl-s { - --pl: var(--inner-x-s); - } - - .a__mx-neg-m, .a__mr-neg-m, -.a__mx-m, .a__mr-m { - --mr: var(--inner-x-m); - } - - .a__mx-neg-m, .a__ml-neg-m, -.a__mx-m, .a__ml-m { - --ml: var(--inner-x-m); - } - - .a__px-m, .a__pr-m { - --pr: var(--inner-x-m); - } - - .a__px-m, .a__pl-m { - --pl: var(--inner-x-m); - } - - .a__mx-neg-l, .a__mr-neg-l, -.a__mx-l, .a__mr-l { - --mr: var(--inner-x-l); - } - - .a__mx-neg-l, .a__ml-neg-l, -.a__mx-l, .a__ml-l { - --ml: var(--inner-x-l); - } - - .a__px-l, .a__pr-l { - --pr: var(--inner-x-l); - } - - .a__px-l, .a__pl-l { - --pl: var(--inner-x-l); - } -} -@media screen and (min-width: 40em) { - [class^=b__mt-], [class*=" b__mt-"], [class^=b__my-], [class*=" b__my-"] { - margin-top: var(--mt); - } - - [class^=b__mr-], [class*=" b__mr-"], [class^=b__mx-], [class*=" b__mx-"] { - margin-right: var(--mr); - } - - [class^=b__mb-], [class*=" b__mb-"], [class^=b__my-], [class*=" b__my-"] { - margin-bottom: var(--mb); - } - - [class^=b__ml-], [class*=" b__ml-"], [class^=b__mx-], [class*=" b__mx-"] { - margin-left: var(--ml); - } - - [class^=b__mt-neg-], [class*=" b__mt-neg-"], [class^=b__my-neg-], [class*=" b__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - - [class^=b__mr-neg-], [class*=" b__mr-neg-"], [class^=b__mx-neg-], [class*=" b__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - - [class^=b__mb-neg-], [class*=" b__mb-neg-"], [class^=b__my-neg-], [class*=" b__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - - [class^=b__ml-neg-], [class*=" b__ml-neg-"], [class^=b__mx-neg-], [class*=" b__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - - [class^=b__pt-], [class*=" b__pt-"], [class^=b__py-], [class*=" b__py-"] { - padding-top: var(--pt); - } - - [class^=b__pr-], [class*=" b__pr-"], [class^=b__px-], [class*=" b__px-"] { - padding-right: var(--pr); - } - - [class^=b__pb-], [class*=" b__pb-"], [class^=b__py-], [class*=" b__py-"] { - padding-bottom: var(--pb); - } - - [class^=b__pl-], [class*=" b__pl-"], [class^=b__px-], [class*=" b__px-"] { - padding-left: var(--pl); - } - - .b__my-neg-s, .b__mt-neg-s, -.b__my-s, .b__mt-s { - --mt: var(--inner-y-s); - } - - .b__my-neg-s, .b__mb-neg-s, -.b__my-s, .b__mb-s { - --mb: var(--inner-y-s); - } - - .b__py-s, .b__pt-s { - --pt: var(--inner-y-s); - } - - .b__py-s, .b__pb-s { - --pb: var(--inner-y-s); - } - - .b__my-neg-m, .b__mt-neg-m, -.b__my-m, .b__mt-m { - --mt: var(--inner-y-m); - } - - .b__my-neg-m, .b__mb-neg-m, -.b__my-m, .b__mb-m { - --mb: var(--inner-y-m); - } - - .b__py-m, .b__pt-m { - --pt: var(--inner-y-m); - } - - .b__py-m, .b__pb-m { - --pb: var(--inner-y-m); - } - - .b__my-neg-l, .b__mt-neg-l, -.b__my-l, .b__mt-l { - --mt: var(--inner-y-l); - } - - .b__my-neg-l, .b__mb-neg-l, -.b__my-l, .b__mb-l { - --mb: var(--inner-y-l); - } - - .b__py-l, .b__pt-l { - --pt: var(--inner-y-l); - } - - .b__py-l, .b__pb-l { - --pb: var(--inner-y-l); - } - - .b__mx-neg-s, .b__mr-neg-s, -.b__mx-s, .b__mr-s { - --mr: var(--inner-x-s); - } - - .b__mx-neg-s, .b__ml-neg-s, -.b__mx-s, .b__ml-s { - --ml: var(--inner-x-s); - } - - .b__px-s, .b__pr-s { - --pr: var(--inner-x-s); - } - - .b__px-s, .b__pl-s { - --pl: var(--inner-x-s); - } - - .b__mx-neg-m, .b__mr-neg-m, -.b__mx-m, .b__mr-m { - --mr: var(--inner-x-m); - } - - .b__mx-neg-m, .b__ml-neg-m, -.b__mx-m, .b__ml-m { - --ml: var(--inner-x-m); - } - - .b__px-m, .b__pr-m { - --pr: var(--inner-x-m); - } - - .b__px-m, .b__pl-m { - --pl: var(--inner-x-m); - } - - .b__mx-neg-l, .b__mr-neg-l, -.b__mx-l, .b__mr-l { - --mr: var(--inner-x-l); - } - - .b__mx-neg-l, .b__ml-neg-l, -.b__mx-l, .b__ml-l { - --ml: var(--inner-x-l); - } - - .b__px-l, .b__pr-l { - --pr: var(--inner-x-l); - } - - .b__px-l, .b__pl-l { - --pl: var(--inner-x-l); - } -} -@media screen and (min-width: 60em) { - [class^=c__mt-], [class*=" c__mt-"], [class^=c__my-], [class*=" c__my-"] { - margin-top: var(--mt); - } - - [class^=c__mr-], [class*=" c__mr-"], [class^=c__mx-], [class*=" c__mx-"] { - margin-right: var(--mr); - } - - [class^=c__mb-], [class*=" c__mb-"], [class^=c__my-], [class*=" c__my-"] { - margin-bottom: var(--mb); - } - - [class^=c__ml-], [class*=" c__ml-"], [class^=c__mx-], [class*=" c__mx-"] { - margin-left: var(--ml); - } - - [class^=c__mt-neg-], [class*=" c__mt-neg-"], [class^=c__my-neg-], [class*=" c__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - - [class^=c__mr-neg-], [class*=" c__mr-neg-"], [class^=c__mx-neg-], [class*=" c__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - - [class^=c__mb-neg-], [class*=" c__mb-neg-"], [class^=c__my-neg-], [class*=" c__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - - [class^=c__ml-neg-], [class*=" c__ml-neg-"], [class^=c__mx-neg-], [class*=" c__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - - [class^=c__pt-], [class*=" c__pt-"], [class^=c__py-], [class*=" c__py-"] { - padding-top: var(--pt); - } - - [class^=c__pr-], [class*=" c__pr-"], [class^=c__px-], [class*=" c__px-"] { - padding-right: var(--pr); - } - - [class^=c__pb-], [class*=" c__pb-"], [class^=c__py-], [class*=" c__py-"] { - padding-bottom: var(--pb); - } - - [class^=c__pl-], [class*=" c__pl-"], [class^=c__px-], [class*=" c__px-"] { - padding-left: var(--pl); - } - - .c__my-neg-s, .c__mt-neg-s, -.c__my-s, .c__mt-s { - --mt: var(--inner-y-s); - } - - .c__my-neg-s, .c__mb-neg-s, -.c__my-s, .c__mb-s { - --mb: var(--inner-y-s); - } - - .c__py-s, .c__pt-s { - --pt: var(--inner-y-s); - } - - .c__py-s, .c__pb-s { - --pb: var(--inner-y-s); - } - - .c__my-neg-m, .c__mt-neg-m, -.c__my-m, .c__mt-m { - --mt: var(--inner-y-m); - } - - .c__my-neg-m, .c__mb-neg-m, -.c__my-m, .c__mb-m { - --mb: var(--inner-y-m); - } - - .c__py-m, .c__pt-m { - --pt: var(--inner-y-m); - } - - .c__py-m, .c__pb-m { - --pb: var(--inner-y-m); - } - - .c__my-neg-l, .c__mt-neg-l, -.c__my-l, .c__mt-l { - --mt: var(--inner-y-l); - } - - .c__my-neg-l, .c__mb-neg-l, -.c__my-l, .c__mb-l { - --mb: var(--inner-y-l); - } - - .c__py-l, .c__pt-l { - --pt: var(--inner-y-l); - } - - .c__py-l, .c__pb-l { - --pb: var(--inner-y-l); - } - - .c__mx-neg-s, .c__mr-neg-s, -.c__mx-s, .c__mr-s { - --mr: var(--inner-x-s); - } - - .c__mx-neg-s, .c__ml-neg-s, -.c__mx-s, .c__ml-s { - --ml: var(--inner-x-s); - } - - .c__px-s, .c__pr-s { - --pr: var(--inner-x-s); - } - - .c__px-s, .c__pl-s { - --pl: var(--inner-x-s); - } - - .c__mx-neg-m, .c__mr-neg-m, -.c__mx-m, .c__mr-m { - --mr: var(--inner-x-m); - } - - .c__mx-neg-m, .c__ml-neg-m, -.c__mx-m, .c__ml-m { - --ml: var(--inner-x-m); - } - - .c__px-m, .c__pr-m { - --pr: var(--inner-x-m); - } - - .c__px-m, .c__pl-m { - --pl: var(--inner-x-m); - } - - .c__mx-neg-l, .c__mr-neg-l, -.c__mx-l, .c__mr-l { - --mr: var(--inner-x-l); - } - - .c__mx-neg-l, .c__ml-neg-l, -.c__mx-l, .c__ml-l { - --ml: var(--inner-x-l); - } - - .c__px-l, .c__pr-l { - --pr: var(--inner-x-l); - } - - .c__px-l, .c__pl-l { - --pl: var(--inner-x-l); - } -} \ No newline at end of file diff --git a/tests/renders/modern-atomic.libsass.css b/tests/renders/modern-atomic.libsass.css deleted file mode 100644 index ac654d7..0000000 --- a/tests/renders/modern-atomic.libsass.css +++ /dev/null @@ -1,793 +0,0 @@ -.w-unset { - width: unset; -} - -.h-unset { - height: unset; -} - -.w-auto { - width: auto; -} - -.h-auto { - height: auto; -} - -.w-100 { - width: 100%; -} - -.h-100 { - height: 100%; -} - -.w-0 { - width: 0; -} - -.h-0 { - height: 0; -} - -.my-auto, .mt-auto { - margin-top: auto; -} - -.mx-auto, .mr-auto { - margin-right: auto; -} - -.my-auto, .mb-auto { - margin-bottom: auto; -} - -.mx-auto, .ml-auto { - margin-left: auto; -} - -.my-0, .mt-0 { - margin-top: 0; -} - -.mx-0, .mr-0 { - margin-right: 0; -} - -.my-0, .mb-0 { - margin-bottom: 0; -} - -.mx-0, .ml-0 { - margin-left: 0; -} - -.py-0, .pt-0 { - padding-top: 0; -} - -.px-0, .pr-0 { - padding-right: 0; -} - -.py-0, .pb-0 { - padding-bottom: 0; -} - -.px-0, .pl-0 { - padding-left: 0; -} - -@media screen and (min-width: 30em) { - .a__w-unset { - width: unset; - } - .a__h-unset { - height: unset; - } - .a__w-auto { - width: auto; - } - .a__h-auto { - height: auto; - } - .a__w-100 { - width: 100%; - } - .a__h-100 { - height: 100%; - } - .a__w-0 { - width: 0; - } - .a__h-0 { - height: 0; - } - .a__my-auto, .a__mt-auto { - margin-top: auto; - } - .a__mx-auto, .a__mr-auto { - margin-right: auto; - } - .a__my-auto, .a__mb-auto { - margin-bottom: auto; - } - .a__mx-auto, .a__ml-auto { - margin-left: auto; - } - .a__my-0, .a__mt-0 { - margin-top: 0; - } - .a__mx-0, .a__mr-0 { - margin-right: 0; - } - .a__my-0, .a__mb-0 { - margin-bottom: 0; - } - .a__mx-0, .a__ml-0 { - margin-left: 0; - } - .a__py-0, .a__pt-0 { - padding-top: 0; - } - .a__px-0, .a__pr-0 { - padding-right: 0; - } - .a__py-0, .a__pb-0 { - padding-bottom: 0; - } - .a__px-0, .a__pl-0 { - padding-left: 0; - } -} - -@media screen and (min-width: 40em) { - .b__w-unset { - width: unset; - } - .b__h-unset { - height: unset; - } - .b__w-auto { - width: auto; - } - .b__h-auto { - height: auto; - } - .b__w-100 { - width: 100%; - } - .b__h-100 { - height: 100%; - } - .b__w-0 { - width: 0; - } - .b__h-0 { - height: 0; - } - .b__my-auto, .b__mt-auto { - margin-top: auto; - } - .b__mx-auto, .b__mr-auto { - margin-right: auto; - } - .b__my-auto, .b__mb-auto { - margin-bottom: auto; - } - .b__mx-auto, .b__ml-auto { - margin-left: auto; - } - .b__my-0, .b__mt-0 { - margin-top: 0; - } - .b__mx-0, .b__mr-0 { - margin-right: 0; - } - .b__my-0, .b__mb-0 { - margin-bottom: 0; - } - .b__mx-0, .b__ml-0 { - margin-left: 0; - } - .b__py-0, .b__pt-0 { - padding-top: 0; - } - .b__px-0, .b__pr-0 { - padding-right: 0; - } - .b__py-0, .b__pb-0 { - padding-bottom: 0; - } - .b__px-0, .b__pl-0 { - padding-left: 0; - } -} - -@media screen and (min-width: 60em) { - .c__w-unset { - width: unset; - } - .c__h-unset { - height: unset; - } - .c__w-auto { - width: auto; - } - .c__h-auto { - height: auto; - } - .c__w-100 { - width: 100%; - } - .c__h-100 { - height: 100%; - } - .c__w-0 { - width: 0; - } - .c__h-0 { - height: 0; - } - .c__my-auto, .c__mt-auto { - margin-top: auto; - } - .c__mx-auto, .c__mr-auto { - margin-right: auto; - } - .c__my-auto, .c__mb-auto { - margin-bottom: auto; - } - .c__mx-auto, .c__ml-auto { - margin-left: auto; - } - .c__my-0, .c__mt-0 { - margin-top: 0; - } - .c__mx-0, .c__mr-0 { - margin-right: 0; - } - .c__my-0, .c__mb-0 { - margin-bottom: 0; - } - .c__mx-0, .c__ml-0 { - margin-left: 0; - } - .c__py-0, .c__pt-0 { - padding-top: 0; - } - .c__px-0, .c__pr-0 { - padding-right: 0; - } - .c__py-0, .c__pb-0 { - padding-bottom: 0; - } - .c__px-0, .c__pl-0 { - padding-left: 0; - } -} - -[class^="mt-"], [class*=" mt-"], [class^="my-"], [class*=" my-"] { - margin-top: var(--mt); -} - -[class^="mr-"], [class*=" mr-"], [class^="mx-"], [class*=" mx-"] { - margin-right: var(--mr); -} - -[class^="mb-"], [class*=" mb-"], [class^="my-"], [class*=" my-"] { - margin-bottom: var(--mb); -} - -[class^="ml-"], [class*=" ml-"], [class^="mx-"], [class*=" mx-"] { - margin-left: var(--ml); -} - -[class^="mt-neg-"], [class*=" mt-neg-"], [class^="my-neg-"], [class*=" my-neg-"] { - margin-top: calc(var(--mt) * -1); -} - -[class^="mr-neg-"], [class*=" mr-neg-"], [class^="mx-neg-"], [class*=" mx-neg-"] { - margin-right: calc(var(--mr) * -1); -} - -[class^="mb-neg-"], [class*=" mb-neg-"], [class^="my-neg-"], [class*=" my-neg-"] { - margin-bottom: calc(var(--mb) * -1); -} - -[class^="ml-neg-"], [class*=" ml-neg-"], [class^="mx-neg-"], [class*=" mx-neg-"] { - margin-left: calc(var(--ml) * -1); -} - -[class^="pt-"], [class*=" pt-"], [class^="py-"], [class*=" py-"] { - padding-top: var(--pt); -} - -[class^="pr-"], [class*=" pr-"], [class^="px-"], [class*=" px-"] { - padding-right: var(--pr); -} - -[class^="pb-"], [class*=" pb-"], [class^="py-"], [class*=" py-"] { - padding-bottom: var(--pb); -} - -[class^="pl-"], [class*=" pl-"], [class^="px-"], [class*=" px-"] { - padding-left: var(--pl); -} - -.my-neg-s, .mt-neg-s, -.my-s, .mt-s { - --mt: var(--inner-y-s); -} - -.my-neg-s, .mb-neg-s, -.my-s, .mb-s { - --mb: var(--inner-y-s); -} - -.py-s, .pt-s { - --pt: var(--inner-y-s); -} - -.py-s, .pb-s { - --pb: var(--inner-y-s); -} - -.my-neg-m, .mt-neg-m, -.my-m, .mt-m { - --mt: var(--inner-y-m); -} - -.my-neg-m, .mb-neg-m, -.my-m, .mb-m { - --mb: var(--inner-y-m); -} - -.py-m, .pt-m { - --pt: var(--inner-y-m); -} - -.py-m, .pb-m { - --pb: var(--inner-y-m); -} - -.my-neg-l, .mt-neg-l, -.my-l, .mt-l { - --mt: var(--inner-y-l); -} - -.my-neg-l, .mb-neg-l, -.my-l, .mb-l { - --mb: var(--inner-y-l); -} - -.py-l, .pt-l { - --pt: var(--inner-y-l); -} - -.py-l, .pb-l { - --pb: var(--inner-y-l); -} - -.mx-neg-s, .mr-neg-s, -.mx-s, .mr-s { - --mr: var(--inner-x-s); -} - -.mx-neg-s, .ml-neg-s, -.mx-s, .ml-s { - --ml: var(--inner-x-s); -} - -.px-s, .pr-s { - --pr: var(--inner-x-s); -} - -.px-s, .pl-s { - --pl: var(--inner-x-s); -} - -.mx-neg-m, .mr-neg-m, -.mx-m, .mr-m { - --mr: var(--inner-x-m); -} - -.mx-neg-m, .ml-neg-m, -.mx-m, .ml-m { - --ml: var(--inner-x-m); -} - -.px-m, .pr-m { - --pr: var(--inner-x-m); -} - -.px-m, .pl-m { - --pl: var(--inner-x-m); -} - -.mx-neg-l, .mr-neg-l, -.mx-l, .mr-l { - --mr: var(--inner-x-l); -} - -.mx-neg-l, .ml-neg-l, -.mx-l, .ml-l { - --ml: var(--inner-x-l); -} - -.px-l, .pr-l { - --pr: var(--inner-x-l); -} - -.px-l, .pl-l { - --pl: var(--inner-x-l); -} - -@media screen and (min-width: 30em) { - [class^="a__mt-"], [class*=" a__mt-"], [class^="a__my-"], [class*=" a__my-"] { - margin-top: var(--mt); - } - [class^="a__mr-"], [class*=" a__mr-"], [class^="a__mx-"], [class*=" a__mx-"] { - margin-right: var(--mr); - } - [class^="a__mb-"], [class*=" a__mb-"], [class^="a__my-"], [class*=" a__my-"] { - margin-bottom: var(--mb); - } - [class^="a__ml-"], [class*=" a__ml-"], [class^="a__mx-"], [class*=" a__mx-"] { - margin-left: var(--ml); - } - [class^="a__mt-neg-"], [class*=" a__mt-neg-"], [class^="a__my-neg-"], [class*=" a__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - [class^="a__mr-neg-"], [class*=" a__mr-neg-"], [class^="a__mx-neg-"], [class*=" a__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - [class^="a__mb-neg-"], [class*=" a__mb-neg-"], [class^="a__my-neg-"], [class*=" a__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - [class^="a__ml-neg-"], [class*=" a__ml-neg-"], [class^="a__mx-neg-"], [class*=" a__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - [class^="a__pt-"], [class*=" a__pt-"], [class^="a__py-"], [class*=" a__py-"] { - padding-top: var(--pt); - } - [class^="a__pr-"], [class*=" a__pr-"], [class^="a__px-"], [class*=" a__px-"] { - padding-right: var(--pr); - } - [class^="a__pb-"], [class*=" a__pb-"], [class^="a__py-"], [class*=" a__py-"] { - padding-bottom: var(--pb); - } - [class^="a__pl-"], [class*=" a__pl-"], [class^="a__px-"], [class*=" a__px-"] { - padding-left: var(--pl); - } - .a__my-neg-s, .a__mt-neg-s, - .a__my-s, .a__mt-s { - --mt: var(--inner-y-s); - } - .a__my-neg-s, .a__mb-neg-s, - .a__my-s, .a__mb-s { - --mb: var(--inner-y-s); - } - .a__py-s, .a__pt-s { - --pt: var(--inner-y-s); - } - .a__py-s, .a__pb-s { - --pb: var(--inner-y-s); - } - .a__my-neg-m, .a__mt-neg-m, - .a__my-m, .a__mt-m { - --mt: var(--inner-y-m); - } - .a__my-neg-m, .a__mb-neg-m, - .a__my-m, .a__mb-m { - --mb: var(--inner-y-m); - } - .a__py-m, .a__pt-m { - --pt: var(--inner-y-m); - } - .a__py-m, .a__pb-m { - --pb: var(--inner-y-m); - } - .a__my-neg-l, .a__mt-neg-l, - .a__my-l, .a__mt-l { - --mt: var(--inner-y-l); - } - .a__my-neg-l, .a__mb-neg-l, - .a__my-l, .a__mb-l { - --mb: var(--inner-y-l); - } - .a__py-l, .a__pt-l { - --pt: var(--inner-y-l); - } - .a__py-l, .a__pb-l { - --pb: var(--inner-y-l); - } - .a__mx-neg-s, .a__mr-neg-s, - .a__mx-s, .a__mr-s { - --mr: var(--inner-x-s); - } - .a__mx-neg-s, .a__ml-neg-s, - .a__mx-s, .a__ml-s { - --ml: var(--inner-x-s); - } - .a__px-s, .a__pr-s { - --pr: var(--inner-x-s); - } - .a__px-s, .a__pl-s { - --pl: var(--inner-x-s); - } - .a__mx-neg-m, .a__mr-neg-m, - .a__mx-m, .a__mr-m { - --mr: var(--inner-x-m); - } - .a__mx-neg-m, .a__ml-neg-m, - .a__mx-m, .a__ml-m { - --ml: var(--inner-x-m); - } - .a__px-m, .a__pr-m { - --pr: var(--inner-x-m); - } - .a__px-m, .a__pl-m { - --pl: var(--inner-x-m); - } - .a__mx-neg-l, .a__mr-neg-l, - .a__mx-l, .a__mr-l { - --mr: var(--inner-x-l); - } - .a__mx-neg-l, .a__ml-neg-l, - .a__mx-l, .a__ml-l { - --ml: var(--inner-x-l); - } - .a__px-l, .a__pr-l { - --pr: var(--inner-x-l); - } - .a__px-l, .a__pl-l { - --pl: var(--inner-x-l); - } -} - -@media screen and (min-width: 40em) { - [class^="b__mt-"], [class*=" b__mt-"], [class^="b__my-"], [class*=" b__my-"] { - margin-top: var(--mt); - } - [class^="b__mr-"], [class*=" b__mr-"], [class^="b__mx-"], [class*=" b__mx-"] { - margin-right: var(--mr); - } - [class^="b__mb-"], [class*=" b__mb-"], [class^="b__my-"], [class*=" b__my-"] { - margin-bottom: var(--mb); - } - [class^="b__ml-"], [class*=" b__ml-"], [class^="b__mx-"], [class*=" b__mx-"] { - margin-left: var(--ml); - } - [class^="b__mt-neg-"], [class*=" b__mt-neg-"], [class^="b__my-neg-"], [class*=" b__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - [class^="b__mr-neg-"], [class*=" b__mr-neg-"], [class^="b__mx-neg-"], [class*=" b__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - [class^="b__mb-neg-"], [class*=" b__mb-neg-"], [class^="b__my-neg-"], [class*=" b__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - [class^="b__ml-neg-"], [class*=" b__ml-neg-"], [class^="b__mx-neg-"], [class*=" b__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - [class^="b__pt-"], [class*=" b__pt-"], [class^="b__py-"], [class*=" b__py-"] { - padding-top: var(--pt); - } - [class^="b__pr-"], [class*=" b__pr-"], [class^="b__px-"], [class*=" b__px-"] { - padding-right: var(--pr); - } - [class^="b__pb-"], [class*=" b__pb-"], [class^="b__py-"], [class*=" b__py-"] { - padding-bottom: var(--pb); - } - [class^="b__pl-"], [class*=" b__pl-"], [class^="b__px-"], [class*=" b__px-"] { - padding-left: var(--pl); - } - .b__my-neg-s, .b__mt-neg-s, - .b__my-s, .b__mt-s { - --mt: var(--inner-y-s); - } - .b__my-neg-s, .b__mb-neg-s, - .b__my-s, .b__mb-s { - --mb: var(--inner-y-s); - } - .b__py-s, .b__pt-s { - --pt: var(--inner-y-s); - } - .b__py-s, .b__pb-s { - --pb: var(--inner-y-s); - } - .b__my-neg-m, .b__mt-neg-m, - .b__my-m, .b__mt-m { - --mt: var(--inner-y-m); - } - .b__my-neg-m, .b__mb-neg-m, - .b__my-m, .b__mb-m { - --mb: var(--inner-y-m); - } - .b__py-m, .b__pt-m { - --pt: var(--inner-y-m); - } - .b__py-m, .b__pb-m { - --pb: var(--inner-y-m); - } - .b__my-neg-l, .b__mt-neg-l, - .b__my-l, .b__mt-l { - --mt: var(--inner-y-l); - } - .b__my-neg-l, .b__mb-neg-l, - .b__my-l, .b__mb-l { - --mb: var(--inner-y-l); - } - .b__py-l, .b__pt-l { - --pt: var(--inner-y-l); - } - .b__py-l, .b__pb-l { - --pb: var(--inner-y-l); - } - .b__mx-neg-s, .b__mr-neg-s, - .b__mx-s, .b__mr-s { - --mr: var(--inner-x-s); - } - .b__mx-neg-s, .b__ml-neg-s, - .b__mx-s, .b__ml-s { - --ml: var(--inner-x-s); - } - .b__px-s, .b__pr-s { - --pr: var(--inner-x-s); - } - .b__px-s, .b__pl-s { - --pl: var(--inner-x-s); - } - .b__mx-neg-m, .b__mr-neg-m, - .b__mx-m, .b__mr-m { - --mr: var(--inner-x-m); - } - .b__mx-neg-m, .b__ml-neg-m, - .b__mx-m, .b__ml-m { - --ml: var(--inner-x-m); - } - .b__px-m, .b__pr-m { - --pr: var(--inner-x-m); - } - .b__px-m, .b__pl-m { - --pl: var(--inner-x-m); - } - .b__mx-neg-l, .b__mr-neg-l, - .b__mx-l, .b__mr-l { - --mr: var(--inner-x-l); - } - .b__mx-neg-l, .b__ml-neg-l, - .b__mx-l, .b__ml-l { - --ml: var(--inner-x-l); - } - .b__px-l, .b__pr-l { - --pr: var(--inner-x-l); - } - .b__px-l, .b__pl-l { - --pl: var(--inner-x-l); - } -} - -@media screen and (min-width: 60em) { - [class^="c__mt-"], [class*=" c__mt-"], [class^="c__my-"], [class*=" c__my-"] { - margin-top: var(--mt); - } - [class^="c__mr-"], [class*=" c__mr-"], [class^="c__mx-"], [class*=" c__mx-"] { - margin-right: var(--mr); - } - [class^="c__mb-"], [class*=" c__mb-"], [class^="c__my-"], [class*=" c__my-"] { - margin-bottom: var(--mb); - } - [class^="c__ml-"], [class*=" c__ml-"], [class^="c__mx-"], [class*=" c__mx-"] { - margin-left: var(--ml); - } - [class^="c__mt-neg-"], [class*=" c__mt-neg-"], [class^="c__my-neg-"], [class*=" c__my-neg-"] { - margin-top: calc(var(--mt) * -1); - } - [class^="c__mr-neg-"], [class*=" c__mr-neg-"], [class^="c__mx-neg-"], [class*=" c__mx-neg-"] { - margin-right: calc(var(--mr) * -1); - } - [class^="c__mb-neg-"], [class*=" c__mb-neg-"], [class^="c__my-neg-"], [class*=" c__my-neg-"] { - margin-bottom: calc(var(--mb) * -1); - } - [class^="c__ml-neg-"], [class*=" c__ml-neg-"], [class^="c__mx-neg-"], [class*=" c__mx-neg-"] { - margin-left: calc(var(--ml) * -1); - } - [class^="c__pt-"], [class*=" c__pt-"], [class^="c__py-"], [class*=" c__py-"] { - padding-top: var(--pt); - } - [class^="c__pr-"], [class*=" c__pr-"], [class^="c__px-"], [class*=" c__px-"] { - padding-right: var(--pr); - } - [class^="c__pb-"], [class*=" c__pb-"], [class^="c__py-"], [class*=" c__py-"] { - padding-bottom: var(--pb); - } - [class^="c__pl-"], [class*=" c__pl-"], [class^="c__px-"], [class*=" c__px-"] { - padding-left: var(--pl); - } - .c__my-neg-s, .c__mt-neg-s, - .c__my-s, .c__mt-s { - --mt: var(--inner-y-s); - } - .c__my-neg-s, .c__mb-neg-s, - .c__my-s, .c__mb-s { - --mb: var(--inner-y-s); - } - .c__py-s, .c__pt-s { - --pt: var(--inner-y-s); - } - .c__py-s, .c__pb-s { - --pb: var(--inner-y-s); - } - .c__my-neg-m, .c__mt-neg-m, - .c__my-m, .c__mt-m { - --mt: var(--inner-y-m); - } - .c__my-neg-m, .c__mb-neg-m, - .c__my-m, .c__mb-m { - --mb: var(--inner-y-m); - } - .c__py-m, .c__pt-m { - --pt: var(--inner-y-m); - } - .c__py-m, .c__pb-m { - --pb: var(--inner-y-m); - } - .c__my-neg-l, .c__mt-neg-l, - .c__my-l, .c__mt-l { - --mt: var(--inner-y-l); - } - .c__my-neg-l, .c__mb-neg-l, - .c__my-l, .c__mb-l { - --mb: var(--inner-y-l); - } - .c__py-l, .c__pt-l { - --pt: var(--inner-y-l); - } - .c__py-l, .c__pb-l { - --pb: var(--inner-y-l); - } - .c__mx-neg-s, .c__mr-neg-s, - .c__mx-s, .c__mr-s { - --mr: var(--inner-x-s); - } - .c__mx-neg-s, .c__ml-neg-s, - .c__mx-s, .c__ml-s { - --ml: var(--inner-x-s); - } - .c__px-s, .c__pr-s { - --pr: var(--inner-x-s); - } - .c__px-s, .c__pl-s { - --pl: var(--inner-x-s); - } - .c__mx-neg-m, .c__mr-neg-m, - .c__mx-m, .c__mr-m { - --mr: var(--inner-x-m); - } - .c__mx-neg-m, .c__ml-neg-m, - .c__mx-m, .c__ml-m { - --ml: var(--inner-x-m); - } - .c__px-m, .c__pr-m { - --pr: var(--inner-x-m); - } - .c__px-m, .c__pl-m { - --pl: var(--inner-x-m); - } - .c__mx-neg-l, .c__mr-neg-l, - .c__mx-l, .c__mr-l { - --mr: var(--inner-x-l); - } - .c__mx-neg-l, .c__ml-neg-l, - .c__mx-l, .c__ml-l { - --ml: var(--inner-x-l); - } - .c__px-l, .c__pr-l { - --pr: var(--inner-x-l); - } - .c__px-l, .c__pl-l { - --pl: var(--inner-x-l); - } -} diff --git a/tests/renders/modern-flow.dartsass.css b/tests/renders/modern-flow.dartsass.css deleted file mode 100644 index a824726..0000000 --- a/tests/renders/modern-flow.dartsass.css +++ /dev/null @@ -1,1249 +0,0 @@ -*, *:before, *:after { - --push-l: initial; - --push-r: initial; -} - -:root { - --row-gap: var(--inner-y); - --col-gap: var(--inner-x); - --col-base: var(--grid-cols); - --col-span: var(--col-base); - --row-span: var(--grid-rows, 1); -} - -.flow, [class^=flow-], [class*=" flow-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: calc(100% + var(--col-gap)) !important; - margin-left: calc(var(--col-gap) / -2); - margin-right: calc(var(--col-gap) / -2); - margin-top: calc(var(--row-gap) / -2); - margin-bottom: calc(var(--row-gap) / -2); -} -.flow > *, [class^=flow-] > *, [class*=" flow-"] > * { - flex: 0 0 auto; - width: 100%; - min-width: 0%; - min-height: 1px; - background-clip: content-box; - padding-left: calc(var(--col-gap) / 2) !important; - padding-right: calc(var(--col-gap) / 2) !important; - padding-top: calc(var(--row-gap) / 2) !important; - padding-bottom: calc(var(--row-gap) / 2) !important; -} - -.grid, [class^=grid-], [class*=" grid-"] { - display: grid; - grid-gap: var(--row-gap) var(--col-gap); - grid-template-rows: repeat(var(--row-span), 1fr); - grid-template-columns: repeat(var(--col-span), minmax(0%, 1fr)); -} -.grid > *, [class^=grid-] > *, [class*=" grid-"] > * { - grid-column: span var(--col-span)/span var(--col-span); -} - -.flow-s, .grid-s { - --row-gap: var(--inner-y-s); -} - -.flow-m, .grid-m { - --row-gap: var(--inner-y-m); -} - -.flow-l, .grid-l { - --row-gap: var(--inner-y-l); -} - -.flow-x-s, .grid-x-s { - --col-gap: var(--inner-x-s); -} - -.flow-x-form, .grid-x-form { - --col-gap: var(--inner-x-form); -} - -.flow-0, .grid-0 { - --row-gap: 0; -} - -.flow-x-0, .grid-x-0 { - --col-gap: 0; -} - -.flow-0-0, .grid-0-0 { - --row-gap: 0; - --col-gap: 0; -} - -.span, [class^=span-], [class*=" span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); -} -.flow > .span, .flow > [class^=span-], .flow > [class*=" span-"], [class^=flow-] > .span, [class^=flow-] > [class^=span-], [class^=flow-] > [class*=" span-"], [class*=" flow-"] > .span, [class*=" flow-"] > [class^=span-], [class*=" flow-"] > [class*=" span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); -} - -.grid > .span, .grid > [class^=span-], .grid > [class*=" span-"], [class^=grid-] > .span, [class^=grid-] > [class^=span-], [class^=grid-] > [class*=" span-"], [class*=" grid-"] > .span, [class*=" grid-"] > [class^=span-], [class*=" grid-"] > [class*=" span-"] { - width: unset; -} - -[class^=pull-], [class*=" pull-"], -[class^=push-], [class*=" push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); -} -.flow > [class^=pull-], .flow > [class*=" pull-"], .flow > [class^=push-], .flow > [class*=" push-"], [class^=flow-] > [class^=pull-], [class^=flow-] > [class*=" pull-"], [class^=flow-] > [class^=push-], [class^=flow-] > [class*=" push-"], [class*=" flow-"] > [class^=pull-], [class*=" flow-"] > [class*=" pull-"], [class*=" flow-"] > [class^=push-], [class*=" flow-"] > [class*=" push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); -} - -[class^=pull-r-], [class*=" pull-r-"], -[class^=push-r-], [class*=" push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); -} -.flow > [class^=pull-r-], .flow > [class*=" pull-r-"], .flow > [class^=push-r-], .flow > [class*=" push-r-"], [class^=flow-] > [class^=pull-r-], [class^=flow-] > [class*=" pull-r-"], [class^=flow-] > [class^=push-r-], [class^=flow-] > [class*=" push-r-"], [class*=" flow-"] > [class^=pull-r-], [class*=" flow-"] > [class*=" pull-r-"], [class*=" flow-"] > [class^=push-r-], [class*=" flow-"] > [class*=" push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); -} - -.span-auto, [class^=span-auto-], [class*=" span-auto-"] { - flex: 1 1 0%; - --col-span: 0; -} - -.span-all, [class^=span-all-], [class*=" span-all-"] { - --col-span: var(--col-base); -} - -[class^=span-y-], [class*=" span-y-"] { - grid-row-end: span var(--row-span); -} - -.span-1 > *, -.cols-1 > * { - --col-base: 1; -} - -.span-1 { - --col-span: 1; -} - -.span-y-1 { - --row-span: 1; -} - -.cols-1.grid, .cols-1[class^=grid-], .cols-1[class*=" grid-"] { - --col-span: 1; -} - -.rows-1.grid, .rows-1[class^=grid-], .rows-1[class*=" grid-"] { - --row-span: 1; -} - -.span-2 > *, -.cols-2 > * { - --col-base: 2; -} - -.span-2 { - --col-span: 2; -} - -.span-y-2 { - --row-span: 2; -} - -.cols-2.grid, .cols-2[class^=grid-], .cols-2[class*=" grid-"] { - --col-span: 2; -} - -.rows-2.grid, .rows-2[class^=grid-], .rows-2[class*=" grid-"] { - --row-span: 2; -} - -.span-3 > *, -.cols-3 > * { - --col-base: 3; -} - -.span-3 { - --col-span: 3; -} - -.span-y-3 { - --row-span: 3; -} - -.cols-3.grid, .cols-3[class^=grid-], .cols-3[class*=" grid-"] { - --col-span: 3; -} - -.rows-3.grid, .rows-3[class^=grid-], .rows-3[class*=" grid-"] { - --row-span: 3; -} - -.span-4 > *, -.cols-4 > * { - --col-base: 4; -} - -.span-4 { - --col-span: 4; -} - -.span-y-4 { - --row-span: 4; -} - -.cols-4.grid, .cols-4[class^=grid-], .cols-4[class*=" grid-"] { - --col-span: 4; -} - -.rows-4.grid, .rows-4[class^=grid-], .rows-4[class*=" grid-"] { - --row-span: 4; -} - -.span-5 > *, -.cols-5 > * { - --col-base: 5; -} - -.span-5 { - --col-span: 5; -} - -.span-y-5 { - --row-span: 5; -} - -.cols-5.grid, .cols-5[class^=grid-], .cols-5[class*=" grid-"] { - --col-span: 5; -} - -.rows-5.grid, .rows-5[class^=grid-], .rows-5[class*=" grid-"] { - --row-span: 5; -} - -.span-6 > *, -.cols-6 > * { - --col-base: 6; -} - -.span-6 { - --col-span: 6; -} - -.span-y-6 { - --row-span: 6; -} - -.cols-6.grid, .cols-6[class^=grid-], .cols-6[class*=" grid-"] { - --col-span: 6; -} - -.rows-6.grid, .rows-6[class^=grid-], .rows-6[class*=" grid-"] { - --row-span: 6; -} - -.span-7 > *, -.cols-7 > * { - --col-base: 7; -} - -.span-7 { - --col-span: 7; -} - -.span-y-7 { - --row-span: 7; -} - -.cols-7.grid, .cols-7[class^=grid-], .cols-7[class*=" grid-"] { - --col-span: 7; -} - -.rows-7.grid, .rows-7[class^=grid-], .rows-7[class*=" grid-"] { - --row-span: 7; -} - -.span-8 > *, -.cols-8 > * { - --col-base: 8; -} - -.span-8 { - --col-span: 8; -} - -.span-y-8 { - --row-span: 8; -} - -.cols-8.grid, .cols-8[class^=grid-], .cols-8[class*=" grid-"] { - --col-span: 8; -} - -.rows-8.grid, .rows-8[class^=grid-], .rows-8[class*=" grid-"] { - --row-span: 8; -} - -.span-9 > *, -.cols-9 > * { - --col-base: 9; -} - -.span-9 { - --col-span: 9; -} - -.span-y-9 { - --row-span: 9; -} - -.cols-9.grid, .cols-9[class^=grid-], .cols-9[class*=" grid-"] { - --col-span: 9; -} - -.rows-9.grid, .rows-9[class^=grid-], .rows-9[class*=" grid-"] { - --row-span: 9; -} - -.span-10 > *, -.cols-10 > * { - --col-base: 10; -} - -.span-10 { - --col-span: 10; -} - -.span-y-10 { - --row-span: 10; -} - -.cols-10.grid, .cols-10[class^=grid-], .cols-10[class*=" grid-"] { - --col-span: 10; -} - -.rows-10.grid, .rows-10[class^=grid-], .rows-10[class*=" grid-"] { - --row-span: 10; -} - -.span-11 > *, -.cols-11 > * { - --col-base: 11; -} - -.span-11 { - --col-span: 11; -} - -.span-y-11 { - --row-span: 11; -} - -.cols-11.grid, .cols-11[class^=grid-], .cols-11[class*=" grid-"] { - --col-span: 11; -} - -.rows-11.grid, .rows-11[class^=grid-], .rows-11[class*=" grid-"] { - --row-span: 11; -} - -.span-12 > *, -.cols-12 > * { - --col-base: 12; -} - -.span-12 { - --col-span: 12; -} - -.span-y-12 { - --row-span: 12; -} - -.cols-12.grid, .cols-12[class^=grid-], .cols-12[class*=" grid-"] { - --col-span: 12; -} - -.rows-12.grid, .rows-12[class^=grid-], .rows-12[class*=" grid-"] { - --row-span: 12; -} - -@media screen and (min-width: 20em) { - .a__span, [class^=a__span-], [class*=" a__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .a__flow > .a__span, .a__flow > [class^=a__span-], .a__flow > [class*=" a__span-"], [class^=a__flow-] > .a__span, [class^=a__flow-] > [class^=a__span-], [class^=a__flow-] > [class*=" a__span-"], [class*=" a__flow-"] > .a__span, [class*=" a__flow-"] > [class^=a__span-], [class*=" a__flow-"] > [class*=" a__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - - .a__grid > .a__span, .a__grid > [class^=a__span-], .a__grid > [class*=" a__span-"], [class^=a__grid-] > .a__span, [class^=a__grid-] > [class^=a__span-], [class^=a__grid-] > [class*=" a__span-"], [class*=" a__grid-"] > .a__span, [class*=" a__grid-"] > [class^=a__span-], [class*=" a__grid-"] > [class*=" a__span-"] { - width: unset; - } - - [class^=a__pull-], [class*=" a__pull-"], -[class^=a__push-], [class*=" a__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .a__flow > [class^=a__pull-], .a__flow > [class*=" a__pull-"], .a__flow > [class^=a__push-], .a__flow > [class*=" a__push-"], [class^=a__flow-] > [class^=a__pull-], [class^=a__flow-] > [class*=" a__pull-"], [class^=a__flow-] > [class^=a__push-], [class^=a__flow-] > [class*=" a__push-"], [class*=" a__flow-"] > [class^=a__pull-], [class*=" a__flow-"] > [class*=" a__pull-"], [class*=" a__flow-"] > [class^=a__push-], [class*=" a__flow-"] > [class*=" a__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - - [class^=a__pull-r-], [class*=" a__pull-r-"], -[class^=a__push-r-], [class*=" a__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .a__flow > [class^=a__pull-r-], .a__flow > [class*=" a__pull-r-"], .a__flow > [class^=a__push-r-], .a__flow > [class*=" a__push-r-"], [class^=a__flow-] > [class^=a__pull-r-], [class^=a__flow-] > [class*=" a__pull-r-"], [class^=a__flow-] > [class^=a__push-r-], [class^=a__flow-] > [class*=" a__push-r-"], [class*=" a__flow-"] > [class^=a__pull-r-], [class*=" a__flow-"] > [class*=" a__pull-r-"], [class*=" a__flow-"] > [class^=a__push-r-], [class*=" a__flow-"] > [class*=" a__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - - .a__span-auto, [class^=a__span-auto-], [class*=" a__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - - .a__span-all, [class^=a__span-all-], [class*=" a__span-all-"] { - --col-span: var(--col-base); - } - - [class^=a__span-y-], [class*=" a__span-y-"] { - grid-row-end: span var(--row-span); - } - - .a__span-1 > *, -.a__cols-1 > * { - --col-base: 1; - } - - .a__span-1 { - --col-span: 1; - } - - .a__span-y-1 { - --row-span: 1; - } - - .a__cols-1.grid, .a__cols-1[class^=grid-], .a__cols-1[class*=" grid-"] { - --col-span: 1; - } - - .a__rows-1.grid, .a__rows-1[class^=grid-], .a__rows-1[class*=" grid-"] { - --row-span: 1; - } - - .a__span-2 > *, -.a__cols-2 > * { - --col-base: 2; - } - - .a__span-2 { - --col-span: 2; - } - - .a__span-y-2 { - --row-span: 2; - } - - .a__cols-2.grid, .a__cols-2[class^=grid-], .a__cols-2[class*=" grid-"] { - --col-span: 2; - } - - .a__rows-2.grid, .a__rows-2[class^=grid-], .a__rows-2[class*=" grid-"] { - --row-span: 2; - } - - .a__span-3 > *, -.a__cols-3 > * { - --col-base: 3; - } - - .a__span-3 { - --col-span: 3; - } - - .a__span-y-3 { - --row-span: 3; - } - - .a__cols-3.grid, .a__cols-3[class^=grid-], .a__cols-3[class*=" grid-"] { - --col-span: 3; - } - - .a__rows-3.grid, .a__rows-3[class^=grid-], .a__rows-3[class*=" grid-"] { - --row-span: 3; - } - - .a__span-4 > *, -.a__cols-4 > * { - --col-base: 4; - } - - .a__span-4 { - --col-span: 4; - } - - .a__span-y-4 { - --row-span: 4; - } - - .a__cols-4.grid, .a__cols-4[class^=grid-], .a__cols-4[class*=" grid-"] { - --col-span: 4; - } - - .a__rows-4.grid, .a__rows-4[class^=grid-], .a__rows-4[class*=" grid-"] { - --row-span: 4; - } - - .a__span-5 > *, -.a__cols-5 > * { - --col-base: 5; - } - - .a__span-5 { - --col-span: 5; - } - - .a__span-y-5 { - --row-span: 5; - } - - .a__cols-5.grid, .a__cols-5[class^=grid-], .a__cols-5[class*=" grid-"] { - --col-span: 5; - } - - .a__rows-5.grid, .a__rows-5[class^=grid-], .a__rows-5[class*=" grid-"] { - --row-span: 5; - } - - .a__span-6 > *, -.a__cols-6 > * { - --col-base: 6; - } - - .a__span-6 { - --col-span: 6; - } - - .a__span-y-6 { - --row-span: 6; - } - - .a__cols-6.grid, .a__cols-6[class^=grid-], .a__cols-6[class*=" grid-"] { - --col-span: 6; - } - - .a__rows-6.grid, .a__rows-6[class^=grid-], .a__rows-6[class*=" grid-"] { - --row-span: 6; - } - - .a__span-7 > *, -.a__cols-7 > * { - --col-base: 7; - } - - .a__span-7 { - --col-span: 7; - } - - .a__span-y-7 { - --row-span: 7; - } - - .a__cols-7.grid, .a__cols-7[class^=grid-], .a__cols-7[class*=" grid-"] { - --col-span: 7; - } - - .a__rows-7.grid, .a__rows-7[class^=grid-], .a__rows-7[class*=" grid-"] { - --row-span: 7; - } - - .a__span-8 > *, -.a__cols-8 > * { - --col-base: 8; - } - - .a__span-8 { - --col-span: 8; - } - - .a__span-y-8 { - --row-span: 8; - } - - .a__cols-8.grid, .a__cols-8[class^=grid-], .a__cols-8[class*=" grid-"] { - --col-span: 8; - } - - .a__rows-8.grid, .a__rows-8[class^=grid-], .a__rows-8[class*=" grid-"] { - --row-span: 8; - } - - .a__span-9 > *, -.a__cols-9 > * { - --col-base: 9; - } - - .a__span-9 { - --col-span: 9; - } - - .a__span-y-9 { - --row-span: 9; - } - - .a__cols-9.grid, .a__cols-9[class^=grid-], .a__cols-9[class*=" grid-"] { - --col-span: 9; - } - - .a__rows-9.grid, .a__rows-9[class^=grid-], .a__rows-9[class*=" grid-"] { - --row-span: 9; - } - - .a__span-10 > *, -.a__cols-10 > * { - --col-base: 10; - } - - .a__span-10 { - --col-span: 10; - } - - .a__span-y-10 { - --row-span: 10; - } - - .a__cols-10.grid, .a__cols-10[class^=grid-], .a__cols-10[class*=" grid-"] { - --col-span: 10; - } - - .a__rows-10.grid, .a__rows-10[class^=grid-], .a__rows-10[class*=" grid-"] { - --row-span: 10; - } - - .a__span-11 > *, -.a__cols-11 > * { - --col-base: 11; - } - - .a__span-11 { - --col-span: 11; - } - - .a__span-y-11 { - --row-span: 11; - } - - .a__cols-11.grid, .a__cols-11[class^=grid-], .a__cols-11[class*=" grid-"] { - --col-span: 11; - } - - .a__rows-11.grid, .a__rows-11[class^=grid-], .a__rows-11[class*=" grid-"] { - --row-span: 11; - } - - .a__span-12 > *, -.a__cols-12 > * { - --col-base: 12; - } - - .a__span-12 { - --col-span: 12; - } - - .a__span-y-12 { - --row-span: 12; - } - - .a__cols-12.grid, .a__cols-12[class^=grid-], .a__cols-12[class*=" grid-"] { - --col-span: 12; - } - - .a__rows-12.grid, .a__rows-12[class^=grid-], .a__rows-12[class*=" grid-"] { - --row-span: 12; - } -} -@media screen and (min-width: 30em) { - .b__span, [class^=b__span-], [class*=" b__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .b__flow > .b__span, .b__flow > [class^=b__span-], .b__flow > [class*=" b__span-"], [class^=b__flow-] > .b__span, [class^=b__flow-] > [class^=b__span-], [class^=b__flow-] > [class*=" b__span-"], [class*=" b__flow-"] > .b__span, [class*=" b__flow-"] > [class^=b__span-], [class*=" b__flow-"] > [class*=" b__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - - .b__grid > .b__span, .b__grid > [class^=b__span-], .b__grid > [class*=" b__span-"], [class^=b__grid-] > .b__span, [class^=b__grid-] > [class^=b__span-], [class^=b__grid-] > [class*=" b__span-"], [class*=" b__grid-"] > .b__span, [class*=" b__grid-"] > [class^=b__span-], [class*=" b__grid-"] > [class*=" b__span-"] { - width: unset; - } - - [class^=b__pull-], [class*=" b__pull-"], -[class^=b__push-], [class*=" b__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .b__flow > [class^=b__pull-], .b__flow > [class*=" b__pull-"], .b__flow > [class^=b__push-], .b__flow > [class*=" b__push-"], [class^=b__flow-] > [class^=b__pull-], [class^=b__flow-] > [class*=" b__pull-"], [class^=b__flow-] > [class^=b__push-], [class^=b__flow-] > [class*=" b__push-"], [class*=" b__flow-"] > [class^=b__pull-], [class*=" b__flow-"] > [class*=" b__pull-"], [class*=" b__flow-"] > [class^=b__push-], [class*=" b__flow-"] > [class*=" b__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - - [class^=b__pull-r-], [class*=" b__pull-r-"], -[class^=b__push-r-], [class*=" b__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .b__flow > [class^=b__pull-r-], .b__flow > [class*=" b__pull-r-"], .b__flow > [class^=b__push-r-], .b__flow > [class*=" b__push-r-"], [class^=b__flow-] > [class^=b__pull-r-], [class^=b__flow-] > [class*=" b__pull-r-"], [class^=b__flow-] > [class^=b__push-r-], [class^=b__flow-] > [class*=" b__push-r-"], [class*=" b__flow-"] > [class^=b__pull-r-], [class*=" b__flow-"] > [class*=" b__pull-r-"], [class*=" b__flow-"] > [class^=b__push-r-], [class*=" b__flow-"] > [class*=" b__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - - .b__span-auto, [class^=b__span-auto-], [class*=" b__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - - .b__span-all, [class^=b__span-all-], [class*=" b__span-all-"] { - --col-span: var(--col-base); - } - - [class^=b__span-y-], [class*=" b__span-y-"] { - grid-row-end: span var(--row-span); - } - - .b__span-1 > *, -.b__cols-1 > * { - --col-base: 1; - } - - .b__span-1 { - --col-span: 1; - } - - .b__span-y-1 { - --row-span: 1; - } - - .b__cols-1.grid, .b__cols-1[class^=grid-], .b__cols-1[class*=" grid-"] { - --col-span: 1; - } - - .b__rows-1.grid, .b__rows-1[class^=grid-], .b__rows-1[class*=" grid-"] { - --row-span: 1; - } - - .b__span-2 > *, -.b__cols-2 > * { - --col-base: 2; - } - - .b__span-2 { - --col-span: 2; - } - - .b__span-y-2 { - --row-span: 2; - } - - .b__cols-2.grid, .b__cols-2[class^=grid-], .b__cols-2[class*=" grid-"] { - --col-span: 2; - } - - .b__rows-2.grid, .b__rows-2[class^=grid-], .b__rows-2[class*=" grid-"] { - --row-span: 2; - } - - .b__span-3 > *, -.b__cols-3 > * { - --col-base: 3; - } - - .b__span-3 { - --col-span: 3; - } - - .b__span-y-3 { - --row-span: 3; - } - - .b__cols-3.grid, .b__cols-3[class^=grid-], .b__cols-3[class*=" grid-"] { - --col-span: 3; - } - - .b__rows-3.grid, .b__rows-3[class^=grid-], .b__rows-3[class*=" grid-"] { - --row-span: 3; - } - - .b__span-4 > *, -.b__cols-4 > * { - --col-base: 4; - } - - .b__span-4 { - --col-span: 4; - } - - .b__span-y-4 { - --row-span: 4; - } - - .b__cols-4.grid, .b__cols-4[class^=grid-], .b__cols-4[class*=" grid-"] { - --col-span: 4; - } - - .b__rows-4.grid, .b__rows-4[class^=grid-], .b__rows-4[class*=" grid-"] { - --row-span: 4; - } - - .b__span-5 > *, -.b__cols-5 > * { - --col-base: 5; - } - - .b__span-5 { - --col-span: 5; - } - - .b__span-y-5 { - --row-span: 5; - } - - .b__cols-5.grid, .b__cols-5[class^=grid-], .b__cols-5[class*=" grid-"] { - --col-span: 5; - } - - .b__rows-5.grid, .b__rows-5[class^=grid-], .b__rows-5[class*=" grid-"] { - --row-span: 5; - } - - .b__span-6 > *, -.b__cols-6 > * { - --col-base: 6; - } - - .b__span-6 { - --col-span: 6; - } - - .b__span-y-6 { - --row-span: 6; - } - - .b__cols-6.grid, .b__cols-6[class^=grid-], .b__cols-6[class*=" grid-"] { - --col-span: 6; - } - - .b__rows-6.grid, .b__rows-6[class^=grid-], .b__rows-6[class*=" grid-"] { - --row-span: 6; - } - - .b__span-7 > *, -.b__cols-7 > * { - --col-base: 7; - } - - .b__span-7 { - --col-span: 7; - } - - .b__span-y-7 { - --row-span: 7; - } - - .b__cols-7.grid, .b__cols-7[class^=grid-], .b__cols-7[class*=" grid-"] { - --col-span: 7; - } - - .b__rows-7.grid, .b__rows-7[class^=grid-], .b__rows-7[class*=" grid-"] { - --row-span: 7; - } - - .b__span-8 > *, -.b__cols-8 > * { - --col-base: 8; - } - - .b__span-8 { - --col-span: 8; - } - - .b__span-y-8 { - --row-span: 8; - } - - .b__cols-8.grid, .b__cols-8[class^=grid-], .b__cols-8[class*=" grid-"] { - --col-span: 8; - } - - .b__rows-8.grid, .b__rows-8[class^=grid-], .b__rows-8[class*=" grid-"] { - --row-span: 8; - } - - .b__span-9 > *, -.b__cols-9 > * { - --col-base: 9; - } - - .b__span-9 { - --col-span: 9; - } - - .b__span-y-9 { - --row-span: 9; - } - - .b__cols-9.grid, .b__cols-9[class^=grid-], .b__cols-9[class*=" grid-"] { - --col-span: 9; - } - - .b__rows-9.grid, .b__rows-9[class^=grid-], .b__rows-9[class*=" grid-"] { - --row-span: 9; - } - - .b__span-10 > *, -.b__cols-10 > * { - --col-base: 10; - } - - .b__span-10 { - --col-span: 10; - } - - .b__span-y-10 { - --row-span: 10; - } - - .b__cols-10.grid, .b__cols-10[class^=grid-], .b__cols-10[class*=" grid-"] { - --col-span: 10; - } - - .b__rows-10.grid, .b__rows-10[class^=grid-], .b__rows-10[class*=" grid-"] { - --row-span: 10; - } - - .b__span-11 > *, -.b__cols-11 > * { - --col-base: 11; - } - - .b__span-11 { - --col-span: 11; - } - - .b__span-y-11 { - --row-span: 11; - } - - .b__cols-11.grid, .b__cols-11[class^=grid-], .b__cols-11[class*=" grid-"] { - --col-span: 11; - } - - .b__rows-11.grid, .b__rows-11[class^=grid-], .b__rows-11[class*=" grid-"] { - --row-span: 11; - } - - .b__span-12 > *, -.b__cols-12 > * { - --col-base: 12; - } - - .b__span-12 { - --col-span: 12; - } - - .b__span-y-12 { - --row-span: 12; - } - - .b__cols-12.grid, .b__cols-12[class^=grid-], .b__cols-12[class*=" grid-"] { - --col-span: 12; - } - - .b__rows-12.grid, .b__rows-12[class^=grid-], .b__rows-12[class*=" grid-"] { - --row-span: 12; - } -} -@media screen and (min-width: 40em) { - .c__span, [class^=c__span-], [class*=" c__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .c__flow > .c__span, .c__flow > [class^=c__span-], .c__flow > [class*=" c__span-"], [class^=c__flow-] > .c__span, [class^=c__flow-] > [class^=c__span-], [class^=c__flow-] > [class*=" c__span-"], [class*=" c__flow-"] > .c__span, [class*=" c__flow-"] > [class^=c__span-], [class*=" c__flow-"] > [class*=" c__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - - .c__grid > .c__span, .c__grid > [class^=c__span-], .c__grid > [class*=" c__span-"], [class^=c__grid-] > .c__span, [class^=c__grid-] > [class^=c__span-], [class^=c__grid-] > [class*=" c__span-"], [class*=" c__grid-"] > .c__span, [class*=" c__grid-"] > [class^=c__span-], [class*=" c__grid-"] > [class*=" c__span-"] { - width: unset; - } - - [class^=c__pull-], [class*=" c__pull-"], -[class^=c__push-], [class*=" c__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .c__flow > [class^=c__pull-], .c__flow > [class*=" c__pull-"], .c__flow > [class^=c__push-], .c__flow > [class*=" c__push-"], [class^=c__flow-] > [class^=c__pull-], [class^=c__flow-] > [class*=" c__pull-"], [class^=c__flow-] > [class^=c__push-], [class^=c__flow-] > [class*=" c__push-"], [class*=" c__flow-"] > [class^=c__pull-], [class*=" c__flow-"] > [class*=" c__pull-"], [class*=" c__flow-"] > [class^=c__push-], [class*=" c__flow-"] > [class*=" c__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - - [class^=c__pull-r-], [class*=" c__pull-r-"], -[class^=c__push-r-], [class*=" c__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .c__flow > [class^=c__pull-r-], .c__flow > [class*=" c__pull-r-"], .c__flow > [class^=c__push-r-], .c__flow > [class*=" c__push-r-"], [class^=c__flow-] > [class^=c__pull-r-], [class^=c__flow-] > [class*=" c__pull-r-"], [class^=c__flow-] > [class^=c__push-r-], [class^=c__flow-] > [class*=" c__push-r-"], [class*=" c__flow-"] > [class^=c__pull-r-], [class*=" c__flow-"] > [class*=" c__pull-r-"], [class*=" c__flow-"] > [class^=c__push-r-], [class*=" c__flow-"] > [class*=" c__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - - .c__span-auto, [class^=c__span-auto-], [class*=" c__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - - .c__span-all, [class^=c__span-all-], [class*=" c__span-all-"] { - --col-span: var(--col-base); - } - - [class^=c__span-y-], [class*=" c__span-y-"] { - grid-row-end: span var(--row-span); - } - - .c__span-1 > *, -.c__cols-1 > * { - --col-base: 1; - } - - .c__span-1 { - --col-span: 1; - } - - .c__span-y-1 { - --row-span: 1; - } - - .c__cols-1.grid, .c__cols-1[class^=grid-], .c__cols-1[class*=" grid-"] { - --col-span: 1; - } - - .c__rows-1.grid, .c__rows-1[class^=grid-], .c__rows-1[class*=" grid-"] { - --row-span: 1; - } - - .c__span-2 > *, -.c__cols-2 > * { - --col-base: 2; - } - - .c__span-2 { - --col-span: 2; - } - - .c__span-y-2 { - --row-span: 2; - } - - .c__cols-2.grid, .c__cols-2[class^=grid-], .c__cols-2[class*=" grid-"] { - --col-span: 2; - } - - .c__rows-2.grid, .c__rows-2[class^=grid-], .c__rows-2[class*=" grid-"] { - --row-span: 2; - } - - .c__span-3 > *, -.c__cols-3 > * { - --col-base: 3; - } - - .c__span-3 { - --col-span: 3; - } - - .c__span-y-3 { - --row-span: 3; - } - - .c__cols-3.grid, .c__cols-3[class^=grid-], .c__cols-3[class*=" grid-"] { - --col-span: 3; - } - - .c__rows-3.grid, .c__rows-3[class^=grid-], .c__rows-3[class*=" grid-"] { - --row-span: 3; - } - - .c__span-4 > *, -.c__cols-4 > * { - --col-base: 4; - } - - .c__span-4 { - --col-span: 4; - } - - .c__span-y-4 { - --row-span: 4; - } - - .c__cols-4.grid, .c__cols-4[class^=grid-], .c__cols-4[class*=" grid-"] { - --col-span: 4; - } - - .c__rows-4.grid, .c__rows-4[class^=grid-], .c__rows-4[class*=" grid-"] { - --row-span: 4; - } - - .c__span-5 > *, -.c__cols-5 > * { - --col-base: 5; - } - - .c__span-5 { - --col-span: 5; - } - - .c__span-y-5 { - --row-span: 5; - } - - .c__cols-5.grid, .c__cols-5[class^=grid-], .c__cols-5[class*=" grid-"] { - --col-span: 5; - } - - .c__rows-5.grid, .c__rows-5[class^=grid-], .c__rows-5[class*=" grid-"] { - --row-span: 5; - } - - .c__span-6 > *, -.c__cols-6 > * { - --col-base: 6; - } - - .c__span-6 { - --col-span: 6; - } - - .c__span-y-6 { - --row-span: 6; - } - - .c__cols-6.grid, .c__cols-6[class^=grid-], .c__cols-6[class*=" grid-"] { - --col-span: 6; - } - - .c__rows-6.grid, .c__rows-6[class^=grid-], .c__rows-6[class*=" grid-"] { - --row-span: 6; - } - - .c__span-7 > *, -.c__cols-7 > * { - --col-base: 7; - } - - .c__span-7 { - --col-span: 7; - } - - .c__span-y-7 { - --row-span: 7; - } - - .c__cols-7.grid, .c__cols-7[class^=grid-], .c__cols-7[class*=" grid-"] { - --col-span: 7; - } - - .c__rows-7.grid, .c__rows-7[class^=grid-], .c__rows-7[class*=" grid-"] { - --row-span: 7; - } - - .c__span-8 > *, -.c__cols-8 > * { - --col-base: 8; - } - - .c__span-8 { - --col-span: 8; - } - - .c__span-y-8 { - --row-span: 8; - } - - .c__cols-8.grid, .c__cols-8[class^=grid-], .c__cols-8[class*=" grid-"] { - --col-span: 8; - } - - .c__rows-8.grid, .c__rows-8[class^=grid-], .c__rows-8[class*=" grid-"] { - --row-span: 8; - } - - .c__span-9 > *, -.c__cols-9 > * { - --col-base: 9; - } - - .c__span-9 { - --col-span: 9; - } - - .c__span-y-9 { - --row-span: 9; - } - - .c__cols-9.grid, .c__cols-9[class^=grid-], .c__cols-9[class*=" grid-"] { - --col-span: 9; - } - - .c__rows-9.grid, .c__rows-9[class^=grid-], .c__rows-9[class*=" grid-"] { - --row-span: 9; - } - - .c__span-10 > *, -.c__cols-10 > * { - --col-base: 10; - } - - .c__span-10 { - --col-span: 10; - } - - .c__span-y-10 { - --row-span: 10; - } - - .c__cols-10.grid, .c__cols-10[class^=grid-], .c__cols-10[class*=" grid-"] { - --col-span: 10; - } - - .c__rows-10.grid, .c__rows-10[class^=grid-], .c__rows-10[class*=" grid-"] { - --row-span: 10; - } - - .c__span-11 > *, -.c__cols-11 > * { - --col-base: 11; - } - - .c__span-11 { - --col-span: 11; - } - - .c__span-y-11 { - --row-span: 11; - } - - .c__cols-11.grid, .c__cols-11[class^=grid-], .c__cols-11[class*=" grid-"] { - --col-span: 11; - } - - .c__rows-11.grid, .c__rows-11[class^=grid-], .c__rows-11[class*=" grid-"] { - --row-span: 11; - } - - .c__span-12 > *, -.c__cols-12 > * { - --col-base: 12; - } - - .c__span-12 { - --col-span: 12; - } - - .c__span-y-12 { - --row-span: 12; - } - - .c__cols-12.grid, .c__cols-12[class^=grid-], .c__cols-12[class*=" grid-"] { - --col-span: 12; - } - - .c__rows-12.grid, .c__rows-12[class^=grid-], .c__rows-12[class*=" grid-"] { - --row-span: 12; - } -} \ No newline at end of file diff --git a/tests/renders/modern-flow.libsass.css b/tests/renders/modern-flow.libsass.css deleted file mode 100644 index 9aec64c..0000000 --- a/tests/renders/modern-flow.libsass.css +++ /dev/null @@ -1,1058 +0,0 @@ -*, *:before, *:after { - --push-l: initial; - --push-r: initial; -} - -:root { - --row-gap: var(--inner-y); - --col-gap: var(--inner-x); - --col-base: var(--grid-cols); - --col-span: var(--col-base); - --row-span: var(--grid-rows, 1); -} - -.flow, [class^="flow-"], [class*=" flow-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: calc(100% + var(--col-gap)) !important; - margin-left: calc(var(--col-gap) / -2); - margin-right: calc(var(--col-gap) / -2); - margin-top: calc(var(--row-gap) / -2); - margin-bottom: calc(var(--row-gap) / -2); -} - -.flow > *, [class^="flow-"] > *, [class*=" flow-"] > * { - flex: 0 0 auto; - width: 100%; - min-width: 0%; - min-height: 1px; - background-clip: content-box; - padding-left: calc(var(--col-gap) / 2) !important; - padding-right: calc(var(--col-gap) / 2) !important; - padding-top: calc(var(--row-gap) / 2) !important; - padding-bottom: calc(var(--row-gap) / 2) !important; -} - -.grid, [class^="grid-"], [class*=" grid-"] { - display: grid; - grid-gap: var(--row-gap) var(--col-gap); - grid-template-rows: repeat(var(--row-span), 1fr); - grid-template-columns: repeat(var(--col-span), minmax(0%, 1fr)); -} - -.grid > *, [class^="grid-"] > *, [class*=" grid-"] > * { - grid-column: span var(--col-span)/span var(--col-span); -} - -.flow-s, .grid-s { - --row-gap: var(--inner-y-s); -} - -.flow-m, .grid-m { - --row-gap: var(--inner-y-m); -} - -.flow-l, .grid-l { - --row-gap: var(--inner-y-l); -} - -.flow-x-s, .grid-x-s { - --col-gap: var(--inner-x-s); -} - -.flow-x-form, .grid-x-form { - --col-gap: var(--inner-x-form); -} - -.flow-0, .grid-0 { - --row-gap: 0; -} - -.flow-x-0, .grid-x-0 { - --col-gap: 0; -} - -.flow-0-0, .grid-0-0 { - --row-gap: 0; - --col-gap: 0; -} - -.span, [class^="span-"], [class*=" span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); -} - -.flow > .span, .flow > [class^="span-"], .flow > [class*=" span-"], [class^="flow-"] > .span, [class^="flow-"] > [class^="span-"], [class^="flow-"] > [class*=" span-"], [class*=" flow-"] > .span, [class*=" flow-"] > [class^="span-"], [class*=" flow-"] > [class*=" span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); -} - -.grid > .span, .grid > [class^="span-"], .grid > [class*=" span-"], [class^="grid-"] > .span, [class^="grid-"] > [class^="span-"], [class^="grid-"] > [class*=" span-"], [class*=" grid-"] > .span, [class*=" grid-"] > [class^="span-"], [class*=" grid-"] > [class*=" span-"] { - width: unset; -} - -[class^="pull-"], [class*=" pull-"], -[class^="push-"], [class*=" push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); -} - -.flow > [class^="pull-"], .flow > [class*=" pull-"], .flow > [class^="push-"], .flow > [class*=" push-"], [class^="flow-"] > [class^="pull-"], [class^="flow-"] > [class*=" pull-"], [class^="flow-"] > [class^="push-"], [class^="flow-"] > [class*=" push-"], [class*=" flow-"] > [class^="pull-"], [class*=" flow-"] > [class*=" pull-"], [class*=" flow-"] > [class^="push-"], [class*=" flow-"] > [class*=" push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); -} - -[class^="pull-r-"], [class*=" pull-r-"], -[class^="push-r-"], [class*=" push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); -} - -.flow > [class^="pull-r-"], .flow > [class*=" pull-r-"], .flow > [class^="push-r-"], .flow > [class*=" push-r-"], [class^="flow-"] > [class^="pull-r-"], [class^="flow-"] > [class*=" pull-r-"], [class^="flow-"] > [class^="push-r-"], [class^="flow-"] > [class*=" push-r-"], [class*=" flow-"] > [class^="pull-r-"], [class*=" flow-"] > [class*=" pull-r-"], [class*=" flow-"] > [class^="push-r-"], [class*=" flow-"] > [class*=" push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); -} - -.span-auto, [class^="span-auto-"], [class*=" span-auto-"] { - flex: 1 1 0%; - --col-span: 0; -} - -.span-all, [class^="span-all-"], [class*=" span-all-"] { - --col-span: var(--col-base); -} - -[class^="span-y-"], [class*=" span-y-"] { - grid-row-end: span var(--row-span); -} - -.span-1 > *, -.cols-1 > * { - --col-base: 1; -} - -.span-1 { - --col-span: 1; -} - -.span-y-1 { - --row-span: 1; -} - -.cols-1.grid, .cols-1[class^="grid-"], .cols-1[class*=" grid-"] { - --col-span: 1; -} - -.rows-1.grid, .rows-1[class^="grid-"], .rows-1[class*=" grid-"] { - --row-span: 1; -} - -.span-2 > *, -.cols-2 > * { - --col-base: 2; -} - -.span-2 { - --col-span: 2; -} - -.span-y-2 { - --row-span: 2; -} - -.cols-2.grid, .cols-2[class^="grid-"], .cols-2[class*=" grid-"] { - --col-span: 2; -} - -.rows-2.grid, .rows-2[class^="grid-"], .rows-2[class*=" grid-"] { - --row-span: 2; -} - -.span-3 > *, -.cols-3 > * { - --col-base: 3; -} - -.span-3 { - --col-span: 3; -} - -.span-y-3 { - --row-span: 3; -} - -.cols-3.grid, .cols-3[class^="grid-"], .cols-3[class*=" grid-"] { - --col-span: 3; -} - -.rows-3.grid, .rows-3[class^="grid-"], .rows-3[class*=" grid-"] { - --row-span: 3; -} - -.span-4 > *, -.cols-4 > * { - --col-base: 4; -} - -.span-4 { - --col-span: 4; -} - -.span-y-4 { - --row-span: 4; -} - -.cols-4.grid, .cols-4[class^="grid-"], .cols-4[class*=" grid-"] { - --col-span: 4; -} - -.rows-4.grid, .rows-4[class^="grid-"], .rows-4[class*=" grid-"] { - --row-span: 4; -} - -.span-5 > *, -.cols-5 > * { - --col-base: 5; -} - -.span-5 { - --col-span: 5; -} - -.span-y-5 { - --row-span: 5; -} - -.cols-5.grid, .cols-5[class^="grid-"], .cols-5[class*=" grid-"] { - --col-span: 5; -} - -.rows-5.grid, .rows-5[class^="grid-"], .rows-5[class*=" grid-"] { - --row-span: 5; -} - -.span-6 > *, -.cols-6 > * { - --col-base: 6; -} - -.span-6 { - --col-span: 6; -} - -.span-y-6 { - --row-span: 6; -} - -.cols-6.grid, .cols-6[class^="grid-"], .cols-6[class*=" grid-"] { - --col-span: 6; -} - -.rows-6.grid, .rows-6[class^="grid-"], .rows-6[class*=" grid-"] { - --row-span: 6; -} - -.span-7 > *, -.cols-7 > * { - --col-base: 7; -} - -.span-7 { - --col-span: 7; -} - -.span-y-7 { - --row-span: 7; -} - -.cols-7.grid, .cols-7[class^="grid-"], .cols-7[class*=" grid-"] { - --col-span: 7; -} - -.rows-7.grid, .rows-7[class^="grid-"], .rows-7[class*=" grid-"] { - --row-span: 7; -} - -.span-8 > *, -.cols-8 > * { - --col-base: 8; -} - -.span-8 { - --col-span: 8; -} - -.span-y-8 { - --row-span: 8; -} - -.cols-8.grid, .cols-8[class^="grid-"], .cols-8[class*=" grid-"] { - --col-span: 8; -} - -.rows-8.grid, .rows-8[class^="grid-"], .rows-8[class*=" grid-"] { - --row-span: 8; -} - -.span-9 > *, -.cols-9 > * { - --col-base: 9; -} - -.span-9 { - --col-span: 9; -} - -.span-y-9 { - --row-span: 9; -} - -.cols-9.grid, .cols-9[class^="grid-"], .cols-9[class*=" grid-"] { - --col-span: 9; -} - -.rows-9.grid, .rows-9[class^="grid-"], .rows-9[class*=" grid-"] { - --row-span: 9; -} - -.span-10 > *, -.cols-10 > * { - --col-base: 10; -} - -.span-10 { - --col-span: 10; -} - -.span-y-10 { - --row-span: 10; -} - -.cols-10.grid, .cols-10[class^="grid-"], .cols-10[class*=" grid-"] { - --col-span: 10; -} - -.rows-10.grid, .rows-10[class^="grid-"], .rows-10[class*=" grid-"] { - --row-span: 10; -} - -.span-11 > *, -.cols-11 > * { - --col-base: 11; -} - -.span-11 { - --col-span: 11; -} - -.span-y-11 { - --row-span: 11; -} - -.cols-11.grid, .cols-11[class^="grid-"], .cols-11[class*=" grid-"] { - --col-span: 11; -} - -.rows-11.grid, .rows-11[class^="grid-"], .rows-11[class*=" grid-"] { - --row-span: 11; -} - -.span-12 > *, -.cols-12 > * { - --col-base: 12; -} - -.span-12 { - --col-span: 12; -} - -.span-y-12 { - --row-span: 12; -} - -.cols-12.grid, .cols-12[class^="grid-"], .cols-12[class*=" grid-"] { - --col-span: 12; -} - -.rows-12.grid, .rows-12[class^="grid-"], .rows-12[class*=" grid-"] { - --row-span: 12; -} - -@media screen and (min-width: 20em) { - .a__span, [class^="a__span-"], [class*=" a__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .a__flow > .a__span, .a__flow > [class^="a__span-"], .a__flow > [class*=" a__span-"], [class^="a__flow-"] > .a__span, [class^="a__flow-"] > [class^="a__span-"], [class^="a__flow-"] > [class*=" a__span-"], [class*=" a__flow-"] > .a__span, [class*=" a__flow-"] > [class^="a__span-"], [class*=" a__flow-"] > [class*=" a__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - .a__grid > .a__span, .a__grid > [class^="a__span-"], .a__grid > [class*=" a__span-"], [class^="a__grid-"] > .a__span, [class^="a__grid-"] > [class^="a__span-"], [class^="a__grid-"] > [class*=" a__span-"], [class*=" a__grid-"] > .a__span, [class*=" a__grid-"] > [class^="a__span-"], [class*=" a__grid-"] > [class*=" a__span-"] { - width: unset; - } - [class^="a__pull-"], [class*=" a__pull-"], - [class^="a__push-"], [class*=" a__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .a__flow > [class^="a__pull-"], .a__flow > [class*=" a__pull-"], .a__flow > [class^="a__push-"], .a__flow > [class*=" a__push-"], [class^="a__flow-"] > [class^="a__pull-"], [class^="a__flow-"] > [class*=" a__pull-"], [class^="a__flow-"] > [class^="a__push-"], [class^="a__flow-"] > [class*=" a__push-"], [class*=" a__flow-"] > [class^="a__pull-"], [class*=" a__flow-"] > [class*=" a__pull-"], [class*=" a__flow-"] > [class^="a__push-"], [class*=" a__flow-"] > [class*=" a__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - [class^="a__pull-r-"], [class*=" a__pull-r-"], - [class^="a__push-r-"], [class*=" a__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .a__flow > [class^="a__pull-r-"], .a__flow > [class*=" a__pull-r-"], .a__flow > [class^="a__push-r-"], .a__flow > [class*=" a__push-r-"], [class^="a__flow-"] > [class^="a__pull-r-"], [class^="a__flow-"] > [class*=" a__pull-r-"], [class^="a__flow-"] > [class^="a__push-r-"], [class^="a__flow-"] > [class*=" a__push-r-"], [class*=" a__flow-"] > [class^="a__pull-r-"], [class*=" a__flow-"] > [class*=" a__pull-r-"], [class*=" a__flow-"] > [class^="a__push-r-"], [class*=" a__flow-"] > [class*=" a__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - .a__span-auto, [class^="a__span-auto-"], [class*=" a__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - .a__span-all, [class^="a__span-all-"], [class*=" a__span-all-"] { - --col-span: var(--col-base); - } - [class^="a__span-y-"], [class*=" a__span-y-"] { - grid-row-end: span var(--row-span); - } - .a__span-1 > *, - .a__cols-1 > * { - --col-base: 1; - } - .a__span-1 { - --col-span: 1; - } - .a__span-y-1 { - --row-span: 1; - } - .a__cols-1.grid, .a__cols-1[class^="grid-"], .a__cols-1[class*=" grid-"] { - --col-span: 1; - } - .a__rows-1.grid, .a__rows-1[class^="grid-"], .a__rows-1[class*=" grid-"] { - --row-span: 1; - } - .a__span-2 > *, - .a__cols-2 > * { - --col-base: 2; - } - .a__span-2 { - --col-span: 2; - } - .a__span-y-2 { - --row-span: 2; - } - .a__cols-2.grid, .a__cols-2[class^="grid-"], .a__cols-2[class*=" grid-"] { - --col-span: 2; - } - .a__rows-2.grid, .a__rows-2[class^="grid-"], .a__rows-2[class*=" grid-"] { - --row-span: 2; - } - .a__span-3 > *, - .a__cols-3 > * { - --col-base: 3; - } - .a__span-3 { - --col-span: 3; - } - .a__span-y-3 { - --row-span: 3; - } - .a__cols-3.grid, .a__cols-3[class^="grid-"], .a__cols-3[class*=" grid-"] { - --col-span: 3; - } - .a__rows-3.grid, .a__rows-3[class^="grid-"], .a__rows-3[class*=" grid-"] { - --row-span: 3; - } - .a__span-4 > *, - .a__cols-4 > * { - --col-base: 4; - } - .a__span-4 { - --col-span: 4; - } - .a__span-y-4 { - --row-span: 4; - } - .a__cols-4.grid, .a__cols-4[class^="grid-"], .a__cols-4[class*=" grid-"] { - --col-span: 4; - } - .a__rows-4.grid, .a__rows-4[class^="grid-"], .a__rows-4[class*=" grid-"] { - --row-span: 4; - } - .a__span-5 > *, - .a__cols-5 > * { - --col-base: 5; - } - .a__span-5 { - --col-span: 5; - } - .a__span-y-5 { - --row-span: 5; - } - .a__cols-5.grid, .a__cols-5[class^="grid-"], .a__cols-5[class*=" grid-"] { - --col-span: 5; - } - .a__rows-5.grid, .a__rows-5[class^="grid-"], .a__rows-5[class*=" grid-"] { - --row-span: 5; - } - .a__span-6 > *, - .a__cols-6 > * { - --col-base: 6; - } - .a__span-6 { - --col-span: 6; - } - .a__span-y-6 { - --row-span: 6; - } - .a__cols-6.grid, .a__cols-6[class^="grid-"], .a__cols-6[class*=" grid-"] { - --col-span: 6; - } - .a__rows-6.grid, .a__rows-6[class^="grid-"], .a__rows-6[class*=" grid-"] { - --row-span: 6; - } - .a__span-7 > *, - .a__cols-7 > * { - --col-base: 7; - } - .a__span-7 { - --col-span: 7; - } - .a__span-y-7 { - --row-span: 7; - } - .a__cols-7.grid, .a__cols-7[class^="grid-"], .a__cols-7[class*=" grid-"] { - --col-span: 7; - } - .a__rows-7.grid, .a__rows-7[class^="grid-"], .a__rows-7[class*=" grid-"] { - --row-span: 7; - } - .a__span-8 > *, - .a__cols-8 > * { - --col-base: 8; - } - .a__span-8 { - --col-span: 8; - } - .a__span-y-8 { - --row-span: 8; - } - .a__cols-8.grid, .a__cols-8[class^="grid-"], .a__cols-8[class*=" grid-"] { - --col-span: 8; - } - .a__rows-8.grid, .a__rows-8[class^="grid-"], .a__rows-8[class*=" grid-"] { - --row-span: 8; - } - .a__span-9 > *, - .a__cols-9 > * { - --col-base: 9; - } - .a__span-9 { - --col-span: 9; - } - .a__span-y-9 { - --row-span: 9; - } - .a__cols-9.grid, .a__cols-9[class^="grid-"], .a__cols-9[class*=" grid-"] { - --col-span: 9; - } - .a__rows-9.grid, .a__rows-9[class^="grid-"], .a__rows-9[class*=" grid-"] { - --row-span: 9; - } - .a__span-10 > *, - .a__cols-10 > * { - --col-base: 10; - } - .a__span-10 { - --col-span: 10; - } - .a__span-y-10 { - --row-span: 10; - } - .a__cols-10.grid, .a__cols-10[class^="grid-"], .a__cols-10[class*=" grid-"] { - --col-span: 10; - } - .a__rows-10.grid, .a__rows-10[class^="grid-"], .a__rows-10[class*=" grid-"] { - --row-span: 10; - } - .a__span-11 > *, - .a__cols-11 > * { - --col-base: 11; - } - .a__span-11 { - --col-span: 11; - } - .a__span-y-11 { - --row-span: 11; - } - .a__cols-11.grid, .a__cols-11[class^="grid-"], .a__cols-11[class*=" grid-"] { - --col-span: 11; - } - .a__rows-11.grid, .a__rows-11[class^="grid-"], .a__rows-11[class*=" grid-"] { - --row-span: 11; - } - .a__span-12 > *, - .a__cols-12 > * { - --col-base: 12; - } - .a__span-12 { - --col-span: 12; - } - .a__span-y-12 { - --row-span: 12; - } - .a__cols-12.grid, .a__cols-12[class^="grid-"], .a__cols-12[class*=" grid-"] { - --col-span: 12; - } - .a__rows-12.grid, .a__rows-12[class^="grid-"], .a__rows-12[class*=" grid-"] { - --row-span: 12; - } -} - -@media screen and (min-width: 30em) { - .b__span, [class^="b__span-"], [class*=" b__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .b__flow > .b__span, .b__flow > [class^="b__span-"], .b__flow > [class*=" b__span-"], [class^="b__flow-"] > .b__span, [class^="b__flow-"] > [class^="b__span-"], [class^="b__flow-"] > [class*=" b__span-"], [class*=" b__flow-"] > .b__span, [class*=" b__flow-"] > [class^="b__span-"], [class*=" b__flow-"] > [class*=" b__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - .b__grid > .b__span, .b__grid > [class^="b__span-"], .b__grid > [class*=" b__span-"], [class^="b__grid-"] > .b__span, [class^="b__grid-"] > [class^="b__span-"], [class^="b__grid-"] > [class*=" b__span-"], [class*=" b__grid-"] > .b__span, [class*=" b__grid-"] > [class^="b__span-"], [class*=" b__grid-"] > [class*=" b__span-"] { - width: unset; - } - [class^="b__pull-"], [class*=" b__pull-"], - [class^="b__push-"], [class*=" b__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .b__flow > [class^="b__pull-"], .b__flow > [class*=" b__pull-"], .b__flow > [class^="b__push-"], .b__flow > [class*=" b__push-"], [class^="b__flow-"] > [class^="b__pull-"], [class^="b__flow-"] > [class*=" b__pull-"], [class^="b__flow-"] > [class^="b__push-"], [class^="b__flow-"] > [class*=" b__push-"], [class*=" b__flow-"] > [class^="b__pull-"], [class*=" b__flow-"] > [class*=" b__pull-"], [class*=" b__flow-"] > [class^="b__push-"], [class*=" b__flow-"] > [class*=" b__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - [class^="b__pull-r-"], [class*=" b__pull-r-"], - [class^="b__push-r-"], [class*=" b__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .b__flow > [class^="b__pull-r-"], .b__flow > [class*=" b__pull-r-"], .b__flow > [class^="b__push-r-"], .b__flow > [class*=" b__push-r-"], [class^="b__flow-"] > [class^="b__pull-r-"], [class^="b__flow-"] > [class*=" b__pull-r-"], [class^="b__flow-"] > [class^="b__push-r-"], [class^="b__flow-"] > [class*=" b__push-r-"], [class*=" b__flow-"] > [class^="b__pull-r-"], [class*=" b__flow-"] > [class*=" b__pull-r-"], [class*=" b__flow-"] > [class^="b__push-r-"], [class*=" b__flow-"] > [class*=" b__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - .b__span-auto, [class^="b__span-auto-"], [class*=" b__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - .b__span-all, [class^="b__span-all-"], [class*=" b__span-all-"] { - --col-span: var(--col-base); - } - [class^="b__span-y-"], [class*=" b__span-y-"] { - grid-row-end: span var(--row-span); - } - .b__span-1 > *, - .b__cols-1 > * { - --col-base: 1; - } - .b__span-1 { - --col-span: 1; - } - .b__span-y-1 { - --row-span: 1; - } - .b__cols-1.grid, .b__cols-1[class^="grid-"], .b__cols-1[class*=" grid-"] { - --col-span: 1; - } - .b__rows-1.grid, .b__rows-1[class^="grid-"], .b__rows-1[class*=" grid-"] { - --row-span: 1; - } - .b__span-2 > *, - .b__cols-2 > * { - --col-base: 2; - } - .b__span-2 { - --col-span: 2; - } - .b__span-y-2 { - --row-span: 2; - } - .b__cols-2.grid, .b__cols-2[class^="grid-"], .b__cols-2[class*=" grid-"] { - --col-span: 2; - } - .b__rows-2.grid, .b__rows-2[class^="grid-"], .b__rows-2[class*=" grid-"] { - --row-span: 2; - } - .b__span-3 > *, - .b__cols-3 > * { - --col-base: 3; - } - .b__span-3 { - --col-span: 3; - } - .b__span-y-3 { - --row-span: 3; - } - .b__cols-3.grid, .b__cols-3[class^="grid-"], .b__cols-3[class*=" grid-"] { - --col-span: 3; - } - .b__rows-3.grid, .b__rows-3[class^="grid-"], .b__rows-3[class*=" grid-"] { - --row-span: 3; - } - .b__span-4 > *, - .b__cols-4 > * { - --col-base: 4; - } - .b__span-4 { - --col-span: 4; - } - .b__span-y-4 { - --row-span: 4; - } - .b__cols-4.grid, .b__cols-4[class^="grid-"], .b__cols-4[class*=" grid-"] { - --col-span: 4; - } - .b__rows-4.grid, .b__rows-4[class^="grid-"], .b__rows-4[class*=" grid-"] { - --row-span: 4; - } - .b__span-5 > *, - .b__cols-5 > * { - --col-base: 5; - } - .b__span-5 { - --col-span: 5; - } - .b__span-y-5 { - --row-span: 5; - } - .b__cols-5.grid, .b__cols-5[class^="grid-"], .b__cols-5[class*=" grid-"] { - --col-span: 5; - } - .b__rows-5.grid, .b__rows-5[class^="grid-"], .b__rows-5[class*=" grid-"] { - --row-span: 5; - } - .b__span-6 > *, - .b__cols-6 > * { - --col-base: 6; - } - .b__span-6 { - --col-span: 6; - } - .b__span-y-6 { - --row-span: 6; - } - .b__cols-6.grid, .b__cols-6[class^="grid-"], .b__cols-6[class*=" grid-"] { - --col-span: 6; - } - .b__rows-6.grid, .b__rows-6[class^="grid-"], .b__rows-6[class*=" grid-"] { - --row-span: 6; - } - .b__span-7 > *, - .b__cols-7 > * { - --col-base: 7; - } - .b__span-7 { - --col-span: 7; - } - .b__span-y-7 { - --row-span: 7; - } - .b__cols-7.grid, .b__cols-7[class^="grid-"], .b__cols-7[class*=" grid-"] { - --col-span: 7; - } - .b__rows-7.grid, .b__rows-7[class^="grid-"], .b__rows-7[class*=" grid-"] { - --row-span: 7; - } - .b__span-8 > *, - .b__cols-8 > * { - --col-base: 8; - } - .b__span-8 { - --col-span: 8; - } - .b__span-y-8 { - --row-span: 8; - } - .b__cols-8.grid, .b__cols-8[class^="grid-"], .b__cols-8[class*=" grid-"] { - --col-span: 8; - } - .b__rows-8.grid, .b__rows-8[class^="grid-"], .b__rows-8[class*=" grid-"] { - --row-span: 8; - } - .b__span-9 > *, - .b__cols-9 > * { - --col-base: 9; - } - .b__span-9 { - --col-span: 9; - } - .b__span-y-9 { - --row-span: 9; - } - .b__cols-9.grid, .b__cols-9[class^="grid-"], .b__cols-9[class*=" grid-"] { - --col-span: 9; - } - .b__rows-9.grid, .b__rows-9[class^="grid-"], .b__rows-9[class*=" grid-"] { - --row-span: 9; - } - .b__span-10 > *, - .b__cols-10 > * { - --col-base: 10; - } - .b__span-10 { - --col-span: 10; - } - .b__span-y-10 { - --row-span: 10; - } - .b__cols-10.grid, .b__cols-10[class^="grid-"], .b__cols-10[class*=" grid-"] { - --col-span: 10; - } - .b__rows-10.grid, .b__rows-10[class^="grid-"], .b__rows-10[class*=" grid-"] { - --row-span: 10; - } - .b__span-11 > *, - .b__cols-11 > * { - --col-base: 11; - } - .b__span-11 { - --col-span: 11; - } - .b__span-y-11 { - --row-span: 11; - } - .b__cols-11.grid, .b__cols-11[class^="grid-"], .b__cols-11[class*=" grid-"] { - --col-span: 11; - } - .b__rows-11.grid, .b__rows-11[class^="grid-"], .b__rows-11[class*=" grid-"] { - --row-span: 11; - } - .b__span-12 > *, - .b__cols-12 > * { - --col-base: 12; - } - .b__span-12 { - --col-span: 12; - } - .b__span-y-12 { - --row-span: 12; - } - .b__cols-12.grid, .b__cols-12[class^="grid-"], .b__cols-12[class*=" grid-"] { - --col-span: 12; - } - .b__rows-12.grid, .b__rows-12[class^="grid-"], .b__rows-12[class*=" grid-"] { - --row-span: 12; - } -} - -@media screen and (min-width: 40em) { - .c__span, [class^="c__span-"], [class*=" c__span-"] { - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap)); - } - .c__flow > .c__span, .c__flow > [class^="c__span-"], .c__flow > [class*=" c__span-"], [class^="c__flow-"] > .c__span, [class^="c__flow-"] > [class^="c__span-"], [class^="c__flow-"] > [class*=" c__span-"], [class*=" c__flow-"] > .c__span, [class*=" c__flow-"] > [class^="c__span-"], [class*=" c__flow-"] > [class*=" c__span-"] { - width: calc(99.99999% * var(--col-span) / var(--col-base)); - } - .c__grid > .c__span, .c__grid > [class^="c__span-"], .c__grid > [class*=" c__span-"], [class^="c__grid-"] > .c__span, [class^="c__grid-"] > [class^="c__span-"], [class^="c__grid-"] > [class*=" c__span-"], [class*=" c__grid-"] > .c__span, [class*=" c__grid-"] > [class^="c__span-"], [class*=" c__grid-"] > [class*=" c__span-"] { - width: unset; - } - [class^="c__pull-"], [class*=" c__pull-"], - [class^="c__push-"], [class*=" c__push-"] { - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base)); - } - .c__flow > [class^="c__pull-"], .c__flow > [class*=" c__pull-"], .c__flow > [class^="c__push-"], .c__flow > [class*=" c__push-"], [class^="c__flow-"] > [class^="c__pull-"], [class^="c__flow-"] > [class*=" c__pull-"], [class^="c__flow-"] > [class^="c__push-"], [class^="c__flow-"] > [class*=" c__push-"], [class*=" c__flow-"] > [class^="c__pull-"], [class*=" c__flow-"] > [class*=" c__pull-"], [class*=" c__flow-"] > [class^="c__push-"], [class*=" c__flow-"] > [class*=" c__push-"] { - margin-left: calc(99.99999% * var(--push-l) / var(--col-base)); - } - [class^="c__pull-r-"], [class*=" c__pull-r-"], - [class^="c__push-r-"], [class*=" c__push-r-"] { - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base)); - } - .c__flow > [class^="c__pull-r-"], .c__flow > [class*=" c__pull-r-"], .c__flow > [class^="c__push-r-"], .c__flow > [class*=" c__push-r-"], [class^="c__flow-"] > [class^="c__pull-r-"], [class^="c__flow-"] > [class*=" c__pull-r-"], [class^="c__flow-"] > [class^="c__push-r-"], [class^="c__flow-"] > [class*=" c__push-r-"], [class*=" c__flow-"] > [class^="c__pull-r-"], [class*=" c__flow-"] > [class*=" c__pull-r-"], [class*=" c__flow-"] > [class^="c__push-r-"], [class*=" c__flow-"] > [class*=" c__push-r-"] { - margin-right: calc(99.99999% * var(--push-r) / var(--col-base)); - } - .c__span-auto, [class^="c__span-auto-"], [class*=" c__span-auto-"] { - flex: 1 1 0%; - --col-span: 0; - } - .c__span-all, [class^="c__span-all-"], [class*=" c__span-all-"] { - --col-span: var(--col-base); - } - [class^="c__span-y-"], [class*=" c__span-y-"] { - grid-row-end: span var(--row-span); - } - .c__span-1 > *, - .c__cols-1 > * { - --col-base: 1; - } - .c__span-1 { - --col-span: 1; - } - .c__span-y-1 { - --row-span: 1; - } - .c__cols-1.grid, .c__cols-1[class^="grid-"], .c__cols-1[class*=" grid-"] { - --col-span: 1; - } - .c__rows-1.grid, .c__rows-1[class^="grid-"], .c__rows-1[class*=" grid-"] { - --row-span: 1; - } - .c__span-2 > *, - .c__cols-2 > * { - --col-base: 2; - } - .c__span-2 { - --col-span: 2; - } - .c__span-y-2 { - --row-span: 2; - } - .c__cols-2.grid, .c__cols-2[class^="grid-"], .c__cols-2[class*=" grid-"] { - --col-span: 2; - } - .c__rows-2.grid, .c__rows-2[class^="grid-"], .c__rows-2[class*=" grid-"] { - --row-span: 2; - } - .c__span-3 > *, - .c__cols-3 > * { - --col-base: 3; - } - .c__span-3 { - --col-span: 3; - } - .c__span-y-3 { - --row-span: 3; - } - .c__cols-3.grid, .c__cols-3[class^="grid-"], .c__cols-3[class*=" grid-"] { - --col-span: 3; - } - .c__rows-3.grid, .c__rows-3[class^="grid-"], .c__rows-3[class*=" grid-"] { - --row-span: 3; - } - .c__span-4 > *, - .c__cols-4 > * { - --col-base: 4; - } - .c__span-4 { - --col-span: 4; - } - .c__span-y-4 { - --row-span: 4; - } - .c__cols-4.grid, .c__cols-4[class^="grid-"], .c__cols-4[class*=" grid-"] { - --col-span: 4; - } - .c__rows-4.grid, .c__rows-4[class^="grid-"], .c__rows-4[class*=" grid-"] { - --row-span: 4; - } - .c__span-5 > *, - .c__cols-5 > * { - --col-base: 5; - } - .c__span-5 { - --col-span: 5; - } - .c__span-y-5 { - --row-span: 5; - } - .c__cols-5.grid, .c__cols-5[class^="grid-"], .c__cols-5[class*=" grid-"] { - --col-span: 5; - } - .c__rows-5.grid, .c__rows-5[class^="grid-"], .c__rows-5[class*=" grid-"] { - --row-span: 5; - } - .c__span-6 > *, - .c__cols-6 > * { - --col-base: 6; - } - .c__span-6 { - --col-span: 6; - } - .c__span-y-6 { - --row-span: 6; - } - .c__cols-6.grid, .c__cols-6[class^="grid-"], .c__cols-6[class*=" grid-"] { - --col-span: 6; - } - .c__rows-6.grid, .c__rows-6[class^="grid-"], .c__rows-6[class*=" grid-"] { - --row-span: 6; - } - .c__span-7 > *, - .c__cols-7 > * { - --col-base: 7; - } - .c__span-7 { - --col-span: 7; - } - .c__span-y-7 { - --row-span: 7; - } - .c__cols-7.grid, .c__cols-7[class^="grid-"], .c__cols-7[class*=" grid-"] { - --col-span: 7; - } - .c__rows-7.grid, .c__rows-7[class^="grid-"], .c__rows-7[class*=" grid-"] { - --row-span: 7; - } - .c__span-8 > *, - .c__cols-8 > * { - --col-base: 8; - } - .c__span-8 { - --col-span: 8; - } - .c__span-y-8 { - --row-span: 8; - } - .c__cols-8.grid, .c__cols-8[class^="grid-"], .c__cols-8[class*=" grid-"] { - --col-span: 8; - } - .c__rows-8.grid, .c__rows-8[class^="grid-"], .c__rows-8[class*=" grid-"] { - --row-span: 8; - } - .c__span-9 > *, - .c__cols-9 > * { - --col-base: 9; - } - .c__span-9 { - --col-span: 9; - } - .c__span-y-9 { - --row-span: 9; - } - .c__cols-9.grid, .c__cols-9[class^="grid-"], .c__cols-9[class*=" grid-"] { - --col-span: 9; - } - .c__rows-9.grid, .c__rows-9[class^="grid-"], .c__rows-9[class*=" grid-"] { - --row-span: 9; - } - .c__span-10 > *, - .c__cols-10 > * { - --col-base: 10; - } - .c__span-10 { - --col-span: 10; - } - .c__span-y-10 { - --row-span: 10; - } - .c__cols-10.grid, .c__cols-10[class^="grid-"], .c__cols-10[class*=" grid-"] { - --col-span: 10; - } - .c__rows-10.grid, .c__rows-10[class^="grid-"], .c__rows-10[class*=" grid-"] { - --row-span: 10; - } - .c__span-11 > *, - .c__cols-11 > * { - --col-base: 11; - } - .c__span-11 { - --col-span: 11; - } - .c__span-y-11 { - --row-span: 11; - } - .c__cols-11.grid, .c__cols-11[class^="grid-"], .c__cols-11[class*=" grid-"] { - --col-span: 11; - } - .c__rows-11.grid, .c__rows-11[class^="grid-"], .c__rows-11[class*=" grid-"] { - --row-span: 11; - } - .c__span-12 > *, - .c__cols-12 > * { - --col-base: 12; - } - .c__span-12 { - --col-span: 12; - } - .c__span-y-12 { - --row-span: 12; - } - .c__cols-12.grid, .c__cols-12[class^="grid-"], .c__cols-12[class*=" grid-"] { - --col-span: 12; - } - .c__rows-12.grid, .c__rows-12[class^="grid-"], .c__rows-12[class*=" grid-"] { - --row-span: 12; - } -} diff --git a/tests/renders/modern-font.dartsass.css b/tests/renders/modern-font.dartsass.css deleted file mode 100644 index 9ca76ad..0000000 --- a/tests/renders/modern-font.dartsass.css +++ /dev/null @@ -1,187 +0,0 @@ -body { - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-kerning: normal; -} - -body, [class^=f-], [class*=" f-"] { - font-size: var(--font-size); - line-height: var(--line-height); - font-family: var(--font-family); - letter-spacing: var(--letter-spacing); - font-feature-settings: var(--font-feature-settings); -} - -[class^=f-], [class*=" f-"] { - --trim-adjacent: 0em; - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent)); - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em); -} -[class^=f-].trim, .trim > [class^=f-], .trim > [class*=" f-"], [class^=trim-] > [class^=f-], [class^=trim-] > [class*=" f-"], [class*=" trim-"] > [class^=f-], [class*=" trim-"] > [class*=" f-"], [class*=" f-"].trim { - margin-top: calc(0px - var(--trim-top)); - margin-bottom: calc(0px - var(--trim-bottom)); - margin-right: var(--trim-x); - margin-left: var(--trim-x); -} - -.trim > * + [class^=f-], .trim > * + [class*=" f-"], [class^=trim-] > * + [class^=f-], [class^=trim-] > * + [class*=" f-"], [class*=" trim-"] > * + [class^=f-], [class*=" trim-"] > * + [class*=" f-"] { - margin-top: calc(var(--stack-gap, 0em) - var(--trim-top)); -} - -[class^=f-] + [class^=f-], [class^=f-] + [class*=" f-"], [class*=" f-"] + [class^=f-], [class*=" f-"] + [class*=" f-"] { - --trim-adjacent: calc(1em - 1ex); -} - -.f-sans, [class^=f-sans-], [class*=" f-sans-"], body { - --font-family: MessinaSans; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-serif, [class^=f-serif-], [class*=" f-serif-"] { - --font-family: MessinaSerif; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-modern, [class^=f-modern-], [class*=" f-modern-"] { - --font-family: MessinaModern; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-sans-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-sans-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-sans-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-sans-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.f-serif-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-serif-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-serif-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-serif-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.f-modern-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-modern-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-modern-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-modern-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.plain p, .plain ul, .plain ol, .plain dl, .plain h3, .plain h4, .plain h5, .plain h6, .plain blockquote, [class^=plain-] p, [class^=plain-] ul, [class^=plain-] ol, [class^=plain-] dl, [class^=plain-] h3, [class^=plain-] h4, [class^=plain-] h5, [class^=plain-] h6, [class^=plain-] blockquote, [class*=" plain-"] p, [class*=" plain-"] ul, [class*=" plain-"] ol, [class*=" plain-"] dl, [class*=" plain-"] h3, [class*=" plain-"] h4, [class*=" plain-"] h5, [class*=" plain-"] h6, [class*=" plain-"] blockquote { - font-size: var(--font-size); - line-height: var(--line-height); - font-family: var(--font-family); - letter-spacing: var(--letter-spacing); - font-feature-settings: var(--font-feature-settings); - --trim-adjacent: 0em; - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent)); - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em); -} -.plain > p, .plain > ul, .plain > ol, .plain > dl, .plain > h3, .plain > h4, .plain > h5, .plain > h6, .plain > blockquote, [class^=plain-] > p, [class^=plain-] > ul, [class^=plain-] > ol, [class^=plain-] > dl, [class^=plain-] > h3, [class^=plain-] > h4, [class^=plain-] > h5, [class^=plain-] > h6, [class^=plain-] > blockquote, [class*=" plain-"] > p, [class*=" plain-"] > ul, [class*=" plain-"] > ol, [class*=" plain-"] > dl, [class*=" plain-"] > h3, [class*=" plain-"] > h4, [class*=" plain-"] > h5, [class*=" plain-"] > h6, [class*=" plain-"] > blockquote { - margin-top: calc(0px - var(--trim-top)); - margin-bottom: calc(0px - var(--trim-bottom)); - margin-right: var(--trim-x); - margin-left: var(--trim-x); -} - -.plain > * + p, .plain > * + ul, .plain > * + ol, .plain > * + dl, .plain > * + h3, .plain > * + h4, .plain > * + h5, .plain > * + h6, .plain > * + blockquote, [class^=plain-] > * + p, [class^=plain-] > * + ul, [class^=plain-] > * + ol, [class^=plain-] > * + dl, [class^=plain-] > * + h3, [class^=plain-] > * + h4, [class^=plain-] > * + h5, [class^=plain-] > * + h6, [class^=plain-] > * + blockquote, [class*=" plain-"] > * + p, [class*=" plain-"] > * + ul, [class*=" plain-"] > * + ol, [class*=" plain-"] > * + dl, [class*=" plain-"] > * + h3, [class*=" plain-"] > * + h4, [class*=" plain-"] > * + h5, [class*=" plain-"] > * + h6, [class*=" plain-"] > * + blockquote { - margin-top: calc(var(--stack-gap, 0) - var(--trim-top)); -} - -.plain p + p, .plain p + ul, .plain p + ol, .plain p + dl, .plain p + h3, .plain p + h4, .plain p + h5, .plain p + h6, .plain p + blockquote, .plain ul + p, .plain ul + ul, .plain ul + ol, .plain ul + dl, .plain ul + h3, .plain ul + h4, .plain ul + h5, .plain ul + h6, .plain ul + blockquote, .plain ol + p, .plain ol + ul, .plain ol + ol, .plain ol + dl, .plain ol + h3, .plain ol + h4, .plain ol + h5, .plain ol + h6, .plain ol + blockquote, .plain dl + p, .plain dl + ul, .plain dl + ol, .plain dl + dl, .plain dl + h3, .plain dl + h4, .plain dl + h5, .plain dl + h6, .plain dl + blockquote, .plain h3 + p, .plain h3 + ul, .plain h3 + ol, .plain h3 + dl, .plain h3 + h3, .plain h3 + h4, .plain h3 + h5, .plain h3 + h6, .plain h3 + blockquote, .plain h4 + p, .plain h4 + ul, .plain h4 + ol, .plain h4 + dl, .plain h4 + h3, .plain h4 + h4, .plain h4 + h5, .plain h4 + h6, .plain h4 + blockquote, .plain h5 + p, .plain h5 + ul, .plain h5 + ol, .plain h5 + dl, .plain h5 + h3, .plain h5 + h4, .plain h5 + h5, .plain h5 + h6, .plain h5 + blockquote, .plain h6 + p, .plain h6 + ul, .plain h6 + ol, .plain h6 + dl, .plain h6 + h3, .plain h6 + h4, .plain h6 + h5, .plain h6 + h6, .plain h6 + blockquote, .plain blockquote + p, .plain blockquote + ul, .plain blockquote + ol, .plain blockquote + dl, .plain blockquote + h3, .plain blockquote + h4, .plain blockquote + h5, .plain blockquote + h6, .plain blockquote + blockquote, [class^=plain-] p + p, [class^=plain-] p + ul, [class^=plain-] p + ol, [class^=plain-] p + dl, [class^=plain-] p + h3, [class^=plain-] p + h4, [class^=plain-] p + h5, [class^=plain-] p + h6, [class^=plain-] p + blockquote, [class^=plain-] ul + p, [class^=plain-] ul + ul, [class^=plain-] ul + ol, [class^=plain-] ul + dl, [class^=plain-] ul + h3, [class^=plain-] ul + h4, [class^=plain-] ul + h5, [class^=plain-] ul + h6, [class^=plain-] ul + blockquote, [class^=plain-] ol + p, [class^=plain-] ol + ul, [class^=plain-] ol + ol, [class^=plain-] ol + dl, [class^=plain-] ol + h3, [class^=plain-] ol + h4, [class^=plain-] ol + h5, [class^=plain-] ol + h6, [class^=plain-] ol + blockquote, [class^=plain-] dl + p, [class^=plain-] dl + ul, [class^=plain-] dl + ol, [class^=plain-] dl + dl, [class^=plain-] dl + h3, [class^=plain-] dl + h4, [class^=plain-] dl + h5, [class^=plain-] dl + h6, [class^=plain-] dl + blockquote, [class^=plain-] h3 + p, [class^=plain-] h3 + ul, [class^=plain-] h3 + ol, [class^=plain-] h3 + dl, [class^=plain-] h3 + h3, [class^=plain-] h3 + h4, [class^=plain-] h3 + h5, [class^=plain-] h3 + h6, [class^=plain-] h3 + blockquote, [class^=plain-] h4 + p, [class^=plain-] h4 + ul, [class^=plain-] h4 + ol, [class^=plain-] h4 + dl, [class^=plain-] h4 + h3, [class^=plain-] h4 + h4, [class^=plain-] h4 + h5, [class^=plain-] h4 + h6, [class^=plain-] h4 + blockquote, [class^=plain-] h5 + p, [class^=plain-] h5 + ul, [class^=plain-] h5 + ol, [class^=plain-] h5 + dl, [class^=plain-] h5 + h3, [class^=plain-] h5 + h4, [class^=plain-] h5 + h5, [class^=plain-] h5 + h6, [class^=plain-] h5 + blockquote, [class^=plain-] h6 + p, [class^=plain-] h6 + ul, [class^=plain-] h6 + ol, [class^=plain-] h6 + dl, [class^=plain-] h6 + h3, [class^=plain-] h6 + h4, [class^=plain-] h6 + h5, [class^=plain-] h6 + h6, [class^=plain-] h6 + blockquote, [class^=plain-] blockquote + p, [class^=plain-] blockquote + ul, [class^=plain-] blockquote + ol, [class^=plain-] blockquote + dl, [class^=plain-] blockquote + h3, [class^=plain-] blockquote + h4, [class^=plain-] blockquote + h5, [class^=plain-] blockquote + h6, [class^=plain-] blockquote + blockquote, [class*=" plain-"] p + p, [class*=" plain-"] p + ul, [class*=" plain-"] p + ol, [class*=" plain-"] p + dl, [class*=" plain-"] p + h3, [class*=" plain-"] p + h4, [class*=" plain-"] p + h5, [class*=" plain-"] p + h6, [class*=" plain-"] p + blockquote, [class*=" plain-"] ul + p, [class*=" plain-"] ul + ul, [class*=" plain-"] ul + ol, [class*=" plain-"] ul + dl, [class*=" plain-"] ul + h3, [class*=" plain-"] ul + h4, [class*=" plain-"] ul + h5, [class*=" plain-"] ul + h6, [class*=" plain-"] ul + blockquote, [class*=" plain-"] ol + p, [class*=" plain-"] ol + ul, [class*=" plain-"] ol + ol, [class*=" plain-"] ol + dl, [class*=" plain-"] ol + h3, [class*=" plain-"] ol + h4, [class*=" plain-"] ol + h5, [class*=" plain-"] ol + h6, [class*=" plain-"] ol + blockquote, [class*=" plain-"] dl + p, [class*=" plain-"] dl + ul, [class*=" plain-"] dl + ol, [class*=" plain-"] dl + dl, [class*=" plain-"] dl + h3, [class*=" plain-"] dl + h4, [class*=" plain-"] dl + h5, [class*=" plain-"] dl + h6, [class*=" plain-"] dl + blockquote, [class*=" plain-"] h3 + p, [class*=" plain-"] h3 + ul, [class*=" plain-"] h3 + ol, [class*=" plain-"] h3 + dl, [class*=" plain-"] h3 + h3, [class*=" plain-"] h3 + h4, [class*=" plain-"] h3 + h5, [class*=" plain-"] h3 + h6, [class*=" plain-"] h3 + blockquote, [class*=" plain-"] h4 + p, [class*=" plain-"] h4 + ul, [class*=" plain-"] h4 + ol, [class*=" plain-"] h4 + dl, [class*=" plain-"] h4 + h3, [class*=" plain-"] h4 + h4, [class*=" plain-"] h4 + h5, [class*=" plain-"] h4 + h6, [class*=" plain-"] h4 + blockquote, [class*=" plain-"] h5 + p, [class*=" plain-"] h5 + ul, [class*=" plain-"] h5 + ol, [class*=" plain-"] h5 + dl, [class*=" plain-"] h5 + h3, [class*=" plain-"] h5 + h4, [class*=" plain-"] h5 + h5, [class*=" plain-"] h5 + h6, [class*=" plain-"] h5 + blockquote, [class*=" plain-"] h6 + p, [class*=" plain-"] h6 + ul, [class*=" plain-"] h6 + ol, [class*=" plain-"] h6 + dl, [class*=" plain-"] h6 + h3, [class*=" plain-"] h6 + h4, [class*=" plain-"] h6 + h5, [class*=" plain-"] h6 + h6, [class*=" plain-"] h6 + blockquote, [class*=" plain-"] blockquote + p, [class*=" plain-"] blockquote + ul, [class*=" plain-"] blockquote + ol, [class*=" plain-"] blockquote + dl, [class*=" plain-"] blockquote + h3, [class*=" plain-"] blockquote + h4, [class*=" plain-"] blockquote + h5, [class*=" plain-"] blockquote + h6, [class*=" plain-"] blockquote + blockquote { - --trim-adjacent: 1em/2; -} - -.plain h6 { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 1rem; - --line-height: 1.3; -} -.plain h5, .plain blockquote { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 1rem; - --line-height: 1.3; -} -.plain h4, .plain p, .plain ul, .plain ol, .plain dl { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 2rem; - --line-height: 1.2; -} -.plain h3 { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 3rem; - --line-height: 1.1; -} \ No newline at end of file diff --git a/tests/renders/modern-font.libsass.css b/tests/renders/modern-font.libsass.css deleted file mode 100644 index eaa2843..0000000 --- a/tests/renders/modern-font.libsass.css +++ /dev/null @@ -1,192 +0,0 @@ -body { - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-kerning: normal; -} - -body, [class^="f-"], [class*=" f-"] { - font-size: var(--font-size); - line-height: var(--line-height); - font-family: var(--font-family); - letter-spacing: var(--letter-spacing); - font-feature-settings: var(--font-feature-settings); -} - -[class^="f-"], [class*=" f-"] { - --trim-adjacent: 0em; - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent)); - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em); -} - -[class^="f-"].trim, .trim > [class^="f-"], .trim > [class*=" f-"], [class^="trim-"] > [class^="f-"], [class^="trim-"] > [class*=" f-"], [class*=" trim-"] > [class^="f-"], [class*=" trim-"] > [class*=" f-"], [class*=" f-"].trim { - margin-top: calc(0px - var(--trim-top)); - margin-bottom: calc(0px - var(--trim-bottom)); - margin-right: var(--trim-x); - margin-left: var(--trim-x); -} - -.trim > * + [class^="f-"], .trim > * + [class*=" f-"], [class^="trim-"] > * + [class^="f-"], [class^="trim-"] > * + [class*=" f-"], [class*=" trim-"] > * + [class^="f-"], [class*=" trim-"] > * + [class*=" f-"] { - margin-top: calc(var(--stack-gap, 0em) - var(--trim-top)); -} - -[class^="f-"] + [class^="f-"], [class^="f-"] + [class*=" f-"], [class*=" f-"] + [class^="f-"], [class*=" f-"] + [class*=" f-"] { - --trim-adjacent: calc(1em - 1ex); -} - -.f-sans, [class^="f-sans-"], [class*=" f-sans-"], body { - --font-family: MessinaSans; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-serif, [class^="f-serif-"], [class*=" f-serif-"] { - --font-family: MessinaSerif; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-modern, [class^="f-modern-"], [class*=" f-modern-"] { - --font-family: MessinaModern; - --letter-spacing: calc(1px - 0.025em); - --font-feature-settings: "kern" 1; - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; -} - -.f-sans-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-sans-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-sans-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-sans-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.f-serif-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-serif-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-serif-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-serif-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.f-modern-xs { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-modern-s { - --font-size: 1rem; - --line-height: 1.3; -} - -.f-modern-m { - --font-size: 2rem; - --line-height: 1.2; -} - -.f-modern-l { - --font-size: 3rem; - --line-height: 1.1; -} - -.plain p, .plain ul, .plain ol, .plain dl, .plain h3, .plain h4, .plain h5, .plain h6, .plain blockquote, [class^="plain-"] p, [class^="plain-"] ul, [class^="plain-"] ol, [class^="plain-"] dl, [class^="plain-"] h3, [class^="plain-"] h4, [class^="plain-"] h5, [class^="plain-"] h6, [class^="plain-"] blockquote, [class*=" plain-"] p, [class*=" plain-"] ul, [class*=" plain-"] ol, [class*=" plain-"] dl, [class*=" plain-"] h3, [class*=" plain-"] h4, [class*=" plain-"] h5, [class*=" plain-"] h6, [class*=" plain-"] blockquote { - font-size: var(--font-size); - line-height: var(--line-height); - font-family: var(--font-family); - letter-spacing: var(--letter-spacing); - font-feature-settings: var(--font-feature-settings); - --trim-adjacent: 0em; - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent)); - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em); -} - -.plain > p, .plain > ul, .plain > ol, .plain > dl, .plain > h3, .plain > h4, .plain > h5, .plain > h6, .plain > blockquote, [class^="plain-"] > p, [class^="plain-"] > ul, [class^="plain-"] > ol, [class^="plain-"] > dl, [class^="plain-"] > h3, [class^="plain-"] > h4, [class^="plain-"] > h5, [class^="plain-"] > h6, [class^="plain-"] > blockquote, [class*=" plain-"] > p, [class*=" plain-"] > ul, [class*=" plain-"] > ol, [class*=" plain-"] > dl, [class*=" plain-"] > h3, [class*=" plain-"] > h4, [class*=" plain-"] > h5, [class*=" plain-"] > h6, [class*=" plain-"] > blockquote { - margin-top: calc(0px - var(--trim-top)); - margin-bottom: calc(0px - var(--trim-bottom)); - margin-right: var(--trim-x); - margin-left: var(--trim-x); -} - -.plain > * + p, .plain > * + ul, .plain > * + ol, .plain > * + dl, .plain > * + h3, .plain > * + h4, .plain > * + h5, .plain > * + h6, .plain > * + blockquote, [class^="plain-"] > * + p, [class^="plain-"] > * + ul, [class^="plain-"] > * + ol, [class^="plain-"] > * + dl, [class^="plain-"] > * + h3, [class^="plain-"] > * + h4, [class^="plain-"] > * + h5, [class^="plain-"] > * + h6, [class^="plain-"] > * + blockquote, [class*=" plain-"] > * + p, [class*=" plain-"] > * + ul, [class*=" plain-"] > * + ol, [class*=" plain-"] > * + dl, [class*=" plain-"] > * + h3, [class*=" plain-"] > * + h4, [class*=" plain-"] > * + h5, [class*=" plain-"] > * + h6, [class*=" plain-"] > * + blockquote { - margin-top: calc(var(--stack-gap, 0) - var(--trim-top)); -} - -.plain p + p, .plain p + ul, .plain p + ol, .plain p + dl, .plain p + h3, .plain p + h4, .plain p + h5, .plain p + h6, .plain p + blockquote, .plain ul + p, .plain ul + ul, .plain ul + ol, .plain ul + dl, .plain ul + h3, .plain ul + h4, .plain ul + h5, .plain ul + h6, .plain ul + blockquote, .plain ol + p, .plain ol + ul, .plain ol + ol, .plain ol + dl, .plain ol + h3, .plain ol + h4, .plain ol + h5, .plain ol + h6, .plain ol + blockquote, .plain dl + p, .plain dl + ul, .plain dl + ol, .plain dl + dl, .plain dl + h3, .plain dl + h4, .plain dl + h5, .plain dl + h6, .plain dl + blockquote, .plain h3 + p, .plain h3 + ul, .plain h3 + ol, .plain h3 + dl, .plain h3 + h3, .plain h3 + h4, .plain h3 + h5, .plain h3 + h6, .plain h3 + blockquote, .plain h4 + p, .plain h4 + ul, .plain h4 + ol, .plain h4 + dl, .plain h4 + h3, .plain h4 + h4, .plain h4 + h5, .plain h4 + h6, .plain h4 + blockquote, .plain h5 + p, .plain h5 + ul, .plain h5 + ol, .plain h5 + dl, .plain h5 + h3, .plain h5 + h4, .plain h5 + h5, .plain h5 + h6, .plain h5 + blockquote, .plain h6 + p, .plain h6 + ul, .plain h6 + ol, .plain h6 + dl, .plain h6 + h3, .plain h6 + h4, .plain h6 + h5, .plain h6 + h6, .plain h6 + blockquote, .plain blockquote + p, .plain blockquote + ul, .plain blockquote + ol, .plain blockquote + dl, .plain blockquote + h3, .plain blockquote + h4, .plain blockquote + h5, .plain blockquote + h6, .plain blockquote + blockquote, [class^="plain-"] p + p, [class^="plain-"] p + ul, [class^="plain-"] p + ol, [class^="plain-"] p + dl, [class^="plain-"] p + h3, [class^="plain-"] p + h4, [class^="plain-"] p + h5, [class^="plain-"] p + h6, [class^="plain-"] p + blockquote, [class^="plain-"] ul + p, [class^="plain-"] ul + ul, [class^="plain-"] ul + ol, [class^="plain-"] ul + dl, [class^="plain-"] ul + h3, [class^="plain-"] ul + h4, [class^="plain-"] ul + h5, [class^="plain-"] ul + h6, [class^="plain-"] ul + blockquote, [class^="plain-"] ol + p, [class^="plain-"] ol + ul, [class^="plain-"] ol + ol, [class^="plain-"] ol + dl, [class^="plain-"] ol + h3, [class^="plain-"] ol + h4, [class^="plain-"] ol + h5, [class^="plain-"] ol + h6, [class^="plain-"] ol + blockquote, [class^="plain-"] dl + p, [class^="plain-"] dl + ul, [class^="plain-"] dl + ol, [class^="plain-"] dl + dl, [class^="plain-"] dl + h3, [class^="plain-"] dl + h4, [class^="plain-"] dl + h5, [class^="plain-"] dl + h6, [class^="plain-"] dl + blockquote, [class^="plain-"] h3 + p, [class^="plain-"] h3 + ul, [class^="plain-"] h3 + ol, [class^="plain-"] h3 + dl, [class^="plain-"] h3 + h3, [class^="plain-"] h3 + h4, [class^="plain-"] h3 + h5, [class^="plain-"] h3 + h6, [class^="plain-"] h3 + blockquote, [class^="plain-"] h4 + p, [class^="plain-"] h4 + ul, [class^="plain-"] h4 + ol, [class^="plain-"] h4 + dl, [class^="plain-"] h4 + h3, [class^="plain-"] h4 + h4, [class^="plain-"] h4 + h5, [class^="plain-"] h4 + h6, [class^="plain-"] h4 + blockquote, [class^="plain-"] h5 + p, [class^="plain-"] h5 + ul, [class^="plain-"] h5 + ol, [class^="plain-"] h5 + dl, [class^="plain-"] h5 + h3, [class^="plain-"] h5 + h4, [class^="plain-"] h5 + h5, [class^="plain-"] h5 + h6, [class^="plain-"] h5 + blockquote, [class^="plain-"] h6 + p, [class^="plain-"] h6 + ul, [class^="plain-"] h6 + ol, [class^="plain-"] h6 + dl, [class^="plain-"] h6 + h3, [class^="plain-"] h6 + h4, [class^="plain-"] h6 + h5, [class^="plain-"] h6 + h6, [class^="plain-"] h6 + blockquote, [class^="plain-"] blockquote + p, [class^="plain-"] blockquote + ul, [class^="plain-"] blockquote + ol, [class^="plain-"] blockquote + dl, [class^="plain-"] blockquote + h3, [class^="plain-"] blockquote + h4, [class^="plain-"] blockquote + h5, [class^="plain-"] blockquote + h6, [class^="plain-"] blockquote + blockquote, [class*=" plain-"] p + p, [class*=" plain-"] p + ul, [class*=" plain-"] p + ol, [class*=" plain-"] p + dl, [class*=" plain-"] p + h3, [class*=" plain-"] p + h4, [class*=" plain-"] p + h5, [class*=" plain-"] p + h6, [class*=" plain-"] p + blockquote, [class*=" plain-"] ul + p, [class*=" plain-"] ul + ul, [class*=" plain-"] ul + ol, [class*=" plain-"] ul + dl, [class*=" plain-"] ul + h3, [class*=" plain-"] ul + h4, [class*=" plain-"] ul + h5, [class*=" plain-"] ul + h6, [class*=" plain-"] ul + blockquote, [class*=" plain-"] ol + p, [class*=" plain-"] ol + ul, [class*=" plain-"] ol + ol, [class*=" plain-"] ol + dl, [class*=" plain-"] ol + h3, [class*=" plain-"] ol + h4, [class*=" plain-"] ol + h5, [class*=" plain-"] ol + h6, [class*=" plain-"] ol + blockquote, [class*=" plain-"] dl + p, [class*=" plain-"] dl + ul, [class*=" plain-"] dl + ol, [class*=" plain-"] dl + dl, [class*=" plain-"] dl + h3, [class*=" plain-"] dl + h4, [class*=" plain-"] dl + h5, [class*=" plain-"] dl + h6, [class*=" plain-"] dl + blockquote, [class*=" plain-"] h3 + p, [class*=" plain-"] h3 + ul, [class*=" plain-"] h3 + ol, [class*=" plain-"] h3 + dl, [class*=" plain-"] h3 + h3, [class*=" plain-"] h3 + h4, [class*=" plain-"] h3 + h5, [class*=" plain-"] h3 + h6, [class*=" plain-"] h3 + blockquote, [class*=" plain-"] h4 + p, [class*=" plain-"] h4 + ul, [class*=" plain-"] h4 + ol, [class*=" plain-"] h4 + dl, [class*=" plain-"] h4 + h3, [class*=" plain-"] h4 + h4, [class*=" plain-"] h4 + h5, [class*=" plain-"] h4 + h6, [class*=" plain-"] h4 + blockquote, [class*=" plain-"] h5 + p, [class*=" plain-"] h5 + ul, [class*=" plain-"] h5 + ol, [class*=" plain-"] h5 + dl, [class*=" plain-"] h5 + h3, [class*=" plain-"] h5 + h4, [class*=" plain-"] h5 + h5, [class*=" plain-"] h5 + h6, [class*=" plain-"] h5 + blockquote, [class*=" plain-"] h6 + p, [class*=" plain-"] h6 + ul, [class*=" plain-"] h6 + ol, [class*=" plain-"] h6 + dl, [class*=" plain-"] h6 + h3, [class*=" plain-"] h6 + h4, [class*=" plain-"] h6 + h5, [class*=" plain-"] h6 + h6, [class*=" plain-"] h6 + blockquote, [class*=" plain-"] blockquote + p, [class*=" plain-"] blockquote + ul, [class*=" plain-"] blockquote + ol, [class*=" plain-"] blockquote + dl, [class*=" plain-"] blockquote + h3, [class*=" plain-"] blockquote + h4, [class*=" plain-"] blockquote + h5, [class*=" plain-"] blockquote + h6, [class*=" plain-"] blockquote + blockquote { - --trim-adjacent: 1em/2; -} - -.plain h6 { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 1rem; - --line-height: 1.3; -} - -.plain h5, .plain blockquote { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 1rem; - --line-height: 1.3; -} - -.plain h4, .plain p, .plain ul, .plain ol, .plain dl { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 2rem; - --line-height: 1.2; -} - -.plain h3 { - --font-family: MessinaSans; - --font-feature-settings: "kern" 1; - --letter-spacing: calc(1px - 0.025em); - --trim-x: calc(1px - 0.1em); - --trim-capline: 0; - --trim-baseline: 0; - --font-size: 3rem; - --line-height: 1.1; -} diff --git a/tests/renders/modern-frame.dartsass.css b/tests/renders/modern-frame.dartsass.css deleted file mode 100644 index 01d8814..0000000 --- a/tests/renders/modern-frame.dartsass.css +++ /dev/null @@ -1,147 +0,0 @@ -.bleed, [class^=bleed-], [class*=" bleed-"] { - width: unset !important; -} - -.frame, .frame-x, .frame-right { - padding-right: var(--outer-right); -} - -.frame, .frame-x, .frame-left { - padding-left: var(--outer-left); -} - -.frame-y, .frame-top { - padding-top: var(--outer-top); -} - -.frame-y, .frame-bottom { - padding-bottom: var(--outer-bottom); -} - -.bleed, .bleed-x, .bleed-right { - margin-right: calc(var(--outer-right) * -1); -} - -.bleed, .bleed-x, .bleed-left { - margin-left: calc(var(--outer-left) * -1); -} - -.bleed-y, .bleed-top { - margin-top: calc(var(--outer-top) * -1); -} - -.bleed-y, .bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); -} - -@media screen and (min-width: 20em) { - .a__bleed, [class^=a__bleed-], [class*=" a__bleed-"] { - width: unset !important; - } - - .a__frame, .a__frame-x, .a__frame-right { - padding-right: var(--outer-right); - } - - .a__frame, .a__frame-x, .a__frame-left { - padding-left: var(--outer-left); - } - - .a__frame-y, .a__frame-top { - padding-top: var(--outer-top); - } - - .a__frame-y, .a__frame-bottom { - padding-bottom: var(--outer-bottom); - } - - .a__bleed, .a__bleed-x, .a__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - - .a__bleed, .a__bleed-x, .a__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - - .a__bleed-y, .a__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - - .a__bleed-y, .a__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} -@media screen and (min-width: 30em) { - .b__bleed, [class^=b__bleed-], [class*=" b__bleed-"] { - width: unset !important; - } - - .b__frame, .b__frame-x, .b__frame-right { - padding-right: var(--outer-right); - } - - .b__frame, .b__frame-x, .b__frame-left { - padding-left: var(--outer-left); - } - - .b__frame-y, .b__frame-top { - padding-top: var(--outer-top); - } - - .b__frame-y, .b__frame-bottom { - padding-bottom: var(--outer-bottom); - } - - .b__bleed, .b__bleed-x, .b__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - - .b__bleed, .b__bleed-x, .b__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - - .b__bleed-y, .b__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - - .b__bleed-y, .b__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} -@media screen and (min-width: 40em) { - .c__bleed, [class^=c__bleed-], [class*=" c__bleed-"] { - width: unset !important; - } - - .c__frame, .c__frame-x, .c__frame-right { - padding-right: var(--outer-right); - } - - .c__frame, .c__frame-x, .c__frame-left { - padding-left: var(--outer-left); - } - - .c__frame-y, .c__frame-top { - padding-top: var(--outer-top); - } - - .c__frame-y, .c__frame-bottom { - padding-bottom: var(--outer-bottom); - } - - .c__bleed, .c__bleed-x, .c__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - - .c__bleed, .c__bleed-x, .c__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - - .c__bleed-y, .c__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - - .c__bleed-y, .c__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} \ No newline at end of file diff --git a/tests/renders/modern-frame.libsass.css b/tests/renders/modern-frame.libsass.css deleted file mode 100644 index 501b5d8..0000000 --- a/tests/renders/modern-frame.libsass.css +++ /dev/null @@ -1,125 +0,0 @@ -.bleed, [class^="bleed-"], [class*=" bleed-"] { - width: unset !important; -} - -.frame, .frame-x, .frame-right { - padding-right: var(--outer-right); -} - -.frame, .frame-x, .frame-left { - padding-left: var(--outer-left); -} - -.frame-y, .frame-top { - padding-top: var(--outer-top); -} - -.frame-y, .frame-bottom { - padding-bottom: var(--outer-bottom); -} - -.bleed, .bleed-x, .bleed-right { - margin-right: calc(var(--outer-right) * -1); -} - -.bleed, .bleed-x, .bleed-left { - margin-left: calc(var(--outer-left) * -1); -} - -.bleed-y, .bleed-top { - margin-top: calc(var(--outer-top) * -1); -} - -.bleed-y, .bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); -} - -@media screen and (min-width: 20em) { - .a__bleed, [class^="a__bleed-"], [class*=" a__bleed-"] { - width: unset !important; - } - .a__frame, .a__frame-x, .a__frame-right { - padding-right: var(--outer-right); - } - .a__frame, .a__frame-x, .a__frame-left { - padding-left: var(--outer-left); - } - .a__frame-y, .a__frame-top { - padding-top: var(--outer-top); - } - .a__frame-y, .a__frame-bottom { - padding-bottom: var(--outer-bottom); - } - .a__bleed, .a__bleed-x, .a__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - .a__bleed, .a__bleed-x, .a__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - .a__bleed-y, .a__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - .a__bleed-y, .a__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} - -@media screen and (min-width: 30em) { - .b__bleed, [class^="b__bleed-"], [class*=" b__bleed-"] { - width: unset !important; - } - .b__frame, .b__frame-x, .b__frame-right { - padding-right: var(--outer-right); - } - .b__frame, .b__frame-x, .b__frame-left { - padding-left: var(--outer-left); - } - .b__frame-y, .b__frame-top { - padding-top: var(--outer-top); - } - .b__frame-y, .b__frame-bottom { - padding-bottom: var(--outer-bottom); - } - .b__bleed, .b__bleed-x, .b__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - .b__bleed, .b__bleed-x, .b__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - .b__bleed-y, .b__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - .b__bleed-y, .b__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} - -@media screen and (min-width: 40em) { - .c__bleed, [class^="c__bleed-"], [class*=" c__bleed-"] { - width: unset !important; - } - .c__frame, .c__frame-x, .c__frame-right { - padding-right: var(--outer-right); - } - .c__frame, .c__frame-x, .c__frame-left { - padding-left: var(--outer-left); - } - .c__frame-y, .c__frame-top { - padding-top: var(--outer-top); - } - .c__frame-y, .c__frame-bottom { - padding-bottom: var(--outer-bottom); - } - .c__bleed, .c__bleed-x, .c__bleed-right { - margin-right: calc(var(--outer-right) * -1); - } - .c__bleed, .c__bleed-x, .c__bleed-left { - margin-left: calc(var(--outer-left) * -1); - } - .c__bleed-y, .c__bleed-top { - margin-top: calc(var(--outer-top) * -1); - } - .c__bleed-y, .c__bleed-bottom { - margin-bottom: calc(var(--outer-bottom) * -1); - } -} diff --git a/tests/renders/modern-helper.dartsass.css b/tests/renders/modern-helper.dartsass.css deleted file mode 100644 index e91aa83..0000000 --- a/tests/renders/modern-helper.dartsass.css +++ /dev/null @@ -1,1387 +0,0 @@ -:root { - --font-size: 16px; - --line-height: 1.25; - --inner-x: 1rem; - --inner-y: 1.5rem; - --outer-top: 2rem; - --outer-right: 2rem; - --outer-bottom: 2rem; - --outer-left: 2rem; - --grid-cols: 12; - --outer-width: 100%; - --inner-y-s: calc(var(--inner-y) * 0.5); - --inner-y-m: 3.5rem; - --inner-y-l: calc(var(--inner-y) * 2); - --inner-x-s: calc(var(--inner-x) * 0.5); - --inner-x-m: calc(var(--inner-x) * 1); - --inner-x-l: calc(var(--inner-x) * 2); - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left))); -} - -html { - font-size: var(--font-size); - line-height: var(--line-height); -} - -@media screen and (min-width: 30em) { - :root { - --breakpoint: 30em; - --outer-width: 30rem; - } -} -@media screen and (min-width: 40em) { - :root { - --breakpoint: 40em; - --inner-y-l: 4px; - --outer-width: 40rem; - } -} -@media screen and (min-width: 60em) { - :root { - --font-size: 18px; - --breakpoint: 60em; - --outer-right: 80px; - --outer-width: 53.3333333333rem; - } -} -.strong, .bold { - font-weight: bold; -} - -.em, .italic { - font-style: italic; -} - -.clearfix::after { - content: ""; - display: table; - clear: both; -} -@supports (display: flow-root) { - .clearfix { - display: flow-root; - } - .clearfix::after { - content: none; - } -} - -.nobr { - white-space: nowrap; - text-overflow: ellipsis; -} - -.is-scrolling, -.is-scrolling * { - pointer-events: none !important; -} - -.hold, [class^=hold-], [class*=" hold-"] { - position: relative; -} - -.stop, .trap, .trim { - padding-top: 0.1px; - padding-bottom: 0.1px; -} - -.clip, [class^=clip-], [class*=" clip-"] { - overflow: hidden !important; - position: relative; - z-index: 0; -} - -.clip-x { - overflow-x: hidden; - overflow-y: visible; -} - -.clip-y { - overflow-y: hidden; - overflow-x: visible; -} - -.clip-circle { - border-radius: 50%; -} - -.fix, [class^=fix-], [class*=" fix-"] { - position: fixed; -} - -.abs, [class^=abs-], [class*=" abs-"] { - position: absolute; -} - -.aspect, [class^=aspect-], [class*=" aspect-"] { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} -.aspect > *, [class^=aspect-] > *, [class*=" aspect-"] > * { - flex: 0 0 auto; - width: 100%; -} -.aspect::before, [class^=aspect-]::before, [class*=" aspect-"]::before { - content: ""; - display: block; - width: 0.01px; - height: 0; - padding-bottom: calc(1 / var(--aspect, 1) * 100%); -} - -.show-on-focus { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); -} -.show-on-focus:focus { - z-index: 20; - width: auto; - height: auto; - clip: auto; -} - -.vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; -} -body:hover .vhide a, body:hover .vhide input, body:hover .vhide button { - display: none !important; -} - -.hide { - pointer-events: none; - visibility: hidden; - opacity: 0; -} - -.show { - pointer-events: initial; - visibility: visible; - opacity: 1; -} - -.d-none { - display: none !important; -} - -.d-flex { - display: flex !important; -} - -.d-flex-y { - display: flex !important; - flex-direction: column; -} - -.d-grid { - display: grid !important; -} - -.d-grid-y { - display: grid !important; - grid-auto-flow: column; -} - -.d-block { - display: block !important; -} - -.d-iblock { - display: inline-block !important; - vertical-align: baseline; -} - -.d-inline { - display: inline !important; - vertical-align: baseline; -} - -.static { - position: static; -} - -.rel { - position: relative; -} - -.fix { - position: fixed; -} - -.fix-tl { - top: 0; - left: 0; -} - -.fix-tr { - top: 0; - right: 0; -} - -.fix-bl { - bottom: 0; - left: 0; -} - -.fix-br { - bottom: 0; - right: 0; -} - -.fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.abs { - position: absolute; -} - -.abs-tl { - top: 0; - left: 0; -} - -.abs-tr { - top: 0; - right: 0; -} - -.abs-bl { - bottom: 0; - left: 0; -} - -.abs-br { - bottom: 0; - right: 0; -} - -.abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} - -.abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; -} - -.a-left { - text-align: left; -} - -.a-center { - text-align: center; -} - -.a-right { - text-align: right; -} - -.a-top { - vertical-align: top; -} - -.a-middle { - vertical-align: middle; -} - -.a-baseline { - vertical-align: baseline; -} - -.a-bottom { - vertical-align: bottom; -} - -.ai-stretch { - align-items: stretch; -} - -.ai-center { - align-items: center; -} - -.ai-baseline { - align-items: baseline; -} - -.ai-start { - align-items: flex-start; -} - -.ai-end { - align-items: flex-end; -} - -.as-stretch { - align-self: stretch; -} - -.as-center { - align-self: center; -} - -.as-baseline { - align-self: baseline; -} - -.as-start { - align-self: flex-start; -} - -.as-end { - align-self: flex-end; -} - -.ac-stretch { - align-content: stretch; -} - -.ac-center { - align-content: center; -} - -.ac-baseline { - align-content: baseline; -} - -.ac-start { - align-content: flex-start; -} - -.ac-end { - align-content: flex-end; -} - -.ac-between { - align-content: space-between; -} - -.ac-around { - align-content: space-around; -} - -.jc-stretch { - justify-content: stretch; -} - -.jc-center { - justify-content: center; -} - -.jc-start { - justify-content: flex-start; -} - -.jc-end { - justify-content: flex-end; -} - -.jc-between { - justify-content: space-between; -} - -.jc-around { - justify-content: space-around; -} - -.jc-evenly { - justify-content: space-evenly; -} - -.flex-1-0 { - flex: 1 0 auto; -} - -.flex-0-1 { - flex: 0 1 auto; -} - -.flex-1-1 { - flex: 1 1 auto; -} - -.flex-0-0 { - flex: 0 0 auto; -} - -.fit-none { - object-fit: none; -} - -.fit-fill { - object-fit: fill; -} - -.fit-cover { - object-fit: cover; -} - -.fit-contain { - object-fit: contain; -} - -.fit-scale-down { - object-fit: scale-down; -} - -@media screen and (min-width: 30em) { - .a__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .a__vhide a, body:hover .a__vhide input, body:hover .a__vhide button { - display: none !important; - } - - .a__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - - .a__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - - .a__d-none { - display: none !important; - } - - .a__d-flex { - display: flex !important; - } - - .a__d-flex-y { - display: flex !important; - flex-direction: column; - } - - .a__d-grid { - display: grid !important; - } - - .a__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - - .a__d-block { - display: block !important; - } - - .a__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - - .a__d-inline { - display: inline !important; - vertical-align: baseline; - } - - .a__static { - position: static; - } - - .a__rel { - position: relative; - } - - .a__fix { - position: fixed; - } - - .a__fix-tl { - top: 0; - left: 0; - } - - .a__fix-tr { - top: 0; - right: 0; - } - - .a__fix-bl { - bottom: 0; - left: 0; - } - - .a__fix-br { - bottom: 0; - right: 0; - } - - .a__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .a__abs { - position: absolute; - } - - .a__abs-tl { - top: 0; - left: 0; - } - - .a__abs-tr { - top: 0; - right: 0; - } - - .a__abs-bl { - bottom: 0; - left: 0; - } - - .a__abs-br { - bottom: 0; - right: 0; - } - - .a__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .a__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - .a__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - - .a__a-left { - text-align: left; - } - - .a__a-center { - text-align: center; - } - - .a__a-right { - text-align: right; - } - - .a__a-top { - vertical-align: top; - } - - .a__a-middle { - vertical-align: middle; - } - - .a__a-baseline { - vertical-align: baseline; - } - - .a__a-bottom { - vertical-align: bottom; - } - - .a__ai-stretch { - align-items: stretch; - } - - .a__ai-center { - align-items: center; - } - - .a__ai-baseline { - align-items: baseline; - } - - .a__ai-start { - align-items: flex-start; - } - - .a__ai-end { - align-items: flex-end; - } - - .a__as-stretch { - align-self: stretch; - } - - .a__as-center { - align-self: center; - } - - .a__as-baseline { - align-self: baseline; - } - - .a__as-start { - align-self: flex-start; - } - - .a__as-end { - align-self: flex-end; - } - - .a__ac-stretch { - align-content: stretch; - } - - .a__ac-center { - align-content: center; - } - - .a__ac-baseline { - align-content: baseline; - } - - .a__ac-start { - align-content: flex-start; - } - - .a__ac-end { - align-content: flex-end; - } - - .a__ac-between { - align-content: space-between; - } - - .a__ac-around { - align-content: space-around; - } - - .a__jc-stretch { - justify-content: stretch; - } - - .a__jc-center { - justify-content: center; - } - - .a__jc-start { - justify-content: flex-start; - } - - .a__jc-end { - justify-content: flex-end; - } - - .a__jc-between { - justify-content: space-between; - } - - .a__jc-around { - justify-content: space-around; - } - - .a__jc-evenly { - justify-content: space-evenly; - } - - .a__flex-1-0 { - flex: 1 0 auto; - } - - .a__flex-0-1 { - flex: 0 1 auto; - } - - .a__flex-1-1 { - flex: 1 1 auto; - } - - .a__flex-0-0 { - flex: 0 0 auto; - } - - .a__fit-none { - object-fit: none; - } - - .a__fit-fill { - object-fit: fill; - } - - .a__fit-cover { - object-fit: cover; - } - - .a__fit-contain { - object-fit: contain; - } - - .a__fit-scale-down { - object-fit: scale-down; - } -} -@media screen and (min-width: 40em) { - .b__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .b__vhide a, body:hover .b__vhide input, body:hover .b__vhide button { - display: none !important; - } - - .b__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - - .b__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - - .b__d-none { - display: none !important; - } - - .b__d-flex { - display: flex !important; - } - - .b__d-flex-y { - display: flex !important; - flex-direction: column; - } - - .b__d-grid { - display: grid !important; - } - - .b__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - - .b__d-block { - display: block !important; - } - - .b__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - - .b__d-inline { - display: inline !important; - vertical-align: baseline; - } - - .b__static { - position: static; - } - - .b__rel { - position: relative; - } - - .b__fix { - position: fixed; - } - - .b__fix-tl { - top: 0; - left: 0; - } - - .b__fix-tr { - top: 0; - right: 0; - } - - .b__fix-bl { - bottom: 0; - left: 0; - } - - .b__fix-br { - bottom: 0; - right: 0; - } - - .b__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .b__abs { - position: absolute; - } - - .b__abs-tl { - top: 0; - left: 0; - } - - .b__abs-tr { - top: 0; - right: 0; - } - - .b__abs-bl { - bottom: 0; - left: 0; - } - - .b__abs-br { - bottom: 0; - right: 0; - } - - .b__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .b__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - .b__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - - .b__a-left { - text-align: left; - } - - .b__a-center { - text-align: center; - } - - .b__a-right { - text-align: right; - } - - .b__a-top { - vertical-align: top; - } - - .b__a-middle { - vertical-align: middle; - } - - .b__a-baseline { - vertical-align: baseline; - } - - .b__a-bottom { - vertical-align: bottom; - } - - .b__ai-stretch { - align-items: stretch; - } - - .b__ai-center { - align-items: center; - } - - .b__ai-baseline { - align-items: baseline; - } - - .b__ai-start { - align-items: flex-start; - } - - .b__ai-end { - align-items: flex-end; - } - - .b__as-stretch { - align-self: stretch; - } - - .b__as-center { - align-self: center; - } - - .b__as-baseline { - align-self: baseline; - } - - .b__as-start { - align-self: flex-start; - } - - .b__as-end { - align-self: flex-end; - } - - .b__ac-stretch { - align-content: stretch; - } - - .b__ac-center { - align-content: center; - } - - .b__ac-baseline { - align-content: baseline; - } - - .b__ac-start { - align-content: flex-start; - } - - .b__ac-end { - align-content: flex-end; - } - - .b__ac-between { - align-content: space-between; - } - - .b__ac-around { - align-content: space-around; - } - - .b__jc-stretch { - justify-content: stretch; - } - - .b__jc-center { - justify-content: center; - } - - .b__jc-start { - justify-content: flex-start; - } - - .b__jc-end { - justify-content: flex-end; - } - - .b__jc-between { - justify-content: space-between; - } - - .b__jc-around { - justify-content: space-around; - } - - .b__jc-evenly { - justify-content: space-evenly; - } - - .b__flex-1-0 { - flex: 1 0 auto; - } - - .b__flex-0-1 { - flex: 0 1 auto; - } - - .b__flex-1-1 { - flex: 1 1 auto; - } - - .b__flex-0-0 { - flex: 0 0 auto; - } - - .b__fit-none { - object-fit: none; - } - - .b__fit-fill { - object-fit: fill; - } - - .b__fit-cover { - object-fit: cover; - } - - .b__fit-contain { - object-fit: contain; - } - - .b__fit-scale-down { - object-fit: scale-down; - } -} -@media screen and (min-width: 60em) { - .c__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .c__vhide a, body:hover .c__vhide input, body:hover .c__vhide button { - display: none !important; - } - - .c__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - - .c__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - - .c__d-none { - display: none !important; - } - - .c__d-flex { - display: flex !important; - } - - .c__d-flex-y { - display: flex !important; - flex-direction: column; - } - - .c__d-grid { - display: grid !important; - } - - .c__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - - .c__d-block { - display: block !important; - } - - .c__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - - .c__d-inline { - display: inline !important; - vertical-align: baseline; - } - - .c__static { - position: static; - } - - .c__rel { - position: relative; - } - - .c__fix { - position: fixed; - } - - .c__fix-tl { - top: 0; - left: 0; - } - - .c__fix-tr { - top: 0; - right: 0; - } - - .c__fix-bl { - bottom: 0; - left: 0; - } - - .c__fix-br { - bottom: 0; - right: 0; - } - - .c__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .c__abs { - position: absolute; - } - - .c__abs-tl { - top: 0; - left: 0; - } - - .c__abs-tr { - top: 0; - right: 0; - } - - .c__abs-bl { - bottom: 0; - left: 0; - } - - .c__abs-br { - bottom: 0; - right: 0; - } - - .c__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .c__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - - .c__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - - .c__a-left { - text-align: left; - } - - .c__a-center { - text-align: center; - } - - .c__a-right { - text-align: right; - } - - .c__a-top { - vertical-align: top; - } - - .c__a-middle { - vertical-align: middle; - } - - .c__a-baseline { - vertical-align: baseline; - } - - .c__a-bottom { - vertical-align: bottom; - } - - .c__ai-stretch { - align-items: stretch; - } - - .c__ai-center { - align-items: center; - } - - .c__ai-baseline { - align-items: baseline; - } - - .c__ai-start { - align-items: flex-start; - } - - .c__ai-end { - align-items: flex-end; - } - - .c__as-stretch { - align-self: stretch; - } - - .c__as-center { - align-self: center; - } - - .c__as-baseline { - align-self: baseline; - } - - .c__as-start { - align-self: flex-start; - } - - .c__as-end { - align-self: flex-end; - } - - .c__ac-stretch { - align-content: stretch; - } - - .c__ac-center { - align-content: center; - } - - .c__ac-baseline { - align-content: baseline; - } - - .c__ac-start { - align-content: flex-start; - } - - .c__ac-end { - align-content: flex-end; - } - - .c__ac-between { - align-content: space-between; - } - - .c__ac-around { - align-content: space-around; - } - - .c__jc-stretch { - justify-content: stretch; - } - - .c__jc-center { - justify-content: center; - } - - .c__jc-start { - justify-content: flex-start; - } - - .c__jc-end { - justify-content: flex-end; - } - - .c__jc-between { - justify-content: space-between; - } - - .c__jc-around { - justify-content: space-around; - } - - .c__jc-evenly { - justify-content: space-evenly; - } - - .c__flex-1-0 { - flex: 1 0 auto; - } - - .c__flex-0-1 { - flex: 0 1 auto; - } - - .c__flex-1-1 { - flex: 1 1 auto; - } - - .c__flex-0-0 { - flex: 0 0 auto; - } - - .c__fit-none { - object-fit: none; - } - - .c__fit-fill { - object-fit: fill; - } - - .c__fit-cover { - object-fit: cover; - } - - .c__fit-contain { - object-fit: contain; - } - - .c__fit-scale-down { - object-fit: scale-down; - } -} \ No newline at end of file diff --git a/tests/renders/modern-helper.libsass.css b/tests/renders/modern-helper.libsass.css deleted file mode 100644 index 83dc94f..0000000 --- a/tests/renders/modern-helper.libsass.css +++ /dev/null @@ -1,1207 +0,0 @@ -:root { - --font-size: 16px; - --line-height: 1.25; - --inner-x: 1rem; - --inner-y: 1.5rem; - --outer-top: 2rem; - --outer-right: 2rem; - --outer-bottom: 2rem; - --outer-left: 2rem; - --grid-cols: 12; - --outer-width: 100%; - --inner-y-s: calc(var(--inner-y) * 0.5); - --inner-y-m: 3.5rem; - --inner-y-l: calc(var(--inner-y) * 2); - --inner-x-s: calc(var(--inner-x) * 0.5); - --inner-x-m: calc(var(--inner-x) * 1); - --inner-x-l: calc(var(--inner-x) * 2); - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left))); -} - -html { - font-size: var(--font-size); - line-height: var(--line-height); -} - -@media screen and (min-width: 30em) { - :root { - --breakpoint: 30em; - --outer-width: 30rem; - } -} - -@media screen and (min-width: 40em) { - :root { - --breakpoint: 40em; - --inner-y-l: 4px; - --outer-width: 40rem; - } -} - -@media screen and (min-width: 60em) { - :root { - --font-size: 18px; - --breakpoint: 60em; - --outer-right: 80px; - --outer-width: 53.3333333333rem; - } -} - -.strong, .bold { - font-weight: bold; -} - -.em, .italic { - font-style: italic; -} - -.clearfix::after { - content: ""; - display: table; - clear: both; -} - -@supports (display: flow-root) { - .clearfix { - display: flow-root; - } - .clearfix::after { - content: none; - } -} - -.nobr { - white-space: nowrap; - text-overflow: ellipsis; -} - -.is-scrolling, -.is-scrolling * { - pointer-events: none !important; -} - -.hold, [class^="hold-"], [class*=" hold-"] { - position: relative; -} - -.stop, .trap, .trim { - padding-top: 0.1px; - padding-bottom: 0.1px; -} - -.clip, [class^="clip-"], [class*=" clip-"] { - overflow: hidden !important; - position: relative; - z-index: 0; -} - -.clip-x { - overflow-x: hidden; - overflow-y: visible; -} - -.clip-y { - overflow-y: hidden; - overflow-x: visible; -} - -.clip-circle { - border-radius: 50%; -} - -.fix, [class^="fix-"], [class*=" fix-"] { - position: fixed; -} - -.abs, [class^="abs-"], [class*=" abs-"] { - position: absolute; -} - -.aspect, [class^="aspect-"], [class*=" aspect-"] { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} - -.aspect > *, [class^="aspect-"] > *, [class*=" aspect-"] > * { - flex: 0 0 auto; - width: 100%; -} - -.aspect::before, [class^="aspect-"]::before, [class*=" aspect-"]::before { - content: ''; - display: block; - width: 0.01px; - height: 0; - padding-bottom: calc(1 / var(--aspect, 1) * 100%); -} - -.show-on-focus { - position: absolute; - width: 1px; - height: 1px; - margin: 0; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); -} - -.show-on-focus:focus { - z-index: 20; - width: auto; - height: auto; - clip: auto; -} - -.vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; -} - -body:hover .vhide a, -body:hover .vhide input, -body:hover .vhide button { - display: none !important; -} - -.hide { - pointer-events: none; - visibility: hidden; - opacity: 0; -} - -.show { - pointer-events: initial; - visibility: visible; - opacity: 1; -} - -.d-none { - display: none !important; -} - -.d-flex { - display: flex !important; -} - -.d-flex-y { - display: flex !important; - flex-direction: column; -} - -.d-grid { - display: grid !important; -} - -.d-grid-y { - display: grid !important; - grid-auto-flow: column; -} - -.d-block { - display: block !important; -} - -.d-iblock { - display: inline-block !important; - vertical-align: baseline; -} - -.d-inline { - display: inline !important; - vertical-align: baseline; -} - -.static { - position: static; -} - -.rel { - position: relative; -} - -.fix { - position: fixed; -} - -.fix-tl { - top: 0; - left: 0; -} - -.fix-tr { - top: 0; - right: 0; -} - -.fix-bl { - bottom: 0; - left: 0; -} - -.fix-br { - bottom: 0; - right: 0; -} - -.fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.abs { - position: absolute; -} - -.abs-tl { - top: 0; - left: 0; -} - -.abs-tr { - top: 0; - right: 0; -} - -.abs-bl { - bottom: 0; - left: 0; -} - -.abs-br { - bottom: 0; - right: 0; -} - -.abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; -} - -.abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} - -.abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; -} - -.a-left { - text-align: left; -} - -.a-center { - text-align: center; -} - -.a-right { - text-align: right; -} - -.a-top { - vertical-align: top; -} - -.a-middle { - vertical-align: middle; -} - -.a-baseline { - vertical-align: baseline; -} - -.a-bottom { - vertical-align: bottom; -} - -.ai-stretch { - align-items: stretch; -} - -.ai-center { - align-items: center; -} - -.ai-baseline { - align-items: baseline; -} - -.ai-start { - align-items: flex-start; -} - -.ai-end { - align-items: flex-end; -} - -.as-stretch { - align-self: stretch; -} - -.as-center { - align-self: center; -} - -.as-baseline { - align-self: baseline; -} - -.as-start { - align-self: flex-start; -} - -.as-end { - align-self: flex-end; -} - -.ac-stretch { - align-content: stretch; -} - -.ac-center { - align-content: center; -} - -.ac-baseline { - align-content: baseline; -} - -.ac-start { - align-content: flex-start; -} - -.ac-end { - align-content: flex-end; -} - -.ac-between { - align-content: space-between; -} - -.ac-around { - align-content: space-around; -} - -.jc-stretch { - justify-content: stretch; -} - -.jc-center { - justify-content: center; -} - -.jc-start { - justify-content: flex-start; -} - -.jc-end { - justify-content: flex-end; -} - -.jc-between { - justify-content: space-between; -} - -.jc-around { - justify-content: space-around; -} - -.jc-evenly { - justify-content: space-evenly; -} - -.flex-1-0 { - flex: 1 0 auto; -} - -.flex-0-1 { - flex: 0 1 auto; -} - -.flex-1-1 { - flex: 1 1 auto; -} - -.flex-0-0 { - flex: 0 0 auto; -} - -.fit-none { - object-fit: none; -} - -.fit-fill { - object-fit: fill; -} - -.fit-cover { - object-fit: cover; -} - -.fit-contain { - object-fit: contain; -} - -.fit-scale-down { - object-fit: scale-down; -} - -@media screen and (min-width: 30em) { - .a__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .a__vhide a, - body:hover .a__vhide input, - body:hover .a__vhide button { - display: none !important; - } - .a__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - .a__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - .a__d-none { - display: none !important; - } - .a__d-flex { - display: flex !important; - } - .a__d-flex-y { - display: flex !important; - flex-direction: column; - } - .a__d-grid { - display: grid !important; - } - .a__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - .a__d-block { - display: block !important; - } - .a__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - .a__d-inline { - display: inline !important; - vertical-align: baseline; - } - .a__static { - position: static; - } - .a__rel { - position: relative; - } - .a__fix { - position: fixed; - } - .a__fix-tl { - top: 0; - left: 0; - } - .a__fix-tr { - top: 0; - right: 0; - } - .a__fix-bl { - bottom: 0; - left: 0; - } - .a__fix-br { - bottom: 0; - right: 0; - } - .a__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .a__abs { - position: absolute; - } - .a__abs-tl { - top: 0; - left: 0; - } - .a__abs-tr { - top: 0; - right: 0; - } - .a__abs-bl { - bottom: 0; - left: 0; - } - .a__abs-br { - bottom: 0; - right: 0; - } - .a__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .a__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - .a__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - .a__a-left { - text-align: left; - } - .a__a-center { - text-align: center; - } - .a__a-right { - text-align: right; - } - .a__a-top { - vertical-align: top; - } - .a__a-middle { - vertical-align: middle; - } - .a__a-baseline { - vertical-align: baseline; - } - .a__a-bottom { - vertical-align: bottom; - } - .a__ai-stretch { - align-items: stretch; - } - .a__ai-center { - align-items: center; - } - .a__ai-baseline { - align-items: baseline; - } - .a__ai-start { - align-items: flex-start; - } - .a__ai-end { - align-items: flex-end; - } - .a__as-stretch { - align-self: stretch; - } - .a__as-center { - align-self: center; - } - .a__as-baseline { - align-self: baseline; - } - .a__as-start { - align-self: flex-start; - } - .a__as-end { - align-self: flex-end; - } - .a__ac-stretch { - align-content: stretch; - } - .a__ac-center { - align-content: center; - } - .a__ac-baseline { - align-content: baseline; - } - .a__ac-start { - align-content: flex-start; - } - .a__ac-end { - align-content: flex-end; - } - .a__ac-between { - align-content: space-between; - } - .a__ac-around { - align-content: space-around; - } - .a__jc-stretch { - justify-content: stretch; - } - .a__jc-center { - justify-content: center; - } - .a__jc-start { - justify-content: flex-start; - } - .a__jc-end { - justify-content: flex-end; - } - .a__jc-between { - justify-content: space-between; - } - .a__jc-around { - justify-content: space-around; - } - .a__jc-evenly { - justify-content: space-evenly; - } - .a__flex-1-0 { - flex: 1 0 auto; - } - .a__flex-0-1 { - flex: 0 1 auto; - } - .a__flex-1-1 { - flex: 1 1 auto; - } - .a__flex-0-0 { - flex: 0 0 auto; - } - .a__fit-none { - object-fit: none; - } - .a__fit-fill { - object-fit: fill; - } - .a__fit-cover { - object-fit: cover; - } - .a__fit-contain { - object-fit: contain; - } - .a__fit-scale-down { - object-fit: scale-down; - } -} - -@media screen and (min-width: 40em) { - .b__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .b__vhide a, - body:hover .b__vhide input, - body:hover .b__vhide button { - display: none !important; - } - .b__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - .b__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - .b__d-none { - display: none !important; - } - .b__d-flex { - display: flex !important; - } - .b__d-flex-y { - display: flex !important; - flex-direction: column; - } - .b__d-grid { - display: grid !important; - } - .b__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - .b__d-block { - display: block !important; - } - .b__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - .b__d-inline { - display: inline !important; - vertical-align: baseline; - } - .b__static { - position: static; - } - .b__rel { - position: relative; - } - .b__fix { - position: fixed; - } - .b__fix-tl { - top: 0; - left: 0; - } - .b__fix-tr { - top: 0; - right: 0; - } - .b__fix-bl { - bottom: 0; - left: 0; - } - .b__fix-br { - bottom: 0; - right: 0; - } - .b__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .b__abs { - position: absolute; - } - .b__abs-tl { - top: 0; - left: 0; - } - .b__abs-tr { - top: 0; - right: 0; - } - .b__abs-bl { - bottom: 0; - left: 0; - } - .b__abs-br { - bottom: 0; - right: 0; - } - .b__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .b__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - .b__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - .b__a-left { - text-align: left; - } - .b__a-center { - text-align: center; - } - .b__a-right { - text-align: right; - } - .b__a-top { - vertical-align: top; - } - .b__a-middle { - vertical-align: middle; - } - .b__a-baseline { - vertical-align: baseline; - } - .b__a-bottom { - vertical-align: bottom; - } - .b__ai-stretch { - align-items: stretch; - } - .b__ai-center { - align-items: center; - } - .b__ai-baseline { - align-items: baseline; - } - .b__ai-start { - align-items: flex-start; - } - .b__ai-end { - align-items: flex-end; - } - .b__as-stretch { - align-self: stretch; - } - .b__as-center { - align-self: center; - } - .b__as-baseline { - align-self: baseline; - } - .b__as-start { - align-self: flex-start; - } - .b__as-end { - align-self: flex-end; - } - .b__ac-stretch { - align-content: stretch; - } - .b__ac-center { - align-content: center; - } - .b__ac-baseline { - align-content: baseline; - } - .b__ac-start { - align-content: flex-start; - } - .b__ac-end { - align-content: flex-end; - } - .b__ac-between { - align-content: space-between; - } - .b__ac-around { - align-content: space-around; - } - .b__jc-stretch { - justify-content: stretch; - } - .b__jc-center { - justify-content: center; - } - .b__jc-start { - justify-content: flex-start; - } - .b__jc-end { - justify-content: flex-end; - } - .b__jc-between { - justify-content: space-between; - } - .b__jc-around { - justify-content: space-around; - } - .b__jc-evenly { - justify-content: space-evenly; - } - .b__flex-1-0 { - flex: 1 0 auto; - } - .b__flex-0-1 { - flex: 0 1 auto; - } - .b__flex-1-1 { - flex: 1 1 auto; - } - .b__flex-0-0 { - flex: 0 0 auto; - } - .b__fit-none { - object-fit: none; - } - .b__fit-fill { - object-fit: fill; - } - .b__fit-cover { - object-fit: cover; - } - .b__fit-contain { - object-fit: contain; - } - .b__fit-scale-down { - object-fit: scale-down; - } -} - -@media screen and (min-width: 60em) { - .c__vhide { - position: absolute !important; - clip: rect(0 0 0 0); - clip: rect(0, 0, 0, 0); - flex: 0 0 0%; - padding: 0 !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - overflow: hidden; - } - body:hover .c__vhide a, - body:hover .c__vhide input, - body:hover .c__vhide button { - display: none !important; - } - .c__hide { - pointer-events: none; - visibility: hidden; - opacity: 0; - } - .c__show { - pointer-events: initial; - visibility: visible; - opacity: 1; - } - .c__d-none { - display: none !important; - } - .c__d-flex { - display: flex !important; - } - .c__d-flex-y { - display: flex !important; - flex-direction: column; - } - .c__d-grid { - display: grid !important; - } - .c__d-grid-y { - display: grid !important; - grid-auto-flow: column; - } - .c__d-block { - display: block !important; - } - .c__d-iblock { - display: inline-block !important; - vertical-align: baseline; - } - .c__d-inline { - display: inline !important; - vertical-align: baseline; - } - .c__static { - position: static; - } - .c__rel { - position: relative; - } - .c__fix { - position: fixed; - } - .c__fix-tl { - top: 0; - left: 0; - } - .c__fix-tr { - top: 0; - right: 0; - } - .c__fix-bl { - bottom: 0; - left: 0; - } - .c__fix-br { - bottom: 0; - right: 0; - } - .c__fix-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .c__abs { - position: absolute; - } - .c__abs-tl { - top: 0; - left: 0; - } - .c__abs-tr { - top: 0; - right: 0; - } - .c__abs-bl { - bottom: 0; - left: 0; - } - .c__abs-br { - bottom: 0; - right: 0; - } - .c__abs-trbl { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .c__abs-cover { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - } - .c__abs-contain { - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: contain; - } - .c__a-left { - text-align: left; - } - .c__a-center { - text-align: center; - } - .c__a-right { - text-align: right; - } - .c__a-top { - vertical-align: top; - } - .c__a-middle { - vertical-align: middle; - } - .c__a-baseline { - vertical-align: baseline; - } - .c__a-bottom { - vertical-align: bottom; - } - .c__ai-stretch { - align-items: stretch; - } - .c__ai-center { - align-items: center; - } - .c__ai-baseline { - align-items: baseline; - } - .c__ai-start { - align-items: flex-start; - } - .c__ai-end { - align-items: flex-end; - } - .c__as-stretch { - align-self: stretch; - } - .c__as-center { - align-self: center; - } - .c__as-baseline { - align-self: baseline; - } - .c__as-start { - align-self: flex-start; - } - .c__as-end { - align-self: flex-end; - } - .c__ac-stretch { - align-content: stretch; - } - .c__ac-center { - align-content: center; - } - .c__ac-baseline { - align-content: baseline; - } - .c__ac-start { - align-content: flex-start; - } - .c__ac-end { - align-content: flex-end; - } - .c__ac-between { - align-content: space-between; - } - .c__ac-around { - align-content: space-around; - } - .c__jc-stretch { - justify-content: stretch; - } - .c__jc-center { - justify-content: center; - } - .c__jc-start { - justify-content: flex-start; - } - .c__jc-end { - justify-content: flex-end; - } - .c__jc-between { - justify-content: space-between; - } - .c__jc-around { - justify-content: space-around; - } - .c__jc-evenly { - justify-content: space-evenly; - } - .c__flex-1-0 { - flex: 1 0 auto; - } - .c__flex-0-1 { - flex: 0 1 auto; - } - .c__flex-1-1 { - flex: 1 1 auto; - } - .c__flex-0-0 { - flex: 0 0 auto; - } - .c__fit-none { - object-fit: none; - } - .c__fit-fill { - object-fit: fill; - } - .c__fit-cover { - object-fit: cover; - } - .c__fit-contain { - object-fit: contain; - } - .c__fit-scale-down { - object-fit: scale-down; - } -} diff --git a/tests/renders/modern-root.dartsass.css b/tests/renders/modern-root.dartsass.css deleted file mode 100644 index c4a3b33..0000000 --- a/tests/renders/modern-root.dartsass.css +++ /dev/null @@ -1,51 +0,0 @@ -/* ( a: ( breakpoint: 30em, outer-right: calc(31.25vw + -6.25rem), outer-left: calc(31.25vw + -6.25rem) ), b: ( breakpoint: 40em, line-height: 1.25, font-defs: ( serif: ( l: 30px 1.1 ) ) ), c: ( font-size: 18px, breakpoint: 60em, outer-right: 200px, outer-left: 200px ) ) */ -:root { - --font-size: 16px; - --line-height: 1.25; - --inner-x: 1rem; - --inner-y: 1.5rem; - --outer-top: 2rem; - --outer-right: 50px; - --outer-bottom: 2rem; - --outer-left: 50px; - --grid-cols: 12; - --outer-width: 100%; - --inner-y-s: calc(var(--inner-y) * 0.5); - --inner-y-m: calc(var(--inner-y) * 1); - --inner-y-l: calc(var(--inner-y) * 2); - --inner-x-s: calc(var(--inner-x) * 0.5); - --inner-x-m: calc(var(--inner-x) * 1); - --inner-x-l: calc(var(--inner-x) * 2); - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left))); -} - -html { - font-size: var(--font-size); - line-height: var(--line-height); -} - -@media screen and (min-width: 30em) { - :root { - --breakpoint: 30em; - --outer-right: calc(31.25vw + -6.25rem); - --outer-left: calc(31.25vw + -6.25rem); - --outer-width: 30rem; - } -} -@media screen and (min-width: 40em) { - :root { - --breakpoint: 40em; - --line-height: 1.25; - --outer-width: 40rem; - } -} -@media screen and (min-width: 60em) { - :root { - --font-size: 18px; - --breakpoint: 60em; - --outer-right: 200px; - --outer-left: 200px; - --outer-width: 53.3333333333rem; - } -} -/* ( a: ( font-size: 16px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 30rem, breakpoint: 30em ), b: ( font-size: 16px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 40rem, breakpoint: 40em, font-defs: ( serif: ( l: 30px 1.1 ) ) ), c: ( font-size: 18px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: 200px, outer-bottom: 2rem, outer-left: 200px, grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 53.3333333333rem, breakpoint: 60em, font-defs: ( serif: ( l: 30px 1.1 ) ) ) ) */ \ No newline at end of file diff --git a/tests/renders/modern-root.libsass.css b/tests/renders/modern-root.libsass.css deleted file mode 100644 index c5d7cee..0000000 --- a/tests/renders/modern-root.libsass.css +++ /dev/null @@ -1,170 +0,0 @@ -/* ( - a: ( - breakpoint: 30em, - outer-right: calc(31.25vw + -6.25rem), - outer-left: calc(31.25vw + -6.25rem) - ), - b: ( - breakpoint: 40em, - line-height: 1.25, - font-defs: ( - serif: ( - l: 30px 1.1 - ) - ) - ), - c: ( - font-size: 18px, - breakpoint: 60em, - outer-right: 200px, - outer-left: 200px - ) -) */ -:root { - --font-size: 16px; - --line-height: 1.25; - --inner-x: 1rem; - --inner-y: 1.5rem; - --outer-top: 2rem; - --outer-right: 50px; - --outer-bottom: 2rem; - --outer-left: 50px; - --grid-cols: 12; - --outer-width: 100%; - --inner-y-s: calc(var(--inner-y) * 0.5); - --inner-y-m: calc(var(--inner-y) * 1); - --inner-y-l: calc(var(--inner-y) * 2); - --inner-x-s: calc(var(--inner-x) * 0.5); - --inner-x-m: calc(var(--inner-x) * 1); - --inner-x-l: calc(var(--inner-x) * 2); - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left))); -} - -html { - font-size: var(--font-size); - line-height: var(--line-height); -} - -@media screen and (min-width: 30em) { - :root { - --breakpoint: 30em; - --outer-right: calc(31.25vw + -6.25rem); - --outer-left: calc(31.25vw + -6.25rem); - --outer-width: 30rem; - } -} - -@media screen and (min-width: 40em) { - :root { - --breakpoint: 40em; - --line-height: 1.25; - --outer-width: 40rem; - } -} - -@media screen and (min-width: 60em) { - :root { - --font-size: 18px; - --breakpoint: 60em; - --outer-right: 200px; - --outer-left: 200px; - --outer-width: 53.3333333333rem; - } -} - -/* ( - a: ( - font-size: 16px, - line-height: 1.25, - inner-x: 1rem, - inner-y: 1.5rem, - outer-top: 2rem, - outer-right: calc(31.25vw + -6.25rem), - outer-bottom: 2rem, - outer-left: calc(31.25vw + -6.25rem), - grid-cols: 12, - font-mods: ( - sans: ( - m: 18px 1.3, - l: 24px 1.2 - ), - serif: ( - m: 18px 1.3, - l: 24px 1.2 - ) - ), - inner-mods: ( - s: 0.5, - m: 1, - l: 2 - ), - outer-width: 30rem, - breakpoint: 30em - ), - b: ( - font-size: 16px, - line-height: 1.25, - inner-x: 1rem, - inner-y: 1.5rem, - outer-top: 2rem, - outer-right: calc(31.25vw + -6.25rem), - outer-bottom: 2rem, - outer-left: calc(31.25vw + -6.25rem), - grid-cols: 12, - font-mods: ( - sans: ( - m: 18px 1.3, - l: 24px 1.2 - ), - serif: ( - m: 18px 1.3, - l: 24px 1.2 - ) - ), - inner-mods: ( - s: 0.5, - m: 1, - l: 2 - ), - outer-width: 40rem, - breakpoint: 40em, - font-defs: ( - serif: ( - l: 30px 1.1 - ) - ) - ), - c: ( - font-size: 18px, - line-height: 1.25, - inner-x: 1rem, - inner-y: 1.5rem, - outer-top: 2rem, - outer-right: 200px, - outer-bottom: 2rem, - outer-left: 200px, - grid-cols: 12, - font-mods: ( - sans: ( - m: 18px 1.3, - l: 24px 1.2 - ), - serif: ( - m: 18px 1.3, - l: 24px 1.2 - ) - ), - inner-mods: ( - s: 0.5, - m: 1, - l: 2 - ), - outer-width: 53.3333333333rem, - breakpoint: 60em, - font-defs: ( - serif: ( - l: 30px 1.1 - ) - ) - ) -) */ diff --git a/tests/renders/modern-selector.dartsass.css b/tests/renders/modern-selector.dartsass.css deleted file mode 100644 index 694fe59..0000000 --- a/tests/renders/modern-selector.dartsass.css +++ /dev/null @@ -1,14 +0,0 @@ -.stack .f, .stack [class^=f-], .stack [class*=" f-"], [class^=stack-] .f, [class^=stack-] [class^=f-], [class^=stack-] [class*=" f-"], [class*=" stack-"] .f, [class*=" stack-"] [class^=f-], [class*=" stack-"] [class*=" f-"] { - color: blue; -} - -.a, .b { - color: blue; -} -.c > .e + .a, .c > .e + .b, .d > .e + .a, .d > .e + .b { - color: red; -} - -.e > .c + .a, .e > .c + .b, .e > .d + .a, .e > .d + .b, .f > .c + .a, .f > .c + .b, .f > .d + .a, .f > .d + .b { - color: red; -} \ No newline at end of file diff --git a/tests/renders/modern-selector.libsass.css b/tests/renders/modern-selector.libsass.css deleted file mode 100644 index e9558c5..0000000 --- a/tests/renders/modern-selector.libsass.css +++ /dev/null @@ -1,15 +0,0 @@ -.stack .f, .stack [class^="f-"], .stack [class*=" f-"], [class^="stack-"] .f, [class^="stack-"] [class^="f-"], [class^="stack-"] [class*=" f-"], [class*=" stack-"] .f, [class*=" stack-"] [class^="f-"], [class*=" stack-"] [class*=" f-"] { - color: blue; -} - -.a, .b { - color: blue; -} - -.c > .e + .a, .c > .e + .b, .d > .e + .a, .d > .e + .b { - color: red; -} - -.e > .c + .a, .e > .c + .b, .e > .d + .a, .e > .d + .b, .f > .c + .a, .f > .c + .b, .f > .d + .a, .f > .d + .b { - color: red; -} diff --git a/tests/renders/modern-stack.dartsass.css b/tests/renders/modern-stack.dartsass.css deleted file mode 100644 index 37554b1..0000000 --- a/tests/renders/modern-stack.dartsass.css +++ /dev/null @@ -1,91 +0,0 @@ -.stack, [class^=stack-], [class*=" stack-"] { - display: flex; - flex-direction: column; - align-items: stretch; -} -.stack > *, [class^=stack-] > *, [class*=" stack-"] > * { - flex: 0 0 auto; -} - -.stack, [class^=stack-], [class*=" stack-"], .plain, [class^=plain-], [class*=" plain-"] { - padding-top: 0.01px; - padding-bottom: 0.01px; -} -.stack > *, [class^=stack-] > *, [class*=" stack-"] > *, .plain > *, [class^=plain-] > *, [class*=" plain-"] > * { - margin-top: 0; - margin-bottom: 0; -} -.stack > * + *, [class^=stack-] > * + *, [class*=" stack-"] > * + *, .plain > * + *, [class^=plain-] > * + *, [class*=" plain-"] > * + * { - margin-top: var(--stack-gap); -} - -.chain, [class^=chain-], [class*=" chain-"] { - display: flex; - flex-direction: row; - align-items: center; -} -.chain > *, [class^=chain-] > *, [class*=" chain-"] > * { - flex: 0 0 auto; - margin-right: 0; - margin-left: 0; - text-overflow: ellipsis; -} -.chain > * + *, [class^=chain-] > * + *, [class*=" chain-"] > * + * { - margin-left: var(--chain-gap); -} - -:root { - --stack-gap: var(--inner-y); - --chain-gap: var(--inner-x); -} - -.stack-0 > * { - --stack-gap: 0; -} - -.plain > .shim-s, [class^=plain-] > .shim-s, [class*=" plain-"] > .shim-s, -.stack > .shim-s, [class^=stack-] > .shim-s, [class*=" stack-"] > .shim-s { - --stack-gap: var(--inner-y-s); -} - -.stack-s > * { - --stack-gap: var(--inner-y-s); -} - -.plain > .shim-m, [class^=plain-] > .shim-m, [class*=" plain-"] > .shim-m, -.stack > .shim-m, [class^=stack-] > .shim-m, [class*=" stack-"] > .shim-m { - --stack-gap: var(--inner-y-m); -} - -.stack-m > * { - --stack-gap: var(--inner-y-m); -} - -.plain > .shim-l, [class^=plain-] > .shim-l, [class*=" plain-"] > .shim-l, -.stack > .shim-l, [class^=stack-] > .shim-l, [class*=" stack-"] > .shim-l { - --stack-gap: var(--inner-y-l); -} - -.stack-l > * { - --stack-gap: var(--inner-y-l); -} - -.chain-0 > * { - --chain-gap: 0; -} - -.chain > .shim-s, [class^=chain-] > .shim-s, [class*=" chain-"] > .shim-s { - --chain-gap: var(--inner-x-s); -} - -.chain-s > * { - --chain-gap: var(--inner-x-s); -} - -.chain > .shim-form, [class^=chain-] > .shim-form, [class*=" chain-"] > .shim-form { - --chain-gap: var(--inner-x-form); -} - -.chain-form > * { - --chain-gap: var(--inner-x-form); -} \ No newline at end of file diff --git a/tests/renders/modern-stack.libsass.css b/tests/renders/modern-stack.libsass.css deleted file mode 100644 index 9ef2888..0000000 --- a/tests/renders/modern-stack.libsass.css +++ /dev/null @@ -1,96 +0,0 @@ -.stack, [class^="stack-"], [class*=" stack-"] { - display: flex; - flex-direction: column; - align-items: stretch; -} - -.stack > *, [class^="stack-"] > *, [class*=" stack-"] > * { - flex: 0 0 auto; -} - -.stack, [class^="stack-"], [class*=" stack-"], .plain, [class^="plain-"], [class*=" plain-"] { - padding-top: 0.01px; - padding-bottom: 0.01px; -} - -.stack > *, [class^="stack-"] > *, [class*=" stack-"] > *, .plain > *, [class^="plain-"] > *, [class*=" plain-"] > * { - margin-top: 0; - margin-bottom: 0; -} - -.stack > * + *, [class^="stack-"] > * + *, [class*=" stack-"] > * + *, .plain > * + *, [class^="plain-"] > * + *, [class*=" plain-"] > * + * { - margin-top: var(--stack-gap); -} - -.chain, [class^="chain-"], [class*=" chain-"] { - display: flex; - flex-direction: row; - align-items: center; -} - -.chain > *, [class^="chain-"] > *, [class*=" chain-"] > * { - flex: 0 0 auto; - margin-right: 0; - margin-left: 0; - text-overflow: ellipsis; -} - -.chain > * + *, [class^="chain-"] > * + *, [class*=" chain-"] > * + * { - margin-left: var(--chain-gap); -} - -:root { - --stack-gap: var(--inner-y); - --chain-gap: var(--inner-x); -} - -.stack-0 > * { - --stack-gap: 0; -} - -.plain > .shim-s, [class^="plain-"] > .shim-s, [class*=" plain-"] > .shim-s, -.stack > .shim-s, [class^="stack-"] > .shim-s, [class*=" stack-"] > .shim-s { - --stack-gap: var(--inner-y-s); -} - -.stack-s > * { - --stack-gap: var(--inner-y-s); -} - -.plain > .shim-m, [class^="plain-"] > .shim-m, [class*=" plain-"] > .shim-m, -.stack > .shim-m, [class^="stack-"] > .shim-m, [class*=" stack-"] > .shim-m { - --stack-gap: var(--inner-y-m); -} - -.stack-m > * { - --stack-gap: var(--inner-y-m); -} - -.plain > .shim-l, [class^="plain-"] > .shim-l, [class*=" plain-"] > .shim-l, -.stack > .shim-l, [class^="stack-"] > .shim-l, [class*=" stack-"] > .shim-l { - --stack-gap: var(--inner-y-l); -} - -.stack-l > * { - --stack-gap: var(--inner-y-l); -} - -.chain-0 > * { - --chain-gap: 0; -} - -.chain > .shim-s, [class^="chain-"] > .shim-s, [class*=" chain-"] > .shim-s { - --chain-gap: var(--inner-x-s); -} - -.chain-s > * { - --chain-gap: var(--inner-x-s); -} - -.chain > .shim-form, [class^="chain-"] > .shim-form, [class*=" chain-"] > .shim-form { - --chain-gap: var(--inner-x-form); -} - -.chain-form > * { - --chain-gap: var(--inner-x-form); -} diff --git a/tests/renders/modern-theme.dartsass.css b/tests/renders/modern-theme.dartsass.css deleted file mode 100644 index ee66c21..0000000 --- a/tests/renders/modern-theme.dartsass.css +++ /dev/null @@ -1,192 +0,0 @@ -.test { - out: 80.5024021427; -} - -:root { - --color-fg: 17, 17, 17; - --color-bg: 238, 238, 238; - --color-dark: 17, 17, 17; - --color-dark-contrast: 238, 238, 238; - --color-lite: 238, 238, 238; - --color-lite-contrast: 17, 17, 17; - --color-foo: 80, 128, 33; - --color-foo-contrast: 238, 238, 238; - --color-bar: 218, 80, 201; - --color-bar-contrast: 238, 238, 238; - --color-baz: 71, 65, 255; - --color-baz-contrast: 238, 238, 238; - --color-fiz: 218, 155, 48; - --color-fiz-contrast: 238, 238, 238; -} - -body, [class^=fg-], [class*=" fg-"] { - color: rgb(var(--color-fg)); -} - -body, [class^=bg-], [class*=" bg-"] { - background-color: rgb(var(--color-bg)); -} - -.fg-contrast { - --color-fg: var(--color-bg-contrast); -} - -.bg-contrast { - --color-bg: var(--color-fg-contrast); -} - -.fg-dark { - --color-fg: var(--color-dark); - --color-fg-contrast: var(--color-dark-contrast); -} - -.bg-dark { - --color-bg: var(--color-dark); - --color-bg-contrast: var(--color-dark-contrast); -} - -.fg-dark-contrast { - --color-fg: var(--color-dark-contrast); -} - -.bg-dark-contrast { - --color-bg: var(--color-dark-contrast); -} - -.theme-dark { - --theme-color: var(--color-dark); - --theme-color-contrast: var(--color-dark-contrast); -} - -.fg-lite { - --color-fg: var(--color-lite); - --color-fg-contrast: var(--color-lite-contrast); -} - -.bg-lite { - --color-bg: var(--color-lite); - --color-bg-contrast: var(--color-lite-contrast); -} - -.fg-lite-contrast { - --color-fg: var(--color-lite-contrast); -} - -.bg-lite-contrast { - --color-bg: var(--color-lite-contrast); -} - -.theme-lite { - --theme-color: var(--color-lite); - --theme-color-contrast: var(--color-lite-contrast); -} - -.fg-foo { - --color-fg: var(--color-foo); - --color-fg-contrast: var(--color-foo-contrast); -} - -.bg-foo { - --color-bg: var(--color-foo); - --color-bg-contrast: var(--color-foo-contrast); -} - -.fg-foo-contrast { - --color-fg: var(--color-foo-contrast); -} - -.bg-foo-contrast { - --color-bg: var(--color-foo-contrast); -} - -.theme-foo { - --theme-color: var(--color-foo); - --theme-color-contrast: var(--color-foo-contrast); -} - -.fg-bar { - --color-fg: var(--color-bar); - --color-fg-contrast: var(--color-bar-contrast); -} - -.bg-bar { - --color-bg: var(--color-bar); - --color-bg-contrast: var(--color-bar-contrast); -} - -.fg-bar-contrast { - --color-fg: var(--color-bar-contrast); -} - -.bg-bar-contrast { - --color-bg: var(--color-bar-contrast); -} - -.theme-bar { - --theme-color: var(--color-bar); - --theme-color-contrast: var(--color-bar-contrast); -} - -.fg-baz { - --color-fg: var(--color-baz); - --color-fg-contrast: var(--color-baz-contrast); -} - -.bg-baz { - --color-bg: var(--color-baz); - --color-bg-contrast: var(--color-baz-contrast); -} - -.fg-baz-contrast { - --color-fg: var(--color-baz-contrast); -} - -.bg-baz-contrast { - --color-bg: var(--color-baz-contrast); -} - -.theme-baz { - --theme-color: var(--color-baz); - --theme-color-contrast: var(--color-baz-contrast); -} - -.fg-fiz { - --color-fg: var(--color-fiz); - --color-fg-contrast: var(--color-fiz-contrast); -} - -.bg-fiz { - --color-bg: var(--color-fiz); - --color-bg-contrast: var(--color-fiz-contrast); -} - -.fg-fiz-contrast { - --color-fg: var(--color-fiz-contrast); -} - -.bg-fiz-contrast { - --color-bg: var(--color-fiz-contrast); -} - -.theme-fiz { - --theme-color: var(--color-fiz); - --theme-color-contrast: var(--color-fiz-contrast); -} - -.fg-theme { - --color-fg: var(--theme-color); - --color-fg-contrast: var(--theme-color-contrast); -} - -.bg-theme { - --color-bg: var(--theme-color); - --color-bg-contrast: var(--theme-color-contrast); -} - -.fg-theme-contrast { - --color-fg: var(--theme-color-contrast); -} - -.bg-theme-contrast { - --color-bg: var(--theme-color-contrast); -} \ No newline at end of file diff --git a/tests/renders/modern-theme.libsass.css b/tests/renders/modern-theme.libsass.css deleted file mode 100644 index e3bfba3..0000000 --- a/tests/renders/modern-theme.libsass.css +++ /dev/null @@ -1,192 +0,0 @@ -.test { - out: 80.5024021427; -} - -:root { - --color-fg: 17, 17, 17; - --color-bg: 238, 238, 238; - --color-dark: 17, 17, 17; - --color-dark-contrast: 238, 238, 238; - --color-lite: 238, 238, 238; - --color-lite-contrast: 17, 17, 17; - --color-foo: 80, 128, 33; - --color-foo-contrast: 238, 238, 238; - --color-bar: 218, 80, 201; - --color-bar-contrast: 238, 238, 238; - --color-baz: 71, 65, 255; - --color-baz-contrast: 238, 238, 238; - --color-fiz: 218, 155, 48; - --color-fiz-contrast: 238, 238, 238; -} - -body, [class^="fg-"], [class*=" fg-"] { - color: rgb(var(--color-fg)); -} - -body, [class^="bg-"], [class*=" bg-"] { - background-color: rgb(var(--color-bg)); -} - -.fg-contrast { - --color-fg: var(--color-bg-contrast); -} - -.bg-contrast { - --color-bg: var(--color-fg-contrast); -} - -.fg-dark { - --color-fg: var(--color-dark); - --color-fg-contrast: var(--color-dark-contrast); -} - -.bg-dark { - --color-bg: var(--color-dark); - --color-bg-contrast: var(--color-dark-contrast); -} - -.fg-dark-contrast { - --color-fg: var(--color-dark-contrast); -} - -.bg-dark-contrast { - --color-bg: var(--color-dark-contrast); -} - -.theme-dark { - --theme-color: var(--color-dark); - --theme-color-contrast: var(--color-dark-contrast); -} - -.fg-lite { - --color-fg: var(--color-lite); - --color-fg-contrast: var(--color-lite-contrast); -} - -.bg-lite { - --color-bg: var(--color-lite); - --color-bg-contrast: var(--color-lite-contrast); -} - -.fg-lite-contrast { - --color-fg: var(--color-lite-contrast); -} - -.bg-lite-contrast { - --color-bg: var(--color-lite-contrast); -} - -.theme-lite { - --theme-color: var(--color-lite); - --theme-color-contrast: var(--color-lite-contrast); -} - -.fg-foo { - --color-fg: var(--color-foo); - --color-fg-contrast: var(--color-foo-contrast); -} - -.bg-foo { - --color-bg: var(--color-foo); - --color-bg-contrast: var(--color-foo-contrast); -} - -.fg-foo-contrast { - --color-fg: var(--color-foo-contrast); -} - -.bg-foo-contrast { - --color-bg: var(--color-foo-contrast); -} - -.theme-foo { - --theme-color: var(--color-foo); - --theme-color-contrast: var(--color-foo-contrast); -} - -.fg-bar { - --color-fg: var(--color-bar); - --color-fg-contrast: var(--color-bar-contrast); -} - -.bg-bar { - --color-bg: var(--color-bar); - --color-bg-contrast: var(--color-bar-contrast); -} - -.fg-bar-contrast { - --color-fg: var(--color-bar-contrast); -} - -.bg-bar-contrast { - --color-bg: var(--color-bar-contrast); -} - -.theme-bar { - --theme-color: var(--color-bar); - --theme-color-contrast: var(--color-bar-contrast); -} - -.fg-baz { - --color-fg: var(--color-baz); - --color-fg-contrast: var(--color-baz-contrast); -} - -.bg-baz { - --color-bg: var(--color-baz); - --color-bg-contrast: var(--color-baz-contrast); -} - -.fg-baz-contrast { - --color-fg: var(--color-baz-contrast); -} - -.bg-baz-contrast { - --color-bg: var(--color-baz-contrast); -} - -.theme-baz { - --theme-color: var(--color-baz); - --theme-color-contrast: var(--color-baz-contrast); -} - -.fg-fiz { - --color-fg: var(--color-fiz); - --color-fg-contrast: var(--color-fiz-contrast); -} - -.bg-fiz { - --color-bg: var(--color-fiz); - --color-bg-contrast: var(--color-fiz-contrast); -} - -.fg-fiz-contrast { - --color-fg: var(--color-fiz-contrast); -} - -.bg-fiz-contrast { - --color-bg: var(--color-fiz-contrast); -} - -.theme-fiz { - --theme-color: var(--color-fiz); - --theme-color-contrast: var(--color-fiz-contrast); -} - -.fg-theme { - --color-fg: var(--theme-color); - --color-fg-contrast: var(--theme-color-contrast); -} - -.bg-theme { - --color-bg: var(--theme-color); - --color-bg-contrast: var(--theme-color-contrast); -} - -.fg-theme-contrast { - --color-fg: var(--theme-color-contrast); -} - -.bg-theme-contrast { - --color-bg: var(--theme-color-contrast); -} diff --git a/tests/renders/modern-wrap.dartsass.css b/tests/renders/modern-wrap.dartsass.css deleted file mode 100644 index bf74be2..0000000 --- a/tests/renders/modern-wrap.dartsass.css +++ /dev/null @@ -1,83 +0,0 @@ -:root { - --wrap-width: 100%; -} - -.wrap, [class^=wrap-], [class*=" wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); -} - -.wrap-left { - margin-left: 0; -} - -.wrap-right { - margin-right: 0; -} - -.wrap { - --wrap-width: var(--outer-width); -} - -@media screen and (min-width: 20em) { - .a__wrap, [class^=a__wrap-], [class*=" a__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - - .a__wrap-left { - margin-left: 0; - } - - .a__wrap-right { - margin-right: 0; - } - - .a__wrap, .wrap-a { - --wrap-width: var(--outer-width); - } -} -@media screen and (min-width: 30em) { - .b__wrap, [class^=b__wrap-], [class*=" b__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - - .b__wrap-left { - margin-left: 0; - } - - .b__wrap-right { - margin-right: 0; - } - - .b__wrap, .wrap-b { - --wrap-width: var(--outer-width); - } -} -@media screen and (min-width: 40em) { - .c__wrap, [class^=c__wrap-], [class*=" c__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - - .c__wrap-left { - margin-left: 0; - } - - .c__wrap-right { - margin-right: 0; - } - - .c__wrap, .wrap-c, .wrap-last { - --wrap-width: var(--outer-width); - } -} \ No newline at end of file diff --git a/tests/renders/modern-wrap.libsass.css b/tests/renders/modern-wrap.libsass.css deleted file mode 100644 index 82d2a77..0000000 --- a/tests/renders/modern-wrap.libsass.css +++ /dev/null @@ -1,76 +0,0 @@ -:root { - --wrap-width: 100%; -} - -.wrap, [class^="wrap-"], [class*=" wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); -} - -.wrap-left { - margin-left: 0; -} - -.wrap-right { - margin-right: 0; -} - -.wrap { - --wrap-width: var(--outer-width); -} - -@media screen and (min-width: 20em) { - .a__wrap, [class^="a__wrap-"], [class*=" a__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - .a__wrap-left { - margin-left: 0; - } - .a__wrap-right { - margin-right: 0; - } - .a__wrap, .wrap-a { - --wrap-width: var(--outer-width); - } -} - -@media screen and (min-width: 30em) { - .b__wrap, [class^="b__wrap-"], [class*=" b__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - .b__wrap-left { - margin-left: 0; - } - .b__wrap-right { - margin-right: 0; - } - .b__wrap, .wrap-b { - --wrap-width: var(--outer-width); - } -} - -@media screen and (min-width: 40em) { - .c__wrap, [class^="c__wrap-"], [class*=" c__wrap-"] { - margin-right: auto; - margin-left: auto; - width: 100%; - max-width: var(--wrap-width); - } - .c__wrap-left { - margin-left: 0; - } - .c__wrap-right { - margin-right: 0; - } - .c__wrap, .wrap-c, .wrap-last { - --wrap-width: var(--outer-width); - } -} diff --git a/tests/modern-selector.scss b/tests/scratch-selectors.scss similarity index 100% rename from tests/modern-selector.scss rename to tests/scratch-selectors.scss diff --git a/tests/snapshots/tests.js.md b/tests/snapshots/tests.js.md deleted file mode 100644 index c79e51d..0000000 --- a/tests/snapshots/tests.js.md +++ /dev/null @@ -1,8390 +0,0 @@ -# Snapshot report for `tests/tests.js` - -The actual snapshot is saved in `tests.js.snap`. - -Generated by [AVA](https://ava.li). - -## modern-atomic [dartsass] - -> Snapshot 1 - - `.w-unset {␊ - width: unset;␊ - }␊ - ␊ - .h-unset {␊ - height: unset;␊ - }␊ - ␊ - .w-auto {␊ - width: auto;␊ - }␊ - ␊ - .h-auto {␊ - height: auto;␊ - }␊ - ␊ - .w-100 {␊ - width: 100%;␊ - }␊ - ␊ - .h-100 {␊ - height: 100%;␊ - }␊ - ␊ - .w-0 {␊ - width: 0;␊ - }␊ - ␊ - .h-0 {␊ - height: 0;␊ - }␊ - ␊ - .my-auto, .mt-auto {␊ - margin-top: auto;␊ - }␊ - ␊ - .mx-auto, .mr-auto {␊ - margin-right: auto;␊ - }␊ - ␊ - .my-auto, .mb-auto {␊ - margin-bottom: auto;␊ - }␊ - ␊ - .mx-auto, .ml-auto {␊ - margin-left: auto;␊ - }␊ - ␊ - .my-0, .mt-0 {␊ - margin-top: 0;␊ - }␊ - ␊ - .mx-0, .mr-0 {␊ - margin-right: 0;␊ - }␊ - ␊ - .my-0, .mb-0 {␊ - margin-bottom: 0;␊ - }␊ - ␊ - .mx-0, .ml-0 {␊ - margin-left: 0;␊ - }␊ - ␊ - .py-0, .pt-0 {␊ - padding-top: 0;␊ - }␊ - ␊ - .px-0, .pr-0 {␊ - padding-right: 0;␊ - }␊ - ␊ - .py-0, .pb-0 {␊ - padding-bottom: 0;␊ - }␊ - ␊ - .px-0, .pl-0 {␊ - padding-left: 0;␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .a__w-unset {␊ - width: unset;␊ - }␊ - ␊ - .a__h-unset {␊ - height: unset;␊ - }␊ - ␊ - .a__w-auto {␊ - width: auto;␊ - }␊ - ␊ - .a__h-auto {␊ - height: auto;␊ - }␊ - ␊ - .a__w-100 {␊ - width: 100%;␊ - }␊ - ␊ - .a__h-100 {␊ - height: 100%;␊ - }␊ - ␊ - .a__w-0 {␊ - width: 0;␊ - }␊ - ␊ - .a__h-0 {␊ - height: 0;␊ - }␊ - ␊ - .a__my-auto, .a__mt-auto {␊ - margin-top: auto;␊ - }␊ - ␊ - .a__mx-auto, .a__mr-auto {␊ - margin-right: auto;␊ - }␊ - ␊ - .a__my-auto, .a__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - ␊ - .a__mx-auto, .a__ml-auto {␊ - margin-left: auto;␊ - }␊ - ␊ - .a__my-0, .a__mt-0 {␊ - margin-top: 0;␊ - }␊ - ␊ - .a__mx-0, .a__mr-0 {␊ - margin-right: 0;␊ - }␊ - ␊ - .a__my-0, .a__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - ␊ - .a__mx-0, .a__ml-0 {␊ - margin-left: 0;␊ - }␊ - ␊ - .a__py-0, .a__pt-0 {␊ - padding-top: 0;␊ - }␊ - ␊ - .a__px-0, .a__pr-0 {␊ - padding-right: 0;␊ - }␊ - ␊ - .a__py-0, .a__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - ␊ - .a__px-0, .a__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - .b__w-unset {␊ - width: unset;␊ - }␊ - ␊ - .b__h-unset {␊ - height: unset;␊ - }␊ - ␊ - .b__w-auto {␊ - width: auto;␊ - }␊ - ␊ - .b__h-auto {␊ - height: auto;␊ - }␊ - ␊ - .b__w-100 {␊ - width: 100%;␊ - }␊ - ␊ - .b__h-100 {␊ - height: 100%;␊ - }␊ - ␊ - .b__w-0 {␊ - width: 0;␊ - }␊ - ␊ - .b__h-0 {␊ - height: 0;␊ - }␊ - ␊ - .b__my-auto, .b__mt-auto {␊ - margin-top: auto;␊ - }␊ - ␊ - .b__mx-auto, .b__mr-auto {␊ - margin-right: auto;␊ - }␊ - ␊ - .b__my-auto, .b__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - ␊ - .b__mx-auto, .b__ml-auto {␊ - margin-left: auto;␊ - }␊ - ␊ - .b__my-0, .b__mt-0 {␊ - margin-top: 0;␊ - }␊ - ␊ - .b__mx-0, .b__mr-0 {␊ - margin-right: 0;␊ - }␊ - ␊ - .b__my-0, .b__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - ␊ - .b__mx-0, .b__ml-0 {␊ - margin-left: 0;␊ - }␊ - ␊ - .b__py-0, .b__pt-0 {␊ - padding-top: 0;␊ - }␊ - ␊ - .b__px-0, .b__pr-0 {␊ - padding-right: 0;␊ - }␊ - ␊ - .b__py-0, .b__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - ␊ - .b__px-0, .b__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - @media screen and (min-width: 60em) {␊ - .c__w-unset {␊ - width: unset;␊ - }␊ - ␊ - .c__h-unset {␊ - height: unset;␊ - }␊ - ␊ - .c__w-auto {␊ - width: auto;␊ - }␊ - ␊ - .c__h-auto {␊ - height: auto;␊ - }␊ - ␊ - .c__w-100 {␊ - width: 100%;␊ - }␊ - ␊ - .c__h-100 {␊ - height: 100%;␊ - }␊ - ␊ - .c__w-0 {␊ - width: 0;␊ - }␊ - ␊ - .c__h-0 {␊ - height: 0;␊ - }␊ - ␊ - .c__my-auto, .c__mt-auto {␊ - margin-top: auto;␊ - }␊ - ␊ - .c__mx-auto, .c__mr-auto {␊ - margin-right: auto;␊ - }␊ - ␊ - .c__my-auto, .c__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - ␊ - .c__mx-auto, .c__ml-auto {␊ - margin-left: auto;␊ - }␊ - ␊ - .c__my-0, .c__mt-0 {␊ - margin-top: 0;␊ - }␊ - ␊ - .c__mx-0, .c__mr-0 {␊ - margin-right: 0;␊ - }␊ - ␊ - .c__my-0, .c__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - ␊ - .c__mx-0, .c__ml-0 {␊ - margin-left: 0;␊ - }␊ - ␊ - .c__py-0, .c__pt-0 {␊ - padding-top: 0;␊ - }␊ - ␊ - .c__px-0, .c__pr-0 {␊ - padding-right: 0;␊ - }␊ - ␊ - .c__py-0, .c__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - ␊ - .c__px-0, .c__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - [class^=mt-], [class*=" mt-"], [class^=my-], [class*=" my-"] {␊ - margin-top: var(--mt);␊ - }␊ - ␊ - [class^=mr-], [class*=" mr-"], [class^=mx-], [class*=" mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - ␊ - [class^=mb-], [class*=" mb-"], [class^=my-], [class*=" my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - ␊ - [class^=ml-], [class*=" ml-"], [class^=mx-], [class*=" mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - ␊ - [class^=mt-neg-], [class*=" mt-neg-"], [class^=my-neg-], [class*=" my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - ␊ - [class^=mr-neg-], [class*=" mr-neg-"], [class^=mx-neg-], [class*=" mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - ␊ - [class^=mb-neg-], [class*=" mb-neg-"], [class^=my-neg-], [class*=" my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - ␊ - [class^=ml-neg-], [class*=" ml-neg-"], [class^=mx-neg-], [class*=" mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - ␊ - [class^=pt-], [class*=" pt-"], [class^=py-], [class*=" py-"] {␊ - padding-top: var(--pt);␊ - }␊ - ␊ - [class^=pr-], [class*=" pr-"], [class^=px-], [class*=" px-"] {␊ - padding-right: var(--pr);␊ - }␊ - ␊ - [class^=pb-], [class*=" pb-"], [class^=py-], [class*=" py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - ␊ - [class^=pl-], [class*=" pl-"], [class^=px-], [class*=" px-"] {␊ - padding-left: var(--pl);␊ - }␊ - ␊ - .my-neg-s, .mt-neg-s,␊ - .my-s, .mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - ␊ - .my-neg-s, .mb-neg-s,␊ - .my-s, .mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - ␊ - .py-s, .pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - ␊ - .py-s, .pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - ␊ - .my-neg-m, .mt-neg-m,␊ - .my-m, .mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - ␊ - .my-neg-m, .mb-neg-m,␊ - .my-m, .mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - ␊ - .py-m, .pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - ␊ - .py-m, .pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - ␊ - .my-neg-l, .mt-neg-l,␊ - .my-l, .mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - ␊ - .my-neg-l, .mb-neg-l,␊ - .my-l, .mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - ␊ - .py-l, .pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - ␊ - .py-l, .pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - ␊ - .mx-neg-s, .mr-neg-s,␊ - .mx-s, .mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - ␊ - .mx-neg-s, .ml-neg-s,␊ - .mx-s, .ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - ␊ - .px-s, .pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - ␊ - .px-s, .pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - ␊ - .mx-neg-m, .mr-neg-m,␊ - .mx-m, .mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - ␊ - .mx-neg-m, .ml-neg-m,␊ - .mx-m, .ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - ␊ - .px-m, .pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - ␊ - .px-m, .pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - ␊ - .mx-neg-l, .mr-neg-l,␊ - .mx-l, .mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - ␊ - .mx-neg-l, .ml-neg-l,␊ - .mx-l, .ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - ␊ - .px-l, .pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - ␊ - .px-l, .pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - [class^=a__mt-], [class*=" a__mt-"], [class^=a__my-], [class*=" a__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - ␊ - [class^=a__mr-], [class*=" a__mr-"], [class^=a__mx-], [class*=" a__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - ␊ - [class^=a__mb-], [class*=" a__mb-"], [class^=a__my-], [class*=" a__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - ␊ - [class^=a__ml-], [class*=" a__ml-"], [class^=a__mx-], [class*=" a__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - ␊ - [class^=a__mt-neg-], [class*=" a__mt-neg-"], [class^=a__my-neg-], [class*=" a__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - ␊ - [class^=a__mr-neg-], [class*=" a__mr-neg-"], [class^=a__mx-neg-], [class*=" a__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - ␊ - [class^=a__mb-neg-], [class*=" a__mb-neg-"], [class^=a__my-neg-], [class*=" a__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - ␊ - [class^=a__ml-neg-], [class*=" a__ml-neg-"], [class^=a__mx-neg-], [class*=" a__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - ␊ - [class^=a__pt-], [class*=" a__pt-"], [class^=a__py-], [class*=" a__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - ␊ - [class^=a__pr-], [class*=" a__pr-"], [class^=a__px-], [class*=" a__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - ␊ - [class^=a__pb-], [class*=" a__pb-"], [class^=a__py-], [class*=" a__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - ␊ - [class^=a__pl-], [class*=" a__pl-"], [class^=a__px-], [class*=" a__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - ␊ - .a__my-neg-s, .a__mt-neg-s,␊ - .a__my-s, .a__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - ␊ - .a__my-neg-s, .a__mb-neg-s,␊ - .a__my-s, .a__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - ␊ - .a__py-s, .a__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - ␊ - .a__py-s, .a__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - ␊ - .a__my-neg-m, .a__mt-neg-m,␊ - .a__my-m, .a__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - ␊ - .a__my-neg-m, .a__mb-neg-m,␊ - .a__my-m, .a__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - ␊ - .a__py-m, .a__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - ␊ - .a__py-m, .a__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - ␊ - .a__my-neg-l, .a__mt-neg-l,␊ - .a__my-l, .a__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - ␊ - .a__my-neg-l, .a__mb-neg-l,␊ - .a__my-l, .a__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - ␊ - .a__py-l, .a__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - ␊ - .a__py-l, .a__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - ␊ - .a__mx-neg-s, .a__mr-neg-s,␊ - .a__mx-s, .a__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - ␊ - .a__mx-neg-s, .a__ml-neg-s,␊ - .a__mx-s, .a__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - ␊ - .a__px-s, .a__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - ␊ - .a__px-s, .a__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - ␊ - .a__mx-neg-m, .a__mr-neg-m,␊ - .a__mx-m, .a__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - ␊ - .a__mx-neg-m, .a__ml-neg-m,␊ - .a__mx-m, .a__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - ␊ - .a__px-m, .a__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - ␊ - .a__px-m, .a__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - ␊ - .a__mx-neg-l, .a__mr-neg-l,␊ - .a__mx-l, .a__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - ␊ - .a__mx-neg-l, .a__ml-neg-l,␊ - .a__mx-l, .a__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - ␊ - .a__px-l, .a__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - ␊ - .a__px-l, .a__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - [class^=b__mt-], [class*=" b__mt-"], [class^=b__my-], [class*=" b__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - ␊ - [class^=b__mr-], [class*=" b__mr-"], [class^=b__mx-], [class*=" b__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - ␊ - [class^=b__mb-], [class*=" b__mb-"], [class^=b__my-], [class*=" b__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - ␊ - [class^=b__ml-], [class*=" b__ml-"], [class^=b__mx-], [class*=" b__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - ␊ - [class^=b__mt-neg-], [class*=" b__mt-neg-"], [class^=b__my-neg-], [class*=" b__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - ␊ - [class^=b__mr-neg-], [class*=" b__mr-neg-"], [class^=b__mx-neg-], [class*=" b__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - ␊ - [class^=b__mb-neg-], [class*=" b__mb-neg-"], [class^=b__my-neg-], [class*=" b__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - ␊ - [class^=b__ml-neg-], [class*=" b__ml-neg-"], [class^=b__mx-neg-], [class*=" b__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - ␊ - [class^=b__pt-], [class*=" b__pt-"], [class^=b__py-], [class*=" b__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - ␊ - [class^=b__pr-], [class*=" b__pr-"], [class^=b__px-], [class*=" b__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - ␊ - [class^=b__pb-], [class*=" b__pb-"], [class^=b__py-], [class*=" b__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - ␊ - [class^=b__pl-], [class*=" b__pl-"], [class^=b__px-], [class*=" b__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - ␊ - .b__my-neg-s, .b__mt-neg-s,␊ - .b__my-s, .b__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - ␊ - .b__my-neg-s, .b__mb-neg-s,␊ - .b__my-s, .b__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - ␊ - .b__py-s, .b__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - ␊ - .b__py-s, .b__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - ␊ - .b__my-neg-m, .b__mt-neg-m,␊ - .b__my-m, .b__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - ␊ - .b__my-neg-m, .b__mb-neg-m,␊ - .b__my-m, .b__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - ␊ - .b__py-m, .b__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - ␊ - .b__py-m, .b__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - ␊ - .b__my-neg-l, .b__mt-neg-l,␊ - .b__my-l, .b__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - ␊ - .b__my-neg-l, .b__mb-neg-l,␊ - .b__my-l, .b__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - ␊ - .b__py-l, .b__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - ␊ - .b__py-l, .b__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - ␊ - .b__mx-neg-s, .b__mr-neg-s,␊ - .b__mx-s, .b__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - ␊ - .b__mx-neg-s, .b__ml-neg-s,␊ - .b__mx-s, .b__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - ␊ - .b__px-s, .b__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - ␊ - .b__px-s, .b__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - ␊ - .b__mx-neg-m, .b__mr-neg-m,␊ - .b__mx-m, .b__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - ␊ - .b__mx-neg-m, .b__ml-neg-m,␊ - .b__mx-m, .b__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - ␊ - .b__px-m, .b__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - ␊ - .b__px-m, .b__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - ␊ - .b__mx-neg-l, .b__mr-neg-l,␊ - .b__mx-l, .b__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - ␊ - .b__mx-neg-l, .b__ml-neg-l,␊ - .b__mx-l, .b__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - ␊ - .b__px-l, .b__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - ␊ - .b__px-l, .b__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }␊ - @media screen and (min-width: 60em) {␊ - [class^=c__mt-], [class*=" c__mt-"], [class^=c__my-], [class*=" c__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - ␊ - [class^=c__mr-], [class*=" c__mr-"], [class^=c__mx-], [class*=" c__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - ␊ - [class^=c__mb-], [class*=" c__mb-"], [class^=c__my-], [class*=" c__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - ␊ - [class^=c__ml-], [class*=" c__ml-"], [class^=c__mx-], [class*=" c__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - ␊ - [class^=c__mt-neg-], [class*=" c__mt-neg-"], [class^=c__my-neg-], [class*=" c__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - ␊ - [class^=c__mr-neg-], [class*=" c__mr-neg-"], [class^=c__mx-neg-], [class*=" c__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - ␊ - [class^=c__mb-neg-], [class*=" c__mb-neg-"], [class^=c__my-neg-], [class*=" c__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - ␊ - [class^=c__ml-neg-], [class*=" c__ml-neg-"], [class^=c__mx-neg-], [class*=" c__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - ␊ - [class^=c__pt-], [class*=" c__pt-"], [class^=c__py-], [class*=" c__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - ␊ - [class^=c__pr-], [class*=" c__pr-"], [class^=c__px-], [class*=" c__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - ␊ - [class^=c__pb-], [class*=" c__pb-"], [class^=c__py-], [class*=" c__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - ␊ - [class^=c__pl-], [class*=" c__pl-"], [class^=c__px-], [class*=" c__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - ␊ - .c__my-neg-s, .c__mt-neg-s,␊ - .c__my-s, .c__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - ␊ - .c__my-neg-s, .c__mb-neg-s,␊ - .c__my-s, .c__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - ␊ - .c__py-s, .c__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - ␊ - .c__py-s, .c__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - ␊ - .c__my-neg-m, .c__mt-neg-m,␊ - .c__my-m, .c__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - ␊ - .c__my-neg-m, .c__mb-neg-m,␊ - .c__my-m, .c__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - ␊ - .c__py-m, .c__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - ␊ - .c__py-m, .c__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - ␊ - .c__my-neg-l, .c__mt-neg-l,␊ - .c__my-l, .c__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - ␊ - .c__my-neg-l, .c__mb-neg-l,␊ - .c__my-l, .c__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - ␊ - .c__py-l, .c__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - ␊ - .c__py-l, .c__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - ␊ - .c__mx-neg-s, .c__mr-neg-s,␊ - .c__mx-s, .c__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - ␊ - .c__mx-neg-s, .c__ml-neg-s,␊ - .c__mx-s, .c__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - ␊ - .c__px-s, .c__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - ␊ - .c__px-s, .c__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - ␊ - .c__mx-neg-m, .c__mr-neg-m,␊ - .c__mx-m, .c__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - ␊ - .c__mx-neg-m, .c__ml-neg-m,␊ - .c__mx-m, .c__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - ␊ - .c__px-m, .c__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - ␊ - .c__px-m, .c__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - ␊ - .c__mx-neg-l, .c__mr-neg-l,␊ - .c__mx-l, .c__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - ␊ - .c__mx-neg-l, .c__ml-neg-l,␊ - .c__mx-l, .c__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - ␊ - .c__px-l, .c__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - ␊ - .c__px-l, .c__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }` - -## modern-atomic [libsass] - -> Snapshot 1 - - `.w-unset {␊ - width: unset;␊ - }␊ - ␊ - .h-unset {␊ - height: unset;␊ - }␊ - ␊ - .w-auto {␊ - width: auto;␊ - }␊ - ␊ - .h-auto {␊ - height: auto;␊ - }␊ - ␊ - .w-100 {␊ - width: 100%;␊ - }␊ - ␊ - .h-100 {␊ - height: 100%;␊ - }␊ - ␊ - .w-0 {␊ - width: 0;␊ - }␊ - ␊ - .h-0 {␊ - height: 0;␊ - }␊ - ␊ - .my-auto, .mt-auto {␊ - margin-top: auto;␊ - }␊ - ␊ - .mx-auto, .mr-auto {␊ - margin-right: auto;␊ - }␊ - ␊ - .my-auto, .mb-auto {␊ - margin-bottom: auto;␊ - }␊ - ␊ - .mx-auto, .ml-auto {␊ - margin-left: auto;␊ - }␊ - ␊ - .my-0, .mt-0 {␊ - margin-top: 0;␊ - }␊ - ␊ - .mx-0, .mr-0 {␊ - margin-right: 0;␊ - }␊ - ␊ - .my-0, .mb-0 {␊ - margin-bottom: 0;␊ - }␊ - ␊ - .mx-0, .ml-0 {␊ - margin-left: 0;␊ - }␊ - ␊ - .py-0, .pt-0 {␊ - padding-top: 0;␊ - }␊ - ␊ - .px-0, .pr-0 {␊ - padding-right: 0;␊ - }␊ - ␊ - .py-0, .pb-0 {␊ - padding-bottom: 0;␊ - }␊ - ␊ - .px-0, .pl-0 {␊ - padding-left: 0;␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .a__w-unset {␊ - width: unset;␊ - }␊ - .a__h-unset {␊ - height: unset;␊ - }␊ - .a__w-auto {␊ - width: auto;␊ - }␊ - .a__h-auto {␊ - height: auto;␊ - }␊ - .a__w-100 {␊ - width: 100%;␊ - }␊ - .a__h-100 {␊ - height: 100%;␊ - }␊ - .a__w-0 {␊ - width: 0;␊ - }␊ - .a__h-0 {␊ - height: 0;␊ - }␊ - .a__my-auto, .a__mt-auto {␊ - margin-top: auto;␊ - }␊ - .a__mx-auto, .a__mr-auto {␊ - margin-right: auto;␊ - }␊ - .a__my-auto, .a__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - .a__mx-auto, .a__ml-auto {␊ - margin-left: auto;␊ - }␊ - .a__my-0, .a__mt-0 {␊ - margin-top: 0;␊ - }␊ - .a__mx-0, .a__mr-0 {␊ - margin-right: 0;␊ - }␊ - .a__my-0, .a__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - .a__mx-0, .a__ml-0 {␊ - margin-left: 0;␊ - }␊ - .a__py-0, .a__pt-0 {␊ - padding-top: 0;␊ - }␊ - .a__px-0, .a__pr-0 {␊ - padding-right: 0;␊ - }␊ - .a__py-0, .a__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - .a__px-0, .a__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - .b__w-unset {␊ - width: unset;␊ - }␊ - .b__h-unset {␊ - height: unset;␊ - }␊ - .b__w-auto {␊ - width: auto;␊ - }␊ - .b__h-auto {␊ - height: auto;␊ - }␊ - .b__w-100 {␊ - width: 100%;␊ - }␊ - .b__h-100 {␊ - height: 100%;␊ - }␊ - .b__w-0 {␊ - width: 0;␊ - }␊ - .b__h-0 {␊ - height: 0;␊ - }␊ - .b__my-auto, .b__mt-auto {␊ - margin-top: auto;␊ - }␊ - .b__mx-auto, .b__mr-auto {␊ - margin-right: auto;␊ - }␊ - .b__my-auto, .b__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - .b__mx-auto, .b__ml-auto {␊ - margin-left: auto;␊ - }␊ - .b__my-0, .b__mt-0 {␊ - margin-top: 0;␊ - }␊ - .b__mx-0, .b__mr-0 {␊ - margin-right: 0;␊ - }␊ - .b__my-0, .b__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - .b__mx-0, .b__ml-0 {␊ - margin-left: 0;␊ - }␊ - .b__py-0, .b__pt-0 {␊ - padding-top: 0;␊ - }␊ - .b__px-0, .b__pr-0 {␊ - padding-right: 0;␊ - }␊ - .b__py-0, .b__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - .b__px-0, .b__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 60em) {␊ - .c__w-unset {␊ - width: unset;␊ - }␊ - .c__h-unset {␊ - height: unset;␊ - }␊ - .c__w-auto {␊ - width: auto;␊ - }␊ - .c__h-auto {␊ - height: auto;␊ - }␊ - .c__w-100 {␊ - width: 100%;␊ - }␊ - .c__h-100 {␊ - height: 100%;␊ - }␊ - .c__w-0 {␊ - width: 0;␊ - }␊ - .c__h-0 {␊ - height: 0;␊ - }␊ - .c__my-auto, .c__mt-auto {␊ - margin-top: auto;␊ - }␊ - .c__mx-auto, .c__mr-auto {␊ - margin-right: auto;␊ - }␊ - .c__my-auto, .c__mb-auto {␊ - margin-bottom: auto;␊ - }␊ - .c__mx-auto, .c__ml-auto {␊ - margin-left: auto;␊ - }␊ - .c__my-0, .c__mt-0 {␊ - margin-top: 0;␊ - }␊ - .c__mx-0, .c__mr-0 {␊ - margin-right: 0;␊ - }␊ - .c__my-0, .c__mb-0 {␊ - margin-bottom: 0;␊ - }␊ - .c__mx-0, .c__ml-0 {␊ - margin-left: 0;␊ - }␊ - .c__py-0, .c__pt-0 {␊ - padding-top: 0;␊ - }␊ - .c__px-0, .c__pr-0 {␊ - padding-right: 0;␊ - }␊ - .c__py-0, .c__pb-0 {␊ - padding-bottom: 0;␊ - }␊ - .c__px-0, .c__pl-0 {␊ - padding-left: 0;␊ - }␊ - }␊ - ␊ - [class^="mt-"], [class*=" mt-"], [class^="my-"], [class*=" my-"] {␊ - margin-top: var(--mt);␊ - }␊ - ␊ - [class^="mr-"], [class*=" mr-"], [class^="mx-"], [class*=" mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - ␊ - [class^="mb-"], [class*=" mb-"], [class^="my-"], [class*=" my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - ␊ - [class^="ml-"], [class*=" ml-"], [class^="mx-"], [class*=" mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - ␊ - [class^="mt-neg-"], [class*=" mt-neg-"], [class^="my-neg-"], [class*=" my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - ␊ - [class^="mr-neg-"], [class*=" mr-neg-"], [class^="mx-neg-"], [class*=" mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - ␊ - [class^="mb-neg-"], [class*=" mb-neg-"], [class^="my-neg-"], [class*=" my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - ␊ - [class^="ml-neg-"], [class*=" ml-neg-"], [class^="mx-neg-"], [class*=" mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - ␊ - [class^="pt-"], [class*=" pt-"], [class^="py-"], [class*=" py-"] {␊ - padding-top: var(--pt);␊ - }␊ - ␊ - [class^="pr-"], [class*=" pr-"], [class^="px-"], [class*=" px-"] {␊ - padding-right: var(--pr);␊ - }␊ - ␊ - [class^="pb-"], [class*=" pb-"], [class^="py-"], [class*=" py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - ␊ - [class^="pl-"], [class*=" pl-"], [class^="px-"], [class*=" px-"] {␊ - padding-left: var(--pl);␊ - }␊ - ␊ - .my-neg-s, .mt-neg-s,␊ - .my-s, .mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - ␊ - .my-neg-s, .mb-neg-s,␊ - .my-s, .mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - ␊ - .py-s, .pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - ␊ - .py-s, .pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - ␊ - .my-neg-m, .mt-neg-m,␊ - .my-m, .mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - ␊ - .my-neg-m, .mb-neg-m,␊ - .my-m, .mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - ␊ - .py-m, .pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - ␊ - .py-m, .pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - ␊ - .my-neg-l, .mt-neg-l,␊ - .my-l, .mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - ␊ - .my-neg-l, .mb-neg-l,␊ - .my-l, .mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - ␊ - .py-l, .pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - ␊ - .py-l, .pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - ␊ - .mx-neg-s, .mr-neg-s,␊ - .mx-s, .mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - ␊ - .mx-neg-s, .ml-neg-s,␊ - .mx-s, .ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - ␊ - .px-s, .pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - ␊ - .px-s, .pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - ␊ - .mx-neg-m, .mr-neg-m,␊ - .mx-m, .mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - ␊ - .mx-neg-m, .ml-neg-m,␊ - .mx-m, .ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - ␊ - .px-m, .pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - ␊ - .px-m, .pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - ␊ - .mx-neg-l, .mr-neg-l,␊ - .mx-l, .mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - ␊ - .mx-neg-l, .ml-neg-l,␊ - .mx-l, .ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - ␊ - .px-l, .pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - ␊ - .px-l, .pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - [class^="a__mt-"], [class*=" a__mt-"], [class^="a__my-"], [class*=" a__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - [class^="a__mr-"], [class*=" a__mr-"], [class^="a__mx-"], [class*=" a__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - [class^="a__mb-"], [class*=" a__mb-"], [class^="a__my-"], [class*=" a__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - [class^="a__ml-"], [class*=" a__ml-"], [class^="a__mx-"], [class*=" a__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - [class^="a__mt-neg-"], [class*=" a__mt-neg-"], [class^="a__my-neg-"], [class*=" a__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - [class^="a__mr-neg-"], [class*=" a__mr-neg-"], [class^="a__mx-neg-"], [class*=" a__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - [class^="a__mb-neg-"], [class*=" a__mb-neg-"], [class^="a__my-neg-"], [class*=" a__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - [class^="a__ml-neg-"], [class*=" a__ml-neg-"], [class^="a__mx-neg-"], [class*=" a__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - [class^="a__pt-"], [class*=" a__pt-"], [class^="a__py-"], [class*=" a__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - [class^="a__pr-"], [class*=" a__pr-"], [class^="a__px-"], [class*=" a__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - [class^="a__pb-"], [class*=" a__pb-"], [class^="a__py-"], [class*=" a__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - [class^="a__pl-"], [class*=" a__pl-"], [class^="a__px-"], [class*=" a__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - .a__my-neg-s, .a__mt-neg-s,␊ - .a__my-s, .a__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - .a__my-neg-s, .a__mb-neg-s,␊ - .a__my-s, .a__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - .a__py-s, .a__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - .a__py-s, .a__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - .a__my-neg-m, .a__mt-neg-m,␊ - .a__my-m, .a__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - .a__my-neg-m, .a__mb-neg-m,␊ - .a__my-m, .a__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - .a__py-m, .a__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - .a__py-m, .a__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - .a__my-neg-l, .a__mt-neg-l,␊ - .a__my-l, .a__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - .a__my-neg-l, .a__mb-neg-l,␊ - .a__my-l, .a__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - .a__py-l, .a__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - .a__py-l, .a__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - .a__mx-neg-s, .a__mr-neg-s,␊ - .a__mx-s, .a__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - .a__mx-neg-s, .a__ml-neg-s,␊ - .a__mx-s, .a__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - .a__px-s, .a__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - .a__px-s, .a__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - .a__mx-neg-m, .a__mr-neg-m,␊ - .a__mx-m, .a__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - .a__mx-neg-m, .a__ml-neg-m,␊ - .a__mx-m, .a__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - .a__px-m, .a__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - .a__px-m, .a__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - .a__mx-neg-l, .a__mr-neg-l,␊ - .a__mx-l, .a__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - .a__mx-neg-l, .a__ml-neg-l,␊ - .a__mx-l, .a__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - .a__px-l, .a__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - .a__px-l, .a__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - [class^="b__mt-"], [class*=" b__mt-"], [class^="b__my-"], [class*=" b__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - [class^="b__mr-"], [class*=" b__mr-"], [class^="b__mx-"], [class*=" b__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - [class^="b__mb-"], [class*=" b__mb-"], [class^="b__my-"], [class*=" b__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - [class^="b__ml-"], [class*=" b__ml-"], [class^="b__mx-"], [class*=" b__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - [class^="b__mt-neg-"], [class*=" b__mt-neg-"], [class^="b__my-neg-"], [class*=" b__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - [class^="b__mr-neg-"], [class*=" b__mr-neg-"], [class^="b__mx-neg-"], [class*=" b__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - [class^="b__mb-neg-"], [class*=" b__mb-neg-"], [class^="b__my-neg-"], [class*=" b__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - [class^="b__ml-neg-"], [class*=" b__ml-neg-"], [class^="b__mx-neg-"], [class*=" b__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - [class^="b__pt-"], [class*=" b__pt-"], [class^="b__py-"], [class*=" b__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - [class^="b__pr-"], [class*=" b__pr-"], [class^="b__px-"], [class*=" b__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - [class^="b__pb-"], [class*=" b__pb-"], [class^="b__py-"], [class*=" b__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - [class^="b__pl-"], [class*=" b__pl-"], [class^="b__px-"], [class*=" b__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - .b__my-neg-s, .b__mt-neg-s,␊ - .b__my-s, .b__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - .b__my-neg-s, .b__mb-neg-s,␊ - .b__my-s, .b__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - .b__py-s, .b__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - .b__py-s, .b__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - .b__my-neg-m, .b__mt-neg-m,␊ - .b__my-m, .b__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - .b__my-neg-m, .b__mb-neg-m,␊ - .b__my-m, .b__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - .b__py-m, .b__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - .b__py-m, .b__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - .b__my-neg-l, .b__mt-neg-l,␊ - .b__my-l, .b__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - .b__my-neg-l, .b__mb-neg-l,␊ - .b__my-l, .b__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - .b__py-l, .b__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - .b__py-l, .b__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - .b__mx-neg-s, .b__mr-neg-s,␊ - .b__mx-s, .b__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - .b__mx-neg-s, .b__ml-neg-s,␊ - .b__mx-s, .b__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - .b__px-s, .b__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - .b__px-s, .b__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - .b__mx-neg-m, .b__mr-neg-m,␊ - .b__mx-m, .b__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - .b__mx-neg-m, .b__ml-neg-m,␊ - .b__mx-m, .b__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - .b__px-m, .b__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - .b__px-m, .b__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - .b__mx-neg-l, .b__mr-neg-l,␊ - .b__mx-l, .b__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - .b__mx-neg-l, .b__ml-neg-l,␊ - .b__mx-l, .b__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - .b__px-l, .b__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - .b__px-l, .b__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 60em) {␊ - [class^="c__mt-"], [class*=" c__mt-"], [class^="c__my-"], [class*=" c__my-"] {␊ - margin-top: var(--mt);␊ - }␊ - [class^="c__mr-"], [class*=" c__mr-"], [class^="c__mx-"], [class*=" c__mx-"] {␊ - margin-right: var(--mr);␊ - }␊ - [class^="c__mb-"], [class*=" c__mb-"], [class^="c__my-"], [class*=" c__my-"] {␊ - margin-bottom: var(--mb);␊ - }␊ - [class^="c__ml-"], [class*=" c__ml-"], [class^="c__mx-"], [class*=" c__mx-"] {␊ - margin-left: var(--ml);␊ - }␊ - [class^="c__mt-neg-"], [class*=" c__mt-neg-"], [class^="c__my-neg-"], [class*=" c__my-neg-"] {␊ - margin-top: calc(var(--mt) * -1);␊ - }␊ - [class^="c__mr-neg-"], [class*=" c__mr-neg-"], [class^="c__mx-neg-"], [class*=" c__mx-neg-"] {␊ - margin-right: calc(var(--mr) * -1);␊ - }␊ - [class^="c__mb-neg-"], [class*=" c__mb-neg-"], [class^="c__my-neg-"], [class*=" c__my-neg-"] {␊ - margin-bottom: calc(var(--mb) * -1);␊ - }␊ - [class^="c__ml-neg-"], [class*=" c__ml-neg-"], [class^="c__mx-neg-"], [class*=" c__mx-neg-"] {␊ - margin-left: calc(var(--ml) * -1);␊ - }␊ - [class^="c__pt-"], [class*=" c__pt-"], [class^="c__py-"], [class*=" c__py-"] {␊ - padding-top: var(--pt);␊ - }␊ - [class^="c__pr-"], [class*=" c__pr-"], [class^="c__px-"], [class*=" c__px-"] {␊ - padding-right: var(--pr);␊ - }␊ - [class^="c__pb-"], [class*=" c__pb-"], [class^="c__py-"], [class*=" c__py-"] {␊ - padding-bottom: var(--pb);␊ - }␊ - [class^="c__pl-"], [class*=" c__pl-"], [class^="c__px-"], [class*=" c__px-"] {␊ - padding-left: var(--pl);␊ - }␊ - .c__my-neg-s, .c__mt-neg-s,␊ - .c__my-s, .c__mt-s {␊ - --mt: var(--inner-y-s);␊ - }␊ - .c__my-neg-s, .c__mb-neg-s,␊ - .c__my-s, .c__mb-s {␊ - --mb: var(--inner-y-s);␊ - }␊ - .c__py-s, .c__pt-s {␊ - --pt: var(--inner-y-s);␊ - }␊ - .c__py-s, .c__pb-s {␊ - --pb: var(--inner-y-s);␊ - }␊ - .c__my-neg-m, .c__mt-neg-m,␊ - .c__my-m, .c__mt-m {␊ - --mt: var(--inner-y-m);␊ - }␊ - .c__my-neg-m, .c__mb-neg-m,␊ - .c__my-m, .c__mb-m {␊ - --mb: var(--inner-y-m);␊ - }␊ - .c__py-m, .c__pt-m {␊ - --pt: var(--inner-y-m);␊ - }␊ - .c__py-m, .c__pb-m {␊ - --pb: var(--inner-y-m);␊ - }␊ - .c__my-neg-l, .c__mt-neg-l,␊ - .c__my-l, .c__mt-l {␊ - --mt: var(--inner-y-l);␊ - }␊ - .c__my-neg-l, .c__mb-neg-l,␊ - .c__my-l, .c__mb-l {␊ - --mb: var(--inner-y-l);␊ - }␊ - .c__py-l, .c__pt-l {␊ - --pt: var(--inner-y-l);␊ - }␊ - .c__py-l, .c__pb-l {␊ - --pb: var(--inner-y-l);␊ - }␊ - .c__mx-neg-s, .c__mr-neg-s,␊ - .c__mx-s, .c__mr-s {␊ - --mr: var(--inner-x-s);␊ - }␊ - .c__mx-neg-s, .c__ml-neg-s,␊ - .c__mx-s, .c__ml-s {␊ - --ml: var(--inner-x-s);␊ - }␊ - .c__px-s, .c__pr-s {␊ - --pr: var(--inner-x-s);␊ - }␊ - .c__px-s, .c__pl-s {␊ - --pl: var(--inner-x-s);␊ - }␊ - .c__mx-neg-m, .c__mr-neg-m,␊ - .c__mx-m, .c__mr-m {␊ - --mr: var(--inner-x-m);␊ - }␊ - .c__mx-neg-m, .c__ml-neg-m,␊ - .c__mx-m, .c__ml-m {␊ - --ml: var(--inner-x-m);␊ - }␊ - .c__px-m, .c__pr-m {␊ - --pr: var(--inner-x-m);␊ - }␊ - .c__px-m, .c__pl-m {␊ - --pl: var(--inner-x-m);␊ - }␊ - .c__mx-neg-l, .c__mr-neg-l,␊ - .c__mx-l, .c__mr-l {␊ - --mr: var(--inner-x-l);␊ - }␊ - .c__mx-neg-l, .c__ml-neg-l,␊ - .c__mx-l, .c__ml-l {␊ - --ml: var(--inner-x-l);␊ - }␊ - .c__px-l, .c__pr-l {␊ - --pr: var(--inner-x-l);␊ - }␊ - .c__px-l, .c__pl-l {␊ - --pl: var(--inner-x-l);␊ - }␊ - }␊ - ` - -## modern-flow [dartsass] - -> Snapshot 1 - - `*, *:before, *:after {␊ - --push-l: initial;␊ - --push-r: initial;␊ - }␊ - ␊ - :root {␊ - --row-gap: var(--inner-y);␊ - --col-gap: var(--inner-x);␊ - --col-base: var(--grid-cols);␊ - --col-span: var(--col-base);␊ - --row-span: var(--grid-rows, 1);␊ - }␊ - ␊ - .flow, [class^=flow-], [class*=" flow-"] {␊ - display: flex;␊ - flex-direction: row;␊ - flex-wrap: wrap;␊ - width: calc(100% + var(--col-gap)) !important;␊ - margin-left: calc(var(--col-gap) / -2);␊ - margin-right: calc(var(--col-gap) / -2);␊ - margin-top: calc(var(--row-gap) / -2);␊ - margin-bottom: calc(var(--row-gap) / -2);␊ - }␊ - .flow > *, [class^=flow-] > *, [class*=" flow-"] > * {␊ - flex: 0 0 auto;␊ - width: 100%;␊ - min-width: 0%;␊ - min-height: 1px;␊ - background-clip: content-box;␊ - padding-left: calc(var(--col-gap) / 2) !important;␊ - padding-right: calc(var(--col-gap) / 2) !important;␊ - padding-top: calc(var(--row-gap) / 2) !important;␊ - padding-bottom: calc(var(--row-gap) / 2) !important;␊ - }␊ - ␊ - .grid, [class^=grid-], [class*=" grid-"] {␊ - display: grid;␊ - grid-gap: var(--row-gap) var(--col-gap);␊ - grid-template-rows: repeat(var(--row-span), 1fr);␊ - grid-template-columns: repeat(var(--col-span), minmax(0%, 1fr));␊ - }␊ - .grid > *, [class^=grid-] > *, [class*=" grid-"] > * {␊ - grid-column: span var(--col-span)/span var(--col-span);␊ - }␊ - ␊ - .flow-s, .grid-s {␊ - --row-gap: var(--inner-y-s);␊ - }␊ - ␊ - .flow-m, .grid-m {␊ - --row-gap: var(--inner-y-m);␊ - }␊ - ␊ - .flow-l, .grid-l {␊ - --row-gap: var(--inner-y-l);␊ - }␊ - ␊ - .flow-x-s, .grid-x-s {␊ - --col-gap: var(--inner-x-s);␊ - }␊ - ␊ - .flow-x-form, .grid-x-form {␊ - --col-gap: var(--inner-x-form);␊ - }␊ - ␊ - .flow-0, .grid-0 {␊ - --row-gap: 0;␊ - }␊ - ␊ - .flow-x-0, .grid-x-0 {␊ - --col-gap: 0;␊ - }␊ - ␊ - .flow-0-0, .grid-0-0 {␊ - --row-gap: 0;␊ - --col-gap: 0;␊ - }␊ - ␊ - .span, [class^=span-], [class*=" span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .flow > .span, .flow > [class^=span-], .flow > [class*=" span-"], [class^=flow-] > .span, [class^=flow-] > [class^=span-], [class^=flow-] > [class*=" span-"], [class*=" flow-"] > .span, [class*=" flow-"] > [class^=span-], [class*=" flow-"] > [class*=" span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - ␊ - .grid > .span, .grid > [class^=span-], .grid > [class*=" span-"], [class^=grid-] > .span, [class^=grid-] > [class^=span-], [class^=grid-] > [class*=" span-"], [class*=" grid-"] > .span, [class*=" grid-"] > [class^=span-], [class*=" grid-"] > [class*=" span-"] {␊ - width: unset;␊ - }␊ - ␊ - [class^=pull-], [class*=" pull-"],␊ - [class^=push-], [class*=" push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .flow > [class^=pull-], .flow > [class*=" pull-"], .flow > [class^=push-], .flow > [class*=" push-"], [class^=flow-] > [class^=pull-], [class^=flow-] > [class*=" pull-"], [class^=flow-] > [class^=push-], [class^=flow-] > [class*=" push-"], [class*=" flow-"] > [class^=pull-], [class*=" flow-"] > [class*=" pull-"], [class*=" flow-"] > [class^=push-], [class*=" flow-"] > [class*=" push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - [class^=pull-r-], [class*=" pull-r-"],␊ - [class^=push-r-], [class*=" push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .flow > [class^=pull-r-], .flow > [class*=" pull-r-"], .flow > [class^=push-r-], .flow > [class*=" push-r-"], [class^=flow-] > [class^=pull-r-], [class^=flow-] > [class*=" pull-r-"], [class^=flow-] > [class^=push-r-], [class^=flow-] > [class*=" push-r-"], [class*=" flow-"] > [class^=pull-r-], [class*=" flow-"] > [class*=" pull-r-"], [class*=" flow-"] > [class^=push-r-], [class*=" flow-"] > [class*=" push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .span-auto, [class^=span-auto-], [class*=" span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - ␊ - .span-all, [class^=span-all-], [class*=" span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - ␊ - [class^=span-y-], [class*=" span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - ␊ - .span-1 > *,␊ - .cols-1 > * {␊ - --col-base: 1;␊ - }␊ - ␊ - .span-1 {␊ - --col-span: 1;␊ - }␊ - ␊ - .span-y-1 {␊ - --row-span: 1;␊ - }␊ - ␊ - .cols-1.grid, .cols-1[class^=grid-], .cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - ␊ - .rows-1.grid, .rows-1[class^=grid-], .rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - ␊ - .span-2 > *,␊ - .cols-2 > * {␊ - --col-base: 2;␊ - }␊ - ␊ - .span-2 {␊ - --col-span: 2;␊ - }␊ - ␊ - .span-y-2 {␊ - --row-span: 2;␊ - }␊ - ␊ - .cols-2.grid, .cols-2[class^=grid-], .cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - ␊ - .rows-2.grid, .rows-2[class^=grid-], .rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - ␊ - .span-3 > *,␊ - .cols-3 > * {␊ - --col-base: 3;␊ - }␊ - ␊ - .span-3 {␊ - --col-span: 3;␊ - }␊ - ␊ - .span-y-3 {␊ - --row-span: 3;␊ - }␊ - ␊ - .cols-3.grid, .cols-3[class^=grid-], .cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - ␊ - .rows-3.grid, .rows-3[class^=grid-], .rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - ␊ - .span-4 > *,␊ - .cols-4 > * {␊ - --col-base: 4;␊ - }␊ - ␊ - .span-4 {␊ - --col-span: 4;␊ - }␊ - ␊ - .span-y-4 {␊ - --row-span: 4;␊ - }␊ - ␊ - .cols-4.grid, .cols-4[class^=grid-], .cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - ␊ - .rows-4.grid, .rows-4[class^=grid-], .rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - ␊ - .span-5 > *,␊ - .cols-5 > * {␊ - --col-base: 5;␊ - }␊ - ␊ - .span-5 {␊ - --col-span: 5;␊ - }␊ - ␊ - .span-y-5 {␊ - --row-span: 5;␊ - }␊ - ␊ - .cols-5.grid, .cols-5[class^=grid-], .cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - ␊ - .rows-5.grid, .rows-5[class^=grid-], .rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - ␊ - .span-6 > *,␊ - .cols-6 > * {␊ - --col-base: 6;␊ - }␊ - ␊ - .span-6 {␊ - --col-span: 6;␊ - }␊ - ␊ - .span-y-6 {␊ - --row-span: 6;␊ - }␊ - ␊ - .cols-6.grid, .cols-6[class^=grid-], .cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - ␊ - .rows-6.grid, .rows-6[class^=grid-], .rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - ␊ - .span-7 > *,␊ - .cols-7 > * {␊ - --col-base: 7;␊ - }␊ - ␊ - .span-7 {␊ - --col-span: 7;␊ - }␊ - ␊ - .span-y-7 {␊ - --row-span: 7;␊ - }␊ - ␊ - .cols-7.grid, .cols-7[class^=grid-], .cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - ␊ - .rows-7.grid, .rows-7[class^=grid-], .rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - ␊ - .span-8 > *,␊ - .cols-8 > * {␊ - --col-base: 8;␊ - }␊ - ␊ - .span-8 {␊ - --col-span: 8;␊ - }␊ - ␊ - .span-y-8 {␊ - --row-span: 8;␊ - }␊ - ␊ - .cols-8.grid, .cols-8[class^=grid-], .cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - ␊ - .rows-8.grid, .rows-8[class^=grid-], .rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - ␊ - .span-9 > *,␊ - .cols-9 > * {␊ - --col-base: 9;␊ - }␊ - ␊ - .span-9 {␊ - --col-span: 9;␊ - }␊ - ␊ - .span-y-9 {␊ - --row-span: 9;␊ - }␊ - ␊ - .cols-9.grid, .cols-9[class^=grid-], .cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - ␊ - .rows-9.grid, .rows-9[class^=grid-], .rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - ␊ - .span-10 > *,␊ - .cols-10 > * {␊ - --col-base: 10;␊ - }␊ - ␊ - .span-10 {␊ - --col-span: 10;␊ - }␊ - ␊ - .span-y-10 {␊ - --row-span: 10;␊ - }␊ - ␊ - .cols-10.grid, .cols-10[class^=grid-], .cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - ␊ - .rows-10.grid, .rows-10[class^=grid-], .rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - ␊ - .span-11 > *,␊ - .cols-11 > * {␊ - --col-base: 11;␊ - }␊ - ␊ - .span-11 {␊ - --col-span: 11;␊ - }␊ - ␊ - .span-y-11 {␊ - --row-span: 11;␊ - }␊ - ␊ - .cols-11.grid, .cols-11[class^=grid-], .cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - ␊ - .rows-11.grid, .rows-11[class^=grid-], .rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - ␊ - .span-12 > *,␊ - .cols-12 > * {␊ - --col-base: 12;␊ - }␊ - ␊ - .span-12 {␊ - --col-span: 12;␊ - }␊ - ␊ - .span-y-12 {␊ - --row-span: 12;␊ - }␊ - ␊ - .cols-12.grid, .cols-12[class^=grid-], .cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - ␊ - .rows-12.grid, .rows-12[class^=grid-], .rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__span, [class^=a__span-], [class*=" a__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .a__flow > .a__span, .a__flow > [class^=a__span-], .a__flow > [class*=" a__span-"], [class^=a__flow-] > .a__span, [class^=a__flow-] > [class^=a__span-], [class^=a__flow-] > [class*=" a__span-"], [class*=" a__flow-"] > .a__span, [class*=" a__flow-"] > [class^=a__span-], [class*=" a__flow-"] > [class*=" a__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - ␊ - .a__grid > .a__span, .a__grid > [class^=a__span-], .a__grid > [class*=" a__span-"], [class^=a__grid-] > .a__span, [class^=a__grid-] > [class^=a__span-], [class^=a__grid-] > [class*=" a__span-"], [class*=" a__grid-"] > .a__span, [class*=" a__grid-"] > [class^=a__span-], [class*=" a__grid-"] > [class*=" a__span-"] {␊ - width: unset;␊ - }␊ - ␊ - [class^=a__pull-], [class*=" a__pull-"],␊ - [class^=a__push-], [class*=" a__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .a__flow > [class^=a__pull-], .a__flow > [class*=" a__pull-"], .a__flow > [class^=a__push-], .a__flow > [class*=" a__push-"], [class^=a__flow-] > [class^=a__pull-], [class^=a__flow-] > [class*=" a__pull-"], [class^=a__flow-] > [class^=a__push-], [class^=a__flow-] > [class*=" a__push-"], [class*=" a__flow-"] > [class^=a__pull-], [class*=" a__flow-"] > [class*=" a__pull-"], [class*=" a__flow-"] > [class^=a__push-], [class*=" a__flow-"] > [class*=" a__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - [class^=a__pull-r-], [class*=" a__pull-r-"],␊ - [class^=a__push-r-], [class*=" a__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .a__flow > [class^=a__pull-r-], .a__flow > [class*=" a__pull-r-"], .a__flow > [class^=a__push-r-], .a__flow > [class*=" a__push-r-"], [class^=a__flow-] > [class^=a__pull-r-], [class^=a__flow-] > [class*=" a__pull-r-"], [class^=a__flow-] > [class^=a__push-r-], [class^=a__flow-] > [class*=" a__push-r-"], [class*=" a__flow-"] > [class^=a__pull-r-], [class*=" a__flow-"] > [class*=" a__pull-r-"], [class*=" a__flow-"] > [class^=a__push-r-], [class*=" a__flow-"] > [class*=" a__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .a__span-auto, [class^=a__span-auto-], [class*=" a__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - ␊ - .a__span-all, [class^=a__span-all-], [class*=" a__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - ␊ - [class^=a__span-y-], [class*=" a__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - ␊ - .a__span-1 > *,␊ - .a__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - ␊ - .a__span-1 {␊ - --col-span: 1;␊ - }␊ - ␊ - .a__span-y-1 {␊ - --row-span: 1;␊ - }␊ - ␊ - .a__cols-1.grid, .a__cols-1[class^=grid-], .a__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - ␊ - .a__rows-1.grid, .a__rows-1[class^=grid-], .a__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - ␊ - .a__span-2 > *,␊ - .a__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - ␊ - .a__span-2 {␊ - --col-span: 2;␊ - }␊ - ␊ - .a__span-y-2 {␊ - --row-span: 2;␊ - }␊ - ␊ - .a__cols-2.grid, .a__cols-2[class^=grid-], .a__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - ␊ - .a__rows-2.grid, .a__rows-2[class^=grid-], .a__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - ␊ - .a__span-3 > *,␊ - .a__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - ␊ - .a__span-3 {␊ - --col-span: 3;␊ - }␊ - ␊ - .a__span-y-3 {␊ - --row-span: 3;␊ - }␊ - ␊ - .a__cols-3.grid, .a__cols-3[class^=grid-], .a__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - ␊ - .a__rows-3.grid, .a__rows-3[class^=grid-], .a__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - ␊ - .a__span-4 > *,␊ - .a__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - ␊ - .a__span-4 {␊ - --col-span: 4;␊ - }␊ - ␊ - .a__span-y-4 {␊ - --row-span: 4;␊ - }␊ - ␊ - .a__cols-4.grid, .a__cols-4[class^=grid-], .a__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - ␊ - .a__rows-4.grid, .a__rows-4[class^=grid-], .a__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - ␊ - .a__span-5 > *,␊ - .a__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - ␊ - .a__span-5 {␊ - --col-span: 5;␊ - }␊ - ␊ - .a__span-y-5 {␊ - --row-span: 5;␊ - }␊ - ␊ - .a__cols-5.grid, .a__cols-5[class^=grid-], .a__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - ␊ - .a__rows-5.grid, .a__rows-5[class^=grid-], .a__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - ␊ - .a__span-6 > *,␊ - .a__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - ␊ - .a__span-6 {␊ - --col-span: 6;␊ - }␊ - ␊ - .a__span-y-6 {␊ - --row-span: 6;␊ - }␊ - ␊ - .a__cols-6.grid, .a__cols-6[class^=grid-], .a__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - ␊ - .a__rows-6.grid, .a__rows-6[class^=grid-], .a__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - ␊ - .a__span-7 > *,␊ - .a__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - ␊ - .a__span-7 {␊ - --col-span: 7;␊ - }␊ - ␊ - .a__span-y-7 {␊ - --row-span: 7;␊ - }␊ - ␊ - .a__cols-7.grid, .a__cols-7[class^=grid-], .a__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - ␊ - .a__rows-7.grid, .a__rows-7[class^=grid-], .a__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - ␊ - .a__span-8 > *,␊ - .a__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - ␊ - .a__span-8 {␊ - --col-span: 8;␊ - }␊ - ␊ - .a__span-y-8 {␊ - --row-span: 8;␊ - }␊ - ␊ - .a__cols-8.grid, .a__cols-8[class^=grid-], .a__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - ␊ - .a__rows-8.grid, .a__rows-8[class^=grid-], .a__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - ␊ - .a__span-9 > *,␊ - .a__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - ␊ - .a__span-9 {␊ - --col-span: 9;␊ - }␊ - ␊ - .a__span-y-9 {␊ - --row-span: 9;␊ - }␊ - ␊ - .a__cols-9.grid, .a__cols-9[class^=grid-], .a__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - ␊ - .a__rows-9.grid, .a__rows-9[class^=grid-], .a__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - ␊ - .a__span-10 > *,␊ - .a__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - ␊ - .a__span-10 {␊ - --col-span: 10;␊ - }␊ - ␊ - .a__span-y-10 {␊ - --row-span: 10;␊ - }␊ - ␊ - .a__cols-10.grid, .a__cols-10[class^=grid-], .a__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - ␊ - .a__rows-10.grid, .a__rows-10[class^=grid-], .a__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - ␊ - .a__span-11 > *,␊ - .a__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - ␊ - .a__span-11 {␊ - --col-span: 11;␊ - }␊ - ␊ - .a__span-y-11 {␊ - --row-span: 11;␊ - }␊ - ␊ - .a__cols-11.grid, .a__cols-11[class^=grid-], .a__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - ␊ - .a__rows-11.grid, .a__rows-11[class^=grid-], .a__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - ␊ - .a__span-12 > *,␊ - .a__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - ␊ - .a__span-12 {␊ - --col-span: 12;␊ - }␊ - ␊ - .a__span-y-12 {␊ - --row-span: 12;␊ - }␊ - ␊ - .a__cols-12.grid, .a__cols-12[class^=grid-], .a__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - ␊ - .a__rows-12.grid, .a__rows-12[class^=grid-], .a__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }␊ - @media screen and (min-width: 30em) {␊ - .b__span, [class^=b__span-], [class*=" b__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .b__flow > .b__span, .b__flow > [class^=b__span-], .b__flow > [class*=" b__span-"], [class^=b__flow-] > .b__span, [class^=b__flow-] > [class^=b__span-], [class^=b__flow-] > [class*=" b__span-"], [class*=" b__flow-"] > .b__span, [class*=" b__flow-"] > [class^=b__span-], [class*=" b__flow-"] > [class*=" b__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - ␊ - .b__grid > .b__span, .b__grid > [class^=b__span-], .b__grid > [class*=" b__span-"], [class^=b__grid-] > .b__span, [class^=b__grid-] > [class^=b__span-], [class^=b__grid-] > [class*=" b__span-"], [class*=" b__grid-"] > .b__span, [class*=" b__grid-"] > [class^=b__span-], [class*=" b__grid-"] > [class*=" b__span-"] {␊ - width: unset;␊ - }␊ - ␊ - [class^=b__pull-], [class*=" b__pull-"],␊ - [class^=b__push-], [class*=" b__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .b__flow > [class^=b__pull-], .b__flow > [class*=" b__pull-"], .b__flow > [class^=b__push-], .b__flow > [class*=" b__push-"], [class^=b__flow-] > [class^=b__pull-], [class^=b__flow-] > [class*=" b__pull-"], [class^=b__flow-] > [class^=b__push-], [class^=b__flow-] > [class*=" b__push-"], [class*=" b__flow-"] > [class^=b__pull-], [class*=" b__flow-"] > [class*=" b__pull-"], [class*=" b__flow-"] > [class^=b__push-], [class*=" b__flow-"] > [class*=" b__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - [class^=b__pull-r-], [class*=" b__pull-r-"],␊ - [class^=b__push-r-], [class*=" b__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .b__flow > [class^=b__pull-r-], .b__flow > [class*=" b__pull-r-"], .b__flow > [class^=b__push-r-], .b__flow > [class*=" b__push-r-"], [class^=b__flow-] > [class^=b__pull-r-], [class^=b__flow-] > [class*=" b__pull-r-"], [class^=b__flow-] > [class^=b__push-r-], [class^=b__flow-] > [class*=" b__push-r-"], [class*=" b__flow-"] > [class^=b__pull-r-], [class*=" b__flow-"] > [class*=" b__pull-r-"], [class*=" b__flow-"] > [class^=b__push-r-], [class*=" b__flow-"] > [class*=" b__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .b__span-auto, [class^=b__span-auto-], [class*=" b__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - ␊ - .b__span-all, [class^=b__span-all-], [class*=" b__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - ␊ - [class^=b__span-y-], [class*=" b__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - ␊ - .b__span-1 > *,␊ - .b__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - ␊ - .b__span-1 {␊ - --col-span: 1;␊ - }␊ - ␊ - .b__span-y-1 {␊ - --row-span: 1;␊ - }␊ - ␊ - .b__cols-1.grid, .b__cols-1[class^=grid-], .b__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - ␊ - .b__rows-1.grid, .b__rows-1[class^=grid-], .b__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - ␊ - .b__span-2 > *,␊ - .b__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - ␊ - .b__span-2 {␊ - --col-span: 2;␊ - }␊ - ␊ - .b__span-y-2 {␊ - --row-span: 2;␊ - }␊ - ␊ - .b__cols-2.grid, .b__cols-2[class^=grid-], .b__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - ␊ - .b__rows-2.grid, .b__rows-2[class^=grid-], .b__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - ␊ - .b__span-3 > *,␊ - .b__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - ␊ - .b__span-3 {␊ - --col-span: 3;␊ - }␊ - ␊ - .b__span-y-3 {␊ - --row-span: 3;␊ - }␊ - ␊ - .b__cols-3.grid, .b__cols-3[class^=grid-], .b__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - ␊ - .b__rows-3.grid, .b__rows-3[class^=grid-], .b__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - ␊ - .b__span-4 > *,␊ - .b__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - ␊ - .b__span-4 {␊ - --col-span: 4;␊ - }␊ - ␊ - .b__span-y-4 {␊ - --row-span: 4;␊ - }␊ - ␊ - .b__cols-4.grid, .b__cols-4[class^=grid-], .b__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - ␊ - .b__rows-4.grid, .b__rows-4[class^=grid-], .b__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - ␊ - .b__span-5 > *,␊ - .b__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - ␊ - .b__span-5 {␊ - --col-span: 5;␊ - }␊ - ␊ - .b__span-y-5 {␊ - --row-span: 5;␊ - }␊ - ␊ - .b__cols-5.grid, .b__cols-5[class^=grid-], .b__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - ␊ - .b__rows-5.grid, .b__rows-5[class^=grid-], .b__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - ␊ - .b__span-6 > *,␊ - .b__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - ␊ - .b__span-6 {␊ - --col-span: 6;␊ - }␊ - ␊ - .b__span-y-6 {␊ - --row-span: 6;␊ - }␊ - ␊ - .b__cols-6.grid, .b__cols-6[class^=grid-], .b__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - ␊ - .b__rows-6.grid, .b__rows-6[class^=grid-], .b__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - ␊ - .b__span-7 > *,␊ - .b__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - ␊ - .b__span-7 {␊ - --col-span: 7;␊ - }␊ - ␊ - .b__span-y-7 {␊ - --row-span: 7;␊ - }␊ - ␊ - .b__cols-7.grid, .b__cols-7[class^=grid-], .b__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - ␊ - .b__rows-7.grid, .b__rows-7[class^=grid-], .b__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - ␊ - .b__span-8 > *,␊ - .b__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - ␊ - .b__span-8 {␊ - --col-span: 8;␊ - }␊ - ␊ - .b__span-y-8 {␊ - --row-span: 8;␊ - }␊ - ␊ - .b__cols-8.grid, .b__cols-8[class^=grid-], .b__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - ␊ - .b__rows-8.grid, .b__rows-8[class^=grid-], .b__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - ␊ - .b__span-9 > *,␊ - .b__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - ␊ - .b__span-9 {␊ - --col-span: 9;␊ - }␊ - ␊ - .b__span-y-9 {␊ - --row-span: 9;␊ - }␊ - ␊ - .b__cols-9.grid, .b__cols-9[class^=grid-], .b__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - ␊ - .b__rows-9.grid, .b__rows-9[class^=grid-], .b__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - ␊ - .b__span-10 > *,␊ - .b__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - ␊ - .b__span-10 {␊ - --col-span: 10;␊ - }␊ - ␊ - .b__span-y-10 {␊ - --row-span: 10;␊ - }␊ - ␊ - .b__cols-10.grid, .b__cols-10[class^=grid-], .b__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - ␊ - .b__rows-10.grid, .b__rows-10[class^=grid-], .b__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - ␊ - .b__span-11 > *,␊ - .b__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - ␊ - .b__span-11 {␊ - --col-span: 11;␊ - }␊ - ␊ - .b__span-y-11 {␊ - --row-span: 11;␊ - }␊ - ␊ - .b__cols-11.grid, .b__cols-11[class^=grid-], .b__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - ␊ - .b__rows-11.grid, .b__rows-11[class^=grid-], .b__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - ␊ - .b__span-12 > *,␊ - .b__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - ␊ - .b__span-12 {␊ - --col-span: 12;␊ - }␊ - ␊ - .b__span-y-12 {␊ - --row-span: 12;␊ - }␊ - ␊ - .b__cols-12.grid, .b__cols-12[class^=grid-], .b__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - ␊ - .b__rows-12.grid, .b__rows-12[class^=grid-], .b__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - .c__span, [class^=c__span-], [class*=" c__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .c__flow > .c__span, .c__flow > [class^=c__span-], .c__flow > [class*=" c__span-"], [class^=c__flow-] > .c__span, [class^=c__flow-] > [class^=c__span-], [class^=c__flow-] > [class*=" c__span-"], [class*=" c__flow-"] > .c__span, [class*=" c__flow-"] > [class^=c__span-], [class*=" c__flow-"] > [class*=" c__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - ␊ - .c__grid > .c__span, .c__grid > [class^=c__span-], .c__grid > [class*=" c__span-"], [class^=c__grid-] > .c__span, [class^=c__grid-] > [class^=c__span-], [class^=c__grid-] > [class*=" c__span-"], [class*=" c__grid-"] > .c__span, [class*=" c__grid-"] > [class^=c__span-], [class*=" c__grid-"] > [class*=" c__span-"] {␊ - width: unset;␊ - }␊ - ␊ - [class^=c__pull-], [class*=" c__pull-"],␊ - [class^=c__push-], [class*=" c__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .c__flow > [class^=c__pull-], .c__flow > [class*=" c__pull-"], .c__flow > [class^=c__push-], .c__flow > [class*=" c__push-"], [class^=c__flow-] > [class^=c__pull-], [class^=c__flow-] > [class*=" c__pull-"], [class^=c__flow-] > [class^=c__push-], [class^=c__flow-] > [class*=" c__push-"], [class*=" c__flow-"] > [class^=c__pull-], [class*=" c__flow-"] > [class*=" c__pull-"], [class*=" c__flow-"] > [class^=c__push-], [class*=" c__flow-"] > [class*=" c__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - [class^=c__pull-r-], [class*=" c__pull-r-"],␊ - [class^=c__push-r-], [class*=" c__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .c__flow > [class^=c__pull-r-], .c__flow > [class*=" c__pull-r-"], .c__flow > [class^=c__push-r-], .c__flow > [class*=" c__push-r-"], [class^=c__flow-] > [class^=c__pull-r-], [class^=c__flow-] > [class*=" c__pull-r-"], [class^=c__flow-] > [class^=c__push-r-], [class^=c__flow-] > [class*=" c__push-r-"], [class*=" c__flow-"] > [class^=c__pull-r-], [class*=" c__flow-"] > [class*=" c__pull-r-"], [class*=" c__flow-"] > [class^=c__push-r-], [class*=" c__flow-"] > [class*=" c__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .c__span-auto, [class^=c__span-auto-], [class*=" c__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - ␊ - .c__span-all, [class^=c__span-all-], [class*=" c__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - ␊ - [class^=c__span-y-], [class*=" c__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - ␊ - .c__span-1 > *,␊ - .c__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - ␊ - .c__span-1 {␊ - --col-span: 1;␊ - }␊ - ␊ - .c__span-y-1 {␊ - --row-span: 1;␊ - }␊ - ␊ - .c__cols-1.grid, .c__cols-1[class^=grid-], .c__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - ␊ - .c__rows-1.grid, .c__rows-1[class^=grid-], .c__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - ␊ - .c__span-2 > *,␊ - .c__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - ␊ - .c__span-2 {␊ - --col-span: 2;␊ - }␊ - ␊ - .c__span-y-2 {␊ - --row-span: 2;␊ - }␊ - ␊ - .c__cols-2.grid, .c__cols-2[class^=grid-], .c__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - ␊ - .c__rows-2.grid, .c__rows-2[class^=grid-], .c__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - ␊ - .c__span-3 > *,␊ - .c__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - ␊ - .c__span-3 {␊ - --col-span: 3;␊ - }␊ - ␊ - .c__span-y-3 {␊ - --row-span: 3;␊ - }␊ - ␊ - .c__cols-3.grid, .c__cols-3[class^=grid-], .c__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - ␊ - .c__rows-3.grid, .c__rows-3[class^=grid-], .c__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - ␊ - .c__span-4 > *,␊ - .c__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - ␊ - .c__span-4 {␊ - --col-span: 4;␊ - }␊ - ␊ - .c__span-y-4 {␊ - --row-span: 4;␊ - }␊ - ␊ - .c__cols-4.grid, .c__cols-4[class^=grid-], .c__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - ␊ - .c__rows-4.grid, .c__rows-4[class^=grid-], .c__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - ␊ - .c__span-5 > *,␊ - .c__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - ␊ - .c__span-5 {␊ - --col-span: 5;␊ - }␊ - ␊ - .c__span-y-5 {␊ - --row-span: 5;␊ - }␊ - ␊ - .c__cols-5.grid, .c__cols-5[class^=grid-], .c__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - ␊ - .c__rows-5.grid, .c__rows-5[class^=grid-], .c__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - ␊ - .c__span-6 > *,␊ - .c__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - ␊ - .c__span-6 {␊ - --col-span: 6;␊ - }␊ - ␊ - .c__span-y-6 {␊ - --row-span: 6;␊ - }␊ - ␊ - .c__cols-6.grid, .c__cols-6[class^=grid-], .c__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - ␊ - .c__rows-6.grid, .c__rows-6[class^=grid-], .c__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - ␊ - .c__span-7 > *,␊ - .c__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - ␊ - .c__span-7 {␊ - --col-span: 7;␊ - }␊ - ␊ - .c__span-y-7 {␊ - --row-span: 7;␊ - }␊ - ␊ - .c__cols-7.grid, .c__cols-7[class^=grid-], .c__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - ␊ - .c__rows-7.grid, .c__rows-7[class^=grid-], .c__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - ␊ - .c__span-8 > *,␊ - .c__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - ␊ - .c__span-8 {␊ - --col-span: 8;␊ - }␊ - ␊ - .c__span-y-8 {␊ - --row-span: 8;␊ - }␊ - ␊ - .c__cols-8.grid, .c__cols-8[class^=grid-], .c__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - ␊ - .c__rows-8.grid, .c__rows-8[class^=grid-], .c__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - ␊ - .c__span-9 > *,␊ - .c__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - ␊ - .c__span-9 {␊ - --col-span: 9;␊ - }␊ - ␊ - .c__span-y-9 {␊ - --row-span: 9;␊ - }␊ - ␊ - .c__cols-9.grid, .c__cols-9[class^=grid-], .c__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - ␊ - .c__rows-9.grid, .c__rows-9[class^=grid-], .c__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - ␊ - .c__span-10 > *,␊ - .c__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - ␊ - .c__span-10 {␊ - --col-span: 10;␊ - }␊ - ␊ - .c__span-y-10 {␊ - --row-span: 10;␊ - }␊ - ␊ - .c__cols-10.grid, .c__cols-10[class^=grid-], .c__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - ␊ - .c__rows-10.grid, .c__rows-10[class^=grid-], .c__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - ␊ - .c__span-11 > *,␊ - .c__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - ␊ - .c__span-11 {␊ - --col-span: 11;␊ - }␊ - ␊ - .c__span-y-11 {␊ - --row-span: 11;␊ - }␊ - ␊ - .c__cols-11.grid, .c__cols-11[class^=grid-], .c__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - ␊ - .c__rows-11.grid, .c__rows-11[class^=grid-], .c__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - ␊ - .c__span-12 > *,␊ - .c__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - ␊ - .c__span-12 {␊ - --col-span: 12;␊ - }␊ - ␊ - .c__span-y-12 {␊ - --row-span: 12;␊ - }␊ - ␊ - .c__cols-12.grid, .c__cols-12[class^=grid-], .c__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - ␊ - .c__rows-12.grid, .c__rows-12[class^=grid-], .c__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }` - -## modern-flow [libsass] - -> Snapshot 1 - - `*, *:before, *:after {␊ - --push-l: initial;␊ - --push-r: initial;␊ - }␊ - ␊ - :root {␊ - --row-gap: var(--inner-y);␊ - --col-gap: var(--inner-x);␊ - --col-base: var(--grid-cols);␊ - --col-span: var(--col-base);␊ - --row-span: var(--grid-rows, 1);␊ - }␊ - ␊ - .flow, [class^="flow-"], [class*=" flow-"] {␊ - display: flex;␊ - flex-direction: row;␊ - flex-wrap: wrap;␊ - width: calc(100% + var(--col-gap)) !important;␊ - margin-left: calc(var(--col-gap) / -2);␊ - margin-right: calc(var(--col-gap) / -2);␊ - margin-top: calc(var(--row-gap) / -2);␊ - margin-bottom: calc(var(--row-gap) / -2);␊ - }␊ - ␊ - .flow > *, [class^="flow-"] > *, [class*=" flow-"] > * {␊ - flex: 0 0 auto;␊ - width: 100%;␊ - min-width: 0%;␊ - min-height: 1px;␊ - background-clip: content-box;␊ - padding-left: calc(var(--col-gap) / 2) !important;␊ - padding-right: calc(var(--col-gap) / 2) !important;␊ - padding-top: calc(var(--row-gap) / 2) !important;␊ - padding-bottom: calc(var(--row-gap) / 2) !important;␊ - }␊ - ␊ - .grid, [class^="grid-"], [class*=" grid-"] {␊ - display: grid;␊ - grid-gap: var(--row-gap) var(--col-gap);␊ - grid-template-rows: repeat(var(--row-span), 1fr);␊ - grid-template-columns: repeat(var(--col-span), minmax(0%, 1fr));␊ - }␊ - ␊ - .grid > *, [class^="grid-"] > *, [class*=" grid-"] > * {␊ - grid-column: span var(--col-span)/span var(--col-span);␊ - }␊ - ␊ - .flow-s, .grid-s {␊ - --row-gap: var(--inner-y-s);␊ - }␊ - ␊ - .flow-m, .grid-m {␊ - --row-gap: var(--inner-y-m);␊ - }␊ - ␊ - .flow-l, .grid-l {␊ - --row-gap: var(--inner-y-l);␊ - }␊ - ␊ - .flow-x-s, .grid-x-s {␊ - --col-gap: var(--inner-x-s);␊ - }␊ - ␊ - .flow-x-form, .grid-x-form {␊ - --col-gap: var(--inner-x-form);␊ - }␊ - ␊ - .flow-0, .grid-0 {␊ - --row-gap: 0;␊ - }␊ - ␊ - .flow-x-0, .grid-x-0 {␊ - --col-gap: 0;␊ - }␊ - ␊ - .flow-0-0, .grid-0-0 {␊ - --row-gap: 0;␊ - --col-gap: 0;␊ - }␊ - ␊ - .span, [class^="span-"], [class*=" span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - ␊ - .flow > .span, .flow > [class^="span-"], .flow > [class*=" span-"], [class^="flow-"] > .span, [class^="flow-"] > [class^="span-"], [class^="flow-"] > [class*=" span-"], [class*=" flow-"] > .span, [class*=" flow-"] > [class^="span-"], [class*=" flow-"] > [class*=" span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - ␊ - .grid > .span, .grid > [class^="span-"], .grid > [class*=" span-"], [class^="grid-"] > .span, [class^="grid-"] > [class^="span-"], [class^="grid-"] > [class*=" span-"], [class*=" grid-"] > .span, [class*=" grid-"] > [class^="span-"], [class*=" grid-"] > [class*=" span-"] {␊ - width: unset;␊ - }␊ - ␊ - [class^="pull-"], [class*=" pull-"],␊ - [class^="push-"], [class*=" push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - .flow > [class^="pull-"], .flow > [class*=" pull-"], .flow > [class^="push-"], .flow > [class*=" push-"], [class^="flow-"] > [class^="pull-"], [class^="flow-"] > [class*=" pull-"], [class^="flow-"] > [class^="push-"], [class^="flow-"] > [class*=" push-"], [class*=" flow-"] > [class^="pull-"], [class*=" flow-"] > [class*=" pull-"], [class*=" flow-"] > [class^="push-"], [class*=" flow-"] > [class*=" push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - ␊ - [class^="pull-r-"], [class*=" pull-r-"],␊ - [class^="push-r-"], [class*=" push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .flow > [class^="pull-r-"], .flow > [class*=" pull-r-"], .flow > [class^="push-r-"], .flow > [class*=" push-r-"], [class^="flow-"] > [class^="pull-r-"], [class^="flow-"] > [class*=" pull-r-"], [class^="flow-"] > [class^="push-r-"], [class^="flow-"] > [class*=" push-r-"], [class*=" flow-"] > [class^="pull-r-"], [class*=" flow-"] > [class*=" pull-r-"], [class*=" flow-"] > [class^="push-r-"], [class*=" flow-"] > [class*=" push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - ␊ - .span-auto, [class^="span-auto-"], [class*=" span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - ␊ - .span-all, [class^="span-all-"], [class*=" span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - ␊ - [class^="span-y-"], [class*=" span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - ␊ - .span-1 > *,␊ - .cols-1 > * {␊ - --col-base: 1;␊ - }␊ - ␊ - .span-1 {␊ - --col-span: 1;␊ - }␊ - ␊ - .span-y-1 {␊ - --row-span: 1;␊ - }␊ - ␊ - .cols-1.grid, .cols-1[class^="grid-"], .cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - ␊ - .rows-1.grid, .rows-1[class^="grid-"], .rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - ␊ - .span-2 > *,␊ - .cols-2 > * {␊ - --col-base: 2;␊ - }␊ - ␊ - .span-2 {␊ - --col-span: 2;␊ - }␊ - ␊ - .span-y-2 {␊ - --row-span: 2;␊ - }␊ - ␊ - .cols-2.grid, .cols-2[class^="grid-"], .cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - ␊ - .rows-2.grid, .rows-2[class^="grid-"], .rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - ␊ - .span-3 > *,␊ - .cols-3 > * {␊ - --col-base: 3;␊ - }␊ - ␊ - .span-3 {␊ - --col-span: 3;␊ - }␊ - ␊ - .span-y-3 {␊ - --row-span: 3;␊ - }␊ - ␊ - .cols-3.grid, .cols-3[class^="grid-"], .cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - ␊ - .rows-3.grid, .rows-3[class^="grid-"], .rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - ␊ - .span-4 > *,␊ - .cols-4 > * {␊ - --col-base: 4;␊ - }␊ - ␊ - .span-4 {␊ - --col-span: 4;␊ - }␊ - ␊ - .span-y-4 {␊ - --row-span: 4;␊ - }␊ - ␊ - .cols-4.grid, .cols-4[class^="grid-"], .cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - ␊ - .rows-4.grid, .rows-4[class^="grid-"], .rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - ␊ - .span-5 > *,␊ - .cols-5 > * {␊ - --col-base: 5;␊ - }␊ - ␊ - .span-5 {␊ - --col-span: 5;␊ - }␊ - ␊ - .span-y-5 {␊ - --row-span: 5;␊ - }␊ - ␊ - .cols-5.grid, .cols-5[class^="grid-"], .cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - ␊ - .rows-5.grid, .rows-5[class^="grid-"], .rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - ␊ - .span-6 > *,␊ - .cols-6 > * {␊ - --col-base: 6;␊ - }␊ - ␊ - .span-6 {␊ - --col-span: 6;␊ - }␊ - ␊ - .span-y-6 {␊ - --row-span: 6;␊ - }␊ - ␊ - .cols-6.grid, .cols-6[class^="grid-"], .cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - ␊ - .rows-6.grid, .rows-6[class^="grid-"], .rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - ␊ - .span-7 > *,␊ - .cols-7 > * {␊ - --col-base: 7;␊ - }␊ - ␊ - .span-7 {␊ - --col-span: 7;␊ - }␊ - ␊ - .span-y-7 {␊ - --row-span: 7;␊ - }␊ - ␊ - .cols-7.grid, .cols-7[class^="grid-"], .cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - ␊ - .rows-7.grid, .rows-7[class^="grid-"], .rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - ␊ - .span-8 > *,␊ - .cols-8 > * {␊ - --col-base: 8;␊ - }␊ - ␊ - .span-8 {␊ - --col-span: 8;␊ - }␊ - ␊ - .span-y-8 {␊ - --row-span: 8;␊ - }␊ - ␊ - .cols-8.grid, .cols-8[class^="grid-"], .cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - ␊ - .rows-8.grid, .rows-8[class^="grid-"], .rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - ␊ - .span-9 > *,␊ - .cols-9 > * {␊ - --col-base: 9;␊ - }␊ - ␊ - .span-9 {␊ - --col-span: 9;␊ - }␊ - ␊ - .span-y-9 {␊ - --row-span: 9;␊ - }␊ - ␊ - .cols-9.grid, .cols-9[class^="grid-"], .cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - ␊ - .rows-9.grid, .rows-9[class^="grid-"], .rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - ␊ - .span-10 > *,␊ - .cols-10 > * {␊ - --col-base: 10;␊ - }␊ - ␊ - .span-10 {␊ - --col-span: 10;␊ - }␊ - ␊ - .span-y-10 {␊ - --row-span: 10;␊ - }␊ - ␊ - .cols-10.grid, .cols-10[class^="grid-"], .cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - ␊ - .rows-10.grid, .rows-10[class^="grid-"], .rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - ␊ - .span-11 > *,␊ - .cols-11 > * {␊ - --col-base: 11;␊ - }␊ - ␊ - .span-11 {␊ - --col-span: 11;␊ - }␊ - ␊ - .span-y-11 {␊ - --row-span: 11;␊ - }␊ - ␊ - .cols-11.grid, .cols-11[class^="grid-"], .cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - ␊ - .rows-11.grid, .rows-11[class^="grid-"], .rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - ␊ - .span-12 > *,␊ - .cols-12 > * {␊ - --col-base: 12;␊ - }␊ - ␊ - .span-12 {␊ - --col-span: 12;␊ - }␊ - ␊ - .span-y-12 {␊ - --row-span: 12;␊ - }␊ - ␊ - .cols-12.grid, .cols-12[class^="grid-"], .cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - ␊ - .rows-12.grid, .rows-12[class^="grid-"], .rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__span, [class^="a__span-"], [class*=" a__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .a__flow > .a__span, .a__flow > [class^="a__span-"], .a__flow > [class*=" a__span-"], [class^="a__flow-"] > .a__span, [class^="a__flow-"] > [class^="a__span-"], [class^="a__flow-"] > [class*=" a__span-"], [class*=" a__flow-"] > .a__span, [class*=" a__flow-"] > [class^="a__span-"], [class*=" a__flow-"] > [class*=" a__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - .a__grid > .a__span, .a__grid > [class^="a__span-"], .a__grid > [class*=" a__span-"], [class^="a__grid-"] > .a__span, [class^="a__grid-"] > [class^="a__span-"], [class^="a__grid-"] > [class*=" a__span-"], [class*=" a__grid-"] > .a__span, [class*=" a__grid-"] > [class^="a__span-"], [class*=" a__grid-"] > [class*=" a__span-"] {␊ - width: unset;␊ - }␊ - [class^="a__pull-"], [class*=" a__pull-"],␊ - [class^="a__push-"], [class*=" a__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .a__flow > [class^="a__pull-"], .a__flow > [class*=" a__pull-"], .a__flow > [class^="a__push-"], .a__flow > [class*=" a__push-"], [class^="a__flow-"] > [class^="a__pull-"], [class^="a__flow-"] > [class*=" a__pull-"], [class^="a__flow-"] > [class^="a__push-"], [class^="a__flow-"] > [class*=" a__push-"], [class*=" a__flow-"] > [class^="a__pull-"], [class*=" a__flow-"] > [class*=" a__pull-"], [class*=" a__flow-"] > [class^="a__push-"], [class*=" a__flow-"] > [class*=" a__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - [class^="a__pull-r-"], [class*=" a__pull-r-"],␊ - [class^="a__push-r-"], [class*=" a__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .a__flow > [class^="a__pull-r-"], .a__flow > [class*=" a__pull-r-"], .a__flow > [class^="a__push-r-"], .a__flow > [class*=" a__push-r-"], [class^="a__flow-"] > [class^="a__pull-r-"], [class^="a__flow-"] > [class*=" a__pull-r-"], [class^="a__flow-"] > [class^="a__push-r-"], [class^="a__flow-"] > [class*=" a__push-r-"], [class*=" a__flow-"] > [class^="a__pull-r-"], [class*=" a__flow-"] > [class*=" a__pull-r-"], [class*=" a__flow-"] > [class^="a__push-r-"], [class*=" a__flow-"] > [class*=" a__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - .a__span-auto, [class^="a__span-auto-"], [class*=" a__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - .a__span-all, [class^="a__span-all-"], [class*=" a__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - [class^="a__span-y-"], [class*=" a__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - .a__span-1 > *,␊ - .a__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - .a__span-1 {␊ - --col-span: 1;␊ - }␊ - .a__span-y-1 {␊ - --row-span: 1;␊ - }␊ - .a__cols-1.grid, .a__cols-1[class^="grid-"], .a__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - .a__rows-1.grid, .a__rows-1[class^="grid-"], .a__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - .a__span-2 > *,␊ - .a__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - .a__span-2 {␊ - --col-span: 2;␊ - }␊ - .a__span-y-2 {␊ - --row-span: 2;␊ - }␊ - .a__cols-2.grid, .a__cols-2[class^="grid-"], .a__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - .a__rows-2.grid, .a__rows-2[class^="grid-"], .a__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - .a__span-3 > *,␊ - .a__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - .a__span-3 {␊ - --col-span: 3;␊ - }␊ - .a__span-y-3 {␊ - --row-span: 3;␊ - }␊ - .a__cols-3.grid, .a__cols-3[class^="grid-"], .a__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - .a__rows-3.grid, .a__rows-3[class^="grid-"], .a__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - .a__span-4 > *,␊ - .a__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - .a__span-4 {␊ - --col-span: 4;␊ - }␊ - .a__span-y-4 {␊ - --row-span: 4;␊ - }␊ - .a__cols-4.grid, .a__cols-4[class^="grid-"], .a__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - .a__rows-4.grid, .a__rows-4[class^="grid-"], .a__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - .a__span-5 > *,␊ - .a__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - .a__span-5 {␊ - --col-span: 5;␊ - }␊ - .a__span-y-5 {␊ - --row-span: 5;␊ - }␊ - .a__cols-5.grid, .a__cols-5[class^="grid-"], .a__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - .a__rows-5.grid, .a__rows-5[class^="grid-"], .a__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - .a__span-6 > *,␊ - .a__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - .a__span-6 {␊ - --col-span: 6;␊ - }␊ - .a__span-y-6 {␊ - --row-span: 6;␊ - }␊ - .a__cols-6.grid, .a__cols-6[class^="grid-"], .a__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - .a__rows-6.grid, .a__rows-6[class^="grid-"], .a__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - .a__span-7 > *,␊ - .a__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - .a__span-7 {␊ - --col-span: 7;␊ - }␊ - .a__span-y-7 {␊ - --row-span: 7;␊ - }␊ - .a__cols-7.grid, .a__cols-7[class^="grid-"], .a__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - .a__rows-7.grid, .a__rows-7[class^="grid-"], .a__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - .a__span-8 > *,␊ - .a__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - .a__span-8 {␊ - --col-span: 8;␊ - }␊ - .a__span-y-8 {␊ - --row-span: 8;␊ - }␊ - .a__cols-8.grid, .a__cols-8[class^="grid-"], .a__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - .a__rows-8.grid, .a__rows-8[class^="grid-"], .a__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - .a__span-9 > *,␊ - .a__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - .a__span-9 {␊ - --col-span: 9;␊ - }␊ - .a__span-y-9 {␊ - --row-span: 9;␊ - }␊ - .a__cols-9.grid, .a__cols-9[class^="grid-"], .a__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - .a__rows-9.grid, .a__rows-9[class^="grid-"], .a__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - .a__span-10 > *,␊ - .a__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - .a__span-10 {␊ - --col-span: 10;␊ - }␊ - .a__span-y-10 {␊ - --row-span: 10;␊ - }␊ - .a__cols-10.grid, .a__cols-10[class^="grid-"], .a__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - .a__rows-10.grid, .a__rows-10[class^="grid-"], .a__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - .a__span-11 > *,␊ - .a__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - .a__span-11 {␊ - --col-span: 11;␊ - }␊ - .a__span-y-11 {␊ - --row-span: 11;␊ - }␊ - .a__cols-11.grid, .a__cols-11[class^="grid-"], .a__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - .a__rows-11.grid, .a__rows-11[class^="grid-"], .a__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - .a__span-12 > *,␊ - .a__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - .a__span-12 {␊ - --col-span: 12;␊ - }␊ - .a__span-y-12 {␊ - --row-span: 12;␊ - }␊ - .a__cols-12.grid, .a__cols-12[class^="grid-"], .a__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - .a__rows-12.grid, .a__rows-12[class^="grid-"], .a__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .b__span, [class^="b__span-"], [class*=" b__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .b__flow > .b__span, .b__flow > [class^="b__span-"], .b__flow > [class*=" b__span-"], [class^="b__flow-"] > .b__span, [class^="b__flow-"] > [class^="b__span-"], [class^="b__flow-"] > [class*=" b__span-"], [class*=" b__flow-"] > .b__span, [class*=" b__flow-"] > [class^="b__span-"], [class*=" b__flow-"] > [class*=" b__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - .b__grid > .b__span, .b__grid > [class^="b__span-"], .b__grid > [class*=" b__span-"], [class^="b__grid-"] > .b__span, [class^="b__grid-"] > [class^="b__span-"], [class^="b__grid-"] > [class*=" b__span-"], [class*=" b__grid-"] > .b__span, [class*=" b__grid-"] > [class^="b__span-"], [class*=" b__grid-"] > [class*=" b__span-"] {␊ - width: unset;␊ - }␊ - [class^="b__pull-"], [class*=" b__pull-"],␊ - [class^="b__push-"], [class*=" b__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .b__flow > [class^="b__pull-"], .b__flow > [class*=" b__pull-"], .b__flow > [class^="b__push-"], .b__flow > [class*=" b__push-"], [class^="b__flow-"] > [class^="b__pull-"], [class^="b__flow-"] > [class*=" b__pull-"], [class^="b__flow-"] > [class^="b__push-"], [class^="b__flow-"] > [class*=" b__push-"], [class*=" b__flow-"] > [class^="b__pull-"], [class*=" b__flow-"] > [class*=" b__pull-"], [class*=" b__flow-"] > [class^="b__push-"], [class*=" b__flow-"] > [class*=" b__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - [class^="b__pull-r-"], [class*=" b__pull-r-"],␊ - [class^="b__push-r-"], [class*=" b__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .b__flow > [class^="b__pull-r-"], .b__flow > [class*=" b__pull-r-"], .b__flow > [class^="b__push-r-"], .b__flow > [class*=" b__push-r-"], [class^="b__flow-"] > [class^="b__pull-r-"], [class^="b__flow-"] > [class*=" b__pull-r-"], [class^="b__flow-"] > [class^="b__push-r-"], [class^="b__flow-"] > [class*=" b__push-r-"], [class*=" b__flow-"] > [class^="b__pull-r-"], [class*=" b__flow-"] > [class*=" b__pull-r-"], [class*=" b__flow-"] > [class^="b__push-r-"], [class*=" b__flow-"] > [class*=" b__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - .b__span-auto, [class^="b__span-auto-"], [class*=" b__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - .b__span-all, [class^="b__span-all-"], [class*=" b__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - [class^="b__span-y-"], [class*=" b__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - .b__span-1 > *,␊ - .b__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - .b__span-1 {␊ - --col-span: 1;␊ - }␊ - .b__span-y-1 {␊ - --row-span: 1;␊ - }␊ - .b__cols-1.grid, .b__cols-1[class^="grid-"], .b__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - .b__rows-1.grid, .b__rows-1[class^="grid-"], .b__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - .b__span-2 > *,␊ - .b__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - .b__span-2 {␊ - --col-span: 2;␊ - }␊ - .b__span-y-2 {␊ - --row-span: 2;␊ - }␊ - .b__cols-2.grid, .b__cols-2[class^="grid-"], .b__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - .b__rows-2.grid, .b__rows-2[class^="grid-"], .b__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - .b__span-3 > *,␊ - .b__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - .b__span-3 {␊ - --col-span: 3;␊ - }␊ - .b__span-y-3 {␊ - --row-span: 3;␊ - }␊ - .b__cols-3.grid, .b__cols-3[class^="grid-"], .b__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - .b__rows-3.grid, .b__rows-3[class^="grid-"], .b__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - .b__span-4 > *,␊ - .b__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - .b__span-4 {␊ - --col-span: 4;␊ - }␊ - .b__span-y-4 {␊ - --row-span: 4;␊ - }␊ - .b__cols-4.grid, .b__cols-4[class^="grid-"], .b__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - .b__rows-4.grid, .b__rows-4[class^="grid-"], .b__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - .b__span-5 > *,␊ - .b__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - .b__span-5 {␊ - --col-span: 5;␊ - }␊ - .b__span-y-5 {␊ - --row-span: 5;␊ - }␊ - .b__cols-5.grid, .b__cols-5[class^="grid-"], .b__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - .b__rows-5.grid, .b__rows-5[class^="grid-"], .b__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - .b__span-6 > *,␊ - .b__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - .b__span-6 {␊ - --col-span: 6;␊ - }␊ - .b__span-y-6 {␊ - --row-span: 6;␊ - }␊ - .b__cols-6.grid, .b__cols-6[class^="grid-"], .b__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - .b__rows-6.grid, .b__rows-6[class^="grid-"], .b__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - .b__span-7 > *,␊ - .b__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - .b__span-7 {␊ - --col-span: 7;␊ - }␊ - .b__span-y-7 {␊ - --row-span: 7;␊ - }␊ - .b__cols-7.grid, .b__cols-7[class^="grid-"], .b__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - .b__rows-7.grid, .b__rows-7[class^="grid-"], .b__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - .b__span-8 > *,␊ - .b__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - .b__span-8 {␊ - --col-span: 8;␊ - }␊ - .b__span-y-8 {␊ - --row-span: 8;␊ - }␊ - .b__cols-8.grid, .b__cols-8[class^="grid-"], .b__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - .b__rows-8.grid, .b__rows-8[class^="grid-"], .b__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - .b__span-9 > *,␊ - .b__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - .b__span-9 {␊ - --col-span: 9;␊ - }␊ - .b__span-y-9 {␊ - --row-span: 9;␊ - }␊ - .b__cols-9.grid, .b__cols-9[class^="grid-"], .b__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - .b__rows-9.grid, .b__rows-9[class^="grid-"], .b__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - .b__span-10 > *,␊ - .b__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - .b__span-10 {␊ - --col-span: 10;␊ - }␊ - .b__span-y-10 {␊ - --row-span: 10;␊ - }␊ - .b__cols-10.grid, .b__cols-10[class^="grid-"], .b__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - .b__rows-10.grid, .b__rows-10[class^="grid-"], .b__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - .b__span-11 > *,␊ - .b__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - .b__span-11 {␊ - --col-span: 11;␊ - }␊ - .b__span-y-11 {␊ - --row-span: 11;␊ - }␊ - .b__cols-11.grid, .b__cols-11[class^="grid-"], .b__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - .b__rows-11.grid, .b__rows-11[class^="grid-"], .b__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - .b__span-12 > *,␊ - .b__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - .b__span-12 {␊ - --col-span: 12;␊ - }␊ - .b__span-y-12 {␊ - --row-span: 12;␊ - }␊ - .b__cols-12.grid, .b__cols-12[class^="grid-"], .b__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - .b__rows-12.grid, .b__rows-12[class^="grid-"], .b__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - .c__span, [class^="c__span-"], [class*=" c__span-"] {␊ - width: calc((99.99999% + var(--col-gap)) * var(--col-span) / var(--col-base) - var(--col-gap));␊ - }␊ - .c__flow > .c__span, .c__flow > [class^="c__span-"], .c__flow > [class*=" c__span-"], [class^="c__flow-"] > .c__span, [class^="c__flow-"] > [class^="c__span-"], [class^="c__flow-"] > [class*=" c__span-"], [class*=" c__flow-"] > .c__span, [class*=" c__flow-"] > [class^="c__span-"], [class*=" c__flow-"] > [class*=" c__span-"] {␊ - width: calc(99.99999% * var(--col-span) / var(--col-base));␊ - }␊ - .c__grid > .c__span, .c__grid > [class^="c__span-"], .c__grid > [class*=" c__span-"], [class^="c__grid-"] > .c__span, [class^="c__grid-"] > [class^="c__span-"], [class^="c__grid-"] > [class*=" c__span-"], [class*=" c__grid-"] > .c__span, [class*=" c__grid-"] > [class^="c__span-"], [class*=" c__grid-"] > [class*=" c__span-"] {␊ - width: unset;␊ - }␊ - [class^="c__pull-"], [class*=" c__pull-"],␊ - [class^="c__push-"], [class*=" c__push-"] {␊ - margin-left: calc((99.99999% + var(--col-gap)) * var(--push-l) / var(--col-base));␊ - }␊ - .c__flow > [class^="c__pull-"], .c__flow > [class*=" c__pull-"], .c__flow > [class^="c__push-"], .c__flow > [class*=" c__push-"], [class^="c__flow-"] > [class^="c__pull-"], [class^="c__flow-"] > [class*=" c__pull-"], [class^="c__flow-"] > [class^="c__push-"], [class^="c__flow-"] > [class*=" c__push-"], [class*=" c__flow-"] > [class^="c__pull-"], [class*=" c__flow-"] > [class*=" c__pull-"], [class*=" c__flow-"] > [class^="c__push-"], [class*=" c__flow-"] > [class*=" c__push-"] {␊ - margin-left: calc(99.99999% * var(--push-l) / var(--col-base));␊ - }␊ - [class^="c__pull-r-"], [class*=" c__pull-r-"],␊ - [class^="c__push-r-"], [class*=" c__push-r-"] {␊ - margin-right: calc((99.99999% + var(--col-gap)) * var(--push-r) / var(--col-base));␊ - }␊ - .c__flow > [class^="c__pull-r-"], .c__flow > [class*=" c__pull-r-"], .c__flow > [class^="c__push-r-"], .c__flow > [class*=" c__push-r-"], [class^="c__flow-"] > [class^="c__pull-r-"], [class^="c__flow-"] > [class*=" c__pull-r-"], [class^="c__flow-"] > [class^="c__push-r-"], [class^="c__flow-"] > [class*=" c__push-r-"], [class*=" c__flow-"] > [class^="c__pull-r-"], [class*=" c__flow-"] > [class*=" c__pull-r-"], [class*=" c__flow-"] > [class^="c__push-r-"], [class*=" c__flow-"] > [class*=" c__push-r-"] {␊ - margin-right: calc(99.99999% * var(--push-r) / var(--col-base));␊ - }␊ - .c__span-auto, [class^="c__span-auto-"], [class*=" c__span-auto-"] {␊ - flex: 1 1 0%;␊ - --col-span: 0;␊ - }␊ - .c__span-all, [class^="c__span-all-"], [class*=" c__span-all-"] {␊ - --col-span: var(--col-base);␊ - }␊ - [class^="c__span-y-"], [class*=" c__span-y-"] {␊ - grid-row-end: span var(--row-span);␊ - }␊ - .c__span-1 > *,␊ - .c__cols-1 > * {␊ - --col-base: 1;␊ - }␊ - .c__span-1 {␊ - --col-span: 1;␊ - }␊ - .c__span-y-1 {␊ - --row-span: 1;␊ - }␊ - .c__cols-1.grid, .c__cols-1[class^="grid-"], .c__cols-1[class*=" grid-"] {␊ - --col-span: 1;␊ - }␊ - .c__rows-1.grid, .c__rows-1[class^="grid-"], .c__rows-1[class*=" grid-"] {␊ - --row-span: 1;␊ - }␊ - .c__span-2 > *,␊ - .c__cols-2 > * {␊ - --col-base: 2;␊ - }␊ - .c__span-2 {␊ - --col-span: 2;␊ - }␊ - .c__span-y-2 {␊ - --row-span: 2;␊ - }␊ - .c__cols-2.grid, .c__cols-2[class^="grid-"], .c__cols-2[class*=" grid-"] {␊ - --col-span: 2;␊ - }␊ - .c__rows-2.grid, .c__rows-2[class^="grid-"], .c__rows-2[class*=" grid-"] {␊ - --row-span: 2;␊ - }␊ - .c__span-3 > *,␊ - .c__cols-3 > * {␊ - --col-base: 3;␊ - }␊ - .c__span-3 {␊ - --col-span: 3;␊ - }␊ - .c__span-y-3 {␊ - --row-span: 3;␊ - }␊ - .c__cols-3.grid, .c__cols-3[class^="grid-"], .c__cols-3[class*=" grid-"] {␊ - --col-span: 3;␊ - }␊ - .c__rows-3.grid, .c__rows-3[class^="grid-"], .c__rows-3[class*=" grid-"] {␊ - --row-span: 3;␊ - }␊ - .c__span-4 > *,␊ - .c__cols-4 > * {␊ - --col-base: 4;␊ - }␊ - .c__span-4 {␊ - --col-span: 4;␊ - }␊ - .c__span-y-4 {␊ - --row-span: 4;␊ - }␊ - .c__cols-4.grid, .c__cols-4[class^="grid-"], .c__cols-4[class*=" grid-"] {␊ - --col-span: 4;␊ - }␊ - .c__rows-4.grid, .c__rows-4[class^="grid-"], .c__rows-4[class*=" grid-"] {␊ - --row-span: 4;␊ - }␊ - .c__span-5 > *,␊ - .c__cols-5 > * {␊ - --col-base: 5;␊ - }␊ - .c__span-5 {␊ - --col-span: 5;␊ - }␊ - .c__span-y-5 {␊ - --row-span: 5;␊ - }␊ - .c__cols-5.grid, .c__cols-5[class^="grid-"], .c__cols-5[class*=" grid-"] {␊ - --col-span: 5;␊ - }␊ - .c__rows-5.grid, .c__rows-5[class^="grid-"], .c__rows-5[class*=" grid-"] {␊ - --row-span: 5;␊ - }␊ - .c__span-6 > *,␊ - .c__cols-6 > * {␊ - --col-base: 6;␊ - }␊ - .c__span-6 {␊ - --col-span: 6;␊ - }␊ - .c__span-y-6 {␊ - --row-span: 6;␊ - }␊ - .c__cols-6.grid, .c__cols-6[class^="grid-"], .c__cols-6[class*=" grid-"] {␊ - --col-span: 6;␊ - }␊ - .c__rows-6.grid, .c__rows-6[class^="grid-"], .c__rows-6[class*=" grid-"] {␊ - --row-span: 6;␊ - }␊ - .c__span-7 > *,␊ - .c__cols-7 > * {␊ - --col-base: 7;␊ - }␊ - .c__span-7 {␊ - --col-span: 7;␊ - }␊ - .c__span-y-7 {␊ - --row-span: 7;␊ - }␊ - .c__cols-7.grid, .c__cols-7[class^="grid-"], .c__cols-7[class*=" grid-"] {␊ - --col-span: 7;␊ - }␊ - .c__rows-7.grid, .c__rows-7[class^="grid-"], .c__rows-7[class*=" grid-"] {␊ - --row-span: 7;␊ - }␊ - .c__span-8 > *,␊ - .c__cols-8 > * {␊ - --col-base: 8;␊ - }␊ - .c__span-8 {␊ - --col-span: 8;␊ - }␊ - .c__span-y-8 {␊ - --row-span: 8;␊ - }␊ - .c__cols-8.grid, .c__cols-8[class^="grid-"], .c__cols-8[class*=" grid-"] {␊ - --col-span: 8;␊ - }␊ - .c__rows-8.grid, .c__rows-8[class^="grid-"], .c__rows-8[class*=" grid-"] {␊ - --row-span: 8;␊ - }␊ - .c__span-9 > *,␊ - .c__cols-9 > * {␊ - --col-base: 9;␊ - }␊ - .c__span-9 {␊ - --col-span: 9;␊ - }␊ - .c__span-y-9 {␊ - --row-span: 9;␊ - }␊ - .c__cols-9.grid, .c__cols-9[class^="grid-"], .c__cols-9[class*=" grid-"] {␊ - --col-span: 9;␊ - }␊ - .c__rows-9.grid, .c__rows-9[class^="grid-"], .c__rows-9[class*=" grid-"] {␊ - --row-span: 9;␊ - }␊ - .c__span-10 > *,␊ - .c__cols-10 > * {␊ - --col-base: 10;␊ - }␊ - .c__span-10 {␊ - --col-span: 10;␊ - }␊ - .c__span-y-10 {␊ - --row-span: 10;␊ - }␊ - .c__cols-10.grid, .c__cols-10[class^="grid-"], .c__cols-10[class*=" grid-"] {␊ - --col-span: 10;␊ - }␊ - .c__rows-10.grid, .c__rows-10[class^="grid-"], .c__rows-10[class*=" grid-"] {␊ - --row-span: 10;␊ - }␊ - .c__span-11 > *,␊ - .c__cols-11 > * {␊ - --col-base: 11;␊ - }␊ - .c__span-11 {␊ - --col-span: 11;␊ - }␊ - .c__span-y-11 {␊ - --row-span: 11;␊ - }␊ - .c__cols-11.grid, .c__cols-11[class^="grid-"], .c__cols-11[class*=" grid-"] {␊ - --col-span: 11;␊ - }␊ - .c__rows-11.grid, .c__rows-11[class^="grid-"], .c__rows-11[class*=" grid-"] {␊ - --row-span: 11;␊ - }␊ - .c__span-12 > *,␊ - .c__cols-12 > * {␊ - --col-base: 12;␊ - }␊ - .c__span-12 {␊ - --col-span: 12;␊ - }␊ - .c__span-y-12 {␊ - --row-span: 12;␊ - }␊ - .c__cols-12.grid, .c__cols-12[class^="grid-"], .c__cols-12[class*=" grid-"] {␊ - --col-span: 12;␊ - }␊ - .c__rows-12.grid, .c__rows-12[class^="grid-"], .c__rows-12[class*=" grid-"] {␊ - --row-span: 12;␊ - }␊ - }␊ - ` - -## modern-font [dartsass] - -> Snapshot 1 - - `body {␊ - text-rendering: optimizeLegibility;␊ - -moz-osx-font-smoothing: grayscale;␊ - -webkit-font-smoothing: antialiased;␊ - font-kerning: normal;␊ - }␊ - ␊ - body, [class^=f-], [class*=" f-"] {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - font-family: var(--font-family);␊ - letter-spacing: var(--letter-spacing);␊ - font-feature-settings: var(--font-feature-settings);␊ - }␊ - ␊ - [class^=f-], [class*=" f-"] {␊ - --trim-adjacent: 0em;␊ - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent));␊ - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em);␊ - }␊ - [class^=f-].trim, .trim > [class^=f-], .trim > [class*=" f-"], [class^=trim-] > [class^=f-], [class^=trim-] > [class*=" f-"], [class*=" trim-"] > [class^=f-], [class*=" trim-"] > [class*=" f-"], [class*=" f-"].trim {␊ - margin-top: calc(0px - var(--trim-top));␊ - margin-bottom: calc(0px - var(--trim-bottom));␊ - margin-right: var(--trim-x);␊ - margin-left: var(--trim-x);␊ - }␊ - ␊ - .trim > * + [class^=f-], .trim > * + [class*=" f-"], [class^=trim-] > * + [class^=f-], [class^=trim-] > * + [class*=" f-"], [class*=" trim-"] > * + [class^=f-], [class*=" trim-"] > * + [class*=" f-"] {␊ - margin-top: calc(var(--stack-gap, 0em) - var(--trim-top));␊ - }␊ - ␊ - [class^=f-] + [class^=f-], [class^=f-] + [class*=" f-"], [class*=" f-"] + [class^=f-], [class*=" f-"] + [class*=" f-"] {␊ - --trim-adjacent: calc(1em - 1ex);␊ - }␊ - ␊ - .f-sans, [class^=f-sans-], [class*=" f-sans-"], body {␊ - --font-family: MessinaSans;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-serif, [class^=f-serif-], [class*=" f-serif-"] {␊ - --font-family: MessinaSerif;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-modern, [class^=f-modern-], [class*=" f-modern-"] {␊ - --font-family: MessinaModern;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-sans-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-sans-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-sans-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-sans-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .f-serif-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-serif-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-serif-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-serif-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .f-modern-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-modern-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-modern-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-modern-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .plain p, .plain ul, .plain ol, .plain dl, .plain h3, .plain h4, .plain h5, .plain h6, .plain blockquote, [class^=plain-] p, [class^=plain-] ul, [class^=plain-] ol, [class^=plain-] dl, [class^=plain-] h3, [class^=plain-] h4, [class^=plain-] h5, [class^=plain-] h6, [class^=plain-] blockquote, [class*=" plain-"] p, [class*=" plain-"] ul, [class*=" plain-"] ol, [class*=" plain-"] dl, [class*=" plain-"] h3, [class*=" plain-"] h4, [class*=" plain-"] h5, [class*=" plain-"] h6, [class*=" plain-"] blockquote {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - font-family: var(--font-family);␊ - letter-spacing: var(--letter-spacing);␊ - font-feature-settings: var(--font-feature-settings);␊ - --trim-adjacent: 0em;␊ - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent));␊ - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em);␊ - }␊ - .plain > p, .plain > ul, .plain > ol, .plain > dl, .plain > h3, .plain > h4, .plain > h5, .plain > h6, .plain > blockquote, [class^=plain-] > p, [class^=plain-] > ul, [class^=plain-] > ol, [class^=plain-] > dl, [class^=plain-] > h3, [class^=plain-] > h4, [class^=plain-] > h5, [class^=plain-] > h6, [class^=plain-] > blockquote, [class*=" plain-"] > p, [class*=" plain-"] > ul, [class*=" plain-"] > ol, [class*=" plain-"] > dl, [class*=" plain-"] > h3, [class*=" plain-"] > h4, [class*=" plain-"] > h5, [class*=" plain-"] > h6, [class*=" plain-"] > blockquote {␊ - margin-top: calc(0px - var(--trim-top));␊ - margin-bottom: calc(0px - var(--trim-bottom));␊ - margin-right: var(--trim-x);␊ - margin-left: var(--trim-x);␊ - }␊ - ␊ - .plain > * + p, .plain > * + ul, .plain > * + ol, .plain > * + dl, .plain > * + h3, .plain > * + h4, .plain > * + h5, .plain > * + h6, .plain > * + blockquote, [class^=plain-] > * + p, [class^=plain-] > * + ul, [class^=plain-] > * + ol, [class^=plain-] > * + dl, [class^=plain-] > * + h3, [class^=plain-] > * + h4, [class^=plain-] > * + h5, [class^=plain-] > * + h6, [class^=plain-] > * + blockquote, [class*=" plain-"] > * + p, [class*=" plain-"] > * + ul, [class*=" plain-"] > * + ol, [class*=" plain-"] > * + dl, [class*=" plain-"] > * + h3, [class*=" plain-"] > * + h4, [class*=" plain-"] > * + h5, [class*=" plain-"] > * + h6, [class*=" plain-"] > * + blockquote {␊ - margin-top: calc(var(--stack-gap, 0) - var(--trim-top));␊ - }␊ - ␊ - .plain p + p, .plain p + ul, .plain p + ol, .plain p + dl, .plain p + h3, .plain p + h4, .plain p + h5, .plain p + h6, .plain p + blockquote, .plain ul + p, .plain ul + ul, .plain ul + ol, .plain ul + dl, .plain ul + h3, .plain ul + h4, .plain ul + h5, .plain ul + h6, .plain ul + blockquote, .plain ol + p, .plain ol + ul, .plain ol + ol, .plain ol + dl, .plain ol + h3, .plain ol + h4, .plain ol + h5, .plain ol + h6, .plain ol + blockquote, .plain dl + p, .plain dl + ul, .plain dl + ol, .plain dl + dl, .plain dl + h3, .plain dl + h4, .plain dl + h5, .plain dl + h6, .plain dl + blockquote, .plain h3 + p, .plain h3 + ul, .plain h3 + ol, .plain h3 + dl, .plain h3 + h3, .plain h3 + h4, .plain h3 + h5, .plain h3 + h6, .plain h3 + blockquote, .plain h4 + p, .plain h4 + ul, .plain h4 + ol, .plain h4 + dl, .plain h4 + h3, .plain h4 + h4, .plain h4 + h5, .plain h4 + h6, .plain h4 + blockquote, .plain h5 + p, .plain h5 + ul, .plain h5 + ol, .plain h5 + dl, .plain h5 + h3, .plain h5 + h4, .plain h5 + h5, .plain h5 + h6, .plain h5 + blockquote, .plain h6 + p, .plain h6 + ul, .plain h6 + ol, .plain h6 + dl, .plain h6 + h3, .plain h6 + h4, .plain h6 + h5, .plain h6 + h6, .plain h6 + blockquote, .plain blockquote + p, .plain blockquote + ul, .plain blockquote + ol, .plain blockquote + dl, .plain blockquote + h3, .plain blockquote + h4, .plain blockquote + h5, .plain blockquote + h6, .plain blockquote + blockquote, [class^=plain-] p + p, [class^=plain-] p + ul, [class^=plain-] p + ol, [class^=plain-] p + dl, [class^=plain-] p + h3, [class^=plain-] p + h4, [class^=plain-] p + h5, [class^=plain-] p + h6, [class^=plain-] p + blockquote, [class^=plain-] ul + p, [class^=plain-] ul + ul, [class^=plain-] ul + ol, [class^=plain-] ul + dl, [class^=plain-] ul + h3, [class^=plain-] ul + h4, [class^=plain-] ul + h5, [class^=plain-] ul + h6, [class^=plain-] ul + blockquote, [class^=plain-] ol + p, [class^=plain-] ol + ul, [class^=plain-] ol + ol, [class^=plain-] ol + dl, [class^=plain-] ol + h3, [class^=plain-] ol + h4, [class^=plain-] ol + h5, [class^=plain-] ol + h6, [class^=plain-] ol + blockquote, [class^=plain-] dl + p, [class^=plain-] dl + ul, [class^=plain-] dl + ol, [class^=plain-] dl + dl, [class^=plain-] dl + h3, [class^=plain-] dl + h4, [class^=plain-] dl + h5, [class^=plain-] dl + h6, [class^=plain-] dl + blockquote, [class^=plain-] h3 + p, [class^=plain-] h3 + ul, [class^=plain-] h3 + ol, [class^=plain-] h3 + dl, [class^=plain-] h3 + h3, [class^=plain-] h3 + h4, [class^=plain-] h3 + h5, [class^=plain-] h3 + h6, [class^=plain-] h3 + blockquote, [class^=plain-] h4 + p, [class^=plain-] h4 + ul, [class^=plain-] h4 + ol, [class^=plain-] h4 + dl, [class^=plain-] h4 + h3, [class^=plain-] h4 + h4, [class^=plain-] h4 + h5, [class^=plain-] h4 + h6, [class^=plain-] h4 + blockquote, [class^=plain-] h5 + p, [class^=plain-] h5 + ul, [class^=plain-] h5 + ol, [class^=plain-] h5 + dl, [class^=plain-] h5 + h3, [class^=plain-] h5 + h4, [class^=plain-] h5 + h5, [class^=plain-] h5 + h6, [class^=plain-] h5 + blockquote, [class^=plain-] h6 + p, [class^=plain-] h6 + ul, [class^=plain-] h6 + ol, [class^=plain-] h6 + dl, [class^=plain-] h6 + h3, [class^=plain-] h6 + h4, [class^=plain-] h6 + h5, [class^=plain-] h6 + h6, [class^=plain-] h6 + blockquote, [class^=plain-] blockquote + p, [class^=plain-] blockquote + ul, [class^=plain-] blockquote + ol, [class^=plain-] blockquote + dl, [class^=plain-] blockquote + h3, [class^=plain-] blockquote + h4, [class^=plain-] blockquote + h5, [class^=plain-] blockquote + h6, [class^=plain-] blockquote + blockquote, [class*=" plain-"] p + p, [class*=" plain-"] p + ul, [class*=" plain-"] p + ol, [class*=" plain-"] p + dl, [class*=" plain-"] p + h3, [class*=" plain-"] p + h4, [class*=" plain-"] p + h5, [class*=" plain-"] p + h6, [class*=" plain-"] p + blockquote, [class*=" plain-"] ul + p, [class*=" plain-"] ul + ul, [class*=" plain-"] ul + ol, [class*=" plain-"] ul + dl, [class*=" plain-"] ul + h3, [class*=" plain-"] ul + h4, [class*=" plain-"] ul + h5, [class*=" plain-"] ul + h6, [class*=" plain-"] ul + blockquote, [class*=" plain-"] ol + p, [class*=" plain-"] ol + ul, [class*=" plain-"] ol + ol, [class*=" plain-"] ol + dl, [class*=" plain-"] ol + h3, [class*=" plain-"] ol + h4, [class*=" plain-"] ol + h5, [class*=" plain-"] ol + h6, [class*=" plain-"] ol + blockquote, [class*=" plain-"] dl + p, [class*=" plain-"] dl + ul, [class*=" plain-"] dl + ol, [class*=" plain-"] dl + dl, [class*=" plain-"] dl + h3, [class*=" plain-"] dl + h4, [class*=" plain-"] dl + h5, [class*=" plain-"] dl + h6, [class*=" plain-"] dl + blockquote, [class*=" plain-"] h3 + p, [class*=" plain-"] h3 + ul, [class*=" plain-"] h3 + ol, [class*=" plain-"] h3 + dl, [class*=" plain-"] h3 + h3, [class*=" plain-"] h3 + h4, [class*=" plain-"] h3 + h5, [class*=" plain-"] h3 + h6, [class*=" plain-"] h3 + blockquote, [class*=" plain-"] h4 + p, [class*=" plain-"] h4 + ul, [class*=" plain-"] h4 + ol, [class*=" plain-"] h4 + dl, [class*=" plain-"] h4 + h3, [class*=" plain-"] h4 + h4, [class*=" plain-"] h4 + h5, [class*=" plain-"] h4 + h6, [class*=" plain-"] h4 + blockquote, [class*=" plain-"] h5 + p, [class*=" plain-"] h5 + ul, [class*=" plain-"] h5 + ol, [class*=" plain-"] h5 + dl, [class*=" plain-"] h5 + h3, [class*=" plain-"] h5 + h4, [class*=" plain-"] h5 + h5, [class*=" plain-"] h5 + h6, [class*=" plain-"] h5 + blockquote, [class*=" plain-"] h6 + p, [class*=" plain-"] h6 + ul, [class*=" plain-"] h6 + ol, [class*=" plain-"] h6 + dl, [class*=" plain-"] h6 + h3, [class*=" plain-"] h6 + h4, [class*=" plain-"] h6 + h5, [class*=" plain-"] h6 + h6, [class*=" plain-"] h6 + blockquote, [class*=" plain-"] blockquote + p, [class*=" plain-"] blockquote + ul, [class*=" plain-"] blockquote + ol, [class*=" plain-"] blockquote + dl, [class*=" plain-"] blockquote + h3, [class*=" plain-"] blockquote + h4, [class*=" plain-"] blockquote + h5, [class*=" plain-"] blockquote + h6, [class*=" plain-"] blockquote + blockquote {␊ - --trim-adjacent: 1em/2;␊ - }␊ - ␊ - .plain h6 {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - .plain h5, .plain blockquote {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - .plain h4, .plain p, .plain ul, .plain ol, .plain dl {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - .plain h3 {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }` - -## modern-font [libsass] - -> Snapshot 1 - - `body {␊ - text-rendering: optimizeLegibility;␊ - -moz-osx-font-smoothing: grayscale;␊ - -webkit-font-smoothing: antialiased;␊ - font-kerning: normal;␊ - }␊ - ␊ - body, [class^="f-"], [class*=" f-"] {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - font-family: var(--font-family);␊ - letter-spacing: var(--letter-spacing);␊ - font-feature-settings: var(--font-feature-settings);␊ - }␊ - ␊ - [class^="f-"], [class*=" f-"] {␊ - --trim-adjacent: 0em;␊ - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent));␊ - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em);␊ - }␊ - ␊ - [class^="f-"].trim, .trim > [class^="f-"], .trim > [class*=" f-"], [class^="trim-"] > [class^="f-"], [class^="trim-"] > [class*=" f-"], [class*=" trim-"] > [class^="f-"], [class*=" trim-"] > [class*=" f-"], [class*=" f-"].trim {␊ - margin-top: calc(0px - var(--trim-top));␊ - margin-bottom: calc(0px - var(--trim-bottom));␊ - margin-right: var(--trim-x);␊ - margin-left: var(--trim-x);␊ - }␊ - ␊ - .trim > * + [class^="f-"], .trim > * + [class*=" f-"], [class^="trim-"] > * + [class^="f-"], [class^="trim-"] > * + [class*=" f-"], [class*=" trim-"] > * + [class^="f-"], [class*=" trim-"] > * + [class*=" f-"] {␊ - margin-top: calc(var(--stack-gap, 0em) - var(--trim-top));␊ - }␊ - ␊ - [class^="f-"] + [class^="f-"], [class^="f-"] + [class*=" f-"], [class*=" f-"] + [class^="f-"], [class*=" f-"] + [class*=" f-"] {␊ - --trim-adjacent: calc(1em - 1ex);␊ - }␊ - ␊ - .f-sans, [class^="f-sans-"], [class*=" f-sans-"], body {␊ - --font-family: MessinaSans;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-serif, [class^="f-serif-"], [class*=" f-serif-"] {␊ - --font-family: MessinaSerif;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-modern, [class^="f-modern-"], [class*=" f-modern-"] {␊ - --font-family: MessinaModern;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --font-feature-settings: "kern" 1;␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - }␊ - ␊ - .f-sans-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-sans-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-sans-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-sans-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .f-serif-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-serif-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-serif-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-serif-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .f-modern-xs {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-modern-s {␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .f-modern-m {␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .f-modern-l {␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ␊ - .plain p, .plain ul, .plain ol, .plain dl, .plain h3, .plain h4, .plain h5, .plain h6, .plain blockquote, [class^="plain-"] p, [class^="plain-"] ul, [class^="plain-"] ol, [class^="plain-"] dl, [class^="plain-"] h3, [class^="plain-"] h4, [class^="plain-"] h5, [class^="plain-"] h6, [class^="plain-"] blockquote, [class*=" plain-"] p, [class*=" plain-"] ul, [class*=" plain-"] ol, [class*=" plain-"] dl, [class*=" plain-"] h3, [class*=" plain-"] h4, [class*=" plain-"] h5, [class*=" plain-"] h6, [class*=" plain-"] blockquote {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - font-family: var(--font-family);␊ - letter-spacing: var(--letter-spacing);␊ - font-feature-settings: var(--font-feature-settings);␊ - --trim-adjacent: 0em;␊ - --trim-top: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-capline) * 1em + var(--trim-adjacent));␊ - --trim-bottom: calc((var(--line-height) - 1) * 1em / 2 + var(--trim-baseline) * 1em);␊ - }␊ - ␊ - .plain > p, .plain > ul, .plain > ol, .plain > dl, .plain > h3, .plain > h4, .plain > h5, .plain > h6, .plain > blockquote, [class^="plain-"] > p, [class^="plain-"] > ul, [class^="plain-"] > ol, [class^="plain-"] > dl, [class^="plain-"] > h3, [class^="plain-"] > h4, [class^="plain-"] > h5, [class^="plain-"] > h6, [class^="plain-"] > blockquote, [class*=" plain-"] > p, [class*=" plain-"] > ul, [class*=" plain-"] > ol, [class*=" plain-"] > dl, [class*=" plain-"] > h3, [class*=" plain-"] > h4, [class*=" plain-"] > h5, [class*=" plain-"] > h6, [class*=" plain-"] > blockquote {␊ - margin-top: calc(0px - var(--trim-top));␊ - margin-bottom: calc(0px - var(--trim-bottom));␊ - margin-right: var(--trim-x);␊ - margin-left: var(--trim-x);␊ - }␊ - ␊ - .plain > * + p, .plain > * + ul, .plain > * + ol, .plain > * + dl, .plain > * + h3, .plain > * + h4, .plain > * + h5, .plain > * + h6, .plain > * + blockquote, [class^="plain-"] > * + p, [class^="plain-"] > * + ul, [class^="plain-"] > * + ol, [class^="plain-"] > * + dl, [class^="plain-"] > * + h3, [class^="plain-"] > * + h4, [class^="plain-"] > * + h5, [class^="plain-"] > * + h6, [class^="plain-"] > * + blockquote, [class*=" plain-"] > * + p, [class*=" plain-"] > * + ul, [class*=" plain-"] > * + ol, [class*=" plain-"] > * + dl, [class*=" plain-"] > * + h3, [class*=" plain-"] > * + h4, [class*=" plain-"] > * + h5, [class*=" plain-"] > * + h6, [class*=" plain-"] > * + blockquote {␊ - margin-top: calc(var(--stack-gap, 0) - var(--trim-top));␊ - }␊ - ␊ - .plain p + p, .plain p + ul, .plain p + ol, .plain p + dl, .plain p + h3, .plain p + h4, .plain p + h5, .plain p + h6, .plain p + blockquote, .plain ul + p, .plain ul + ul, .plain ul + ol, .plain ul + dl, .plain ul + h3, .plain ul + h4, .plain ul + h5, .plain ul + h6, .plain ul + blockquote, .plain ol + p, .plain ol + ul, .plain ol + ol, .plain ol + dl, .plain ol + h3, .plain ol + h4, .plain ol + h5, .plain ol + h6, .plain ol + blockquote, .plain dl + p, .plain dl + ul, .plain dl + ol, .plain dl + dl, .plain dl + h3, .plain dl + h4, .plain dl + h5, .plain dl + h6, .plain dl + blockquote, .plain h3 + p, .plain h3 + ul, .plain h3 + ol, .plain h3 + dl, .plain h3 + h3, .plain h3 + h4, .plain h3 + h5, .plain h3 + h6, .plain h3 + blockquote, .plain h4 + p, .plain h4 + ul, .plain h4 + ol, .plain h4 + dl, .plain h4 + h3, .plain h4 + h4, .plain h4 + h5, .plain h4 + h6, .plain h4 + blockquote, .plain h5 + p, .plain h5 + ul, .plain h5 + ol, .plain h5 + dl, .plain h5 + h3, .plain h5 + h4, .plain h5 + h5, .plain h5 + h6, .plain h5 + blockquote, .plain h6 + p, .plain h6 + ul, .plain h6 + ol, .plain h6 + dl, .plain h6 + h3, .plain h6 + h4, .plain h6 + h5, .plain h6 + h6, .plain h6 + blockquote, .plain blockquote + p, .plain blockquote + ul, .plain blockquote + ol, .plain blockquote + dl, .plain blockquote + h3, .plain blockquote + h4, .plain blockquote + h5, .plain blockquote + h6, .plain blockquote + blockquote, [class^="plain-"] p + p, [class^="plain-"] p + ul, [class^="plain-"] p + ol, [class^="plain-"] p + dl, [class^="plain-"] p + h3, [class^="plain-"] p + h4, [class^="plain-"] p + h5, [class^="plain-"] p + h6, [class^="plain-"] p + blockquote, [class^="plain-"] ul + p, [class^="plain-"] ul + ul, [class^="plain-"] ul + ol, [class^="plain-"] ul + dl, [class^="plain-"] ul + h3, [class^="plain-"] ul + h4, [class^="plain-"] ul + h5, [class^="plain-"] ul + h6, [class^="plain-"] ul + blockquote, [class^="plain-"] ol + p, [class^="plain-"] ol + ul, [class^="plain-"] ol + ol, [class^="plain-"] ol + dl, [class^="plain-"] ol + h3, [class^="plain-"] ol + h4, [class^="plain-"] ol + h5, [class^="plain-"] ol + h6, [class^="plain-"] ol + blockquote, [class^="plain-"] dl + p, [class^="plain-"] dl + ul, [class^="plain-"] dl + ol, [class^="plain-"] dl + dl, [class^="plain-"] dl + h3, [class^="plain-"] dl + h4, [class^="plain-"] dl + h5, [class^="plain-"] dl + h6, [class^="plain-"] dl + blockquote, [class^="plain-"] h3 + p, [class^="plain-"] h3 + ul, [class^="plain-"] h3 + ol, [class^="plain-"] h3 + dl, [class^="plain-"] h3 + h3, [class^="plain-"] h3 + h4, [class^="plain-"] h3 + h5, [class^="plain-"] h3 + h6, [class^="plain-"] h3 + blockquote, [class^="plain-"] h4 + p, [class^="plain-"] h4 + ul, [class^="plain-"] h4 + ol, [class^="plain-"] h4 + dl, [class^="plain-"] h4 + h3, [class^="plain-"] h4 + h4, [class^="plain-"] h4 + h5, [class^="plain-"] h4 + h6, [class^="plain-"] h4 + blockquote, [class^="plain-"] h5 + p, [class^="plain-"] h5 + ul, [class^="plain-"] h5 + ol, [class^="plain-"] h5 + dl, [class^="plain-"] h5 + h3, [class^="plain-"] h5 + h4, [class^="plain-"] h5 + h5, [class^="plain-"] h5 + h6, [class^="plain-"] h5 + blockquote, [class^="plain-"] h6 + p, [class^="plain-"] h6 + ul, [class^="plain-"] h6 + ol, [class^="plain-"] h6 + dl, [class^="plain-"] h6 + h3, [class^="plain-"] h6 + h4, [class^="plain-"] h6 + h5, [class^="plain-"] h6 + h6, [class^="plain-"] h6 + blockquote, [class^="plain-"] blockquote + p, [class^="plain-"] blockquote + ul, [class^="plain-"] blockquote + ol, [class^="plain-"] blockquote + dl, [class^="plain-"] blockquote + h3, [class^="plain-"] blockquote + h4, [class^="plain-"] blockquote + h5, [class^="plain-"] blockquote + h6, [class^="plain-"] blockquote + blockquote, [class*=" plain-"] p + p, [class*=" plain-"] p + ul, [class*=" plain-"] p + ol, [class*=" plain-"] p + dl, [class*=" plain-"] p + h3, [class*=" plain-"] p + h4, [class*=" plain-"] p + h5, [class*=" plain-"] p + h6, [class*=" plain-"] p + blockquote, [class*=" plain-"] ul + p, [class*=" plain-"] ul + ul, [class*=" plain-"] ul + ol, [class*=" plain-"] ul + dl, [class*=" plain-"] ul + h3, [class*=" plain-"] ul + h4, [class*=" plain-"] ul + h5, [class*=" plain-"] ul + h6, [class*=" plain-"] ul + blockquote, [class*=" plain-"] ol + p, [class*=" plain-"] ol + ul, [class*=" plain-"] ol + ol, [class*=" plain-"] ol + dl, [class*=" plain-"] ol + h3, [class*=" plain-"] ol + h4, [class*=" plain-"] ol + h5, [class*=" plain-"] ol + h6, [class*=" plain-"] ol + blockquote, [class*=" plain-"] dl + p, [class*=" plain-"] dl + ul, [class*=" plain-"] dl + ol, [class*=" plain-"] dl + dl, [class*=" plain-"] dl + h3, [class*=" plain-"] dl + h4, [class*=" plain-"] dl + h5, [class*=" plain-"] dl + h6, [class*=" plain-"] dl + blockquote, [class*=" plain-"] h3 + p, [class*=" plain-"] h3 + ul, [class*=" plain-"] h3 + ol, [class*=" plain-"] h3 + dl, [class*=" plain-"] h3 + h3, [class*=" plain-"] h3 + h4, [class*=" plain-"] h3 + h5, [class*=" plain-"] h3 + h6, [class*=" plain-"] h3 + blockquote, [class*=" plain-"] h4 + p, [class*=" plain-"] h4 + ul, [class*=" plain-"] h4 + ol, [class*=" plain-"] h4 + dl, [class*=" plain-"] h4 + h3, [class*=" plain-"] h4 + h4, [class*=" plain-"] h4 + h5, [class*=" plain-"] h4 + h6, [class*=" plain-"] h4 + blockquote, [class*=" plain-"] h5 + p, [class*=" plain-"] h5 + ul, [class*=" plain-"] h5 + ol, [class*=" plain-"] h5 + dl, [class*=" plain-"] h5 + h3, [class*=" plain-"] h5 + h4, [class*=" plain-"] h5 + h5, [class*=" plain-"] h5 + h6, [class*=" plain-"] h5 + blockquote, [class*=" plain-"] h6 + p, [class*=" plain-"] h6 + ul, [class*=" plain-"] h6 + ol, [class*=" plain-"] h6 + dl, [class*=" plain-"] h6 + h3, [class*=" plain-"] h6 + h4, [class*=" plain-"] h6 + h5, [class*=" plain-"] h6 + h6, [class*=" plain-"] h6 + blockquote, [class*=" plain-"] blockquote + p, [class*=" plain-"] blockquote + ul, [class*=" plain-"] blockquote + ol, [class*=" plain-"] blockquote + dl, [class*=" plain-"] blockquote + h3, [class*=" plain-"] blockquote + h4, [class*=" plain-"] blockquote + h5, [class*=" plain-"] blockquote + h6, [class*=" plain-"] blockquote + blockquote {␊ - --trim-adjacent: 1em/2;␊ - }␊ - ␊ - .plain h6 {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .plain h5, .plain blockquote {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 1rem;␊ - --line-height: 1.3;␊ - }␊ - ␊ - .plain h4, .plain p, .plain ul, .plain ol, .plain dl {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 2rem;␊ - --line-height: 1.2;␊ - }␊ - ␊ - .plain h3 {␊ - --font-family: MessinaSans;␊ - --font-feature-settings: "kern" 1;␊ - --letter-spacing: calc(1px - 0.025em);␊ - --trim-x: calc(1px - 0.1em);␊ - --trim-capline: 0;␊ - --trim-baseline: 0;␊ - --font-size: 3rem;␊ - --line-height: 1.1;␊ - }␊ - ` - -## modern-frame [dartsass] - -> Snapshot 1 - - `.bleed, [class^=bleed-], [class*=" bleed-"] {␊ - width: unset !important;␊ - }␊ - ␊ - .frame, .frame-x, .frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - ␊ - .frame, .frame-x, .frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - ␊ - .frame-y, .frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - ␊ - .frame-y, .frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - ␊ - .bleed, .bleed-x, .bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - ␊ - .bleed, .bleed-x, .bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - ␊ - .bleed-y, .bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - ␊ - .bleed-y, .bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__bleed, [class^=a__bleed-], [class*=" a__bleed-"] {␊ - width: unset !important;␊ - }␊ - ␊ - .a__frame, .a__frame-x, .a__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - ␊ - .a__frame, .a__frame-x, .a__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - ␊ - .a__frame-y, .a__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - ␊ - .a__frame-y, .a__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - ␊ - .a__bleed, .a__bleed-x, .a__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - ␊ - .a__bleed, .a__bleed-x, .a__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - ␊ - .a__bleed-y, .a__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - ␊ - .a__bleed-y, .a__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }␊ - @media screen and (min-width: 30em) {␊ - .b__bleed, [class^=b__bleed-], [class*=" b__bleed-"] {␊ - width: unset !important;␊ - }␊ - ␊ - .b__frame, .b__frame-x, .b__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - ␊ - .b__frame, .b__frame-x, .b__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - ␊ - .b__frame-y, .b__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - ␊ - .b__frame-y, .b__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - ␊ - .b__bleed, .b__bleed-x, .b__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - ␊ - .b__bleed, .b__bleed-x, .b__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - ␊ - .b__bleed-y, .b__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - ␊ - .b__bleed-y, .b__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - .c__bleed, [class^=c__bleed-], [class*=" c__bleed-"] {␊ - width: unset !important;␊ - }␊ - ␊ - .c__frame, .c__frame-x, .c__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - ␊ - .c__frame, .c__frame-x, .c__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - ␊ - .c__frame-y, .c__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - ␊ - .c__frame-y, .c__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - ␊ - .c__bleed, .c__bleed-x, .c__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - ␊ - .c__bleed, .c__bleed-x, .c__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - ␊ - .c__bleed-y, .c__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - ␊ - .c__bleed-y, .c__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }` - -## modern-frame [libsass] - -> Snapshot 1 - - `.bleed, [class^="bleed-"], [class*=" bleed-"] {␊ - width: unset !important;␊ - }␊ - ␊ - .frame, .frame-x, .frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - ␊ - .frame, .frame-x, .frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - ␊ - .frame-y, .frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - ␊ - .frame-y, .frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - ␊ - .bleed, .bleed-x, .bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - ␊ - .bleed, .bleed-x, .bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - ␊ - .bleed-y, .bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - ␊ - .bleed-y, .bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__bleed, [class^="a__bleed-"], [class*=" a__bleed-"] {␊ - width: unset !important;␊ - }␊ - .a__frame, .a__frame-x, .a__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - .a__frame, .a__frame-x, .a__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - .a__frame-y, .a__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - .a__frame-y, .a__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - .a__bleed, .a__bleed-x, .a__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - .a__bleed, .a__bleed-x, .a__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - .a__bleed-y, .a__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - .a__bleed-y, .a__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .b__bleed, [class^="b__bleed-"], [class*=" b__bleed-"] {␊ - width: unset !important;␊ - }␊ - .b__frame, .b__frame-x, .b__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - .b__frame, .b__frame-x, .b__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - .b__frame-y, .b__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - .b__frame-y, .b__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - .b__bleed, .b__bleed-x, .b__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - .b__bleed, .b__bleed-x, .b__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - .b__bleed-y, .b__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - .b__bleed-y, .b__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - .c__bleed, [class^="c__bleed-"], [class*=" c__bleed-"] {␊ - width: unset !important;␊ - }␊ - .c__frame, .c__frame-x, .c__frame-right {␊ - padding-right: var(--outer-right);␊ - }␊ - .c__frame, .c__frame-x, .c__frame-left {␊ - padding-left: var(--outer-left);␊ - }␊ - .c__frame-y, .c__frame-top {␊ - padding-top: var(--outer-top);␊ - }␊ - .c__frame-y, .c__frame-bottom {␊ - padding-bottom: var(--outer-bottom);␊ - }␊ - .c__bleed, .c__bleed-x, .c__bleed-right {␊ - margin-right: calc(var(--outer-right) * -1);␊ - }␊ - .c__bleed, .c__bleed-x, .c__bleed-left {␊ - margin-left: calc(var(--outer-left) * -1);␊ - }␊ - .c__bleed-y, .c__bleed-top {␊ - margin-top: calc(var(--outer-top) * -1);␊ - }␊ - .c__bleed-y, .c__bleed-bottom {␊ - margin-bottom: calc(var(--outer-bottom) * -1);␊ - }␊ - }␊ - ` - -## modern-helper [dartsass] - -> Snapshot 1 - - `:root {␊ - --font-size: 16px;␊ - --line-height: 1.25;␊ - --inner-x: 1rem;␊ - --inner-y: 1.5rem;␊ - --outer-top: 2rem;␊ - --outer-right: 2rem;␊ - --outer-bottom: 2rem;␊ - --outer-left: 2rem;␊ - --grid-cols: 12;␊ - --outer-width: 100%;␊ - --inner-y-s: calc(var(--inner-y) * 0.5);␊ - --inner-y-m: 3.5rem;␊ - --inner-y-l: calc(var(--inner-y) * 2);␊ - --inner-x-s: calc(var(--inner-x) * 0.5);␊ - --inner-x-m: calc(var(--inner-x) * 1);␊ - --inner-x-l: calc(var(--inner-x) * 2);␊ - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left)));␊ - }␊ - ␊ - html {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - :root {␊ - --breakpoint: 30em;␊ - --outer-width: 30rem;␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - :root {␊ - --breakpoint: 40em;␊ - --inner-y-l: 4px;␊ - --outer-width: 40rem;␊ - }␊ - }␊ - @media screen and (min-width: 60em) {␊ - :root {␊ - --font-size: 18px;␊ - --breakpoint: 60em;␊ - --outer-right: 80px;␊ - --outer-width: 53.3333333333rem;␊ - }␊ - }␊ - .strong, .bold {␊ - font-weight: bold;␊ - }␊ - ␊ - .em, .italic {␊ - font-style: italic;␊ - }␊ - ␊ - .clearfix::after {␊ - content: "";␊ - display: table;␊ - clear: both;␊ - }␊ - @supports (display: flow-root) {␊ - .clearfix {␊ - display: flow-root;␊ - }␊ - .clearfix::after {␊ - content: none;␊ - }␊ - }␊ - ␊ - .nobr {␊ - white-space: nowrap;␊ - text-overflow: ellipsis;␊ - }␊ - ␊ - .is-scrolling,␊ - .is-scrolling * {␊ - pointer-events: none !important;␊ - }␊ - ␊ - .hold, [class^=hold-], [class*=" hold-"] {␊ - position: relative;␊ - }␊ - ␊ - .stop, .trap, .trim {␊ - padding-top: 0.1px;␊ - padding-bottom: 0.1px;␊ - }␊ - ␊ - .clip, [class^=clip-], [class*=" clip-"] {␊ - overflow: hidden !important;␊ - position: relative;␊ - z-index: 0;␊ - }␊ - ␊ - .clip-x {␊ - overflow-x: hidden;␊ - overflow-y: visible;␊ - }␊ - ␊ - .clip-y {␊ - overflow-y: hidden;␊ - overflow-x: visible;␊ - }␊ - ␊ - .clip-circle {␊ - border-radius: 50%;␊ - }␊ - ␊ - .fix, [class^=fix-], [class*=" fix-"] {␊ - position: fixed;␊ - }␊ - ␊ - .abs, [class^=abs-], [class*=" abs-"] {␊ - position: absolute;␊ - }␊ - ␊ - .aspect, [class^=aspect-], [class*=" aspect-"] {␊ - display: flex;␊ - flex-direction: row;␊ - align-items: center;␊ - justify-content: center;␊ - }␊ - .aspect > *, [class^=aspect-] > *, [class*=" aspect-"] > * {␊ - flex: 0 0 auto;␊ - width: 100%;␊ - }␊ - .aspect::before, [class^=aspect-]::before, [class*=" aspect-"]::before {␊ - content: "";␊ - display: block;␊ - width: 0.01px;␊ - height: 0;␊ - padding-bottom: calc(1 / var(--aspect, 1) * 100%);␊ - }␊ - ␊ - .show-on-focus {␊ - position: absolute;␊ - width: 1px;␊ - height: 1px;␊ - margin: 0;␊ - overflow: hidden;␊ - clip: rect(1px, 1px, 1px, 1px);␊ - }␊ - .show-on-focus:focus {␊ - z-index: 20;␊ - width: auto;␊ - height: auto;␊ - clip: auto;␊ - }␊ - ␊ - .vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .vhide a, body:hover .vhide input, body:hover .vhide button {␊ - display: none !important;␊ - }␊ - ␊ - .hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - ␊ - .show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - ␊ - .d-none {␊ - display: none !important;␊ - }␊ - ␊ - .d-flex {␊ - display: flex !important;␊ - }␊ - ␊ - .d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - ␊ - .d-grid {␊ - display: grid !important;␊ - }␊ - ␊ - .d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - ␊ - .d-block {␊ - display: block !important;␊ - }␊ - ␊ - .d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .static {␊ - position: static;␊ - }␊ - ␊ - .rel {␊ - position: relative;␊ - }␊ - ␊ - .fix {␊ - position: fixed;␊ - }␊ - ␊ - .fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs {␊ - position: absolute;␊ - }␊ - ␊ - .abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - ␊ - .abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - ␊ - .a-left {␊ - text-align: left;␊ - }␊ - ␊ - .a-center {␊ - text-align: center;␊ - }␊ - ␊ - .a-right {␊ - text-align: right;␊ - }␊ - ␊ - .a-top {␊ - vertical-align: top;␊ - }␊ - ␊ - .a-middle {␊ - vertical-align: middle;␊ - }␊ - ␊ - .a-baseline {␊ - vertical-align: baseline;␊ - }␊ - ␊ - .a-bottom {␊ - vertical-align: bottom;␊ - }␊ - ␊ - .ai-stretch {␊ - align-items: stretch;␊ - }␊ - ␊ - .ai-center {␊ - align-items: center;␊ - }␊ - ␊ - .ai-baseline {␊ - align-items: baseline;␊ - }␊ - ␊ - .ai-start {␊ - align-items: flex-start;␊ - }␊ - ␊ - .ai-end {␊ - align-items: flex-end;␊ - }␊ - ␊ - .as-stretch {␊ - align-self: stretch;␊ - }␊ - ␊ - .as-center {␊ - align-self: center;␊ - }␊ - ␊ - .as-baseline {␊ - align-self: baseline;␊ - }␊ - ␊ - .as-start {␊ - align-self: flex-start;␊ - }␊ - ␊ - .as-end {␊ - align-self: flex-end;␊ - }␊ - ␊ - .ac-stretch {␊ - align-content: stretch;␊ - }␊ - ␊ - .ac-center {␊ - align-content: center;␊ - }␊ - ␊ - .ac-baseline {␊ - align-content: baseline;␊ - }␊ - ␊ - .ac-start {␊ - align-content: flex-start;␊ - }␊ - ␊ - .ac-end {␊ - align-content: flex-end;␊ - }␊ - ␊ - .ac-between {␊ - align-content: space-between;␊ - }␊ - ␊ - .ac-around {␊ - align-content: space-around;␊ - }␊ - ␊ - .jc-stretch {␊ - justify-content: stretch;␊ - }␊ - ␊ - .jc-center {␊ - justify-content: center;␊ - }␊ - ␊ - .jc-start {␊ - justify-content: flex-start;␊ - }␊ - ␊ - .jc-end {␊ - justify-content: flex-end;␊ - }␊ - ␊ - .jc-between {␊ - justify-content: space-between;␊ - }␊ - ␊ - .jc-around {␊ - justify-content: space-around;␊ - }␊ - ␊ - .jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - ␊ - .flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - ␊ - .flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - ␊ - .flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - ␊ - .flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .fit-none {␊ - object-fit: none;␊ - }␊ - ␊ - .fit-fill {␊ - object-fit: fill;␊ - }␊ - ␊ - .fit-cover {␊ - object-fit: cover;␊ - }␊ - ␊ - .fit-contain {␊ - object-fit: contain;␊ - }␊ - ␊ - .fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .a__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .a__vhide a, body:hover .a__vhide input, body:hover .a__vhide button {␊ - display: none !important;␊ - }␊ - ␊ - .a__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - ␊ - .a__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - ␊ - .a__d-none {␊ - display: none !important;␊ - }␊ - ␊ - .a__d-flex {␊ - display: flex !important;␊ - }␊ - ␊ - .a__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - ␊ - .a__d-grid {␊ - display: grid !important;␊ - }␊ - ␊ - .a__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - ␊ - .a__d-block {␊ - display: block !important;␊ - }␊ - ␊ - .a__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .a__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .a__static {␊ - position: static;␊ - }␊ - ␊ - .a__rel {␊ - position: relative;␊ - }␊ - ␊ - .a__fix {␊ - position: fixed;␊ - }␊ - ␊ - .a__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .a__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .a__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__abs {␊ - position: absolute;␊ - }␊ - ␊ - .a__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .a__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .a__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .a__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - ␊ - .a__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - ␊ - .a__a-left {␊ - text-align: left;␊ - }␊ - ␊ - .a__a-center {␊ - text-align: center;␊ - }␊ - ␊ - .a__a-right {␊ - text-align: right;␊ - }␊ - ␊ - .a__a-top {␊ - vertical-align: top;␊ - }␊ - ␊ - .a__a-middle {␊ - vertical-align: middle;␊ - }␊ - ␊ - .a__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - ␊ - .a__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - ␊ - .a__ai-stretch {␊ - align-items: stretch;␊ - }␊ - ␊ - .a__ai-center {␊ - align-items: center;␊ - }␊ - ␊ - .a__ai-baseline {␊ - align-items: baseline;␊ - }␊ - ␊ - .a__ai-start {␊ - align-items: flex-start;␊ - }␊ - ␊ - .a__ai-end {␊ - align-items: flex-end;␊ - }␊ - ␊ - .a__as-stretch {␊ - align-self: stretch;␊ - }␊ - ␊ - .a__as-center {␊ - align-self: center;␊ - }␊ - ␊ - .a__as-baseline {␊ - align-self: baseline;␊ - }␊ - ␊ - .a__as-start {␊ - align-self: flex-start;␊ - }␊ - ␊ - .a__as-end {␊ - align-self: flex-end;␊ - }␊ - ␊ - .a__ac-stretch {␊ - align-content: stretch;␊ - }␊ - ␊ - .a__ac-center {␊ - align-content: center;␊ - }␊ - ␊ - .a__ac-baseline {␊ - align-content: baseline;␊ - }␊ - ␊ - .a__ac-start {␊ - align-content: flex-start;␊ - }␊ - ␊ - .a__ac-end {␊ - align-content: flex-end;␊ - }␊ - ␊ - .a__ac-between {␊ - align-content: space-between;␊ - }␊ - ␊ - .a__ac-around {␊ - align-content: space-around;␊ - }␊ - ␊ - .a__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - ␊ - .a__jc-center {␊ - justify-content: center;␊ - }␊ - ␊ - .a__jc-start {␊ - justify-content: flex-start;␊ - }␊ - ␊ - .a__jc-end {␊ - justify-content: flex-end;␊ - }␊ - ␊ - .a__jc-between {␊ - justify-content: space-between;␊ - }␊ - ␊ - .a__jc-around {␊ - justify-content: space-around;␊ - }␊ - ␊ - .a__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - ␊ - .a__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - ␊ - .a__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - ␊ - .a__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - ␊ - .a__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .a__fit-none {␊ - object-fit: none;␊ - }␊ - ␊ - .a__fit-fill {␊ - object-fit: fill;␊ - }␊ - ␊ - .a__fit-cover {␊ - object-fit: cover;␊ - }␊ - ␊ - .a__fit-contain {␊ - object-fit: contain;␊ - }␊ - ␊ - .a__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - .b__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .b__vhide a, body:hover .b__vhide input, body:hover .b__vhide button {␊ - display: none !important;␊ - }␊ - ␊ - .b__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - ␊ - .b__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - ␊ - .b__d-none {␊ - display: none !important;␊ - }␊ - ␊ - .b__d-flex {␊ - display: flex !important;␊ - }␊ - ␊ - .b__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - ␊ - .b__d-grid {␊ - display: grid !important;␊ - }␊ - ␊ - .b__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - ␊ - .b__d-block {␊ - display: block !important;␊ - }␊ - ␊ - .b__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .b__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .b__static {␊ - position: static;␊ - }␊ - ␊ - .b__rel {␊ - position: relative;␊ - }␊ - ␊ - .b__fix {␊ - position: fixed;␊ - }␊ - ␊ - .b__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .b__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .b__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__abs {␊ - position: absolute;␊ - }␊ - ␊ - .b__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .b__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .b__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .b__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - ␊ - .b__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - ␊ - .b__a-left {␊ - text-align: left;␊ - }␊ - ␊ - .b__a-center {␊ - text-align: center;␊ - }␊ - ␊ - .b__a-right {␊ - text-align: right;␊ - }␊ - ␊ - .b__a-top {␊ - vertical-align: top;␊ - }␊ - ␊ - .b__a-middle {␊ - vertical-align: middle;␊ - }␊ - ␊ - .b__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - ␊ - .b__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - ␊ - .b__ai-stretch {␊ - align-items: stretch;␊ - }␊ - ␊ - .b__ai-center {␊ - align-items: center;␊ - }␊ - ␊ - .b__ai-baseline {␊ - align-items: baseline;␊ - }␊ - ␊ - .b__ai-start {␊ - align-items: flex-start;␊ - }␊ - ␊ - .b__ai-end {␊ - align-items: flex-end;␊ - }␊ - ␊ - .b__as-stretch {␊ - align-self: stretch;␊ - }␊ - ␊ - .b__as-center {␊ - align-self: center;␊ - }␊ - ␊ - .b__as-baseline {␊ - align-self: baseline;␊ - }␊ - ␊ - .b__as-start {␊ - align-self: flex-start;␊ - }␊ - ␊ - .b__as-end {␊ - align-self: flex-end;␊ - }␊ - ␊ - .b__ac-stretch {␊ - align-content: stretch;␊ - }␊ - ␊ - .b__ac-center {␊ - align-content: center;␊ - }␊ - ␊ - .b__ac-baseline {␊ - align-content: baseline;␊ - }␊ - ␊ - .b__ac-start {␊ - align-content: flex-start;␊ - }␊ - ␊ - .b__ac-end {␊ - align-content: flex-end;␊ - }␊ - ␊ - .b__ac-between {␊ - align-content: space-between;␊ - }␊ - ␊ - .b__ac-around {␊ - align-content: space-around;␊ - }␊ - ␊ - .b__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - ␊ - .b__jc-center {␊ - justify-content: center;␊ - }␊ - ␊ - .b__jc-start {␊ - justify-content: flex-start;␊ - }␊ - ␊ - .b__jc-end {␊ - justify-content: flex-end;␊ - }␊ - ␊ - .b__jc-between {␊ - justify-content: space-between;␊ - }␊ - ␊ - .b__jc-around {␊ - justify-content: space-around;␊ - }␊ - ␊ - .b__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - ␊ - .b__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - ␊ - .b__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - ␊ - .b__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - ␊ - .b__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .b__fit-none {␊ - object-fit: none;␊ - }␊ - ␊ - .b__fit-fill {␊ - object-fit: fill;␊ - }␊ - ␊ - .b__fit-cover {␊ - object-fit: cover;␊ - }␊ - ␊ - .b__fit-contain {␊ - object-fit: contain;␊ - }␊ - ␊ - .b__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }␊ - @media screen and (min-width: 60em) {␊ - .c__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .c__vhide a, body:hover .c__vhide input, body:hover .c__vhide button {␊ - display: none !important;␊ - }␊ - ␊ - .c__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - ␊ - .c__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - ␊ - .c__d-none {␊ - display: none !important;␊ - }␊ - ␊ - .c__d-flex {␊ - display: flex !important;␊ - }␊ - ␊ - .c__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - ␊ - .c__d-grid {␊ - display: grid !important;␊ - }␊ - ␊ - .c__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - ␊ - .c__d-block {␊ - display: block !important;␊ - }␊ - ␊ - .c__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .c__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .c__static {␊ - position: static;␊ - }␊ - ␊ - .c__rel {␊ - position: relative;␊ - }␊ - ␊ - .c__fix {␊ - position: fixed;␊ - }␊ - ␊ - .c__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .c__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .c__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__abs {␊ - position: absolute;␊ - }␊ - ␊ - .c__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .c__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .c__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .c__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - ␊ - .c__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - ␊ - .c__a-left {␊ - text-align: left;␊ - }␊ - ␊ - .c__a-center {␊ - text-align: center;␊ - }␊ - ␊ - .c__a-right {␊ - text-align: right;␊ - }␊ - ␊ - .c__a-top {␊ - vertical-align: top;␊ - }␊ - ␊ - .c__a-middle {␊ - vertical-align: middle;␊ - }␊ - ␊ - .c__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - ␊ - .c__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - ␊ - .c__ai-stretch {␊ - align-items: stretch;␊ - }␊ - ␊ - .c__ai-center {␊ - align-items: center;␊ - }␊ - ␊ - .c__ai-baseline {␊ - align-items: baseline;␊ - }␊ - ␊ - .c__ai-start {␊ - align-items: flex-start;␊ - }␊ - ␊ - .c__ai-end {␊ - align-items: flex-end;␊ - }␊ - ␊ - .c__as-stretch {␊ - align-self: stretch;␊ - }␊ - ␊ - .c__as-center {␊ - align-self: center;␊ - }␊ - ␊ - .c__as-baseline {␊ - align-self: baseline;␊ - }␊ - ␊ - .c__as-start {␊ - align-self: flex-start;␊ - }␊ - ␊ - .c__as-end {␊ - align-self: flex-end;␊ - }␊ - ␊ - .c__ac-stretch {␊ - align-content: stretch;␊ - }␊ - ␊ - .c__ac-center {␊ - align-content: center;␊ - }␊ - ␊ - .c__ac-baseline {␊ - align-content: baseline;␊ - }␊ - ␊ - .c__ac-start {␊ - align-content: flex-start;␊ - }␊ - ␊ - .c__ac-end {␊ - align-content: flex-end;␊ - }␊ - ␊ - .c__ac-between {␊ - align-content: space-between;␊ - }␊ - ␊ - .c__ac-around {␊ - align-content: space-around;␊ - }␊ - ␊ - .c__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - ␊ - .c__jc-center {␊ - justify-content: center;␊ - }␊ - ␊ - .c__jc-start {␊ - justify-content: flex-start;␊ - }␊ - ␊ - .c__jc-end {␊ - justify-content: flex-end;␊ - }␊ - ␊ - .c__jc-between {␊ - justify-content: space-between;␊ - }␊ - ␊ - .c__jc-around {␊ - justify-content: space-around;␊ - }␊ - ␊ - .c__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - ␊ - .c__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - ␊ - .c__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - ␊ - .c__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - ␊ - .c__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .c__fit-none {␊ - object-fit: none;␊ - }␊ - ␊ - .c__fit-fill {␊ - object-fit: fill;␊ - }␊ - ␊ - .c__fit-cover {␊ - object-fit: cover;␊ - }␊ - ␊ - .c__fit-contain {␊ - object-fit: contain;␊ - }␊ - ␊ - .c__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }` - -## modern-helper [libsass] - -> Snapshot 1 - - `:root {␊ - --font-size: 16px;␊ - --line-height: 1.25;␊ - --inner-x: 1rem;␊ - --inner-y: 1.5rem;␊ - --outer-top: 2rem;␊ - --outer-right: 2rem;␊ - --outer-bottom: 2rem;␊ - --outer-left: 2rem;␊ - --grid-cols: 12;␊ - --outer-width: 100%;␊ - --inner-y-s: calc(var(--inner-y) * 0.5);␊ - --inner-y-m: 3.5rem;␊ - --inner-y-l: calc(var(--inner-y) * 2);␊ - --inner-x-s: calc(var(--inner-x) * 0.5);␊ - --inner-x-m: calc(var(--inner-x) * 1);␊ - --inner-x-l: calc(var(--inner-x) * 2);␊ - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left)));␊ - }␊ - ␊ - html {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - :root {␊ - --breakpoint: 30em;␊ - --outer-width: 30rem;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - :root {␊ - --breakpoint: 40em;␊ - --inner-y-l: 4px;␊ - --outer-width: 40rem;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 60em) {␊ - :root {␊ - --font-size: 18px;␊ - --breakpoint: 60em;␊ - --outer-right: 80px;␊ - --outer-width: 53.3333333333rem;␊ - }␊ - }␊ - ␊ - .strong, .bold {␊ - font-weight: bold;␊ - }␊ - ␊ - .em, .italic {␊ - font-style: italic;␊ - }␊ - ␊ - .clearfix::after {␊ - content: "";␊ - display: table;␊ - clear: both;␊ - }␊ - ␊ - @supports (display: flow-root) {␊ - .clearfix {␊ - display: flow-root;␊ - }␊ - .clearfix::after {␊ - content: none;␊ - }␊ - }␊ - ␊ - .nobr {␊ - white-space: nowrap;␊ - text-overflow: ellipsis;␊ - }␊ - ␊ - .is-scrolling,␊ - .is-scrolling * {␊ - pointer-events: none !important;␊ - }␊ - ␊ - .hold, [class^="hold-"], [class*=" hold-"] {␊ - position: relative;␊ - }␊ - ␊ - .stop, .trap, .trim {␊ - padding-top: 0.1px;␊ - padding-bottom: 0.1px;␊ - }␊ - ␊ - .clip, [class^="clip-"], [class*=" clip-"] {␊ - overflow: hidden !important;␊ - position: relative;␊ - z-index: 0;␊ - }␊ - ␊ - .clip-x {␊ - overflow-x: hidden;␊ - overflow-y: visible;␊ - }␊ - ␊ - .clip-y {␊ - overflow-y: hidden;␊ - overflow-x: visible;␊ - }␊ - ␊ - .clip-circle {␊ - border-radius: 50%;␊ - }␊ - ␊ - .fix, [class^="fix-"], [class*=" fix-"] {␊ - position: fixed;␊ - }␊ - ␊ - .abs, [class^="abs-"], [class*=" abs-"] {␊ - position: absolute;␊ - }␊ - ␊ - .aspect, [class^="aspect-"], [class*=" aspect-"] {␊ - display: flex;␊ - flex-direction: row;␊ - align-items: center;␊ - justify-content: center;␊ - }␊ - ␊ - .aspect > *, [class^="aspect-"] > *, [class*=" aspect-"] > * {␊ - flex: 0 0 auto;␊ - width: 100%;␊ - }␊ - ␊ - .aspect::before, [class^="aspect-"]::before, [class*=" aspect-"]::before {␊ - content: '';␊ - display: block;␊ - width: 0.01px;␊ - height: 0;␊ - padding-bottom: calc(1 / var(--aspect, 1) * 100%);␊ - }␊ - ␊ - .show-on-focus {␊ - position: absolute;␊ - width: 1px;␊ - height: 1px;␊ - margin: 0;␊ - overflow: hidden;␊ - clip: rect(1px, 1px, 1px, 1px);␊ - }␊ - ␊ - .show-on-focus:focus {␊ - z-index: 20;␊ - width: auto;␊ - height: auto;␊ - clip: auto;␊ - }␊ - ␊ - .vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - ␊ - body:hover .vhide a,␊ - body:hover .vhide input,␊ - body:hover .vhide button {␊ - display: none !important;␊ - }␊ - ␊ - .hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - ␊ - .show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - ␊ - .d-none {␊ - display: none !important;␊ - }␊ - ␊ - .d-flex {␊ - display: flex !important;␊ - }␊ - ␊ - .d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - ␊ - .d-grid {␊ - display: grid !important;␊ - }␊ - ␊ - .d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - ␊ - .d-block {␊ - display: block !important;␊ - }␊ - ␊ - .d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - ␊ - .static {␊ - position: static;␊ - }␊ - ␊ - .rel {␊ - position: relative;␊ - }␊ - ␊ - .fix {␊ - position: fixed;␊ - }␊ - ␊ - .fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs {␊ - position: absolute;␊ - }␊ - ␊ - .abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - ␊ - .abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - ␊ - .abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - ␊ - .abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - ␊ - .abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - ␊ - .a-left {␊ - text-align: left;␊ - }␊ - ␊ - .a-center {␊ - text-align: center;␊ - }␊ - ␊ - .a-right {␊ - text-align: right;␊ - }␊ - ␊ - .a-top {␊ - vertical-align: top;␊ - }␊ - ␊ - .a-middle {␊ - vertical-align: middle;␊ - }␊ - ␊ - .a-baseline {␊ - vertical-align: baseline;␊ - }␊ - ␊ - .a-bottom {␊ - vertical-align: bottom;␊ - }␊ - ␊ - .ai-stretch {␊ - align-items: stretch;␊ - }␊ - ␊ - .ai-center {␊ - align-items: center;␊ - }␊ - ␊ - .ai-baseline {␊ - align-items: baseline;␊ - }␊ - ␊ - .ai-start {␊ - align-items: flex-start;␊ - }␊ - ␊ - .ai-end {␊ - align-items: flex-end;␊ - }␊ - ␊ - .as-stretch {␊ - align-self: stretch;␊ - }␊ - ␊ - .as-center {␊ - align-self: center;␊ - }␊ - ␊ - .as-baseline {␊ - align-self: baseline;␊ - }␊ - ␊ - .as-start {␊ - align-self: flex-start;␊ - }␊ - ␊ - .as-end {␊ - align-self: flex-end;␊ - }␊ - ␊ - .ac-stretch {␊ - align-content: stretch;␊ - }␊ - ␊ - .ac-center {␊ - align-content: center;␊ - }␊ - ␊ - .ac-baseline {␊ - align-content: baseline;␊ - }␊ - ␊ - .ac-start {␊ - align-content: flex-start;␊ - }␊ - ␊ - .ac-end {␊ - align-content: flex-end;␊ - }␊ - ␊ - .ac-between {␊ - align-content: space-between;␊ - }␊ - ␊ - .ac-around {␊ - align-content: space-around;␊ - }␊ - ␊ - .jc-stretch {␊ - justify-content: stretch;␊ - }␊ - ␊ - .jc-center {␊ - justify-content: center;␊ - }␊ - ␊ - .jc-start {␊ - justify-content: flex-start;␊ - }␊ - ␊ - .jc-end {␊ - justify-content: flex-end;␊ - }␊ - ␊ - .jc-between {␊ - justify-content: space-between;␊ - }␊ - ␊ - .jc-around {␊ - justify-content: space-around;␊ - }␊ - ␊ - .jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - ␊ - .flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - ␊ - .flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - ␊ - .flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - ␊ - .flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .fit-none {␊ - object-fit: none;␊ - }␊ - ␊ - .fit-fill {␊ - object-fit: fill;␊ - }␊ - ␊ - .fit-cover {␊ - object-fit: cover;␊ - }␊ - ␊ - .fit-contain {␊ - object-fit: contain;␊ - }␊ - ␊ - .fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .a__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .a__vhide a,␊ - body:hover .a__vhide input,␊ - body:hover .a__vhide button {␊ - display: none !important;␊ - }␊ - .a__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - .a__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - .a__d-none {␊ - display: none !important;␊ - }␊ - .a__d-flex {␊ - display: flex !important;␊ - }␊ - .a__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - .a__d-grid {␊ - display: grid !important;␊ - }␊ - .a__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - .a__d-block {␊ - display: block !important;␊ - }␊ - .a__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - .a__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - .a__static {␊ - position: static;␊ - }␊ - .a__rel {␊ - position: relative;␊ - }␊ - .a__fix {␊ - position: fixed;␊ - }␊ - .a__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .a__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .a__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .a__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .a__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .a__abs {␊ - position: absolute;␊ - }␊ - .a__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .a__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .a__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .a__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .a__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .a__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - .a__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - .a__a-left {␊ - text-align: left;␊ - }␊ - .a__a-center {␊ - text-align: center;␊ - }␊ - .a__a-right {␊ - text-align: right;␊ - }␊ - .a__a-top {␊ - vertical-align: top;␊ - }␊ - .a__a-middle {␊ - vertical-align: middle;␊ - }␊ - .a__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - .a__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - .a__ai-stretch {␊ - align-items: stretch;␊ - }␊ - .a__ai-center {␊ - align-items: center;␊ - }␊ - .a__ai-baseline {␊ - align-items: baseline;␊ - }␊ - .a__ai-start {␊ - align-items: flex-start;␊ - }␊ - .a__ai-end {␊ - align-items: flex-end;␊ - }␊ - .a__as-stretch {␊ - align-self: stretch;␊ - }␊ - .a__as-center {␊ - align-self: center;␊ - }␊ - .a__as-baseline {␊ - align-self: baseline;␊ - }␊ - .a__as-start {␊ - align-self: flex-start;␊ - }␊ - .a__as-end {␊ - align-self: flex-end;␊ - }␊ - .a__ac-stretch {␊ - align-content: stretch;␊ - }␊ - .a__ac-center {␊ - align-content: center;␊ - }␊ - .a__ac-baseline {␊ - align-content: baseline;␊ - }␊ - .a__ac-start {␊ - align-content: flex-start;␊ - }␊ - .a__ac-end {␊ - align-content: flex-end;␊ - }␊ - .a__ac-between {␊ - align-content: space-between;␊ - }␊ - .a__ac-around {␊ - align-content: space-around;␊ - }␊ - .a__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - .a__jc-center {␊ - justify-content: center;␊ - }␊ - .a__jc-start {␊ - justify-content: flex-start;␊ - }␊ - .a__jc-end {␊ - justify-content: flex-end;␊ - }␊ - .a__jc-between {␊ - justify-content: space-between;␊ - }␊ - .a__jc-around {␊ - justify-content: space-around;␊ - }␊ - .a__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - .a__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - .a__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - .a__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - .a__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - .a__fit-none {␊ - object-fit: none;␊ - }␊ - .a__fit-fill {␊ - object-fit: fill;␊ - }␊ - .a__fit-cover {␊ - object-fit: cover;␊ - }␊ - .a__fit-contain {␊ - object-fit: contain;␊ - }␊ - .a__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - .b__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .b__vhide a,␊ - body:hover .b__vhide input,␊ - body:hover .b__vhide button {␊ - display: none !important;␊ - }␊ - .b__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - .b__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - .b__d-none {␊ - display: none !important;␊ - }␊ - .b__d-flex {␊ - display: flex !important;␊ - }␊ - .b__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - .b__d-grid {␊ - display: grid !important;␊ - }␊ - .b__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - .b__d-block {␊ - display: block !important;␊ - }␊ - .b__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - .b__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - .b__static {␊ - position: static;␊ - }␊ - .b__rel {␊ - position: relative;␊ - }␊ - .b__fix {␊ - position: fixed;␊ - }␊ - .b__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .b__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .b__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .b__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .b__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .b__abs {␊ - position: absolute;␊ - }␊ - .b__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .b__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .b__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .b__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .b__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .b__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - .b__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - .b__a-left {␊ - text-align: left;␊ - }␊ - .b__a-center {␊ - text-align: center;␊ - }␊ - .b__a-right {␊ - text-align: right;␊ - }␊ - .b__a-top {␊ - vertical-align: top;␊ - }␊ - .b__a-middle {␊ - vertical-align: middle;␊ - }␊ - .b__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - .b__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - .b__ai-stretch {␊ - align-items: stretch;␊ - }␊ - .b__ai-center {␊ - align-items: center;␊ - }␊ - .b__ai-baseline {␊ - align-items: baseline;␊ - }␊ - .b__ai-start {␊ - align-items: flex-start;␊ - }␊ - .b__ai-end {␊ - align-items: flex-end;␊ - }␊ - .b__as-stretch {␊ - align-self: stretch;␊ - }␊ - .b__as-center {␊ - align-self: center;␊ - }␊ - .b__as-baseline {␊ - align-self: baseline;␊ - }␊ - .b__as-start {␊ - align-self: flex-start;␊ - }␊ - .b__as-end {␊ - align-self: flex-end;␊ - }␊ - .b__ac-stretch {␊ - align-content: stretch;␊ - }␊ - .b__ac-center {␊ - align-content: center;␊ - }␊ - .b__ac-baseline {␊ - align-content: baseline;␊ - }␊ - .b__ac-start {␊ - align-content: flex-start;␊ - }␊ - .b__ac-end {␊ - align-content: flex-end;␊ - }␊ - .b__ac-between {␊ - align-content: space-between;␊ - }␊ - .b__ac-around {␊ - align-content: space-around;␊ - }␊ - .b__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - .b__jc-center {␊ - justify-content: center;␊ - }␊ - .b__jc-start {␊ - justify-content: flex-start;␊ - }␊ - .b__jc-end {␊ - justify-content: flex-end;␊ - }␊ - .b__jc-between {␊ - justify-content: space-between;␊ - }␊ - .b__jc-around {␊ - justify-content: space-around;␊ - }␊ - .b__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - .b__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - .b__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - .b__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - .b__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - .b__fit-none {␊ - object-fit: none;␊ - }␊ - .b__fit-fill {␊ - object-fit: fill;␊ - }␊ - .b__fit-cover {␊ - object-fit: cover;␊ - }␊ - .b__fit-contain {␊ - object-fit: contain;␊ - }␊ - .b__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 60em) {␊ - .c__vhide {␊ - position: absolute !important;␊ - clip: rect(0 0 0 0);␊ - clip: rect(0, 0, 0, 0);␊ - flex: 0 0 0%;␊ - padding: 0 !important;␊ - border: 0 !important;␊ - height: 1px !important;␊ - width: 1px !important;␊ - overflow: hidden;␊ - }␊ - body:hover .c__vhide a,␊ - body:hover .c__vhide input,␊ - body:hover .c__vhide button {␊ - display: none !important;␊ - }␊ - .c__hide {␊ - pointer-events: none;␊ - visibility: hidden;␊ - opacity: 0;␊ - }␊ - .c__show {␊ - pointer-events: initial;␊ - visibility: visible;␊ - opacity: 1;␊ - }␊ - .c__d-none {␊ - display: none !important;␊ - }␊ - .c__d-flex {␊ - display: flex !important;␊ - }␊ - .c__d-flex-y {␊ - display: flex !important;␊ - flex-direction: column;␊ - }␊ - .c__d-grid {␊ - display: grid !important;␊ - }␊ - .c__d-grid-y {␊ - display: grid !important;␊ - grid-auto-flow: column;␊ - }␊ - .c__d-block {␊ - display: block !important;␊ - }␊ - .c__d-iblock {␊ - display: inline-block !important;␊ - vertical-align: baseline;␊ - }␊ - .c__d-inline {␊ - display: inline !important;␊ - vertical-align: baseline;␊ - }␊ - .c__static {␊ - position: static;␊ - }␊ - .c__rel {␊ - position: relative;␊ - }␊ - .c__fix {␊ - position: fixed;␊ - }␊ - .c__fix-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .c__fix-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .c__fix-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .c__fix-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .c__fix-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .c__abs {␊ - position: absolute;␊ - }␊ - .c__abs-tl {␊ - top: 0;␊ - left: 0;␊ - }␊ - .c__abs-tr {␊ - top: 0;␊ - right: 0;␊ - }␊ - .c__abs-bl {␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .c__abs-br {␊ - bottom: 0;␊ - right: 0;␊ - }␊ - .c__abs-trbl {␊ - top: 0;␊ - right: 0;␊ - bottom: 0;␊ - left: 0;␊ - }␊ - .c__abs-cover {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: cover;␊ - }␊ - .c__abs-contain {␊ - top: 0;␊ - left: 0;␊ - width: 100%;␊ - height: 100%;␊ - object-fit: contain;␊ - }␊ - .c__a-left {␊ - text-align: left;␊ - }␊ - .c__a-center {␊ - text-align: center;␊ - }␊ - .c__a-right {␊ - text-align: right;␊ - }␊ - .c__a-top {␊ - vertical-align: top;␊ - }␊ - .c__a-middle {␊ - vertical-align: middle;␊ - }␊ - .c__a-baseline {␊ - vertical-align: baseline;␊ - }␊ - .c__a-bottom {␊ - vertical-align: bottom;␊ - }␊ - .c__ai-stretch {␊ - align-items: stretch;␊ - }␊ - .c__ai-center {␊ - align-items: center;␊ - }␊ - .c__ai-baseline {␊ - align-items: baseline;␊ - }␊ - .c__ai-start {␊ - align-items: flex-start;␊ - }␊ - .c__ai-end {␊ - align-items: flex-end;␊ - }␊ - .c__as-stretch {␊ - align-self: stretch;␊ - }␊ - .c__as-center {␊ - align-self: center;␊ - }␊ - .c__as-baseline {␊ - align-self: baseline;␊ - }␊ - .c__as-start {␊ - align-self: flex-start;␊ - }␊ - .c__as-end {␊ - align-self: flex-end;␊ - }␊ - .c__ac-stretch {␊ - align-content: stretch;␊ - }␊ - .c__ac-center {␊ - align-content: center;␊ - }␊ - .c__ac-baseline {␊ - align-content: baseline;␊ - }␊ - .c__ac-start {␊ - align-content: flex-start;␊ - }␊ - .c__ac-end {␊ - align-content: flex-end;␊ - }␊ - .c__ac-between {␊ - align-content: space-between;␊ - }␊ - .c__ac-around {␊ - align-content: space-around;␊ - }␊ - .c__jc-stretch {␊ - justify-content: stretch;␊ - }␊ - .c__jc-center {␊ - justify-content: center;␊ - }␊ - .c__jc-start {␊ - justify-content: flex-start;␊ - }␊ - .c__jc-end {␊ - justify-content: flex-end;␊ - }␊ - .c__jc-between {␊ - justify-content: space-between;␊ - }␊ - .c__jc-around {␊ - justify-content: space-around;␊ - }␊ - .c__jc-evenly {␊ - justify-content: space-evenly;␊ - }␊ - .c__flex-1-0 {␊ - flex: 1 0 auto;␊ - }␊ - .c__flex-0-1 {␊ - flex: 0 1 auto;␊ - }␊ - .c__flex-1-1 {␊ - flex: 1 1 auto;␊ - }␊ - .c__flex-0-0 {␊ - flex: 0 0 auto;␊ - }␊ - .c__fit-none {␊ - object-fit: none;␊ - }␊ - .c__fit-fill {␊ - object-fit: fill;␊ - }␊ - .c__fit-cover {␊ - object-fit: cover;␊ - }␊ - .c__fit-contain {␊ - object-fit: contain;␊ - }␊ - .c__fit-scale-down {␊ - object-fit: scale-down;␊ - }␊ - }␊ - ` - -## modern-root [dartsass] - -> Snapshot 1 - - `/* ( a: ( breakpoint: 30em, outer-right: calc(31.25vw + -6.25rem), outer-left: calc(31.25vw + -6.25rem) ), b: ( breakpoint: 40em, line-height: 1.25, font-defs: ( serif: ( l: 30px 1.1 ) ) ), c: ( font-size: 18px, breakpoint: 60em, outer-right: 200px, outer-left: 200px ) ) */␊ - :root {␊ - --font-size: 16px;␊ - --line-height: 1.25;␊ - --inner-x: 1rem;␊ - --inner-y: 1.5rem;␊ - --outer-top: 2rem;␊ - --outer-right: 50px;␊ - --outer-bottom: 2rem;␊ - --outer-left: 50px;␊ - --grid-cols: 12;␊ - --outer-width: 100%;␊ - --inner-y-s: calc(var(--inner-y) * 0.5);␊ - --inner-y-m: calc(var(--inner-y) * 1);␊ - --inner-y-l: calc(var(--inner-y) * 2);␊ - --inner-x-s: calc(var(--inner-x) * 0.5);␊ - --inner-x-m: calc(var(--inner-x) * 1);␊ - --inner-x-l: calc(var(--inner-x) * 2);␊ - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left)));␊ - }␊ - ␊ - html {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - :root {␊ - --breakpoint: 30em;␊ - --outer-right: calc(31.25vw + -6.25rem);␊ - --outer-left: calc(31.25vw + -6.25rem);␊ - --outer-width: 30rem;␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - :root {␊ - --breakpoint: 40em;␊ - --line-height: 1.25;␊ - --outer-width: 40rem;␊ - }␊ - }␊ - @media screen and (min-width: 60em) {␊ - :root {␊ - --font-size: 18px;␊ - --breakpoint: 60em;␊ - --outer-right: 200px;␊ - --outer-left: 200px;␊ - --outer-width: 53.3333333333rem;␊ - }␊ - }␊ - /* ( a: ( font-size: 16px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 30rem, breakpoint: 30em ), b: ( font-size: 16px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: calc(31.25vw + -6.25rem), outer-bottom: 2rem, outer-left: calc(31.25vw + -6.25rem), grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 40rem, breakpoint: 40em, font-defs: ( serif: ( l: 30px 1.1 ) ) ), c: ( font-size: 18px, line-height: 1.25, inner-x: 1rem, inner-y: 1.5rem, outer-top: 2rem, outer-right: 200px, outer-bottom: 2rem, outer-left: 200px, grid-cols: 12, font-mods: ( sans: ( m: 18px 1.3, l: 24px 1.2 ), serif: ( m: 18px 1.3, l: 24px 1.2 ) ), inner-mods: ( s: 0.5, m: 1, l: 2 ), outer-width: 53.3333333333rem, breakpoint: 60em, font-defs: ( serif: ( l: 30px 1.1 ) ) ) ) */` - -## modern-root [libsass] - -> Snapshot 1 - - `/* (␊ - a: (␊ - breakpoint: 30em,␊ - outer-right: calc(31.25vw + -6.25rem),␊ - outer-left: calc(31.25vw + -6.25rem)␊ - ),␊ - b: (␊ - breakpoint: 40em,␊ - line-height: 1.25,␊ - font-defs: (␊ - serif: (␊ - l: 30px 1.1␊ - )␊ - )␊ - ),␊ - c: (␊ - font-size: 18px,␊ - breakpoint: 60em,␊ - outer-right: 200px,␊ - outer-left: 200px␊ - )␊ - ) */␊ - :root {␊ - --font-size: 16px;␊ - --line-height: 1.25;␊ - --inner-x: 1rem;␊ - --inner-y: 1.5rem;␊ - --outer-top: 2rem;␊ - --outer-right: 50px;␊ - --outer-bottom: 2rem;␊ - --outer-left: 50px;␊ - --grid-cols: 12;␊ - --outer-width: 100%;␊ - --inner-y-s: calc(var(--inner-y) * 0.5);␊ - --inner-y-m: calc(var(--inner-y) * 1);␊ - --inner-y-l: calc(var(--inner-y) * 2);␊ - --inner-x-s: calc(var(--inner-x) * 0.5);␊ - --inner-x-m: calc(var(--inner-x) * 1);␊ - --inner-x-l: calc(var(--inner-x) * 2);␊ - --inner-width: calc(var(--outer-width) - (var(--outer-right) + var(--outer-left)));␊ - }␊ - ␊ - html {␊ - font-size: var(--font-size);␊ - line-height: var(--line-height);␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - :root {␊ - --breakpoint: 30em;␊ - --outer-right: calc(31.25vw + -6.25rem);␊ - --outer-left: calc(31.25vw + -6.25rem);␊ - --outer-width: 30rem;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - :root {␊ - --breakpoint: 40em;␊ - --line-height: 1.25;␊ - --outer-width: 40rem;␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 60em) {␊ - :root {␊ - --font-size: 18px;␊ - --breakpoint: 60em;␊ - --outer-right: 200px;␊ - --outer-left: 200px;␊ - --outer-width: 53.3333333333rem;␊ - }␊ - }␊ - ␊ - /* (␊ - a: (␊ - font-size: 16px,␊ - line-height: 1.25,␊ - inner-x: 1rem,␊ - inner-y: 1.5rem,␊ - outer-top: 2rem,␊ - outer-right: calc(31.25vw + -6.25rem),␊ - outer-bottom: 2rem,␊ - outer-left: calc(31.25vw + -6.25rem),␊ - grid-cols: 12,␊ - font-mods: (␊ - sans: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - ),␊ - serif: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - )␊ - ),␊ - inner-mods: (␊ - s: 0.5,␊ - m: 1,␊ - l: 2␊ - ),␊ - outer-width: 30rem,␊ - breakpoint: 30em␊ - ),␊ - b: (␊ - font-size: 16px,␊ - line-height: 1.25,␊ - inner-x: 1rem,␊ - inner-y: 1.5rem,␊ - outer-top: 2rem,␊ - outer-right: calc(31.25vw + -6.25rem),␊ - outer-bottom: 2rem,␊ - outer-left: calc(31.25vw + -6.25rem),␊ - grid-cols: 12,␊ - font-mods: (␊ - sans: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - ),␊ - serif: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - )␊ - ),␊ - inner-mods: (␊ - s: 0.5,␊ - m: 1,␊ - l: 2␊ - ),␊ - outer-width: 40rem,␊ - breakpoint: 40em,␊ - font-defs: (␊ - serif: (␊ - l: 30px 1.1␊ - )␊ - )␊ - ),␊ - c: (␊ - font-size: 18px,␊ - line-height: 1.25,␊ - inner-x: 1rem,␊ - inner-y: 1.5rem,␊ - outer-top: 2rem,␊ - outer-right: 200px,␊ - outer-bottom: 2rem,␊ - outer-left: 200px,␊ - grid-cols: 12,␊ - font-mods: (␊ - sans: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - ),␊ - serif: (␊ - m: 18px 1.3,␊ - l: 24px 1.2␊ - )␊ - ),␊ - inner-mods: (␊ - s: 0.5,␊ - m: 1,␊ - l: 2␊ - ),␊ - outer-width: 53.3333333333rem,␊ - breakpoint: 60em,␊ - font-defs: (␊ - serif: (␊ - l: 30px 1.1␊ - )␊ - )␊ - )␊ - ) */␊ - ` - -## modern-selector [dartsass] - -> Snapshot 1 - - `.stack .f, .stack [class^=f-], .stack [class*=" f-"], [class^=stack-] .f, [class^=stack-] [class^=f-], [class^=stack-] [class*=" f-"], [class*=" stack-"] .f, [class*=" stack-"] [class^=f-], [class*=" stack-"] [class*=" f-"] {␊ - color: blue;␊ - }␊ - ␊ - .a, .b {␊ - color: blue;␊ - }␊ - .c > .e + .a, .c > .e + .b, .d > .e + .a, .d > .e + .b {␊ - color: red;␊ - }␊ - ␊ - .e > .c + .a, .e > .c + .b, .e > .d + .a, .e > .d + .b, .f > .c + .a, .f > .c + .b, .f > .d + .a, .f > .d + .b {␊ - color: red;␊ - }` - -## modern-selector [libsass] - -> Snapshot 1 - - `.stack .f, .stack [class^="f-"], .stack [class*=" f-"], [class^="stack-"] .f, [class^="stack-"] [class^="f-"], [class^="stack-"] [class*=" f-"], [class*=" stack-"] .f, [class*=" stack-"] [class^="f-"], [class*=" stack-"] [class*=" f-"] {␊ - color: blue;␊ - }␊ - ␊ - .a, .b {␊ - color: blue;␊ - }␊ - ␊ - .c > .e + .a, .c > .e + .b, .d > .e + .a, .d > .e + .b {␊ - color: red;␊ - }␊ - ␊ - .e > .c + .a, .e > .c + .b, .e > .d + .a, .e > .d + .b, .f > .c + .a, .f > .c + .b, .f > .d + .a, .f > .d + .b {␊ - color: red;␊ - }␊ - ` - -## modern-stack [dartsass] - -> Snapshot 1 - - `.stack, [class^=stack-], [class*=" stack-"] {␊ - display: flex;␊ - flex-direction: column;␊ - align-items: stretch;␊ - }␊ - .stack > *, [class^=stack-] > *, [class*=" stack-"] > * {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .stack, [class^=stack-], [class*=" stack-"], .plain, [class^=plain-], [class*=" plain-"] {␊ - padding-top: 0.01px;␊ - padding-bottom: 0.01px;␊ - }␊ - .stack > *, [class^=stack-] > *, [class*=" stack-"] > *, .plain > *, [class^=plain-] > *, [class*=" plain-"] > * {␊ - margin-top: 0;␊ - margin-bottom: 0;␊ - }␊ - .stack > * + *, [class^=stack-] > * + *, [class*=" stack-"] > * + *, .plain > * + *, [class^=plain-] > * + *, [class*=" plain-"] > * + * {␊ - margin-top: var(--stack-gap);␊ - }␊ - ␊ - .chain, [class^=chain-], [class*=" chain-"] {␊ - display: flex;␊ - flex-direction: row;␊ - align-items: center;␊ - }␊ - .chain > *, [class^=chain-] > *, [class*=" chain-"] > * {␊ - flex: 0 0 auto;␊ - margin-right: 0;␊ - margin-left: 0;␊ - text-overflow: ellipsis;␊ - }␊ - .chain > * + *, [class^=chain-] > * + *, [class*=" chain-"] > * + * {␊ - margin-left: var(--chain-gap);␊ - }␊ - ␊ - :root {␊ - --stack-gap: var(--inner-y);␊ - --chain-gap: var(--inner-x);␊ - }␊ - ␊ - .stack-0 > * {␊ - --stack-gap: 0;␊ - }␊ - ␊ - .plain > .shim-s, [class^=plain-] > .shim-s, [class*=" plain-"] > .shim-s,␊ - .stack > .shim-s, [class^=stack-] > .shim-s, [class*=" stack-"] > .shim-s {␊ - --stack-gap: var(--inner-y-s);␊ - }␊ - ␊ - .stack-s > * {␊ - --stack-gap: var(--inner-y-s);␊ - }␊ - ␊ - .plain > .shim-m, [class^=plain-] > .shim-m, [class*=" plain-"] > .shim-m,␊ - .stack > .shim-m, [class^=stack-] > .shim-m, [class*=" stack-"] > .shim-m {␊ - --stack-gap: var(--inner-y-m);␊ - }␊ - ␊ - .stack-m > * {␊ - --stack-gap: var(--inner-y-m);␊ - }␊ - ␊ - .plain > .shim-l, [class^=plain-] > .shim-l, [class*=" plain-"] > .shim-l,␊ - .stack > .shim-l, [class^=stack-] > .shim-l, [class*=" stack-"] > .shim-l {␊ - --stack-gap: var(--inner-y-l);␊ - }␊ - ␊ - .stack-l > * {␊ - --stack-gap: var(--inner-y-l);␊ - }␊ - ␊ - .chain-0 > * {␊ - --chain-gap: 0;␊ - }␊ - ␊ - .chain > .shim-s, [class^=chain-] > .shim-s, [class*=" chain-"] > .shim-s {␊ - --chain-gap: var(--inner-x-s);␊ - }␊ - ␊ - .chain-s > * {␊ - --chain-gap: var(--inner-x-s);␊ - }␊ - ␊ - .chain > .shim-form, [class^=chain-] > .shim-form, [class*=" chain-"] > .shim-form {␊ - --chain-gap: var(--inner-x-form);␊ - }␊ - ␊ - .chain-form > * {␊ - --chain-gap: var(--inner-x-form);␊ - }` - -## modern-stack [libsass] - -> Snapshot 1 - - `.stack, [class^="stack-"], [class*=" stack-"] {␊ - display: flex;␊ - flex-direction: column;␊ - align-items: stretch;␊ - }␊ - ␊ - .stack > *, [class^="stack-"] > *, [class*=" stack-"] > * {␊ - flex: 0 0 auto;␊ - }␊ - ␊ - .stack, [class^="stack-"], [class*=" stack-"], .plain, [class^="plain-"], [class*=" plain-"] {␊ - padding-top: 0.01px;␊ - padding-bottom: 0.01px;␊ - }␊ - ␊ - .stack > *, [class^="stack-"] > *, [class*=" stack-"] > *, .plain > *, [class^="plain-"] > *, [class*=" plain-"] > * {␊ - margin-top: 0;␊ - margin-bottom: 0;␊ - }␊ - ␊ - .stack > * + *, [class^="stack-"] > * + *, [class*=" stack-"] > * + *, .plain > * + *, [class^="plain-"] > * + *, [class*=" plain-"] > * + * {␊ - margin-top: var(--stack-gap);␊ - }␊ - ␊ - .chain, [class^="chain-"], [class*=" chain-"] {␊ - display: flex;␊ - flex-direction: row;␊ - align-items: center;␊ - }␊ - ␊ - .chain > *, [class^="chain-"] > *, [class*=" chain-"] > * {␊ - flex: 0 0 auto;␊ - margin-right: 0;␊ - margin-left: 0;␊ - text-overflow: ellipsis;␊ - }␊ - ␊ - .chain > * + *, [class^="chain-"] > * + *, [class*=" chain-"] > * + * {␊ - margin-left: var(--chain-gap);␊ - }␊ - ␊ - :root {␊ - --stack-gap: var(--inner-y);␊ - --chain-gap: var(--inner-x);␊ - }␊ - ␊ - .stack-0 > * {␊ - --stack-gap: 0;␊ - }␊ - ␊ - .plain > .shim-s, [class^="plain-"] > .shim-s, [class*=" plain-"] > .shim-s,␊ - .stack > .shim-s, [class^="stack-"] > .shim-s, [class*=" stack-"] > .shim-s {␊ - --stack-gap: var(--inner-y-s);␊ - }␊ - ␊ - .stack-s > * {␊ - --stack-gap: var(--inner-y-s);␊ - }␊ - ␊ - .plain > .shim-m, [class^="plain-"] > .shim-m, [class*=" plain-"] > .shim-m,␊ - .stack > .shim-m, [class^="stack-"] > .shim-m, [class*=" stack-"] > .shim-m {␊ - --stack-gap: var(--inner-y-m);␊ - }␊ - ␊ - .stack-m > * {␊ - --stack-gap: var(--inner-y-m);␊ - }␊ - ␊ - .plain > .shim-l, [class^="plain-"] > .shim-l, [class*=" plain-"] > .shim-l,␊ - .stack > .shim-l, [class^="stack-"] > .shim-l, [class*=" stack-"] > .shim-l {␊ - --stack-gap: var(--inner-y-l);␊ - }␊ - ␊ - .stack-l > * {␊ - --stack-gap: var(--inner-y-l);␊ - }␊ - ␊ - .chain-0 > * {␊ - --chain-gap: 0;␊ - }␊ - ␊ - .chain > .shim-s, [class^="chain-"] > .shim-s, [class*=" chain-"] > .shim-s {␊ - --chain-gap: var(--inner-x-s);␊ - }␊ - ␊ - .chain-s > * {␊ - --chain-gap: var(--inner-x-s);␊ - }␊ - ␊ - .chain > .shim-form, [class^="chain-"] > .shim-form, [class*=" chain-"] > .shim-form {␊ - --chain-gap: var(--inner-x-form);␊ - }␊ - ␊ - .chain-form > * {␊ - --chain-gap: var(--inner-x-form);␊ - }␊ - ` - -## modern-theme [dartsass] - -> Snapshot 1 - - `.test {␊ - out: 80.5024021427;␊ - }␊ - ␊ - :root {␊ - --color-fg: 17, 17, 17;␊ - --color-bg: 238, 238, 238;␊ - --color-dark: 17, 17, 17;␊ - --color-dark-contrast: 238, 238, 238;␊ - --color-lite: 238, 238, 238;␊ - --color-lite-contrast: 17, 17, 17;␊ - --color-foo: 80, 128, 33;␊ - --color-foo-contrast: 238, 238, 238;␊ - --color-bar: 218, 80, 201;␊ - --color-bar-contrast: 238, 238, 238;␊ - --color-baz: 71, 65, 255;␊ - --color-baz-contrast: 238, 238, 238;␊ - --color-fiz: 218, 155, 48;␊ - --color-fiz-contrast: 238, 238, 238;␊ - }␊ - ␊ - body, [class^=fg-], [class*=" fg-"] {␊ - color: rgb(var(--color-fg));␊ - }␊ - ␊ - body, [class^=bg-], [class*=" bg-"] {␊ - background-color: rgb(var(--color-bg));␊ - }␊ - ␊ - .fg-contrast {␊ - --color-fg: var(--color-bg-contrast);␊ - }␊ - ␊ - .bg-contrast {␊ - --color-bg: var(--color-fg-contrast);␊ - }␊ - ␊ - .fg-dark {␊ - --color-fg: var(--color-dark);␊ - --color-fg-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .bg-dark {␊ - --color-bg: var(--color-dark);␊ - --color-bg-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .fg-dark-contrast {␊ - --color-fg: var(--color-dark-contrast);␊ - }␊ - ␊ - .bg-dark-contrast {␊ - --color-bg: var(--color-dark-contrast);␊ - }␊ - ␊ - .theme-dark {␊ - --theme-color: var(--color-dark);␊ - --theme-color-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .fg-lite {␊ - --color-fg: var(--color-lite);␊ - --color-fg-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .bg-lite {␊ - --color-bg: var(--color-lite);␊ - --color-bg-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .fg-lite-contrast {␊ - --color-fg: var(--color-lite-contrast);␊ - }␊ - ␊ - .bg-lite-contrast {␊ - --color-bg: var(--color-lite-contrast);␊ - }␊ - ␊ - .theme-lite {␊ - --theme-color: var(--color-lite);␊ - --theme-color-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .fg-foo {␊ - --color-fg: var(--color-foo);␊ - --color-fg-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .bg-foo {␊ - --color-bg: var(--color-foo);␊ - --color-bg-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .fg-foo-contrast {␊ - --color-fg: var(--color-foo-contrast);␊ - }␊ - ␊ - .bg-foo-contrast {␊ - --color-bg: var(--color-foo-contrast);␊ - }␊ - ␊ - .theme-foo {␊ - --theme-color: var(--color-foo);␊ - --theme-color-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .fg-bar {␊ - --color-fg: var(--color-bar);␊ - --color-fg-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .bg-bar {␊ - --color-bg: var(--color-bar);␊ - --color-bg-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .fg-bar-contrast {␊ - --color-fg: var(--color-bar-contrast);␊ - }␊ - ␊ - .bg-bar-contrast {␊ - --color-bg: var(--color-bar-contrast);␊ - }␊ - ␊ - .theme-bar {␊ - --theme-color: var(--color-bar);␊ - --theme-color-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .fg-baz {␊ - --color-fg: var(--color-baz);␊ - --color-fg-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .bg-baz {␊ - --color-bg: var(--color-baz);␊ - --color-bg-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .fg-baz-contrast {␊ - --color-fg: var(--color-baz-contrast);␊ - }␊ - ␊ - .bg-baz-contrast {␊ - --color-bg: var(--color-baz-contrast);␊ - }␊ - ␊ - .theme-baz {␊ - --theme-color: var(--color-baz);␊ - --theme-color-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .fg-fiz {␊ - --color-fg: var(--color-fiz);␊ - --color-fg-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .bg-fiz {␊ - --color-bg: var(--color-fiz);␊ - --color-bg-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .fg-fiz-contrast {␊ - --color-fg: var(--color-fiz-contrast);␊ - }␊ - ␊ - .bg-fiz-contrast {␊ - --color-bg: var(--color-fiz-contrast);␊ - }␊ - ␊ - .theme-fiz {␊ - --theme-color: var(--color-fiz);␊ - --theme-color-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .fg-theme {␊ - --color-fg: var(--theme-color);␊ - --color-fg-contrast: var(--theme-color-contrast);␊ - }␊ - ␊ - .bg-theme {␊ - --color-bg: var(--theme-color);␊ - --color-bg-contrast: var(--theme-color-contrast);␊ - }␊ - ␊ - .fg-theme-contrast {␊ - --color-fg: var(--theme-color-contrast);␊ - }␊ - ␊ - .bg-theme-contrast {␊ - --color-bg: var(--theme-color-contrast);␊ - }` - -## modern-theme [libsass] - -> Snapshot 1 - - `.test {␊ - out: 80.5024021427;␊ - }␊ - ␊ - :root {␊ - --color-fg: 17, 17, 17;␊ - --color-bg: 238, 238, 238;␊ - --color-dark: 17, 17, 17;␊ - --color-dark-contrast: 238, 238, 238;␊ - --color-lite: 238, 238, 238;␊ - --color-lite-contrast: 17, 17, 17;␊ - --color-foo: 80, 128, 33;␊ - --color-foo-contrast: 238, 238, 238;␊ - --color-bar: 218, 80, 201;␊ - --color-bar-contrast: 238, 238, 238;␊ - --color-baz: 71, 65, 255;␊ - --color-baz-contrast: 238, 238, 238;␊ - --color-fiz: 218, 155, 48;␊ - --color-fiz-contrast: 238, 238, 238;␊ - }␊ - ␊ - body, [class^="fg-"], [class*=" fg-"] {␊ - color: rgb(var(--color-fg));␊ - }␊ - ␊ - body, [class^="bg-"], [class*=" bg-"] {␊ - background-color: rgb(var(--color-bg));␊ - }␊ - ␊ - .fg-contrast {␊ - --color-fg: var(--color-bg-contrast);␊ - }␊ - ␊ - .bg-contrast {␊ - --color-bg: var(--color-fg-contrast);␊ - }␊ - ␊ - .fg-dark {␊ - --color-fg: var(--color-dark);␊ - --color-fg-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .bg-dark {␊ - --color-bg: var(--color-dark);␊ - --color-bg-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .fg-dark-contrast {␊ - --color-fg: var(--color-dark-contrast);␊ - }␊ - ␊ - .bg-dark-contrast {␊ - --color-bg: var(--color-dark-contrast);␊ - }␊ - ␊ - .theme-dark {␊ - --theme-color: var(--color-dark);␊ - --theme-color-contrast: var(--color-dark-contrast);␊ - }␊ - ␊ - .fg-lite {␊ - --color-fg: var(--color-lite);␊ - --color-fg-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .bg-lite {␊ - --color-bg: var(--color-lite);␊ - --color-bg-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .fg-lite-contrast {␊ - --color-fg: var(--color-lite-contrast);␊ - }␊ - ␊ - .bg-lite-contrast {␊ - --color-bg: var(--color-lite-contrast);␊ - }␊ - ␊ - .theme-lite {␊ - --theme-color: var(--color-lite);␊ - --theme-color-contrast: var(--color-lite-contrast);␊ - }␊ - ␊ - .fg-foo {␊ - --color-fg: var(--color-foo);␊ - --color-fg-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .bg-foo {␊ - --color-bg: var(--color-foo);␊ - --color-bg-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .fg-foo-contrast {␊ - --color-fg: var(--color-foo-contrast);␊ - }␊ - ␊ - .bg-foo-contrast {␊ - --color-bg: var(--color-foo-contrast);␊ - }␊ - ␊ - .theme-foo {␊ - --theme-color: var(--color-foo);␊ - --theme-color-contrast: var(--color-foo-contrast);␊ - }␊ - ␊ - .fg-bar {␊ - --color-fg: var(--color-bar);␊ - --color-fg-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .bg-bar {␊ - --color-bg: var(--color-bar);␊ - --color-bg-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .fg-bar-contrast {␊ - --color-fg: var(--color-bar-contrast);␊ - }␊ - ␊ - .bg-bar-contrast {␊ - --color-bg: var(--color-bar-contrast);␊ - }␊ - ␊ - .theme-bar {␊ - --theme-color: var(--color-bar);␊ - --theme-color-contrast: var(--color-bar-contrast);␊ - }␊ - ␊ - .fg-baz {␊ - --color-fg: var(--color-baz);␊ - --color-fg-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .bg-baz {␊ - --color-bg: var(--color-baz);␊ - --color-bg-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .fg-baz-contrast {␊ - --color-fg: var(--color-baz-contrast);␊ - }␊ - ␊ - .bg-baz-contrast {␊ - --color-bg: var(--color-baz-contrast);␊ - }␊ - ␊ - .theme-baz {␊ - --theme-color: var(--color-baz);␊ - --theme-color-contrast: var(--color-baz-contrast);␊ - }␊ - ␊ - .fg-fiz {␊ - --color-fg: var(--color-fiz);␊ - --color-fg-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .bg-fiz {␊ - --color-bg: var(--color-fiz);␊ - --color-bg-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .fg-fiz-contrast {␊ - --color-fg: var(--color-fiz-contrast);␊ - }␊ - ␊ - .bg-fiz-contrast {␊ - --color-bg: var(--color-fiz-contrast);␊ - }␊ - ␊ - .theme-fiz {␊ - --theme-color: var(--color-fiz);␊ - --theme-color-contrast: var(--color-fiz-contrast);␊ - }␊ - ␊ - .fg-theme {␊ - --color-fg: var(--theme-color);␊ - --color-fg-contrast: var(--theme-color-contrast);␊ - }␊ - ␊ - .bg-theme {␊ - --color-bg: var(--theme-color);␊ - --color-bg-contrast: var(--theme-color-contrast);␊ - }␊ - ␊ - .fg-theme-contrast {␊ - --color-fg: var(--theme-color-contrast);␊ - }␊ - ␊ - .bg-theme-contrast {␊ - --color-bg: var(--theme-color-contrast);␊ - }␊ - ` - -## modern-wrap [dartsass] - -> Snapshot 1 - - `:root {␊ - --wrap-width: 100%;␊ - }␊ - ␊ - .wrap, [class^=wrap-], [class*=" wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - ␊ - .wrap-left {␊ - margin-left: 0;␊ - }␊ - ␊ - .wrap-right {␊ - margin-right: 0;␊ - }␊ - ␊ - .wrap {␊ - --wrap-width: var(--outer-width);␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__wrap, [class^=a__wrap-], [class*=" a__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - ␊ - .a__wrap-left {␊ - margin-left: 0;␊ - }␊ - ␊ - .a__wrap-right {␊ - margin-right: 0;␊ - }␊ - ␊ - .a__wrap, .wrap-a {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }␊ - @media screen and (min-width: 30em) {␊ - .b__wrap, [class^=b__wrap-], [class*=" b__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - ␊ - .b__wrap-left {␊ - margin-left: 0;␊ - }␊ - ␊ - .b__wrap-right {␊ - margin-right: 0;␊ - }␊ - ␊ - .b__wrap, .wrap-b {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }␊ - @media screen and (min-width: 40em) {␊ - .c__wrap, [class^=c__wrap-], [class*=" c__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - ␊ - .c__wrap-left {␊ - margin-left: 0;␊ - }␊ - ␊ - .c__wrap-right {␊ - margin-right: 0;␊ - }␊ - ␊ - .c__wrap, .wrap-c, .wrap-last {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }` - -## modern-wrap [libsass] - -> Snapshot 1 - - `:root {␊ - --wrap-width: 100%;␊ - }␊ - ␊ - .wrap, [class^="wrap-"], [class*=" wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - ␊ - .wrap-left {␊ - margin-left: 0;␊ - }␊ - ␊ - .wrap-right {␊ - margin-right: 0;␊ - }␊ - ␊ - .wrap {␊ - --wrap-width: var(--outer-width);␊ - }␊ - ␊ - @media screen and (min-width: 20em) {␊ - .a__wrap, [class^="a__wrap-"], [class*=" a__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - .a__wrap-left {␊ - margin-left: 0;␊ - }␊ - .a__wrap-right {␊ - margin-right: 0;␊ - }␊ - .a__wrap, .wrap-a {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 30em) {␊ - .b__wrap, [class^="b__wrap-"], [class*=" b__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - .b__wrap-left {␊ - margin-left: 0;␊ - }␊ - .b__wrap-right {␊ - margin-right: 0;␊ - }␊ - .b__wrap, .wrap-b {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }␊ - ␊ - @media screen and (min-width: 40em) {␊ - .c__wrap, [class^="c__wrap-"], [class*=" c__wrap-"] {␊ - margin-right: auto;␊ - margin-left: auto;␊ - width: 100%;␊ - max-width: var(--wrap-width);␊ - }␊ - .c__wrap-left {␊ - margin-left: 0;␊ - }␊ - .c__wrap-right {␊ - margin-right: 0;␊ - }␊ - .c__wrap, .wrap-c, .wrap-last {␊ - --wrap-width: var(--outer-width);␊ - }␊ - }␊ - ` diff --git a/tests/snapshots/tests.js.snap b/tests/snapshots/tests.js.snap deleted file mode 100644 index 8cd0f43..0000000 Binary files a/tests/snapshots/tests.js.snap and /dev/null differ