@graupl/graupl 1.0.0-beta.22 → 1.0.0-beta.24
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/base/button.css +2 -2
- package/dist/css/base/button.css.map +1 -1
- package/dist/css/base/form.css +2 -2
- package/dist/css/base/form.css.map +1 -1
- package/dist/css/base/link.css +2 -2
- package/dist/css/base/link.css.map +1 -1
- package/dist/css/base/table.css +2 -2
- package/dist/css/base/table.css.map +1 -1
- package/dist/css/base.css +2 -2
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/accordion.css +2 -5
- package/dist/css/component/accordion.css.map +1 -1
- package/dist/css/component/alert.css +2 -2
- package/dist/css/component/alert.css.map +1 -1
- package/dist/css/component/badge.css +2 -2
- package/dist/css/component/badge.css.map +1 -1
- package/dist/css/component/card.css +2 -2
- package/dist/css/component/card.css.map +1 -1
- package/dist/css/component/carousel.css +2 -2
- package/dist/css/component/carousel.css.map +1 -1
- package/dist/css/component/disclosure.css +2 -2
- package/dist/css/component/disclosure.css.map +1 -1
- package/dist/css/component/input-group.css +2 -2
- package/dist/css/component/input-group.css.map +1 -1
- package/dist/css/component/list.css +2 -2
- package/dist/css/component/list.css.map +1 -1
- package/dist/css/component/menu.css +2 -2
- package/dist/css/component/menu.css.map +1 -1
- package/dist/css/component/navigation.css +2 -2
- package/dist/css/component/navigation.css.map +1 -1
- package/dist/css/component.css +2 -5
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +2 -5
- package/dist/css/graupl.css.map +1 -1
- package/dist/css/init.css +2 -2
- package/dist/css/init.css.map +1 -1
- package/dist/css/layout/columns.css +2 -2
- package/dist/css/layout/columns.css.map +1 -1
- package/dist/css/layout/container.css +2 -2
- package/dist/css/layout/container.css.map +1 -1
- package/dist/css/layout/flex-columns.css +2 -2
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +2 -5
- package/dist/css/layout.css.map +1 -1
- package/dist/css/normalize.css +2 -2
- package/dist/css/normalize.css.map +1 -1
- package/dist/css/state/focus.css +2 -2
- package/dist/css/state/focus.css.map +1 -1
- package/dist/css/state.css +2 -2
- package/dist/css/state.css.map +1 -1
- package/dist/css/theme/color.css +2 -2
- package/dist/css/theme/color.css.map +1 -1
- package/dist/css/theme/typography.css +2 -2
- package/dist/css/theme/typography.css.map +1 -1
- package/dist/css/theme.css +2 -2
- package/dist/css/theme.css.map +1 -1
- package/dist/css/utilities/alignment.css +1 -1
- package/dist/css/utilities/alignment.css.map +1 -1
- package/dist/css/utilities/background.css +2 -2
- package/dist/css/utilities/background.css.map +1 -1
- package/dist/css/utilities/border.css +2 -2
- package/dist/css/utilities/border.css.map +1 -1
- package/dist/css/utilities/color.css +2 -2
- package/dist/css/utilities/color.css.map +1 -1
- package/dist/css/utilities/container.css +1 -1
- package/dist/css/utilities/container.css.map +1 -1
- package/dist/css/utilities/display.css +2 -2
- package/dist/css/utilities/display.css.map +1 -1
- package/dist/css/utilities/flex.css +2 -2
- package/dist/css/utilities/flex.css.map +1 -1
- package/dist/css/utilities/gradient.css +2 -2
- package/dist/css/utilities/gradient.css.map +1 -1
- package/dist/css/utilities/height.css +2 -2
- package/dist/css/utilities/height.css.map +1 -1
- package/dist/css/utilities/inset.css +2 -2
- package/dist/css/utilities/inset.css.map +1 -1
- package/dist/css/utilities/justification.css +1 -1
- package/dist/css/utilities/justification.css.map +1 -1
- package/dist/css/utilities/list.css +1 -1
- package/dist/css/utilities/list.css.map +1 -1
- package/dist/css/utilities/order.css +2 -2
- package/dist/css/utilities/order.css.map +1 -1
- package/dist/css/utilities/position.css +2 -2
- package/dist/css/utilities/position.css.map +1 -1
- package/dist/css/utilities/ratio.css +2 -2
- package/dist/css/utilities/ratio.css.map +1 -1
- package/dist/css/utilities/spacing.css +2 -2
- package/dist/css/utilities/spacing.css.map +1 -1
- package/dist/css/utilities/typography.css +2 -2
- package/dist/css/utilities/typography.css.map +1 -1
- package/dist/css/utilities/visibility.css +2 -2
- package/dist/css/utilities/visibility.css.map +1 -1
- package/dist/css/utilities/visually-hidden.css +2 -2
- package/dist/css/utilities/visually-hidden.css.map +1 -1
- package/dist/css/utilities/width.css +2 -2
- package/dist/css/utilities/width.css.map +1 -1
- package/dist/css/utilities/z-index.css +1 -1
- package/dist/css/utilities/z-index.css.map +1 -1
- package/dist/css/utilities.css +2 -2
- package/dist/css/utilities.css.map +1 -1
- package/dist/js/accordion.js.map +1 -1
- package/dist/js/alert.js.map +1 -1
- package/dist/js/carousel.js.map +1 -1
- package/dist/js/component/accordion.cjs.js.map +1 -1
- package/dist/js/component/accordion.es.js.map +1 -1
- package/dist/js/component/accordion.iife.js.map +1 -1
- package/dist/js/component/alert.cjs.js.map +1 -1
- package/dist/js/component/alert.es.js.map +1 -1
- package/dist/js/component/alert.iife.js.map +1 -1
- package/dist/js/component/carousel.cjs.js.map +1 -1
- package/dist/js/component/carousel.es.js.map +1 -1
- package/dist/js/component/carousel.iife.js.map +1 -1
- package/dist/js/component/disclosure.cjs.js +2 -2
- package/dist/js/component/disclosure.cjs.js.map +1 -1
- package/dist/js/component/disclosure.es.js +2 -2
- package/dist/js/component/disclosure.es.js.map +1 -1
- package/dist/js/component/disclosure.iife.js +2 -2
- package/dist/js/component/disclosure.iife.js.map +1 -1
- package/dist/js/component/tabs.cjs.js +5 -0
- package/dist/js/component/tabs.cjs.js.map +1 -0
- package/dist/js/component/tabs.es.js +5 -0
- package/dist/js/component/tabs.es.js.map +1 -0
- package/dist/js/component/tabs.iife.js +5 -0
- package/dist/js/component/tabs.iife.js.map +1 -0
- package/dist/js/disclosure.js +2 -2
- package/dist/js/disclosure.js.map +1 -1
- package/dist/js/generator/accordion.cjs.js.map +1 -1
- package/dist/js/generator/accordion.es.js.map +1 -1
- package/dist/js/generator/accordion.iife.js.map +1 -1
- package/dist/js/generator/alert.cjs.js.map +1 -1
- package/dist/js/generator/alert.es.js.map +1 -1
- package/dist/js/generator/alert.iife.js.map +1 -1
- package/dist/js/generator/carousel.cjs.js.map +1 -1
- package/dist/js/generator/carousel.es.js.map +1 -1
- package/dist/js/generator/carousel.iife.js.map +1 -1
- package/dist/js/generator/disclosure.cjs.js +2 -2
- package/dist/js/generator/disclosure.cjs.js.map +1 -1
- package/dist/js/generator/disclosure.es.js +2 -2
- package/dist/js/generator/disclosure.es.js.map +1 -1
- package/dist/js/generator/disclosure.iife.js +2 -2
- package/dist/js/generator/disclosure.iife.js.map +1 -1
- package/dist/js/generator/navigation.cjs.js.map +1 -1
- package/dist/js/generator/navigation.es.js.map +1 -1
- package/dist/js/generator/navigation.iife.js.map +1 -1
- package/dist/js/generator/tabs.cjs.js +5 -0
- package/dist/js/generator/tabs.cjs.js.map +1 -0
- package/dist/js/generator/tabs.es.js +5 -0
- package/dist/js/generator/tabs.es.js.map +1 -0
- package/dist/js/generator/tabs.iife.js +5 -0
- package/dist/js/generator/tabs.iife.js.map +1 -0
- package/dist/js/graupl.js +5 -5
- package/dist/js/graupl.js.map +1 -1
- package/dist/js/navigation.js.map +1 -1
- package/dist/js/tabs.js +5 -0
- package/dist/js/tabs.js.map +1 -0
- package/package.json +6 -11
- package/scss/base/button.scss +1 -1
- package/scss/base/form.scss +1 -1
- package/scss/base/link.scss +1 -1
- package/scss/base/table.scss +1 -1
- package/scss/base.scss +1 -1
- package/scss/component/accordion.scss +1 -1
- package/scss/component/alert.scss +1 -1
- package/scss/component/badge.scss +1 -1
- package/scss/component/card.scss +1 -1
- package/scss/component/carousel.scss +1 -1
- package/scss/component/disclosure.scss +1 -1
- package/scss/component/input-group.scss +1 -1
- package/scss/component/list.scss +1 -1
- package/scss/component/menu.scss +1 -1
- package/scss/component/navigation.scss +1 -1
- package/scss/component.scss +1 -1
- package/scss/graupl.scss +1 -1
- package/scss/init.scss +1 -1
- package/scss/layout/columns.scss +1 -1
- package/scss/layout/container.scss +1 -1
- package/scss/layout/flex-columns.scss +1 -1
- package/scss/layout.scss +1 -1
- package/scss/normalize.scss +1 -1
- package/scss/state/focus.scss +1 -1
- package/scss/state.scss +1 -1
- package/scss/theme/color.scss +1 -1
- package/scss/theme/typography.scss +1 -1
- package/scss/theme.scss +1 -1
- package/scss/utilities/alignment.scss +1 -1
- package/scss/utilities/background.scss +1 -1
- package/scss/utilities/border.scss +1 -1
- package/scss/utilities/color.scss +1 -1
- package/scss/utilities/container.scss +1 -1
- package/scss/utilities/display.scss +1 -1
- package/scss/utilities/flex.scss +1 -1
- package/scss/utilities/gradient.scss +1 -1
- package/scss/utilities/height.scss +1 -1
- package/scss/utilities/inset.scss +1 -1
- package/scss/utilities/justification.scss +1 -1
- package/scss/utilities/list.scss +1 -1
- package/scss/utilities/order.scss +1 -1
- package/scss/utilities/position.scss +1 -1
- package/scss/utilities/ratio.scss +1 -1
- package/scss/utilities/spacing.scss +1 -1
- package/scss/utilities/typography.scss +1 -1
- package/scss/utilities/visibility.scss +1 -1
- package/scss/utilities/visually-hidden.scss +1 -1
- package/scss/utilities/width.scss +1 -1
- package/scss/utilities/z-index.scss +1 -1
- package/scss/utilities.scss +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.text-paragraph{
|
|
2
|
-
/*# sourceMappingURL=typography.css.map */
|
|
1
|
+
@layer graupl.utilities{.text-paragraph{margin:var(--graupl-paragraph-margin,0 0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0)!important;font-size:var(--graupl-paragraph-font-size,var(--graupl-body-font-size,var(--graupl-font-base,calc(1*var(--graupl-font-size-base,1rem)))))!important;font-weight:var(--graupl-paragraph-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)))!important;line-height:var(--graupl-paragraph-line-height,var(--graupl-body-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-paragraph-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))!important}.text-small{margin:var(--graupl-small-margin,0 0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0)!important;font-size:var(--graupl-small-font-size,var(--graupl-font-sm,calc(.833*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-small-font-weight,var(--graupl-body-font-weight,var(--graupl-font-weight-normal,400)))!important;line-height:var(--graupl-small-line-height,var(--graupl-line-height,1.2em))!important;color:var(--graupl-small-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))))!important}.text-h1{margin:var(--graupl-h1-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h1-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h1-font-size,var(--graupl-font-5xl,calc(2.986*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h1-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h1-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h1-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-h2{margin:var(--graupl-h2-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h2-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h2-font-size,var(--graupl-font-4xl,calc(2.488*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h2-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h2-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h2-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-h3{margin:var(--graupl-h3-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h3-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h3-font-size,var(--graupl-font-3xl,calc(2.074*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h3-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h3-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h3-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-h4{margin:var(--graupl-h4-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h4-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(1.728*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h4-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-h5{margin:var(--graupl-h5-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h5-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h5-font-size,var(--graupl-font-xl,calc(1.44*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h5-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h5-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h5-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-h6{margin:var(--graupl-h6-margin,var(--graupl-heading-margin,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))0 var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))0))!important;font-family:var(--graupl-h6-font-family,var(--graupl-heading-font-family,var(--graupl-root-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif)))!important;font-size:var(--graupl-h6-font-size,var(--graupl-font-lg,calc(1.2*var(--graupl-font-size-base,1rem))))!important;font-weight:var(--graupl-h6-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700))))!important;line-height:var(--graupl-h6-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,1.2em)))!important;color:var(--graupl-h6-color,var(--graupl-heading-color,var(--graupl-body-color,var(--graupl-color,var(--graupl-root-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))))))!important}.text-xs{font-size:var(--graupl-font-xs,calc(.694*var(--graupl-font-size-base,1rem)))!important}.text-sm{font-size:var(--graupl-font-sm,calc(.833*var(--graupl-font-size-base,1rem)))!important}.text-base{font-size:var(--graupl-font-base,calc(1*var(--graupl-font-size-base,1rem)))!important}.text-lg{font-size:var(--graupl-font-lg,calc(1.2*var(--graupl-font-size-base,1rem)))!important}.text-xl{font-size:var(--graupl-font-xl,calc(1.44*var(--graupl-font-size-base,1rem)))!important}.text-2xl{font-size:var(--graupl-font-2xl,calc(1.728*var(--graupl-font-size-base,1rem)))!important}.text-3xl{font-size:var(--graupl-font-3xl,calc(2.074*var(--graupl-font-size-base,1rem)))!important}.text-4xl{font-size:var(--graupl-font-4xl,calc(2.488*var(--graupl-font-size-base,1rem)))!important}.text-5xl{font-size:var(--graupl-font-5xl,calc(2.986*var(--graupl-font-size-base,1rem)))!important}.font-weight-light{font-weight:var(--graupl-font-weight-light,300)!important}.font-weight-normal{font-weight:var(--graupl-font-weight-normal,400)!important}.font-weight-bold{font-weight:var(--graupl-font-weight-bold,700)!important}.font-normal{font-style:normal!important}.font-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}.text-none{text-transform:none!important}}
|
|
2
|
+
/*# sourceMappingURL=typography.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/mixins/_utility.scss","typography.css"],"names":[],"mappings":"AASI,wBCiJA,gBAnIE,uOAAA,CAAA,qJAAA,CAAA,6HAAA,CAAA,wHAAA,CAAA,iHCfJ,CDkJE,YAnIE,mOAAA,CAAA,qHAAA,CAAA,yHAAA,CAAA,qFAAA,CAAA,6GCRJ,CD2IE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,oHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCAJ,CDmIE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,oHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCQJ,CD2HE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,oHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCgBJ,CDmHE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,oHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCwBJ,CD2GE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,kHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCgCJ,CDmGE,SAnIE,4PAAA,CAAA,8MAAA,CAAA,iHAAA,CAAA,sJAAA,CAAA,oHAAA,CAAA,+LCwCJ,CD2FE,SAnIE,uFC2CJ,CDwFE,SAnIE,uFC8CJ,CDqFE,WAnIE,sFCiDJ,CDkFE,SAnIE,sFCoDJ,CD+EE,SAnIE,uFCuDJ,CD4EE,UAnIE,yFC0DJ,CDyEE,UAnIE,yFC6DJ,CDsEE,UAnIE,yFCgEJ,CDmEE,UAnIE,yFCmEJ,CDgEE,mBAnIE,yDCsEJ,CD6DE,oBAnIE,0DCyEJ,CD0DE,kBAnIE,wDC4EJ,CDuDE,aAnIE,2BC+EJ,CDoDE,aAnIE,2BCkFJ,CDiDE,gBAnIE,kCCqFJ,CD8CE,gBAnIE,kCCwFJ,CD2CE,iBAnIE,mCC2FJ,CDwCE,WAnIE,6BC8FJ,CACF","file":"typography.css"}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AESI,wBCiJA,ovBAAA,iqBAAA,ihCAAA,ihCAAA,ihCAAA,ihCAAA,+gCAAA,8gCAAA,gGAAA,gGAAA,iGAAA,+FAAA,gGAAA,mGAAA,mGAAA,mGAAA,mGAAA,6EAAA,+EAAA,2EAAA,yCAAA,yCAAA,mDAAA,mDAAA,qDAAA","sources":["dist/css/utilities/typography.css","var/www/html/node_modules/@graupl/core/src/scss/theme/typography/_defaults.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.utilities {\n .text-paragraph {\n margin: var(--graupl-paragraph-margin, 0 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0) !important;\n font-size: var(--graupl-paragraph-font-size, var(--graupl-body-font-size, var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))))) !important;\n font-weight: var(--graupl-paragraph-font-weight, var(--graupl-body-font-weight, var(--graupl-font-weight-normal, 400))) !important;\n line-height: var(--graupl-paragraph-line-height, var(--graupl-body-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-paragraph-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))) !important;\n }\n .text-small {\n margin: var(--graupl-small-margin, 0 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0) !important;\n font-size: var(--graupl-small-font-size, var(--graupl-font-sm, calc(0.833 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-small-font-weight, var(--graupl-body-font-weight, var(--graupl-font-weight-normal, 400))) !important;\n line-height: var(--graupl-small-line-height, var(--graupl-line-height, 1.2em)) !important;\n color: var(--graupl-small-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))))))) !important;\n }\n .text-h1 {\n margin: var(--graupl-h1-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h1-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h1-font-size, var(--graupl-font-5xl, calc(2.986 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h1-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h1-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h1-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-h2 {\n margin: var(--graupl-h2-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h2-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h2-font-size, var(--graupl-font-4xl, calc(2.488 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h2-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h2-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h2-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-h3 {\n margin: var(--graupl-h3-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h3-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h3-font-size, var(--graupl-font-3xl, calc(2.074 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h3-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h3-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h3-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-h4 {\n margin: var(--graupl-h4-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h4-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h4-font-size, var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h4-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h4-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h4-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-h5 {\n margin: var(--graupl-h5-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h5-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h5-font-size, var(--graupl-font-xl, calc(1.44 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h5-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h5-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h5-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-h6 {\n margin: var(--graupl-h6-margin, var(--graupl-heading-margin, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) 0 var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) 0)) !important;\n font-family: var(--graupl-h6-font-family, var(--graupl-heading-font-family, var(--graupl-root-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif))) !important;\n font-size: var(--graupl-h6-font-size, var(--graupl-font-lg, calc(1.2 * var(--graupl-font-size-base, 1rem)))) !important;\n font-weight: var(--graupl-h6-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))) !important;\n line-height: var(--graupl-h6-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, 1.2em))) !important;\n color: var(--graupl-h6-color, var(--graupl-heading-color, var(--graupl-body-color, var(--graupl-color, var(--graupl-root-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))))))) !important;\n }\n .text-xs {\n font-size: var(--graupl-font-xs, calc(0.694 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-sm {\n font-size: var(--graupl-font-sm, calc(0.833 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-base {\n font-size: var(--graupl-font-base, calc(1 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-lg {\n font-size: var(--graupl-font-lg, calc(1.2 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-xl {\n font-size: var(--graupl-font-xl, calc(1.44 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-2xl {\n font-size: var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-3xl {\n font-size: var(--graupl-font-3xl, calc(2.074 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-4xl {\n font-size: var(--graupl-font-4xl, calc(2.488 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .text-5xl {\n font-size: var(--graupl-font-5xl, calc(2.986 * var(--graupl-font-size-base, 1rem))) !important;\n }\n .font-weight-light {\n font-weight: var(--graupl-font-weight-light, 300) !important;\n }\n .font-weight-normal {\n font-weight: var(--graupl-font-weight-normal, 400) !important;\n }\n .font-weight-bold {\n font-weight: var(--graupl-font-weight-bold, 700) !important;\n }\n .font-normal {\n font-style: normal !important;\n }\n .font-italic {\n font-style: italic !important;\n }\n .text-uppercase {\n text-transform: uppercase !important;\n }\n .text-lowercase {\n text-transform: lowercase !important;\n }\n .text-capitalize {\n text-transform: capitalize !important;\n }\n .text-none {\n text-transform: none !important;\n }\n}","// @graupl/core typography theme default values.\n//\n// Generally, these should not be used directly when styling components unless a static value is needed.\n// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.\n//\n// They should not be used to define direct property values (i.e. font-size, color, etc.).\n// Those should be defined as custom properties in the `_variables.scss` file.\n\n@use \"../../defaults\" as root-defaults;\n@use \"sass:map\";\n\n// font properties.\n$selector-base: root-defaults.$element-selector-base !default;\n$modifier-selector-base: root-defaults.$modifier-selector-base !default;\n$paragraph-selector-base: $selector-base !default;\n$paragraph-selector: \"p\";\n$small-selector-base: $selector-base !default;\n$small-selector: \"small\";\n$h1-selector-base: $selector-base !default;\n$h1-selector: \"h1\" !default;\n$h2-selector-base: $selector-base !default;\n$h2-selector: \"h2\" !default;\n$h3-selector-base: $selector-base !default;\n$h3-selector: \"h3\" !default;\n$h4-selector-base: $selector-base !default;\n$h4-selector: \"h4\" !default;\n$h5-selector-base: $selector-base !default;\n$h5-selector: \"h5\" !default;\n$h6-selector-base: $selector-base !default;\n$h6-selector: \"h6\" !default;\n$root-selector-base: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\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 \"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/// 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 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 $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 $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 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 $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\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"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}@media screen and (0
|
|
2
|
-
/*# sourceMappingURL=visibility.css.map */
|
|
1
|
+
@layer graupl.utilities{.visibility-visible{visibility:visible!important}.visibility-hidden{visibility:hidden!important}.visibility-collapse{visibility:collapse!important}@media screen and (width>=0){.xs\:visibility-visible{visibility:visible!important}.xs\:visibility-hidden{visibility:hidden!important}.xs\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=576px){.sm\:visibility-visible{visibility:visible!important}.sm\:visibility-hidden{visibility:hidden!important}.sm\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=768px){.md\:visibility-visible{visibility:visible!important}.md\:visibility-hidden{visibility:hidden!important}.md\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=1024px){.lg\:visibility-visible{visibility:visible!important}.lg\:visibility-hidden{visibility:hidden!important}.lg\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=1280px){.xl\:visibility-visible{visibility:visible!important}.xl\:visibility-hidden{visibility:hidden!important}.xl\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=1500px){.hd\:visibility-visible{visibility:visible!important}.hd\:visibility-hidden{visibility:hidden!important}.hd\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=1921px){.qhd\:visibility-visible{visibility:visible!important}.qhd\:visibility-hidden{visibility:hidden!important}.qhd\:visibility-collapse{visibility:collapse!important}}@media screen and (width>=2561px){.uhd\:visibility-visible{visibility:visible!important}.uhd\:visibility-hidden{visibility:hidden!important}.uhd\:visibility-collapse{visibility:collapse!important}}@container (width>=0){.cq\:xs\:visibility-visible{visibility:visible!important}.cq\:xs\:visibility-hidden{visibility:hidden!important}.cq\:xs\:visibility-collapse{visibility:collapse!important}}@container (width>=576px){.cq\:sm\:visibility-visible{visibility:visible!important}.cq\:sm\:visibility-hidden{visibility:hidden!important}.cq\:sm\:visibility-collapse{visibility:collapse!important}}@container (width>=768px){.cq\:md\:visibility-visible{visibility:visible!important}.cq\:md\:visibility-hidden{visibility:hidden!important}.cq\:md\:visibility-collapse{visibility:collapse!important}}@container (width>=1024px){.cq\:lg\:visibility-visible{visibility:visible!important}.cq\:lg\:visibility-hidden{visibility:hidden!important}.cq\:lg\:visibility-collapse{visibility:collapse!important}}@container (width>=1280px){.cq\:xl\:visibility-visible{visibility:visible!important}.cq\:xl\:visibility-hidden{visibility:hidden!important}.cq\:xl\:visibility-collapse{visibility:collapse!important}}@container (width>=1500px){.cq\:hd\:visibility-visible{visibility:visible!important}.cq\:hd\:visibility-hidden{visibility:hidden!important}.cq\:hd\:visibility-collapse{visibility:collapse!important}}@container (width>=1921px){.cq\:qhd\:visibility-visible{visibility:visible!important}.cq\:qhd\:visibility-hidden{visibility:hidden!important}.cq\:qhd\:visibility-collapse{visibility:collapse!important}}@container (width>=2561px){.cq\:uhd\:visibility-visible{visibility:visible!important}.cq\:uhd\:visibility-hidden{visibility:hidden!important}.cq\:uhd\:visibility-collapse{visibility:collapse!important}}}
|
|
2
|
+
/*# sourceMappingURL=visibility.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/mixins/_utility.scss","visibility.css","../../../node_modules/@graupl/core/src/scss/mixins/_screen.scss","../../../node_modules/@graupl/core/src/scss/mixins/_container.scss"],"names":[],"mappings":"AASI,wBCiJA,oBAnIE,4BCpBJ,CDuJE,mBAnIE,2BCjBJ,CDoJE,qBAnIE,6BCdJ,CCKA,+BF4IE,wBAnIE,4BCVF,CD6IA,uBAnIE,2BCLF,CDwIA,yBAnIE,6BCAF,CATF,CCAA,kCF4IE,wBAnIE,4BCKF,CD8HA,uBAnIE,2BCUF,CDyHA,yBAnIE,6BCeF,CATF,CCfA,kCF4IE,wBAnIE,4BCoBF,CD+GA,uBAnIE,2BCyBF,CD0GA,yBAnIE,6BC8BF,CATF,CC9BA,mCF4IE,wBAnIE,4BCmCF,CDgGA,uBAnIE,2BCwCF,CD2FA,yBAnIE,6BC6CF,CATF,CC7CA,mCF4IE,wBAnIE,4BCkDF,CDiFA,uBAnIE,2BCuDF,CD4EA,yBAnIE,6BC4DF,CATF,CE5DA,wBH4IE,4BAnIE,4BCiEF,CDkEA,2BAnIE,2BCsEF,CD6DA,6BAnIE,6BC2EF,CATF,CE3EA,2BH4IE,4BAnIE,4BCgFF,CDmDA,2BAnIE,2BCqFF,CD8CA,6BAnIE,6BC0FF,CATF,CE1FA,2BH4IE,4BAnIE,4BC+FF,CDoCA,2BAnIE,2BCoGF,CD+BA,6BAnIE,6BCyGF,CATF,CEzGA,4BH4IE,4BAnIE,4BC8GF,CDqBA,2BAnIE,2BCmHF,CDgBA,6BAnIE,6BCwHF,CATF,CExHA,4BH4IE,4BAnIE,4BC6HF,CDMA,2BAnIE,2BCkIF,CDCA,6BAnIE,6BCuIF,CATF,CAWF","file":"visibility.css"}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCiJA,iDAAA,+CAAA,mDC5IF,6BD4IE,qDAAA,mDAAA,wDC5IF,iCD4IE,qDAAA,mDAAA,wDC5IF,iCD4IE,qDAAA,mDAAA,wDC5IF,kCD4IE,qDAAA,mDAAA,wDC5IF,kCD4IE,qDAAA,mDAAA,wDC5IF,kCD4IE,qDAAA,mDAAA,wDC5IF,kCD4IE,sDAAA,oDAAA,yDC5IF,kCD4IE,sDAAA,oDAAA,yDE5IF,sBF4IE,yDAAA,uDAAA,4DE5IF,0BF4IE,yDAAA,uDAAA,4DE5IF,0BF4IE,yDAAA,uDAAA,4DE5IF,2BF4IE,yDAAA,uDAAA,4DE5IF,2BF4IE,yDAAA,uDAAA,4DE5IF,2BF4IE,yDAAA,uDAAA,4DE5IF,2BF4IE,0DAAA,wDAAA,6DE5IF,2BF4IE,0DAAA,wDAAA","sources":["dist/css/utilities/visibility.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_screen.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_container.scss"],"sourcesContent":["@layer graupl.utilities {\n .visibility-visible {\n visibility: visible !important;\n }\n .visibility-hidden {\n visibility: hidden !important;\n }\n .visibility-collapse {\n visibility: collapse !important;\n }\n @media screen and (0 <= width) {\n .xs\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (0 <= width) {\n .xs\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (0 <= width) {\n .xs\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (576px <= width) {\n .sm\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (576px <= width) {\n .sm\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (576px <= width) {\n .sm\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (768px <= width) {\n .md\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (768px <= width) {\n .md\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (768px <= width) {\n .md\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (1024px <= width) {\n .lg\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (1024px <= width) {\n .lg\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (1024px <= width) {\n .lg\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (1280px <= width) {\n .xl\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (1280px <= width) {\n .xl\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (1280px <= width) {\n .xl\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (1500px <= width) {\n .hd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (1500px <= width) {\n .hd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (1500px <= width) {\n .hd\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (1921px <= width) {\n .qhd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (1921px <= width) {\n .qhd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (1921px <= width) {\n .qhd\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @media screen and (2561px <= width) {\n .uhd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @media screen and (2561px <= width) {\n .uhd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @media screen and (2561px <= width) {\n .uhd\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (0 <= width) {\n .cq\\:xs\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (0 <= width) {\n .cq\\:xs\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (0 <= width) {\n .cq\\:xs\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (576px <= width) {\n .cq\\:sm\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (576px <= width) {\n .cq\\:sm\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (576px <= width) {\n .cq\\:sm\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (768px <= width) {\n .cq\\:md\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (768px <= width) {\n .cq\\:md\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (768px <= width) {\n .cq\\:md\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (1024px <= width) {\n .cq\\:lg\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (1024px <= width) {\n .cq\\:lg\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (1024px <= width) {\n .cq\\:lg\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (1280px <= width) {\n .cq\\:xl\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (1280px <= width) {\n .cq\\:xl\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (1280px <= width) {\n .cq\\:xl\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (1500px <= width) {\n .cq\\:hd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (1500px <= width) {\n .cq\\:hd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (1500px <= width) {\n .cq\\:hd\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (1921px <= width) {\n .cq\\:qhd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (1921px <= width) {\n .cq\\:qhd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (1921px <= width) {\n .cq\\:qhd\\:visibility-collapse {\n visibility: collapse !important;\n }\n }\n @container (2561px <= width) {\n .cq\\:uhd\\:visibility-visible {\n visibility: visible !important;\n }\n }\n @container (2561px <= width) {\n .cq\\:uhd\\:visibility-hidden {\n visibility: hidden !important;\n }\n }\n @container (2561px <= width) {\n .cq\\:uhd\\:visibility-collapse {\n visibility: collapse !important;\n }\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 \"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/// 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 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 $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 $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 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 $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\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","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n","// @graupl/core container mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/container\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum container width media query.\n@mixin up($size) {\n $container-size: container.min($size);\n\n @container (#{$container-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum container width media query.\n@mixin down($size) {\n $container-size: container.max($size);\n\n @container (width <= #{$container-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of container widths media query.\n@mixin between($min, $max) {\n $container-size: container.range($min, $max);\n $min: map.get($container-size, \"min\");\n $max: map.get($container-size, \"max\");\n\n @container (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.visually-hidden:not(.focusable)
|
|
2
|
-
/*# sourceMappingURL=visually-hidden.css.map */
|
|
1
|
+
@layer graupl.utilities{.visually-hidden:not(.focusable),.visually-hidden.focusable:not(:focus,:focus-within){clip:rect(0,0,0,0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}}
|
|
2
|
+
/*# sourceMappingURL=visually-hidden.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/utilities/visually-hidden/_index.scss","../../../node_modules/@graupl/core/src/scss/mixins/_visually-hidden.scss","visually-hidden.css"],"names":[],"mappings":"AASI,wBCuEA,iCCrEF,oBAAA,CACA,qBAAA,CAEA,yBAAA,CADA,mBAAA,CAJA,2BAAA,CACA,mBAAA,CAKA,4BAAA,CACA,kBAAA,CAEA,8BAAA,CADA,4BCLA,CDcA,qDAfA,oBAAA,CACA,qBAAA,CAEA,yBAAA,CADA,mBAAA,CAJA,2BAAA,CACA,mBAAA,CAKA,4BAAA,CACA,kBAAA,CAEA,8BAAA,CADA,4BCOA,CACF","file":"visually-hidden.css"}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCyEA","sources":["dist/css/utilities/visually-hidden.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/utilities/visually-hidden/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_visually-hidden.scss"],"sourcesContent":["@layer graupl.utilities {\n .visually-hidden:not(.focusable) {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: -1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n border: 0 !important;\n white-space: nowrap !important;\n clip-path: inset(50%) !important;\n }\n .visually-hidden.focusable:not(:focus, :focus-within) {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: -1px !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n border: 0 !important;\n white-space: nowrap !important;\n clip-path: inset(50%) !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 visually-hidden utilities styles.\n//\n// This file generates the visually-hidden utility classes provided by Graupl.\n//\n// The following classes are generated by default:\n// - `.visually-hidden`: Hides an element visually but leaves it accessible to screen readers.\n// - `.focusable`: When applied to a visually hidden element, it makes the element accessible to keyboard navigation.\n//\n// The following custom properties control the generated classes:\n// - N/A.\n//\n// The following variables control the generated classes:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | Base selector for utility classes. | `\".\"` |\n// | `$use-important` | Append `!important` to generated declarations. | `true` |\n// | `$generate-base-utilities` | Generate the base utilities. | `true` |\n// | `$screen-aware` | Generate screen-aware variants. | `false` |\n// | `$theme-aware` | Generate theme-aware variants. | `false` |\n// | `$state-aware` | Generate state-aware variants. | `false` |\n// | `$container-aware` | Generate container-aware variants. | `false` |\n// | `$screen-aware-separator` | Separator for screen-aware utilities. | `\"\\\\:\"` |\n// | `$theme-aware-separator` | Separator for theme-aware utilities. | `\"\\\\:\"` |\n// | `$state-aware-separator` | Separator for state-aware utilities. | `\"\\\\:\"` |\n// | `$container-aware-separator` | Separator for container-aware utilities. | `\"\\\\:\"` |\n// | `$screen-aware-selector-prefix` | Prefix for screen-aware utilities. | `\"\"` |\n// | `$theme-aware-selector-prefix` | Prefix for theme-aware utilities. | `\"\"` |\n// | `$state-aware-selector-prefix` | Prefix for state-aware utilities. | `\"\"` |\n// | `$container-aware-selector-prefix` | Prefix for container-aware utilities. | `\"cq\\\\:\"` |\n// | `$visually-hidden-selector` | Selector used for visually hidden utilities. | `\"visually-hidden\"` |\n// | `$visually-hidden-focusable-selector` | Selector used to expose focusable hidden content. | `\"focusable\"` |\n//\n// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.\n// By default, no responsive utility classes are generated.\n//\n// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:\n// - `.{screen-name}:visually-hidden`\n//\n// e.g. `.sm:visually-hidden` will visually hide elements on screens equal to or larger than the `sm` breakpoint.\n//\n// When set to true, theme-aware utility classes will be generated for each theme in the following pattern:\n// - `.{theme-name}:visually-hidden`\n//\n// e.g. `.dark:visually-hidden` will visually hide elements when the `dark` theme is active.\n//\n// When set to true, state-aware utility classes will be generated for each state in the following pattern:\n// - `.{state-name}:visually-hidden`\n//\n// e.g. `.hover:visually-hidden` will visually hide elements when the element is hovered.\n//\n// When set to true, container-aware utility classes will be generated for each container in the following pattern:\n// - `.{container-prefix}{container-name}:{prefix}{value}`\n//\n// e.g. `.cq:md:visually-hidden` will set the `visibility` property to `hidden` when the parent container is larger than the `md` breakpoint.\n//\n// Note: The `.focusable` class will never have screen-aware, theme-aware, or state-aware classes generated.\n//\n// @example\n// <div class=\"visually-hidden\">This is visually hidden.</div>\n//\n// @example\n// <a href=\"#main-content\" class=\"visually-hidden focusable\">Skip to main content</a>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/container\";\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"../../mixins/state\";\n@use \"../../mixins/theme\";\n@use \"../../mixins/visually-hidden\";\n@use \"../../theme/color/variables\" as color;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(utilities) {\n // `.`\n $selector-prefix: defaults.$selector-base;\n\n // `.visually-hidden`\n #{$selector-prefix}#{defaults.$visually-hidden-selector} {\n // `&:not(.focusable)`\n &:not(#{$selector-prefix}#{defaults.$visually-hidden-focusable-selector}) {\n @include visually-hidden.apply(defaults.$use-important);\n }\n\n // `&.focusable`\n &#{$selector-prefix}#{defaults.$visually-hidden-focusable-selector} {\n @include visually-hidden.focusable(defaults.$use-important);\n }\n }\n\n // Create screen-aware utilities.\n @if defaults.$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 $selector-prefix: #{defaults.$selector-base}#{defaults.$screen-aware-selector-prefix}#{$screen-name}#{defaults.$screen-aware-separator};\n\n @include screen.up($screen-name) {\n // e.g. `.md:visually-hidden`\n #{$selector-prefix}#{defaults.$visually-hidden-selector} {\n // `&:not(.focusable)`\n &:not(\n #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}\n ) {\n @include visually-hidden.apply(defaults.$use-important);\n }\n\n // `&.focusable`\n &#{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector} {\n @include visually-hidden.focusable(defaults.$use-important);\n }\n }\n }\n }\n }\n\n // Generate theme-aware utilities.\n @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {\n @each $theme-name, $colors in color.$themes {\n @if $theme-name != active {\n $selector-prefix: #{defaults.$selector-base}#{defaults.$theme-aware-selector-prefix}#{$theme-name}#{defaults.$theme-aware-separator};\n\n @include theme.theme($theme-name) {\n // e.g. `.dark:visually-hidden`\n #{$selector-prefix}#{defaults.$visually-hidden-selector} {\n // `&:not(.focusable)`\n &:not(\n #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}\n ) {\n @include visually-hidden.apply(defaults.$use-important);\n }\n\n // `&.focusable`\n &#{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector} {\n @include visually-hidden.focusable(defaults.$use-important);\n }\n }\n }\n }\n }\n }\n\n // Generate state-aware utilities.\n @if defaults.$state-aware and root-defaults.$state-aware-utilities {\n @each $state-name, $value in root-defaults.$state-selectors {\n $selector-prefix: #{defaults.$selector-base}#{defaults.$state-aware-selector-prefix}#{$state-name}#{defaults.$state-aware-separator};\n\n @include state.state($state-name) {\n // e.g. `.hover:visually-hidden`\n #{$selector-prefix}#{defaults.$visually-hidden-selector} {\n // `&:not(.focusable)`\n &:not(\n #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}\n ) {\n @include visually-hidden.apply(defaults.$use-important);\n }\n\n // `&.focusable`\n &#{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector} {\n @include visually-hidden.focusable(defaults.$use-important);\n }\n }\n }\n }\n }\n\n // Create container aware utilities.\n @if defaults.$container-aware and root-defaults.$container-aware-utilities {\n @each $container-name in map.keys(root-defaults.$container-sizes) {\n // e.g. `.md:` or `.lg:`\n $selector-prefix: #{defaults.$selector-base}#{defaults.$container-aware-selector-prefix}#{$container-name}#{defaults.$container-aware-separator};\n\n @include container.up($container-name) {\n // e.g. `.md:visually-hidden`\n #{$selector-prefix}#{defaults.$visually-hidden-selector} {\n // `&:not(.focusable)`\n &:not(\n #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}\n ) {\n @include visually-hidden.apply(defaults.$use-important);\n }\n\n // `&.focusable`\n &#{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector} {\n @include visually-hidden.focusable(defaults.$use-important);\n }\n }\n }\n }\n }\n}\n","// @graupl/core visually hidden mixins.\n\n@use \"../functions/important\";\n\n/// Apply the visually hidden utility.\n///\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin apply($important: true) {\n position: important.insert(absolute, $override: $important);\n width: important.insert(1px, $override: $important);\n height: important.insert(1px, $override: $important);\n margin: important.insert(-1px, $override: $important);\n padding: important.insert(0, $override: $important);\n overflow: important.insert(hidden, $override: $important);\n clip: important.insert(rect(0, 0, 0, 0), $override: $important);\n border: important.insert(0, $override: $important);\n white-space: important.insert(nowrap, $override: $important);\n clip-path: important.insert(inset(50%), $override: $important);\n}\n\n/// Apply the visually hidden utility to not-focussed elements.\n///\n/// @param {Boolean} $important\n/// A flag to determine if the important flag should be added.\n@mixin focusable($important: true) {\n &:not(:focus, :focus-within) {\n @include apply($important);\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.utilities{.w-auto{width:auto!important}.max-w-auto{max-width:auto!important}.min-w-auto{min-width:auto!important}.w-fit-content{width
|
|
2
|
-
/*# sourceMappingURL=width.css.map */
|
|
1
|
+
@layer graupl.utilities{.w-auto{width:auto!important}.max-w-auto{max-width:auto!important}.min-w-auto{min-width:auto!important}.w-fit-content{width:fit-content!important}.max-w-fit-content{max-width:fit-content!important}.min-w-fit-content{min-width:fit-content!important}.w-max-content{width:max-content!important}.max-w-max-content{max-width:max-content!important}.min-w-max-content{min-width:max-content!important}.w-min-content{width:min-content!important}.max-w-min-content{max-width:min-content!important}.min-w-min-content{min-width:min-content!important}.w-stretch{width:stretch!important}.max-w-stretch{max-width:stretch!important}.min-w-stretch{min-width:stretch!important}.w-full{width:100%!important}.max-w-full{max-width:100%!important}.min-w-full{min-width:100%!important}.w-quarter{width:25%!important}.max-w-quarter{max-width:25%!important}.min-w-quarter{min-width:25%!important}.w-half{width:50%!important}.max-w-half{max-width:50%!important}.min-w-half{min-width:50%!important}.w-three-quarters{width:75%!important}.max-w-three-quarters{max-width:75%!important}.min-w-three-quarters{min-width:75%!important}.w-third{width:33.3333%!important}.max-w-third{max-width:33.3333%!important}.min-w-third{min-width:33.3333%!important}.w-two-thirds{width:66.6667%!important}.max-w-two-thirds{max-width:66.6667%!important}.min-w-two-thirds{min-width:66.6667%!important}.w-half-screen{width:50vw!important}.max-w-half-screen{max-width:50vw!important}.min-w-half-screen{min-width:50vw!important}.w-third-screen{width:33.3333vw!important}.max-w-third-screen{max-width:33.3333vw!important}.min-w-third-screen{min-width:33.3333vw!important}.w-two-thirds-screen{width:66.6667vw!important}.max-w-two-thirds-screen{max-width:66.6667vw!important}.min-w-two-thirds-screen{min-width:66.6667vw!important}.w-quarter-screen{width:25vw!important}.max-w-quarter-screen{max-width:25vw!important}.min-w-quarter-screen{min-width:25vw!important}.w-three-quarters-screen{width:75vw!important}.max-w-three-quarters-screen{max-width:75vw!important}.min-w-three-quarters-screen{min-width:75vw!important}.w-full-screen{width:100vw!important}.max-w-full-screen{max-width:100vw!important}.min-w-full-screen{min-width:100vw!important}.w-0{width:var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))!important}.max-w-0{max-width:var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))!important}.min-w-0{min-width:var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))!important}.w-1{width:var(--graupl-spacer-1,calc(.125*var(--graupl-spacer,1rem)))!important}.max-w-1{max-width:var(--graupl-spacer-1,calc(.125*var(--graupl-spacer,1rem)))!important}.min-w-1{min-width:var(--graupl-spacer-1,calc(.125*var(--graupl-spacer,1rem)))!important}.w-2{width:var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))!important}.max-w-2{max-width:var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))!important}.min-w-2{min-width:var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))!important}.w-3{width:var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))!important}.max-w-3{max-width:var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))!important}.min-w-3{min-width:var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem)))!important}.w-4{width:var(--graupl-spacer-4,calc(.75*var(--graupl-spacer,1rem)))!important}.max-w-4{max-width:var(--graupl-spacer-4,calc(.75*var(--graupl-spacer,1rem)))!important}.min-w-4{min-width:var(--graupl-spacer-4,calc(.75*var(--graupl-spacer,1rem)))!important}.w-5{width:var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))!important}.max-w-5{max-width:var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))!important}.min-w-5{min-width:var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))!important}.w-6{width:var(--graupl-spacer-6,calc(1.5*var(--graupl-spacer,1rem)))!important}.max-w-6{max-width:var(--graupl-spacer-6,calc(1.5*var(--graupl-spacer,1rem)))!important}.min-w-6{min-width:var(--graupl-spacer-6,calc(1.5*var(--graupl-spacer,1rem)))!important}.w-7{width:var(--graupl-spacer-7,calc(2*var(--graupl-spacer,1rem)))!important}.max-w-7{max-width:var(--graupl-spacer-7,calc(2*var(--graupl-spacer,1rem)))!important}.min-w-7{min-width:var(--graupl-spacer-7,calc(2*var(--graupl-spacer,1rem)))!important}.w-8{width:var(--graupl-spacer-8,calc(3*var(--graupl-spacer,1rem)))!important}.max-w-8{max-width:var(--graupl-spacer-8,calc(3*var(--graupl-spacer,1rem)))!important}.min-w-8{min-width:var(--graupl-spacer-8,calc(3*var(--graupl-spacer,1rem)))!important}.w-9{width:var(--graupl-spacer-9,calc(5*var(--graupl-spacer,1rem)))!important}.max-w-9{max-width:var(--graupl-spacer-9,calc(5*var(--graupl-spacer,1rem)))!important}.min-w-9{min-width:var(--graupl-spacer-9,calc(5*var(--graupl-spacer,1rem)))!important}.w-10{width:var(--graupl-spacer-10,calc(10*var(--graupl-spacer,1rem)))!important}.max-w-10{max-width:var(--graupl-spacer-10,calc(10*var(--graupl-spacer,1rem)))!important}.min-w-10{min-width:var(--graupl-spacer-10,calc(10*var(--graupl-spacer,1rem)))!important}}
|
|
2
|
+
/*# sourceMappingURL=width.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../node_modules/@graupl/core/src/scss/mixins/_layer.scss","../../../node_modules/@graupl/core/src/scss/mixins/_utility.scss","width.css"],"names":[],"mappings":"AASI,wBCiJA,QAnIE,oBCpBJ,CDuJE,YAnIE,wBCjBJ,CDoJE,YAnIE,wBCdJ,CDiJE,eAnIE,gCAAA,CAAA,2BCXJ,CD8IE,mBAnIE,oCAAA,CAAA,+BCRJ,CD2IE,mBAnIE,oCAAA,CAAA,+BCLJ,CDwIE,eAnIE,gCAAA,CAAA,2BCFJ,CDqIE,mBAnIE,oCAAA,CAAA,+BCCJ,CDkIE,mBAnIE,oCAAA,CAAA,+BCIJ,CD+HE,eAnIE,gCAAA,CAAA,2BCOJ,CD4HE,mBAnIE,oCAAA,CAAA,+BCUJ,CDyHE,mBAnIE,oCAAA,CAAA,+BCaJ,CDsHE,WAnIE,sCAAA,CAAA,8BAAA,CAAA,uBCgBJ,CDmHE,eAnIE,0CAAA,CAAA,kCAAA,CAAA,2BCmBJ,CDgHE,eAnIE,0CAAA,CAAA,kCAAA,CAAA,2BCsBJ,CD6GE,QAnIE,oBCyBJ,CD0GE,YAnIE,wBC4BJ,CDuGE,YAnIE,wBC+BJ,CDoGE,WAnIE,mBCkCJ,CDiGE,eAnIE,uBCqCJ,CD8FE,eAnIE,uBCwCJ,CD2FE,QAnIE,mBC2CJ,CDwFE,YAnIE,uBC8CJ,CDqFE,YAnIE,uBCiDJ,CDkFE,kBAnIE,mBCoDJ,CD+EE,sBAnIE,uBCuDJ,CD4EE,sBAnIE,uBC0DJ,CDyEE,SAnIE,8BC6DJ,CDsEE,aAnIE,kCCgEJ,CDmEE,aAnIE,kCCmEJ,CDgEE,cAnIE,8BCsEJ,CD6DE,kBAnIE,kCCyEJ,CD0DE,kBAnIE,kCC4EJ,CDuDE,eAnIE,oBC+EJ,CDoDE,mBAnIE,wBCkFJ,CDiDE,mBAnIE,wBCqFJ,CD8CE,gBAnIE,+BCwFJ,CD2CE,oBAnIE,mCC2FJ,CDwCE,oBAnIE,mCC8FJ,CDqCE,qBAnIE,+BCiGJ,CDkCE,yBAnIE,mCCoGJ,CD+BE,yBAnIE,mCCuGJ,CD4BE,kBAnIE,oBC0GJ,CDyBE,sBAnIE,wBC6GJ,CDsBE,sBAnIE,wBCgHJ,CDmBE,yBAnIE,oBCmHJ,CDgBE,6BAnIE,wBCsHJ,CDaE,6BAnIE,wBCyHJ,CDUE,eAnIE,qBC4HJ,CDOE,mBAnIE,yBC+HJ,CDIE,mBAnIE,yBCkIJ,CDCE,KAnIE,yECqIJ,CDFE,SAnIE,6ECwIJ,CDLE,SAnIE,6EC2IJ,CDRE,KAnIE,4EC8IJ,CDXE,SAnIE,gFCiJJ,CDdE,SAnIE,gFCoJJ,CDjBE,KAnIE,2ECuJJ,CDpBE,SAnIE,+EC0JJ,CDvBE,SAnIE,+EC6JJ,CD1BE,KAnIE,0ECgKJ,CD7BE,SAnIE,8ECmKJ,CDhCE,SAnIE,8ECsKJ,CDnCE,KAnIE,2ECyKJ,CDtCE,SAnIE,+EC4KJ,CDzCE,SAnIE,+EC+KJ,CD5CE,KAnIE,yECkLJ,CD/CE,SAnIE,6ECqLJ,CDlDE,SAnIE,6ECwLJ,CDrDE,KAnIE,2EC2LJ,CDxDE,SAnIE,+EC8LJ,CD3DE,SAnIE,+ECiMJ,CD9DE,KAnIE,yECoMJ,CDjEE,SAnIE,6ECuMJ,CDpEE,SAnIE,6EC0MJ,CDvEE,KAnIE,yEC6MJ,CD1EE,SAnIE,6ECgNJ,CD7EE,SAnIE,6ECmNJ,CDhFE,KAnIE,yECsNJ,CDnFE,SAnIE,6ECyNJ,CDtFE,SAnIE,6EC4NJ,CDzFE,MAnIE,2EC+NJ,CD5FE,UAnIE,+ECkOJ,CD/FE,UAnIE,+ECqOJ,CACF","file":"width.css"}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCiJA,6BAAA,qCAAA,qCAAA,2CAAA,mDAAA,mDAAA,2CAAA,mDAAA,mDAAA,2CAAA,mDAAA,mDAAA,mCAAA,2CAAA,2CAAA,6BAAA,qCAAA,qCAAA,+BAAA,uCAAA,uCAAA,4BAAA,oCAAA,oCAAA,sCAAA,8CAAA,8CAAA,kCAAA,0CAAA,0CAAA,uCAAA,+CAAA,+CAAA,oCAAA,4CAAA,4CAAA,0CAAA,kDAAA,kDAAA,+CAAA,uDAAA,uDAAA,uCAAA,+CAAA,+CAAA,8CAAA,sDAAA,sDAAA,qCAAA,6CAAA,6CAAA,8EAAA,sFAAA,sFAAA,iFAAA,yFAAA,yFAAA,gFAAA,wFAAA,wFAAA,+EAAA,uFAAA,uFAAA,gFAAA,wFAAA,wFAAA,8EAAA,sFAAA,sFAAA,gFAAA,wFAAA,wFAAA,8EAAA,sFAAA,sFAAA,8EAAA,sFAAA,sFAAA,8EAAA,sFAAA,sFAAA,iFAAA,yFAAA","sources":["dist/css/utilities/width.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .w-auto {\n width: auto !important;\n }\n .max-w-auto {\n max-width: auto !important;\n }\n .min-w-auto {\n min-width: auto !important;\n }\n .w-fit-content {\n width: fit-content !important;\n }\n .max-w-fit-content {\n max-width: fit-content !important;\n }\n .min-w-fit-content {\n min-width: fit-content !important;\n }\n .w-max-content {\n width: max-content !important;\n }\n .max-w-max-content {\n max-width: max-content !important;\n }\n .min-w-max-content {\n min-width: max-content !important;\n }\n .w-min-content {\n width: min-content !important;\n }\n .max-w-min-content {\n max-width: min-content !important;\n }\n .min-w-min-content {\n min-width: min-content !important;\n }\n .w-stretch {\n width: stretch !important;\n }\n .max-w-stretch {\n max-width: stretch !important;\n }\n .min-w-stretch {\n min-width: stretch !important;\n }\n .w-full {\n width: 100% !important;\n }\n .max-w-full {\n max-width: 100% !important;\n }\n .min-w-full {\n min-width: 100% !important;\n }\n .w-quarter {\n width: 25% !important;\n }\n .max-w-quarter {\n max-width: 25% !important;\n }\n .min-w-quarter {\n min-width: 25% !important;\n }\n .w-half {\n width: 50% !important;\n }\n .max-w-half {\n max-width: 50% !important;\n }\n .min-w-half {\n min-width: 50% !important;\n }\n .w-three-quarters {\n width: 75% !important;\n }\n .max-w-three-quarters {\n max-width: 75% !important;\n }\n .min-w-three-quarters {\n min-width: 75% !important;\n }\n .w-third {\n width: 33.3333333333% !important;\n }\n .max-w-third {\n max-width: 33.3333333333% !important;\n }\n .min-w-third {\n min-width: 33.3333333333% !important;\n }\n .w-two-thirds {\n width: 66.6666666667% !important;\n }\n .max-w-two-thirds {\n max-width: 66.6666666667% !important;\n }\n .min-w-two-thirds {\n min-width: 66.6666666667% !important;\n }\n .w-half-screen {\n width: 50vw !important;\n }\n .max-w-half-screen {\n max-width: 50vw !important;\n }\n .min-w-half-screen {\n min-width: 50vw !important;\n }\n .w-third-screen {\n width: 33.3333333333vw !important;\n }\n .max-w-third-screen {\n max-width: 33.3333333333vw !important;\n }\n .min-w-third-screen {\n min-width: 33.3333333333vw !important;\n }\n .w-two-thirds-screen {\n width: 66.6666666667vw !important;\n }\n .max-w-two-thirds-screen {\n max-width: 66.6666666667vw !important;\n }\n .min-w-two-thirds-screen {\n min-width: 66.6666666667vw !important;\n }\n .w-quarter-screen {\n width: 25vw !important;\n }\n .max-w-quarter-screen {\n max-width: 25vw !important;\n }\n .min-w-quarter-screen {\n min-width: 25vw !important;\n }\n .w-three-quarters-screen {\n width: 75vw !important;\n }\n .max-w-three-quarters-screen {\n max-width: 75vw !important;\n }\n .min-w-three-quarters-screen {\n min-width: 75vw !important;\n }\n .w-full-screen {\n width: 100vw !important;\n }\n .max-w-full-screen {\n max-width: 100vw !important;\n }\n .min-w-full-screen {\n min-width: 100vw !important;\n }\n .w-0 {\n width: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-0 {\n max-width: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-0 {\n min-width: var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-1 {\n width: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-1 {\n max-width: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-1 {\n min-width: var(--graupl-spacer-1, calc(0.125 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-2 {\n width: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-2 {\n max-width: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-2 {\n min-width: var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-3 {\n width: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-3 {\n max-width: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-3 {\n min-width: var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-4 {\n width: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-4 {\n max-width: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-4 {\n min-width: var(--graupl-spacer-4, calc(0.75 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-5 {\n width: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-5 {\n max-width: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-5 {\n min-width: var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-6 {\n width: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-6 {\n max-width: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-6 {\n min-width: var(--graupl-spacer-6, calc(1.5 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-7 {\n width: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-7 {\n max-width: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-7 {\n min-width: var(--graupl-spacer-7, calc(2 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-8 {\n width: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-8 {\n max-width: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-8 {\n min-width: var(--graupl-spacer-8, calc(3 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-9 {\n width: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-9 {\n max-width: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-9 {\n min-width: var(--graupl-spacer-9, calc(5 * var(--graupl-spacer, 1rem))) !important;\n }\n .w-10 {\n width: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .max-w-10 {\n max-width: var(--graupl-spacer-10, calc(10 * var(--graupl-spacer, 1rem))) !important;\n }\n .min-w-10 {\n min-width: 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 \"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/// 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 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 $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 $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 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 $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\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"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
@layer graupl.utilities{.z-n1{z-index:-1!important}.z-0{z-index:0!important}.z-1{z-index:1!important}}
|
|
2
|
-
/*# sourceMappingURL=z-index.css.map */
|
|
2
|
+
/*# sourceMappingURL=z-index.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCiJA,2BAAA,yBAAA","sources":["dist/css/utilities/z-index.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_utility.scss"],"sourcesContent":["@layer graupl.utilities {\n .z-n1 {\n z-index: -1 !important;\n }\n .z-0 {\n z-index: 0 !important;\n }\n .z-1 {\n z-index: 1 !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 \"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/// 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 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 $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 $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 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 $state: null,\n $container: null\n) {\n @include _handle-theme($theme) {\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"],"names":[]}
|