@graupl/core 1.0.0-beta.51 → 1.0.0-beta.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/layout/columns.css +1 -1
- package/dist/css/layout/columns.css.map +1 -1
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/dist/css/utilities/block-size.css +1 -1
- package/dist/css/utilities/block-size.css.map +1 -1
- package/dist/css/utilities/grid.css +2 -0
- package/dist/css/utilities/grid.css.map +1 -0
- package/dist/css/utilities/inline-size.css +1 -1
- package/dist/css/utilities/inline-size.css.map +1 -1
- package/dist/css/utilities.css +1 -1
- package/dist/css/utilities.css.map +1 -1
- package/package.json +1 -1
- package/scss/utilities/grid.scss +3 -0
- package/src/scss/_defaults.scss +4 -0
- package/src/scss/layout/columns/_defaults.scss +26 -4
- package/src/scss/layout/columns/_index.scss +346 -35
- package/src/scss/layout/flex-columns/_defaults.scss +2 -2
- package/src/scss/layout/flex-columns/_index.scss +41 -41
- package/src/scss/utilities/_index.scss +1 -0
- package/src/scss/utilities/_template/_index.scss +1 -1
- package/src/scss/utilities/block-size/_defaults.scss +3 -3
- package/src/scss/utilities/block-size/_index.scss +84 -84
- package/src/scss/utilities/grid/_defaults.scss +89 -0
- package/src/scss/utilities/grid/_index.scss +236 -0
- package/src/scss/utilities/grid/_variables.scss +6 -0
- package/src/scss/utilities/grid/col-span/_defaults.scss +102 -0
- package/src/scss/utilities/grid/col-span/_index.scss +124 -0
- package/src/scss/utilities/grid/col-span/_variables.scss +6 -0
- package/src/scss/utilities/grid/grid-column/_defaults.scss +104 -0
- package/src/scss/utilities/grid/grid-column/_index.scss +140 -0
- package/src/scss/utilities/grid/grid-column/_variables.scss +6 -0
- package/src/scss/utilities/grid/grid-row/_defaults.scss +104 -0
- package/src/scss/utilities/grid/grid-row/_index.scss +140 -0
- package/src/scss/utilities/grid/grid-row/_variables.scss +6 -0
- package/src/scss/utilities/grid/grid-template-columns/_defaults.scss +102 -0
- package/src/scss/utilities/grid/grid-template-columns/_index.scss +124 -0
- package/src/scss/utilities/grid/grid-template-columns/_variables.scss +6 -0
- package/src/scss/utilities/grid/grid-template-rows/_defaults.scss +102 -0
- package/src/scss/utilities/grid/grid-template-rows/_index.scss +124 -0
- package/src/scss/utilities/grid/grid-template-rows/_variables.scss +6 -0
- package/src/scss/utilities/grid/row-span/_defaults.scss +102 -0
- package/src/scss/utilities/grid/row-span/_index.scss +124 -0
- package/src/scss/utilities/grid/row-span/_variables.scss +6 -0
- package/src/scss/utilities/inline-size/_defaults.scss +3 -3
- package/src/scss/utilities/inline-size/_index.scss +84 -84
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.
|
|
1
|
+
@layer graupl.utilities{.bs-auto{block-size:auto!important}.bs-fit-content{block-size:fit-content!important}.bs-max-content{block-size:max-content!important}.bs-min-content{block-size:min-content!important}.bs-stretch{block-size:stretch!important}.bs-full{block-size:100%!important}.bs-quarter{block-size:25%!important}.bs-half{block-size:50%!important}.bs-three-quarters{block-size:75%!important}.bs-third{block-size:33.3333%!important}.bs-two-thirds{block-size:66.6667%!important}.bs-half-screen{block-size:50vh!important}.bs-third-screen{block-size:33.3333vh!important}.bs-two-thirds-screen{block-size:66.6667vh!important}.bs-quarter-screen{block-size:25vh!important}.bs-three-quarters-screen{block-size:75vh!important}.bs-full-screen{block-size:100vh!important}.bs-0{block-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.bs-1{block-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.bs-2{block-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.bs-3{block-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.bs-4{block-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.bs-5{block-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.bs-6{block-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.bs-7{block-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.bs-8{block-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.bs-9{block-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.bs-10{block-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}.max-bs-auto{max-block-size:auto!important}.max-bs-fit-content{max-block-size:fit-content!important}.max-bs-max-content{max-block-size:max-content!important}.max-bs-min-content{max-block-size:min-content!important}.max-bs-stretch{max-block-size:stretch!important}.max-bs-full{max-block-size:100%!important}.max-bs-quarter{max-block-size:25%!important}.max-bs-half{max-block-size:50%!important}.max-bs-three-quarters{max-block-size:75%!important}.max-bs-third{max-block-size:33.3333%!important}.max-bs-two-thirds{max-block-size:66.6667%!important}.max-bs-half-screen{max-block-size:50vh!important}.max-bs-third-screen{max-block-size:33.3333vh!important}.max-bs-two-thirds-screen{max-block-size:66.6667vh!important}.max-bs-quarter-screen{max-block-size:25vh!important}.max-bs-three-quarters-screen{max-block-size:75vh!important}.max-bs-full-screen{max-block-size:100vh!important}.max-bs-0{max-block-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.max-bs-1{max-block-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.max-bs-2{max-block-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.max-bs-3{max-block-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.max-bs-4{max-block-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.max-bs-5{max-block-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.max-bs-6{max-block-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.max-bs-7{max-block-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.max-bs-8{max-block-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.max-bs-9{max-block-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.max-bs-10{max-block-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}.min-bs-auto{min-block-size:auto!important}.min-bs-fit-content{min-block-size:fit-content!important}.min-bs-max-content{min-block-size:max-content!important}.min-bs-min-content{min-block-size:min-content!important}.min-bs-stretch{min-block-size:stretch!important}.min-bs-full{min-block-size:100%!important}.min-bs-quarter{min-block-size:25%!important}.min-bs-half{min-block-size:50%!important}.min-bs-three-quarters{min-block-size:75%!important}.min-bs-third{min-block-size:33.3333%!important}.min-bs-two-thirds{min-block-size:66.6667%!important}.min-bs-half-screen{min-block-size:50vh!important}.min-bs-third-screen{min-block-size:33.3333vh!important}.min-bs-two-thirds-screen{min-block-size:66.6667vh!important}.min-bs-quarter-screen{min-block-size:25vh!important}.min-bs-three-quarters-screen{min-block-size:75vh!important}.min-bs-full-screen{min-block-size:100vh!important}.min-bs-0{min-block-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.min-bs-1{min-block-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.min-bs-2{min-block-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.min-bs-3{min-block-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.min-bs-4{min-block-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.min-bs-5{min-block-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.min-bs-6{min-block-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.min-bs-7{min-block-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.min-bs-8{min-block-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.min-bs-9{min-block-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.min-bs-10{min-block-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}}
|
|
2
2
|
/*# sourceMappingURL=block-size.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyKE,sCAAA,oDAAA,oDAAA,oDAAA,4CAAA,sCAAA,wCAAA,qCAAA,+CAAA,2CAAA,gDAAA,6CAAA,mDAAA,wDAAA,gDAAA,uDAAA,8CAAA,yFAAA,4FAAA,2FAAA,0FAAA,2FAAA,yFAAA,2FAAA,yFAAA,yFAAA,yFAAA,4FAAA,8CAAA,4DAAA,4DAAA,4DAAA,oDAAA,8CAAA,gDAAA,6CAAA,uDAAA,mDAAA,wDAAA,qDAAA,2DAAA,gEAAA,wDAAA,+DAAA,sDAAA,iGAAA,oGAAA,mGAAA,kGAAA,mGAAA,iGAAA,mGAAA,iGAAA,iGAAA,iGAAA,oGAAA,8CAAA,4DAAA,4DAAA,4DAAA,oDAAA,8CAAA,gDAAA,6CAAA,uDAAA,mDAAA,wDAAA,qDAAA,2DAAA,gEAAA,wDAAA,+DAAA,sDAAA,iGAAA,oGAAA,mGAAA,kGAAA,mGAAA,iGAAA,mGAAA,iGAAA,iGAAA,iGAAA","sources":["dist/css/utilities/block-size.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .block-auto {\n block-size: auto !important;\n }\n .block-fit-content {\n block-size: fit-content !important;\n }\n .block-max-content {\n block-size: max-content !important;\n }\n .block-min-content {\n block-size: min-content !important;\n }\n .block-stretch {\n block-size: stretch !important;\n }\n .block-full {\n block-size: 100% !important;\n }\n .block-quarter {\n block-size: 25% !important;\n }\n .block-half {\n block-size: 50% !important;\n }\n .block-three-quarters {\n block-size: 75% !important;\n }\n .block-third {\n block-size: 33.3333333333% !important;\n }\n .block-two-thirds {\n block-size: 66.6666666667% !important;\n }\n .block-half-screen {\n block-size: 50vh !important;\n }\n .block-third-screen {\n block-size: 33.3333333333vh !important;\n }\n .block-two-thirds-screen {\n block-size: 66.6666666667vh !important;\n }\n .block-quarter-screen {\n block-size: 25vh !important;\n }\n .block-three-quarters-screen {\n block-size: 75vh !important;\n }\n .block-full-screen {\n block-size: 100vh !important;\n }\n .block-0 {\n block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-1 {\n block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-2 {\n block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-3 {\n block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-4 {\n block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-5 {\n block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-6 {\n block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-7 {\n block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-8 {\n block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-9 {\n block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .block-10 {\n block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-auto {\n max-block-size: auto !important;\n }\n .max-block-fit-content {\n max-block-size: fit-content !important;\n }\n .max-block-max-content {\n max-block-size: max-content !important;\n }\n .max-block-min-content {\n max-block-size: min-content !important;\n }\n .max-block-stretch {\n max-block-size: stretch !important;\n }\n .max-block-full {\n max-block-size: 100% !important;\n }\n .max-block-quarter {\n max-block-size: 25% !important;\n }\n .max-block-half {\n max-block-size: 50% !important;\n }\n .max-block-three-quarters {\n max-block-size: 75% !important;\n }\n .max-block-third {\n max-block-size: 33.3333333333% !important;\n }\n .max-block-two-thirds {\n max-block-size: 66.6666666667% !important;\n }\n .max-block-half-screen {\n max-block-size: 50vh !important;\n }\n .max-block-third-screen {\n max-block-size: 33.3333333333vh !important;\n }\n .max-block-two-thirds-screen {\n max-block-size: 66.6666666667vh !important;\n }\n .max-block-quarter-screen {\n max-block-size: 25vh !important;\n }\n .max-block-three-quarters-screen {\n max-block-size: 75vh !important;\n }\n .max-block-full-screen {\n max-block-size: 100vh !important;\n }\n .max-block-0 {\n max-block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-1 {\n max-block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-2 {\n max-block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-3 {\n max-block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-4 {\n max-block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-5 {\n max-block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-6 {\n max-block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-7 {\n max-block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-8 {\n max-block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-9 {\n max-block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-block-10 {\n max-block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-auto {\n min-block-size: auto !important;\n }\n .min-block-fit-content {\n min-block-size: fit-content !important;\n }\n .min-block-max-content {\n min-block-size: max-content !important;\n }\n .min-block-min-content {\n min-block-size: min-content !important;\n }\n .min-block-stretch {\n min-block-size: stretch !important;\n }\n .min-block-full {\n min-block-size: 100% !important;\n }\n .min-block-quarter {\n min-block-size: 25% !important;\n }\n .min-block-half {\n min-block-size: 50% !important;\n }\n .min-block-three-quarters {\n min-block-size: 75% !important;\n }\n .min-block-third {\n min-block-size: 33.3333333333% !important;\n }\n .min-block-two-thirds {\n min-block-size: 66.6666666667% !important;\n }\n .min-block-half-screen {\n min-block-size: 50vh !important;\n }\n .min-block-third-screen {\n min-block-size: 33.3333333333vh !important;\n }\n .min-block-two-thirds-screen {\n min-block-size: 66.6666666667vh !important;\n }\n .min-block-quarter-screen {\n min-block-size: 25vh !important;\n }\n .min-block-three-quarters-screen {\n min-block-size: 75vh !important;\n }\n .min-block-full-screen {\n min-block-size: 100vh !important;\n }\n .min-block-0 {\n min-block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-1 {\n min-block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-2 {\n min-block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-3 {\n min-block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-4 {\n min-block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-5 {\n min-block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-6 {\n min-block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-7 {\n min-block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-8 {\n min-block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-9 {\n min-block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-block-10 {\n min-block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyKE,mCAAA,iDAAA,iDAAA,iDAAA,yCAAA,mCAAA,qCAAA,kCAAA,4CAAA,wCAAA,6CAAA,0CAAA,gDAAA,qDAAA,6CAAA,oDAAA,2CAAA,sFAAA,yFAAA,wFAAA,uFAAA,wFAAA,sFAAA,wFAAA,sFAAA,sFAAA,sFAAA,yFAAA,2CAAA,yDAAA,yDAAA,yDAAA,iDAAA,2CAAA,6CAAA,0CAAA,oDAAA,gDAAA,qDAAA,kDAAA,wDAAA,6DAAA,qDAAA,4DAAA,mDAAA,8FAAA,iGAAA,gGAAA,+FAAA,gGAAA,8FAAA,gGAAA,8FAAA,8FAAA,8FAAA,iGAAA,2CAAA,yDAAA,yDAAA,yDAAA,iDAAA,2CAAA,6CAAA,0CAAA,oDAAA,gDAAA,qDAAA,kDAAA,wDAAA,6DAAA,qDAAA,4DAAA,mDAAA,8FAAA,iGAAA,gGAAA,+FAAA,gGAAA,8FAAA,gGAAA,8FAAA,8FAAA,8FAAA","sources":["dist/css/utilities/block-size.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .bs-auto {\n block-size: auto !important;\n }\n .bs-fit-content {\n block-size: fit-content !important;\n }\n .bs-max-content {\n block-size: max-content !important;\n }\n .bs-min-content {\n block-size: min-content !important;\n }\n .bs-stretch {\n block-size: stretch !important;\n }\n .bs-full {\n block-size: 100% !important;\n }\n .bs-quarter {\n block-size: 25% !important;\n }\n .bs-half {\n block-size: 50% !important;\n }\n .bs-three-quarters {\n block-size: 75% !important;\n }\n .bs-third {\n block-size: 33.3333333333% !important;\n }\n .bs-two-thirds {\n block-size: 66.6666666667% !important;\n }\n .bs-half-screen {\n block-size: 50vh !important;\n }\n .bs-third-screen {\n block-size: 33.3333333333vh !important;\n }\n .bs-two-thirds-screen {\n block-size: 66.6666666667vh !important;\n }\n .bs-quarter-screen {\n block-size: 25vh !important;\n }\n .bs-three-quarters-screen {\n block-size: 75vh !important;\n }\n .bs-full-screen {\n block-size: 100vh !important;\n }\n .bs-0 {\n block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-1 {\n block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-2 {\n block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-3 {\n block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-4 {\n block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-5 {\n block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-6 {\n block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-7 {\n block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-8 {\n block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-9 {\n block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .bs-10 {\n block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-auto {\n max-block-size: auto !important;\n }\n .max-bs-fit-content {\n max-block-size: fit-content !important;\n }\n .max-bs-max-content {\n max-block-size: max-content !important;\n }\n .max-bs-min-content {\n max-block-size: min-content !important;\n }\n .max-bs-stretch {\n max-block-size: stretch !important;\n }\n .max-bs-full {\n max-block-size: 100% !important;\n }\n .max-bs-quarter {\n max-block-size: 25% !important;\n }\n .max-bs-half {\n max-block-size: 50% !important;\n }\n .max-bs-three-quarters {\n max-block-size: 75% !important;\n }\n .max-bs-third {\n max-block-size: 33.3333333333% !important;\n }\n .max-bs-two-thirds {\n max-block-size: 66.6666666667% !important;\n }\n .max-bs-half-screen {\n max-block-size: 50vh !important;\n }\n .max-bs-third-screen {\n max-block-size: 33.3333333333vh !important;\n }\n .max-bs-two-thirds-screen {\n max-block-size: 66.6666666667vh !important;\n }\n .max-bs-quarter-screen {\n max-block-size: 25vh !important;\n }\n .max-bs-three-quarters-screen {\n max-block-size: 75vh !important;\n }\n .max-bs-full-screen {\n max-block-size: 100vh !important;\n }\n .max-bs-0 {\n max-block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-1 {\n max-block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-2 {\n max-block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-3 {\n max-block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-4 {\n max-block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-5 {\n max-block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-6 {\n max-block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-7 {\n max-block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-8 {\n max-block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-9 {\n max-block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-bs-10 {\n max-block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-auto {\n min-block-size: auto !important;\n }\n .min-bs-fit-content {\n min-block-size: fit-content !important;\n }\n .min-bs-max-content {\n min-block-size: max-content !important;\n }\n .min-bs-min-content {\n min-block-size: min-content !important;\n }\n .min-bs-stretch {\n min-block-size: stretch !important;\n }\n .min-bs-full {\n min-block-size: 100% !important;\n }\n .min-bs-quarter {\n min-block-size: 25% !important;\n }\n .min-bs-half {\n min-block-size: 50% !important;\n }\n .min-bs-three-quarters {\n min-block-size: 75% !important;\n }\n .min-bs-third {\n min-block-size: 33.3333333333% !important;\n }\n .min-bs-two-thirds {\n min-block-size: 66.6666666667% !important;\n }\n .min-bs-half-screen {\n min-block-size: 50vh !important;\n }\n .min-bs-third-screen {\n min-block-size: 33.3333333333vh !important;\n }\n .min-bs-two-thirds-screen {\n min-block-size: 66.6666666667vh !important;\n }\n .min-bs-quarter-screen {\n min-block-size: 25vh !important;\n }\n .min-bs-three-quarters-screen {\n min-block-size: 75vh !important;\n }\n .min-bs-full-screen {\n min-block-size: 100vh !important;\n }\n .min-bs-0 {\n min-block-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-1 {\n min-block-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-2 {\n min-block-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-3 {\n min-block-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-4 {\n min-block-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-5 {\n min-block-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-6 {\n min-block-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-7 {\n min-block-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-8 {\n min-block-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-9 {\n min-block-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-bs-10 {\n min-block-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n"],"names":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer graupl.utilities{.column-start-first{grid-column-start:1!important}.column-start-last{grid-column-start:-1!important}.column-start-auto{grid-column-start:auto!important}.column-start-1{grid-column-start:1!important}.column-start-2{grid-column-start:2!important}.column-start-3{grid-column-start:3!important}.column-start-4{grid-column-start:4!important}.column-start-5{grid-column-start:5!important}.column-start-6{grid-column-start:6!important}.column-start-7{grid-column-start:7!important}.column-start-8{grid-column-start:8!important}.column-start-9{grid-column-start:9!important}.column-start-10{grid-column-start:10!important}.column-start-11{grid-column-start:11!important}.column-start-12{grid-column-start:12!important}.column-end-first{grid-column-end:1!important}.column-end-last{grid-column-end:-1!important}.column-end-auto{grid-column-end:auto!important}.column-end-1{grid-column-end:1!important}.column-end-2{grid-column-end:2!important}.column-end-3{grid-column-end:3!important}.column-end-4{grid-column-end:4!important}.column-end-5{grid-column-end:5!important}.column-end-6{grid-column-end:6!important}.column-end-7{grid-column-end:7!important}.column-end-8{grid-column-end:8!important}.column-end-9{grid-column-end:9!important}.column-end-10{grid-column-end:10!important}.column-end-11{grid-column-end:11!important}.column-end-12{grid-column-end:12!important}.row-start-first{grid-row-start:1!important}.row-start-last{grid-row-start:-1!important}.row-start-auto{grid-row-start:auto!important}.row-start-1{grid-row-start:1!important}.row-start-2{grid-row-start:2!important}.row-start-3{grid-row-start:3!important}.row-start-4{grid-row-start:4!important}.row-start-5{grid-row-start:5!important}.row-start-6{grid-row-start:6!important}.row-start-7{grid-row-start:7!important}.row-start-8{grid-row-start:8!important}.row-start-9{grid-row-start:9!important}.row-start-10{grid-row-start:10!important}.row-start-11{grid-row-start:11!important}.row-start-12{grid-row-start:12!important}.row-end-first{grid-row-end:1!important}.row-end-last{grid-row-end:-1!important}.row-end-auto{grid-row-end:auto!important}.row-end-1{grid-row-end:1!important}.row-end-2{grid-row-end:2!important}.row-end-3{grid-row-end:3!important}.row-end-4{grid-row-end:4!important}.row-end-5{grid-row-end:5!important}.row-end-6{grid-row-end:6!important}.row-end-7{grid-row-end:7!important}.row-end-8{grid-row-end:8!important}.row-end-9{grid-row-end:9!important}.row-end-10{grid-row-end:10!important}.row-end-11{grid-row-end:11!important}.row-end-12{grid-row-end:12!important}.grid-cols-auto{grid-template-columns:auto!important}.grid-cols-subgrid{grid-template-columns:subgrid!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))!important}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))!important}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))!important}.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))!important}.grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))!important}.grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))!important}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))!important}.grid-rows-auto{grid-template-rows:auto!important}.grid-rows-subgrid{grid-template-rows:subgrid!important}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))!important}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))!important}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))!important}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))!important}.grid-rows-5{grid-template-rows:repeat(5,minmax(0,1fr))!important}.grid-rows-6{grid-template-rows:repeat(6,minmax(0,1fr))!important}.grid-rows-7{grid-template-rows:repeat(7,minmax(0,1fr))!important}.grid-rows-8{grid-template-rows:repeat(8,minmax(0,1fr))!important}.grid-rows-9{grid-template-rows:repeat(9,minmax(0,1fr))!important}.grid-rows-10{grid-template-rows:repeat(10,minmax(0,1fr))!important}.grid-rows-11{grid-template-rows:repeat(11,minmax(0,1fr))!important}.grid-rows-12{grid-template-rows:repeat(12,minmax(0,1fr))!important}.col-span-auto{grid-column:span auto!important}.col-span-full{grid-column:1/-1!important}.col-span-1{grid-column:span 1!important}.col-span-2{grid-column:span 2!important}.col-span-3{grid-column:span 3!important}.col-span-4{grid-column:span 4!important}.col-span-5{grid-column:span 5!important}.col-span-6{grid-column:span 6!important}.col-span-7{grid-column:span 7!important}.col-span-8{grid-column:span 8!important}.col-span-9{grid-column:span 9!important}.col-span-10{grid-column:span 10!important}.col-span-11{grid-column:span 11!important}.col-span-12{grid-column:span 12!important}.row-span-auto{grid-row:span auto!important}.row-span-full{grid-row:1/-1!important}.row-span-1{grid-row:span 1!important}.row-span-2{grid-row:span 2!important}.row-span-3{grid-row:span 3!important}.row-span-4{grid-row:span 4!important}.row-span-5{grid-row:span 5!important}.row-span-6{grid-row:span 6!important}.row-span-7{grid-row:span 7!important}.row-span-8{grid-row:span 8!important}.row-span-9{grid-row:span 9!important}.row-span-10{grid-row:span 10!important}.row-span-11{grid-row:span 11!important}.row-span-12{grid-row:span 12!important}}
|
|
2
|
+
/*# sourceMappingURL=grid.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyKE,kDAAA,kDAAA,oDAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,8CAAA,gDAAA,gDAAA,gDAAA,8CAAA,8CAAA,gDAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,4CAAA,4CAAA,4CAAA,4CAAA,4CAAA,8CAAA,wCAAA,wCAAA,wCAAA,wCAAA,wCAAA,wCAAA,wCAAA,wCAAA,wCAAA,0CAAA,0CAAA,0CAAA,wCAAA,wCAAA,0CAAA,oCAAA,oCAAA,oCAAA,oCAAA,oCAAA,oCAAA,oCAAA,oCAAA,oCAAA,sCAAA,sCAAA,sCAAA,qDAAA,2DAAA,qEAAA,qEAAA,qEAAA,qEAAA,qEAAA,qEAAA,qEAAA,qEAAA,qEAAA,uEAAA,uEAAA,uEAAA,kDAAA,wDAAA,kEAAA,kEAAA,kEAAA,kEAAA,kEAAA,kEAAA,kEAAA,kEAAA,kEAAA,oEAAA,oEAAA,oEAAA,+CAAA,0CAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,yCAAA,2CAAA,2CAAA,2CAAA,4CAAA,uCAAA,sCAAA,sCAAA,sCAAA,sCAAA,sCAAA,sCAAA,sCAAA,sCAAA,sCAAA,wCAAA,wCAAA","sources":["dist/css/utilities/grid.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .column-start-first {\n grid-column-start: 1 !important;\n }\n .column-start-last {\n grid-column-start: -1 !important;\n }\n .column-start-auto {\n grid-column-start: auto !important;\n }\n .column-start-1 {\n grid-column-start: 1 !important;\n }\n .column-start-2 {\n grid-column-start: 2 !important;\n }\n .column-start-3 {\n grid-column-start: 3 !important;\n }\n .column-start-4 {\n grid-column-start: 4 !important;\n }\n .column-start-5 {\n grid-column-start: 5 !important;\n }\n .column-start-6 {\n grid-column-start: 6 !important;\n }\n .column-start-7 {\n grid-column-start: 7 !important;\n }\n .column-start-8 {\n grid-column-start: 8 !important;\n }\n .column-start-9 {\n grid-column-start: 9 !important;\n }\n .column-start-10 {\n grid-column-start: 10 !important;\n }\n .column-start-11 {\n grid-column-start: 11 !important;\n }\n .column-start-12 {\n grid-column-start: 12 !important;\n }\n .column-end-first {\n grid-column-end: 1 !important;\n }\n .column-end-last {\n grid-column-end: -1 !important;\n }\n .column-end-auto {\n grid-column-end: auto !important;\n }\n .column-end-1 {\n grid-column-end: 1 !important;\n }\n .column-end-2 {\n grid-column-end: 2 !important;\n }\n .column-end-3 {\n grid-column-end: 3 !important;\n }\n .column-end-4 {\n grid-column-end: 4 !important;\n }\n .column-end-5 {\n grid-column-end: 5 !important;\n }\n .column-end-6 {\n grid-column-end: 6 !important;\n }\n .column-end-7 {\n grid-column-end: 7 !important;\n }\n .column-end-8 {\n grid-column-end: 8 !important;\n }\n .column-end-9 {\n grid-column-end: 9 !important;\n }\n .column-end-10 {\n grid-column-end: 10 !important;\n }\n .column-end-11 {\n grid-column-end: 11 !important;\n }\n .column-end-12 {\n grid-column-end: 12 !important;\n }\n}\n@layer graupl.utilities {\n .row-start-first {\n grid-row-start: 1 !important;\n }\n .row-start-last {\n grid-row-start: -1 !important;\n }\n .row-start-auto {\n grid-row-start: auto !important;\n }\n .row-start-1 {\n grid-row-start: 1 !important;\n }\n .row-start-2 {\n grid-row-start: 2 !important;\n }\n .row-start-3 {\n grid-row-start: 3 !important;\n }\n .row-start-4 {\n grid-row-start: 4 !important;\n }\n .row-start-5 {\n grid-row-start: 5 !important;\n }\n .row-start-6 {\n grid-row-start: 6 !important;\n }\n .row-start-7 {\n grid-row-start: 7 !important;\n }\n .row-start-8 {\n grid-row-start: 8 !important;\n }\n .row-start-9 {\n grid-row-start: 9 !important;\n }\n .row-start-10 {\n grid-row-start: 10 !important;\n }\n .row-start-11 {\n grid-row-start: 11 !important;\n }\n .row-start-12 {\n grid-row-start: 12 !important;\n }\n .row-end-first {\n grid-row-end: 1 !important;\n }\n .row-end-last {\n grid-row-end: -1 !important;\n }\n .row-end-auto {\n grid-row-end: auto !important;\n }\n .row-end-1 {\n grid-row-end: 1 !important;\n }\n .row-end-2 {\n grid-row-end: 2 !important;\n }\n .row-end-3 {\n grid-row-end: 3 !important;\n }\n .row-end-4 {\n grid-row-end: 4 !important;\n }\n .row-end-5 {\n grid-row-end: 5 !important;\n }\n .row-end-6 {\n grid-row-end: 6 !important;\n }\n .row-end-7 {\n grid-row-end: 7 !important;\n }\n .row-end-8 {\n grid-row-end: 8 !important;\n }\n .row-end-9 {\n grid-row-end: 9 !important;\n }\n .row-end-10 {\n grid-row-end: 10 !important;\n }\n .row-end-11 {\n grid-row-end: 11 !important;\n }\n .row-end-12 {\n grid-row-end: 12 !important;\n }\n}\n@layer graupl.utilities {\n .grid-cols-auto {\n grid-template-columns: auto !important;\n }\n .grid-cols-subgrid {\n grid-template-columns: subgrid !important;\n }\n .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr)) !important;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr)) !important;\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n }\n .grid-cols-5 {\n grid-template-columns: repeat(5, minmax(0, 1fr)) !important;\n }\n .grid-cols-6 {\n grid-template-columns: repeat(6, minmax(0, 1fr)) !important;\n }\n .grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr)) !important;\n }\n .grid-cols-8 {\n grid-template-columns: repeat(8, minmax(0, 1fr)) !important;\n }\n .grid-cols-9 {\n grid-template-columns: repeat(9, minmax(0, 1fr)) !important;\n }\n .grid-cols-10 {\n grid-template-columns: repeat(10, minmax(0, 1fr)) !important;\n }\n .grid-cols-11 {\n grid-template-columns: repeat(11, minmax(0, 1fr)) !important;\n }\n .grid-cols-12 {\n grid-template-columns: repeat(12, minmax(0, 1fr)) !important;\n }\n}\n@layer graupl.utilities {\n .grid-rows-auto {\n grid-template-rows: auto !important;\n }\n .grid-rows-subgrid {\n grid-template-rows: subgrid !important;\n }\n .grid-rows-1 {\n grid-template-rows: repeat(1, minmax(0, 1fr)) !important;\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr)) !important;\n }\n .grid-rows-3 {\n grid-template-rows: repeat(3, minmax(0, 1fr)) !important;\n }\n .grid-rows-4 {\n grid-template-rows: repeat(4, minmax(0, 1fr)) !important;\n }\n .grid-rows-5 {\n grid-template-rows: repeat(5, minmax(0, 1fr)) !important;\n }\n .grid-rows-6 {\n grid-template-rows: repeat(6, minmax(0, 1fr)) !important;\n }\n .grid-rows-7 {\n grid-template-rows: repeat(7, minmax(0, 1fr)) !important;\n }\n .grid-rows-8 {\n grid-template-rows: repeat(8, minmax(0, 1fr)) !important;\n }\n .grid-rows-9 {\n grid-template-rows: repeat(9, minmax(0, 1fr)) !important;\n }\n .grid-rows-10 {\n grid-template-rows: repeat(10, minmax(0, 1fr)) !important;\n }\n .grid-rows-11 {\n grid-template-rows: repeat(11, minmax(0, 1fr)) !important;\n }\n .grid-rows-12 {\n grid-template-rows: repeat(12, minmax(0, 1fr)) !important;\n }\n}\n@layer graupl.utilities {\n .col-span-auto {\n grid-column: span auto !important;\n }\n .col-span-full {\n grid-column: 1 / -1 !important;\n }\n .col-span-1 {\n grid-column: span 1 !important;\n }\n .col-span-2 {\n grid-column: span 2 !important;\n }\n .col-span-3 {\n grid-column: span 3 !important;\n }\n .col-span-4 {\n grid-column: span 4 !important;\n }\n .col-span-5 {\n grid-column: span 5 !important;\n }\n .col-span-6 {\n grid-column: span 6 !important;\n }\n .col-span-7 {\n grid-column: span 7 !important;\n }\n .col-span-8 {\n grid-column: span 8 !important;\n }\n .col-span-9 {\n grid-column: span 9 !important;\n }\n .col-span-10 {\n grid-column: span 10 !important;\n }\n .col-span-11 {\n grid-column: span 11 !important;\n }\n .col-span-12 {\n grid-column: span 12 !important;\n }\n}\n@layer graupl.utilities {\n .row-span-auto {\n grid-row: span auto !important;\n }\n .row-span-full {\n grid-row: 1 / -1 !important;\n }\n .row-span-1 {\n grid-row: span 1 !important;\n }\n .row-span-2 {\n grid-row: span 2 !important;\n }\n .row-span-3 {\n grid-row: span 3 !important;\n }\n .row-span-4 {\n grid-row: span 4 !important;\n }\n .row-span-5 {\n grid-row: span 5 !important;\n }\n .row-span-6 {\n grid-row: span 6 !important;\n }\n .row-span-7 {\n grid-row: span 7 !important;\n }\n .row-span-8 {\n grid-row: span 8 !important;\n }\n .row-span-9 {\n grid-row: span 9 !important;\n }\n .row-span-10 {\n grid-row: span 10 !important;\n }\n .row-span-11 {\n grid-row: span 11 !important;\n }\n .row-span-12 {\n grid-row: span 12 !important;\n }\n}\n@layer graupl.utilities {}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.
|
|
1
|
+
@layer graupl.utilities{.is-auto{inline-size:auto!important}.is-fit-content{inline-size:fit-content!important}.is-max-content{inline-size:max-content!important}.is-min-content{inline-size:min-content!important}.is-stretch{inline-size:stretch!important}.is-full{inline-size:100%!important}.is-quarter{inline-size:25%!important}.is-half{inline-size:50%!important}.is-three-quarters{inline-size:75%!important}.is-third{inline-size:33.3333%!important}.is-two-thirds{inline-size:66.6667%!important}.is-half-screen{inline-size:50vw!important}.is-third-screen{inline-size:33.3333vw!important}.is-two-thirds-screen{inline-size:66.6667vw!important}.is-quarter-screen{inline-size:25vw!important}.is-three-quarters-screen{inline-size:75vw!important}.is-full-screen{inline-size:100vw!important}.is-0{inline-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.is-1{inline-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.is-2{inline-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.is-3{inline-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.is-4{inline-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.is-5{inline-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.is-6{inline-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.is-7{inline-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.is-8{inline-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.is-9{inline-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.is-10{inline-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}.max-is-auto{max-inline-size:auto!important}.max-is-fit-content{max-inline-size:fit-content!important}.max-is-max-content{max-inline-size:max-content!important}.max-is-min-content{max-inline-size:min-content!important}.max-is-stretch{max-inline-size:stretch!important}.max-is-full{max-inline-size:100%!important}.max-is-quarter{max-inline-size:25%!important}.max-is-half{max-inline-size:50%!important}.max-is-three-quarters{max-inline-size:75%!important}.max-is-third{max-inline-size:33.3333%!important}.max-is-two-thirds{max-inline-size:66.6667%!important}.max-is-half-screen{max-inline-size:50vw!important}.max-is-third-screen{max-inline-size:33.3333vw!important}.max-is-two-thirds-screen{max-inline-size:66.6667vw!important}.max-is-quarter-screen{max-inline-size:25vw!important}.max-is-three-quarters-screen{max-inline-size:75vw!important}.max-is-full-screen{max-inline-size:100vw!important}.max-is-0{max-inline-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.max-is-1{max-inline-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.max-is-2{max-inline-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.max-is-3{max-inline-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.max-is-4{max-inline-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.max-is-5{max-inline-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.max-is-6{max-inline-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.max-is-7{max-inline-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.max-is-8{max-inline-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.max-is-9{max-inline-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.max-is-10{max-inline-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}.min-is-auto{min-inline-size:auto!important}.min-is-fit-content{min-inline-size:fit-content!important}.min-is-max-content{min-inline-size:max-content!important}.min-is-min-content{min-inline-size:min-content!important}.min-is-stretch{min-inline-size:stretch!important}.min-is-full{min-inline-size:100%!important}.min-is-quarter{min-inline-size:25%!important}.min-is-half{min-inline-size:50%!important}.min-is-three-quarters{min-inline-size:75%!important}.min-is-third{min-inline-size:33.3333%!important}.min-is-two-thirds{min-inline-size:66.6667%!important}.min-is-half-screen{min-inline-size:50vw!important}.min-is-third-screen{min-inline-size:33.3333vw!important}.min-is-two-thirds-screen{min-inline-size:66.6667vw!important}.min-is-quarter-screen{min-inline-size:25vw!important}.min-is-three-quarters-screen{min-inline-size:75vw!important}.min-is-full-screen{min-inline-size:100vw!important}.min-is-0{min-inline-size:var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))!important}.min-is-1{min-inline-size:var(--graupl-spacer-1,calc(.125 * var(--graupl-spacer,1rem)))!important}.min-is-2{min-inline-size:var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))!important}.min-is-3{min-inline-size:var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))!important}.min-is-4{min-inline-size:var(--graupl-spacer-4,calc(.75 * var(--graupl-spacer,1rem)))!important}.min-is-5{min-inline-size:var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))!important}.min-is-6{min-inline-size:var(--graupl-spacer-6,calc(1.5 * var(--graupl-spacer,1rem)))!important}.min-is-7{min-inline-size:var(--graupl-spacer-7,calc(2 * var(--graupl-spacer,1rem)))!important}.min-is-8{min-inline-size:var(--graupl-spacer-8,calc(3 * var(--graupl-spacer,1rem)))!important}.min-is-9{min-inline-size:var(--graupl-spacer-9,calc(5 * var(--graupl-spacer,1rem)))!important}.min-is-10{min-inline-size:var(--graupl-spacer-10,calc(10 * var(--graupl-spacer,1rem)))!important}}
|
|
2
2
|
/*# sourceMappingURL=inline-size.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyKE,wCAAA,sDAAA,sDAAA,sDAAA,8CAAA,wCAAA,0CAAA,uCAAA,iDAAA,6CAAA,kDAAA,+CAAA,qDAAA,0DAAA,kDAAA,yDAAA,gDAAA,2FAAA,8FAAA,6FAAA,4FAAA,6FAAA,2FAAA,6FAAA,2FAAA,2FAAA,2FAAA,8FAAA,gDAAA,8DAAA,8DAAA,8DAAA,sDAAA,gDAAA,kDAAA,+CAAA,yDAAA,qDAAA,0DAAA,uDAAA,6DAAA,kEAAA,0DAAA,iEAAA,wDAAA,mGAAA,sGAAA,qGAAA,oGAAA,qGAAA,mGAAA,qGAAA,mGAAA,mGAAA,mGAAA,sGAAA,gDAAA,8DAAA,8DAAA,8DAAA,sDAAA,gDAAA,kDAAA,+CAAA,yDAAA,qDAAA,0DAAA,uDAAA,6DAAA,kEAAA,0DAAA,iEAAA,wDAAA,mGAAA,sGAAA,qGAAA,oGAAA,qGAAA,mGAAA,qGAAA,mGAAA,mGAAA,mGAAA","sources":["dist/css/utilities/inline-size.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .inline-auto {\n inline-size: auto !important;\n }\n .inline-fit-content {\n inline-size: fit-content !important;\n }\n .inline-max-content {\n inline-size: max-content !important;\n }\n .inline-min-content {\n inline-size: min-content !important;\n }\n .inline-stretch {\n inline-size: stretch !important;\n }\n .inline-full {\n inline-size: 100% !important;\n }\n .inline-quarter {\n inline-size: 25% !important;\n }\n .inline-half {\n inline-size: 50% !important;\n }\n .inline-three-quarters {\n inline-size: 75% !important;\n }\n .inline-third {\n inline-size: 33.3333333333% !important;\n }\n .inline-two-thirds {\n inline-size: 66.6666666667% !important;\n }\n .inline-half-screen {\n inline-size: 50vw !important;\n }\n .inline-third-screen {\n inline-size: 33.3333333333vw !important;\n }\n .inline-two-thirds-screen {\n inline-size: 66.6666666667vw !important;\n }\n .inline-quarter-screen {\n inline-size: 25vw !important;\n }\n .inline-three-quarters-screen {\n inline-size: 75vw !important;\n }\n .inline-full-screen {\n inline-size: 100vw !important;\n }\n .inline-0 {\n inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-1 {\n inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-2 {\n inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-3 {\n inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-4 {\n inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-5 {\n inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-6 {\n inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-7 {\n inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-8 {\n inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-9 {\n inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .inline-10 {\n inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-auto {\n max-inline-size: auto !important;\n }\n .max-inline-fit-content {\n max-inline-size: fit-content !important;\n }\n .max-inline-max-content {\n max-inline-size: max-content !important;\n }\n .max-inline-min-content {\n max-inline-size: min-content !important;\n }\n .max-inline-stretch {\n max-inline-size: stretch !important;\n }\n .max-inline-full {\n max-inline-size: 100% !important;\n }\n .max-inline-quarter {\n max-inline-size: 25% !important;\n }\n .max-inline-half {\n max-inline-size: 50% !important;\n }\n .max-inline-three-quarters {\n max-inline-size: 75% !important;\n }\n .max-inline-third {\n max-inline-size: 33.3333333333% !important;\n }\n .max-inline-two-thirds {\n max-inline-size: 66.6666666667% !important;\n }\n .max-inline-half-screen {\n max-inline-size: 50vw !important;\n }\n .max-inline-third-screen {\n max-inline-size: 33.3333333333vw !important;\n }\n .max-inline-two-thirds-screen {\n max-inline-size: 66.6666666667vw !important;\n }\n .max-inline-quarter-screen {\n max-inline-size: 25vw !important;\n }\n .max-inline-three-quarters-screen {\n max-inline-size: 75vw !important;\n }\n .max-inline-full-screen {\n max-inline-size: 100vw !important;\n }\n .max-inline-0 {\n max-inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-1 {\n max-inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-2 {\n max-inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-3 {\n max-inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-4 {\n max-inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-5 {\n max-inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-6 {\n max-inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-7 {\n max-inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-8 {\n max-inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-9 {\n max-inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-inline-10 {\n max-inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-auto {\n min-inline-size: auto !important;\n }\n .min-inline-fit-content {\n min-inline-size: fit-content !important;\n }\n .min-inline-max-content {\n min-inline-size: max-content !important;\n }\n .min-inline-min-content {\n min-inline-size: min-content !important;\n }\n .min-inline-stretch {\n min-inline-size: stretch !important;\n }\n .min-inline-full {\n min-inline-size: 100% !important;\n }\n .min-inline-quarter {\n min-inline-size: 25% !important;\n }\n .min-inline-half {\n min-inline-size: 50% !important;\n }\n .min-inline-three-quarters {\n min-inline-size: 75% !important;\n }\n .min-inline-third {\n min-inline-size: 33.3333333333% !important;\n }\n .min-inline-two-thirds {\n min-inline-size: 66.6666666667% !important;\n }\n .min-inline-half-screen {\n min-inline-size: 50vw !important;\n }\n .min-inline-third-screen {\n min-inline-size: 33.3333333333vw !important;\n }\n .min-inline-two-thirds-screen {\n min-inline-size: 66.6666666667vw !important;\n }\n .min-inline-quarter-screen {\n min-inline-size: 25vw !important;\n }\n .min-inline-three-quarters-screen {\n min-inline-size: 75vw !important;\n }\n .min-inline-full-screen {\n min-inline-size: 100vw !important;\n }\n .min-inline-0 {\n min-inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-1 {\n min-inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-2 {\n min-inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-3 {\n min-inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-4 {\n min-inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-5 {\n min-inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-6 {\n min-inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-7 {\n min-inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-8 {\n min-inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-9 {\n min-inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-inline-10 {\n min-inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyKE,oCAAA,kDAAA,kDAAA,kDAAA,0CAAA,oCAAA,sCAAA,mCAAA,6CAAA,yCAAA,8CAAA,2CAAA,iDAAA,sDAAA,8CAAA,qDAAA,4CAAA,uFAAA,0FAAA,yFAAA,wFAAA,yFAAA,uFAAA,yFAAA,uFAAA,uFAAA,uFAAA,0FAAA,4CAAA,0DAAA,0DAAA,0DAAA,kDAAA,4CAAA,8CAAA,2CAAA,qDAAA,iDAAA,sDAAA,mDAAA,yDAAA,8DAAA,sDAAA,6DAAA,oDAAA,+FAAA,kGAAA,iGAAA,gGAAA,iGAAA,+FAAA,iGAAA,+FAAA,+FAAA,+FAAA,kGAAA,4CAAA,0DAAA,0DAAA,0DAAA,kDAAA,4CAAA,8CAAA,2CAAA,qDAAA,iDAAA,sDAAA,mDAAA,yDAAA,8DAAA,sDAAA,6DAAA,oDAAA,+FAAA,kGAAA,iGAAA,gGAAA,iGAAA,+FAAA,iGAAA,+FAAA,+FAAA,+FAAA","sources":["dist/css/utilities/inline-size.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .is-auto {\n inline-size: auto !important;\n }\n .is-fit-content {\n inline-size: fit-content !important;\n }\n .is-max-content {\n inline-size: max-content !important;\n }\n .is-min-content {\n inline-size: min-content !important;\n }\n .is-stretch {\n inline-size: stretch !important;\n }\n .is-full {\n inline-size: 100% !important;\n }\n .is-quarter {\n inline-size: 25% !important;\n }\n .is-half {\n inline-size: 50% !important;\n }\n .is-three-quarters {\n inline-size: 75% !important;\n }\n .is-third {\n inline-size: 33.3333333333% !important;\n }\n .is-two-thirds {\n inline-size: 66.6666666667% !important;\n }\n .is-half-screen {\n inline-size: 50vw !important;\n }\n .is-third-screen {\n inline-size: 33.3333333333vw !important;\n }\n .is-two-thirds-screen {\n inline-size: 66.6666666667vw !important;\n }\n .is-quarter-screen {\n inline-size: 25vw !important;\n }\n .is-three-quarters-screen {\n inline-size: 75vw !important;\n }\n .is-full-screen {\n inline-size: 100vw !important;\n }\n .is-0 {\n inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-1 {\n inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-2 {\n inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-3 {\n inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-4 {\n inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-5 {\n inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-6 {\n inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-7 {\n inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-8 {\n inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-9 {\n inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .is-10 {\n inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-auto {\n max-inline-size: auto !important;\n }\n .max-is-fit-content {\n max-inline-size: fit-content !important;\n }\n .max-is-max-content {\n max-inline-size: max-content !important;\n }\n .max-is-min-content {\n max-inline-size: min-content !important;\n }\n .max-is-stretch {\n max-inline-size: stretch !important;\n }\n .max-is-full {\n max-inline-size: 100% !important;\n }\n .max-is-quarter {\n max-inline-size: 25% !important;\n }\n .max-is-half {\n max-inline-size: 50% !important;\n }\n .max-is-three-quarters {\n max-inline-size: 75% !important;\n }\n .max-is-third {\n max-inline-size: 33.3333333333% !important;\n }\n .max-is-two-thirds {\n max-inline-size: 66.6666666667% !important;\n }\n .max-is-half-screen {\n max-inline-size: 50vw !important;\n }\n .max-is-third-screen {\n max-inline-size: 33.3333333333vw !important;\n }\n .max-is-two-thirds-screen {\n max-inline-size: 66.6666666667vw !important;\n }\n .max-is-quarter-screen {\n max-inline-size: 25vw !important;\n }\n .max-is-three-quarters-screen {\n max-inline-size: 75vw !important;\n }\n .max-is-full-screen {\n max-inline-size: 100vw !important;\n }\n .max-is-0 {\n max-inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-1 {\n max-inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-2 {\n max-inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-3 {\n max-inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-4 {\n max-inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-5 {\n max-inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-6 {\n max-inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-7 {\n max-inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-8 {\n max-inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-9 {\n max-inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-is-10 {\n max-inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-auto {\n min-inline-size: auto !important;\n }\n .min-is-fit-content {\n min-inline-size: fit-content !important;\n }\n .min-is-max-content {\n min-inline-size: max-content !important;\n }\n .min-is-min-content {\n min-inline-size: min-content !important;\n }\n .min-is-stretch {\n min-inline-size: stretch !important;\n }\n .min-is-full {\n min-inline-size: 100% !important;\n }\n .min-is-quarter {\n min-inline-size: 25% !important;\n }\n .min-is-half {\n min-inline-size: 50% !important;\n }\n .min-is-three-quarters {\n min-inline-size: 75% !important;\n }\n .min-is-third {\n min-inline-size: 33.3333333333% !important;\n }\n .min-is-two-thirds {\n min-inline-size: 66.6666666667% !important;\n }\n .min-is-half-screen {\n min-inline-size: 50vw !important;\n }\n .min-is-third-screen {\n min-inline-size: 33.3333333333vw !important;\n }\n .min-is-two-thirds-screen {\n min-inline-size: 66.6666666667vw !important;\n }\n .min-is-quarter-screen {\n min-inline-size: 25vw !important;\n }\n .min-is-three-quarters-screen {\n min-inline-size: 75vw !important;\n }\n .min-is-full-screen {\n min-inline-size: 100vw !important;\n }\n .min-is-0 {\n min-inline-size: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-1 {\n min-inline-size: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-2 {\n min-inline-size: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-3 {\n min-inline-size: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-4 {\n min-inline-size: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-5 {\n min-inline-size: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-6 {\n min-inline-size: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-7 {\n min-inline-size: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-8 {\n min-inline-size: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-9 {\n min-inline-size: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-is-10 {\n min-inline-size: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core utility mixins.\n//\n// Mixins to help generate utility classes.\n\n@use \"./screen\";\n@use \"./container\";\n@use \"./state\";\n@use \"./theme\";\n@use \"../functions/important\";\n@use \"../functions/utility\";\n@use \"../defaults\" as root-defaults;\n@use \"../theme/color/defaults\" as color-defaults;\n@use \"sass:map\";\n@use \"sass:string\";\n\n/// Insert a map of properties and values into a utility class.\n///\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin _insert($map, $important: null) {\n @each $prop, $value in $map {\n // Do not attempt to insert important values inside of custom properties.\n @if string.slice($prop, 1, 2) != \"--\" {\n #{$prop}: important.insert(#{$value}, $override: $important);\n } @else {\n #{$prop}: #{$value};\n }\n }\n\n // Allow for custom overrides and additional styles.\n @content;\n}\n\n/// Handles wrapping utilities with a conditional state.\n///\n/// @param {?string} $state\n/// The state to wrap.\n@mixin _handle-state($state: null) {\n @if $state {\n @include state.state($state) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional screen.\n///\n/// @param {?string} $screen\n/// The screen to wrap.\n@mixin _handle-screen($screen: null) {\n @if $screen {\n @include screen.up($screen) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional container.\n///\n/// @param {?string} $container\n/// The container to wrap.\n@mixin _handle-container($container: null) {\n @if $container {\n @include container.up($container) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional theme.\n///\n/// @param {?string} $theme\n/// The theme mode to wrap.\n@mixin _handle-theme($theme: null) {\n @if $theme {\n @include theme.theme($theme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Handles wrapping utilities with a conditional scheme.\n///\n/// @param {?string} $scheme\n/// The scheme mode to wrap.\n@mixin _handle-scheme($scheme: null) {\n @if $scheme {\n @include theme.scheme($scheme) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n/// Create a utility class with a list of properties and a single value.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {string|List} $property\n/// The property/properties to apply to the selector.\n/// @param {string} $value\n/// The value to apply to the property/properties.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create(\n $selector,\n $property,\n $value,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n $map: utility.convert-property-values-to-map($property, $value);\n\n @include create-mapped(\n $selector,\n $map,\n $important: $important,\n $screen: $screen,\n $theme: $theme,\n $scheme: $scheme,\n $state: $state,\n $container: $container\n ) {\n @content;\n }\n}\n\n/// Create a utility class with a map of properties and values.\n///\n/// @param {string} $selector\n/// The selector to apply the utility class to.\n/// @param {Map} $map\n/// The map of properties and values to apply to the selector.\n/// @param {?Boolean} $important\n/// A flag to determine if the important flag should be added.\n/// @param {?string} $screen\n/// The screen to apply the utility class to.\n/// @param {?string} $theme\n/// The theme to apply the utility class to.\n/// @param {?string} $scheme\n/// The scheme mode to apply the utility class to.\n/// @param {?string} $state\n/// The state to apply the utility class to.\n@mixin create-mapped(\n $selector,\n $map,\n $important: null,\n $screen: null,\n $theme: null,\n $scheme: null,\n $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\n @include _handle-scheme($scheme) {\n #{$selector} {\n @if $screen or $container {\n @if $screen {\n @include _handle-screen($screen) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n\n @if $container {\n @include _handle-container($container) {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n } @else {\n @include _handle-state($state) {\n @include _insert($map, $important) {\n @content;\n }\n }\n }\n }\n }\n }\n}\n\n/// Create a suite of utilities for all base and responsive classes.\n///\n/// Takes a utility map that is generated by the generate-utility-map() function.\n///\n/// @param {?Map} $map [()]\n/// The utility map.\n/// @param {?string} $selector-base [root-defaults.$utility-selector-base]\n/// The selector base to use for all generated utilities.\n/// @param {?string} $selector-prefix [root-defaults.$utility-selector-prefix]\n/// The selector prefix to use for all generated utilities.\n/// @param {?string} $selector-suffix [root-defaults.$utility-selector-suffix]\n/// The selector suffix to use for all generated utilities.\n/// @param {?Boolean} $screen-aware [false]\n/// A flag to enable screen-aware utility generation.\n/// @param {?string} $screen-aware-selector-prefix [root-defaults.$utility-screen-aware-selector-prefix]\n/// The selector base to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-suffix [root-defaults.$utility-screen-aware-selector-suffix]\n/// The selector prefix to use for all generated screen-aware utilities.\n/// @param {?string} $screen-aware-selector-separator [root-defaults.$utility-screen-aware-selector-separator]\n/// The selector suffix to use for all generated screen-aware utilities.\n/// @param {?Boolean} $theme-aware [false]\n/// A flag to enable theme-aware utility generation.\n/// @param {?string} $theme-aware-selector-prefix [root-defaults.$utility-theme-aware-selector-prefix]\n/// The selector base to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-suffix [root-defaults.$utility-theme-aware-selector-suffix]\n/// The selector prefix to use for all generated theme-aware utilities.\n/// @param {?string} $theme-aware-selector-separator [root-defaults.$utility-theme-aware-selector-separator]\n/// The selector suffix to use for all generated theme-aware utilities.\n/// @param {?Boolean} $scheme-aware [false]\n/// A flag to enable scheme-aware utility generation.\n/// @param {?string} $scheme-aware-selector-prefix [root-defaults.$utility-scheme-aware-selector-prefix]\n/// The selector base to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-suffix [root-defaults.$utility-scheme-aware-selector-suffix]\n/// The selector prefix to use for all generated scheme-aware utilities.\n/// @param {?string} $scheme-aware-selector-separator [root-defaults.$utility-scheme-aware-selector-separator]\n/// The selector suffix to use for all generated scheme-aware utilities.\n/// @param {?Boolean} $state-aware [false]\n/// A flag to enable state-aware utility generation.\n/// @param {?string} $state-aware-selector-prefix [root-defaults.$utility-state-aware-selector-prefix]\n/// The selector base to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-suffix [root-defaults.$utility-state-aware-selector-suffix]\n/// The selector prefix to use for all generated state-aware utilities.\n/// @param {?string} $state-aware-selector-separator [root-defaults.$utility-state-aware-selector-separator]\n/// The selector suffix to use for all generated state-aware utilities.\n/// @param {?Boolean} $container-aware [false]\n/// A flag to enable container-aware utility generation.\n/// @param {?string} $container-aware-selector-prefix [root-defaults.$utility-container-aware-selector-prefix]\n/// The selector base to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-suffix [root-defaults.$utility-container-aware-selector-suffix]\n/// The selector prefix to use for all generated container-aware utilities.\n/// @param {?string} $container-aware-selector-separator [root-defaults.$utility-container-aware-selector-separator]\n/// The selector suffix to use for all generated container-aware utilities.\n/// @param {?Boolean} $important [root-defaults.$use-important]\n/// A flag to determine if the important flag should be added to all utility properties.\n@mixin generate(\n $map: (),\n $selector-base: root-defaults.$utility-selector-base,\n $selector-prefix: root-defaults.$utility-selector-prefix,\n $selector-suffix: root-defaults.$utility-selector-suffix,\n $screen-aware: false,\n $screen-aware-selector-prefix:\n root-defaults.$utility-screen-aware-selector-prefix,\n $screen-aware-selector-suffix:\n root-defaults.$utility-screen-aware-selector-suffix,\n $screen-aware-selector-separator:\n root-defaults.$utility-screen-aware-selector-separator,\n $theme-aware: false,\n $theme-aware-selector-prefix:\n root-defaults.$utility-theme-aware-selector-prefix,\n $theme-aware-selector-suffix:\n root-defaults.$utility-theme-aware-selector-suffix,\n $theme-aware-selector-separator:\n root-defaults.$utility-theme-aware-selector-separator,\n $scheme-aware: false,\n $scheme-aware-selector-prefix:\n root-defaults.$utility-scheme-aware-selector-prefix,\n $scheme-aware-selector-suffix:\n root-defaults.$utility-scheme-aware-selector-suffix,\n $scheme-aware-selector-separator:\n root-defaults.$utility-scheme-aware-selector-separator,\n $state-aware: false,\n $state-aware-selector-prefix:\n root-defaults.$utility-state-aware-selector-prefix,\n $state-aware-selector-suffix:\n root-defaults.$utility-state-aware-selector-suffix,\n $state-aware-selector-separator:\n root-defaults.$utility-state-aware-selector-separator,\n $container-aware: false,\n $container-aware-selector-prefix:\n root-defaults.$utility-container-aware-selector-prefix,\n $container-aware-selector-suffix:\n root-defaults.$utility-container-aware-selector-suffix,\n $container-aware-selector-separator:\n root-defaults.$utility-container-aware-selector-separator,\n $important: root-defaults.$use-important\n) {\n $utility-selector-prefix: $selector-base;\n\n // Generate all base utilities.\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important\n ) {\n @content ($selector, $properties, $responsive-name: null, $responsive-type: null);\n }\n }\n\n // Generate screen-aware utilities.\n @if $screen-aware and root-defaults.$screen-aware-utilities {\n @each $screen-name in map.keys(root-defaults.$screen-sizes) {\n // e.g. `.md:` or `.lg:`\n $utility-selector-prefix: #{$selector-base}#{$screen-aware-selector-prefix}#{$screen-name}#{$screen-aware-selector-suffix}#{$screen-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $screen: $screen-name\n ) {\n @content ($selector, $properties, $responsive-name: $screen-name, $responsive-type: \"screen\");\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if $theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name in color-defaults.$themes {\n // e.g. `.default-theme:`\n $utility-selector-prefix: #{$selector-base}#{$theme-aware-selector-prefix}#{$theme-name}#{$theme-aware-selector-suffix}#{$theme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $theme: $theme-name\n ) {\n @content ($selector, $properties, $responsive-name: $theme-name, $responsive-type: \"theme\");\n }\n }\n }\n }\n\n // Generate scheme-aware utilities.\n @if $scheme-aware and root-defaults.$scheme-aware-utilities {\n @each $scheme-name in color-defaults.$schemes {\n // e.g. `.light-mode:` or `.dark-mode:`\n $utility-selector-prefix: #{$selector-base}#{$scheme-aware-selector-prefix}#{$scheme-name}#{$scheme-aware-selector-suffix}#{$scheme-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $scheme: $scheme-name\n ) {\n @content ($selector, $properties, $responsive-name: $scheme-name, $responsive-type: \"scheme\");\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if $state-aware and root-defaults.$state-aware-utilities {\n @each $state-name in root-defaults.$state-selectors {\n // e.g. `.hover:` or `.focus:`\n $utility-selector-prefix: #{$selector-base}#{$state-aware-selector-prefix}#{$state-name}#{$state-aware-selector-suffix}#{$state-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $state: $state-name\n ) {\n @content ($selector, $properties, $responsive-name: $state-name, $responsive-type: \"state\");\n }\n }\n }\n }\n\n // Generate container-aware utilities.\n @if $container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.cq:md:` or `.cq:lg:`\n $utility-selector-prefix: #{$selector-base}#{$container-aware-selector-prefix}#{$container-name}#{$container-aware-selector-suffix}#{$container-aware-selector-separator};\n\n @each $selector, $properties in $map {\n $utility-selector: #{$selector-prefix}#{$selector}#{$selector-suffix};\n\n @include create-mapped(\n #{$utility-selector-prefix}#{$utility-selector},\n $properties,\n $important,\n $container: $container-name\n ) {\n @content ($selector, $properties, $responsive-name: $container-name, $responsive-type: \"container\");\n }\n }\n }\n }\n}\n"],"names":[]}
|