@graupl/graupl 1.0.0-beta.24 → 1.0.0-beta.26
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/component/accordion.css +1 -1
- package/dist/css/component/accordion.css.map +1 -1
- package/dist/css/component/list.css +1 -1
- package/dist/css/component/list.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/dist/js/accordion.js +2 -2
- package/dist/js/accordion.js.map +1 -1
- package/dist/js/alert.js +2 -2
- package/dist/js/alert.js.map +1 -1
- package/dist/js/carousel.js +2 -2
- package/dist/js/carousel.js.map +1 -1
- package/dist/js/component/accordion.cjs.js +2 -2
- package/dist/js/component/accordion.cjs.js.map +1 -1
- package/dist/js/component/accordion.es.js +2 -2
- package/dist/js/component/accordion.es.js.map +1 -1
- package/dist/js/component/accordion.iife.js +2 -2
- package/dist/js/component/accordion.iife.js.map +1 -1
- package/dist/js/component/alert.cjs.js +2 -2
- package/dist/js/component/alert.cjs.js.map +1 -1
- package/dist/js/component/alert.es.js +2 -2
- package/dist/js/component/alert.es.js.map +1 -1
- package/dist/js/component/alert.iife.js +2 -2
- package/dist/js/component/alert.iife.js.map +1 -1
- package/dist/js/component/carousel.cjs.js +2 -2
- package/dist/js/component/carousel.cjs.js.map +1 -1
- package/dist/js/component/carousel.es.js +2 -2
- package/dist/js/component/carousel.es.js.map +1 -1
- package/dist/js/component/carousel.iife.js +2 -2
- 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 +2 -2
- package/dist/js/component/tabs.cjs.js.map +1 -1
- package/dist/js/component/tabs.es.js +2 -2
- package/dist/js/component/tabs.es.js.map +1 -1
- package/dist/js/component/tabs.iife.js +2 -2
- package/dist/js/component/tabs.iife.js.map +1 -1
- package/dist/js/disclosure.js +2 -2
- package/dist/js/disclosure.js.map +1 -1
- package/dist/js/generator/accordion.cjs.js +2 -2
- package/dist/js/generator/accordion.cjs.js.map +1 -1
- package/dist/js/generator/accordion.es.js +2 -2
- package/dist/js/generator/accordion.es.js.map +1 -1
- package/dist/js/generator/accordion.iife.js +2 -2
- package/dist/js/generator/accordion.iife.js.map +1 -1
- package/dist/js/generator/alert.cjs.js +2 -2
- package/dist/js/generator/alert.cjs.js.map +1 -1
- package/dist/js/generator/alert.es.js +2 -2
- package/dist/js/generator/alert.es.js.map +1 -1
- package/dist/js/generator/alert.iife.js +2 -2
- package/dist/js/generator/alert.iife.js.map +1 -1
- package/dist/js/generator/carousel.cjs.js +2 -2
- package/dist/js/generator/carousel.cjs.js.map +1 -1
- package/dist/js/generator/carousel.es.js +2 -2
- package/dist/js/generator/carousel.es.js.map +1 -1
- package/dist/js/generator/carousel.iife.js +2 -2
- 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/tabs.cjs.js +2 -2
- package/dist/js/generator/tabs.cjs.js.map +1 -1
- package/dist/js/generator/tabs.es.js +2 -2
- package/dist/js/generator/tabs.es.js.map +1 -1
- package/dist/js/generator/tabs.iife.js +2 -2
- package/dist/js/generator/tabs.iife.js.map +1 -1
- package/dist/js/graupl.js +2 -8
- package/dist/js/graupl.js.map +1 -1
- package/dist/js/navigation.js +1 -1
- package/dist/js/navigation.js.map +1 -1
- package/dist/js/tabs.js +2 -2
- package/dist/js/tabs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.component{.list{margin:var(--graupl-list-margin,var(--graupl-list-margin-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-list-margin-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));padding:var(--graupl-list-padding,var(--graupl-list-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-list-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));border-width:var(--graupl-list-border-width,var(--graupl-list-border-top-width,0)var(--graupl-list-border-right-width,0)var(--graupl-list-border-bottom-width,0)var(--graupl-list-border-left-width,0));border-style:var(--graupl-list-border-style,var(--graupl-list-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-list-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-list-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-list-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-border-radius,var(--graupl-list-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-list-gap,var(--graupl-list-column-gap,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))))var(--graupl-list-row-gap,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))));list-style:none;display:grid;position:relative}.list-item{padding:var(--graupl-list-item-padding,var(--graupl-list-item-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-list-item-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));transform:var(--graupl-list-item-transform,none);transition:var(--graupl-list-item-transition,transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-list-item-border-width,var(--graupl-list-item-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-list-item-border-style,var(--graupl-list-item-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-item-border-radius,var(--graupl-list-item-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));position:relative}.list-item:hover,.list-item.hover{--graupl-list-item-transform
|
|
1
|
+
@layer graupl.component{.list{margin:var(--graupl-list-margin,var(--graupl-list-margin-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-list-margin-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));padding:var(--graupl-list-padding,var(--graupl-list-padding-y,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem))))var(--graupl-list-padding-x,var(--graupl-spacer-0,calc(0*var(--graupl-spacer,1rem)))));border-width:var(--graupl-list-border-width,var(--graupl-list-border-top-width,0)var(--graupl-list-border-right-width,0)var(--graupl-list-border-bottom-width,0)var(--graupl-list-border-left-width,0));border-style:var(--graupl-list-border-style,var(--graupl-list-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-list-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-list-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-list-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-border-radius,var(--graupl-list-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-list-gap,var(--graupl-list-column-gap,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem))))var(--graupl-list-row-gap,var(--graupl-spacer-2,calc(.25*var(--graupl-spacer,1rem)))));list-style:none;display:grid;position:relative}.list-item{padding:var(--graupl-list-item-padding,var(--graupl-list-item-padding-y,var(--graupl-spacer-3,calc(.5*var(--graupl-spacer,1rem))))var(--graupl-list-item-padding-x,var(--graupl-spacer-5,calc(1*var(--graupl-spacer,1rem)))));transform:var(--graupl-list-item-transform,none);transition:var(--graupl-list-item-transition,transform var(--graupl-transition-duration-fast,.15s)var(--graupl-transition-timing-function,ease));border-width:var(--graupl-list-item-border-width,var(--graupl-list-item-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem)))var(--graupl-list-item-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-list-item-border-style,var(--graupl-list-item-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid)))var(--graupl-list-item-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-list-item-border-radius,var(--graupl-list-item-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem)))var(--graupl-list-item-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));position:relative}.list-item:hover,.list-item.hover{--graupl-list-item-transform:var(--graupl-list-item-hover-transform,none)}}@layer graupl.theme{.list{border-color:var(--graupl-list-border-color,var(--graupl-list-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)))))));background:var(--graupl-list-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-list-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))))))}.list-item{border-color:var(--graupl-list-item-border-color,var(--graupl-list-item-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)))))));background:var(--graupl-list-item-background,var(--graupl-background,var(--graupl-root-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))));color:var(--graupl-list-item-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))))))}}
|
|
2
2
|
/*# sourceMappingURL=list.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCuIF,4yDAaA,o6DAWI,2FD/JF,oBCwKF,ioBAuBA","sources":["dist/css/component/list.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/component/list/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/list/_variables.scss"],"sourcesContent":["@layer graupl.component {\n .list {\n display: grid;\n position: relative;\n margin: var(--graupl-list-margin, var(--graupl-list-margin-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-list-margin-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n padding: var(--graupl-list-padding, var(--graupl-list-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-list-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-list-border-width, var(--graupl-list-border-top-width, 0) var(--graupl-list-border-right-width, 0) var(--graupl-list-border-bottom-width, 0) var(--graupl-list-border-left-width, 0));\n border-style: var(--graupl-list-border-style, var(--graupl-list-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-list-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-list-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-list-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-list-border-radius, var(--graupl-list-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n list-style: none;\n gap: var(--graupl-list-gap, var(--graupl-list-column-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-list-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))));\n }\n .list-item {\n position: relative;\n padding: var(--graupl-list-item-padding, var(--graupl-list-item-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-list-item-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-list-item-transform, none);\n transition: var(--graupl-list-item-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-list-item-border-width, var(--graupl-list-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-list-item-border-style, var(--graupl-list-item-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-list-item-border-radius, var(--graupl-list-item-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n .list-item:hover {\n --graupl-list-item-transform: $list-item-hover-transform;\n }\n .list-item.hover {\n --graupl-list-item-transform: $list-item-hover-transform;\n }\n}\n@layer graupl.theme {\n .list {\n border-color: var(--graupl-list-border-color, var(--graupl-list-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%))))))));\n background: var(--graupl-list-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-list-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%)))))));\n }\n .list-item {\n border-color: var(--graupl-list-item-border-color, var(--graupl-list-item-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%))))))));\n background: var(--graupl-list-item-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-list-item-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%)))))));\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 list component styles.\n//\n// This module provides the list component styles.\n//\n// The following selectors are generated by default:\n// - `.list`: The list container.\n// - `.list-item`: The list item.\n//\n// The following custom properties can be used to customize the list component:\n// | Property | Description | Default Value |\n// | ---------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-list-padding-x` | Horizontal padding of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-padding-y` | Vertical padding of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-padding` | Shorthand padding of the list. | `var(--graupl-list-padding-y) var(--graupl-list-padding-x)` |\n// | `--graupl-list-margin-x` | Horizontal margin of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-margin-y` | Vertical margin of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-margin` | Shorthand margin of the list. | `var(--graupl-list-margin-y) var(--graupl-list-margin-x)` |\n// | `--graupl-list-gap` | Gap between list items (column/row). | `var(--graupl-list-column-gap) var(--graupl-list-row-gap)` |\n// | `--graupl-list-background` | Background colour of the list. | `var(--graupl-background)` |\n// | `--graupl-list-color` | Text colour of the list. | `var(--graupl-color)` |\n// | `--graupl-list-border-width` | Border width of the list. | `0 0 0 0` |\n// | `--graupl-list-border-style` | Border style of the list. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-list-border-radius` | Border radius of the list. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-list-border-color` | Border colour of the list. | `var(--graupl-list-color)` |\n// | `--graupl-list-item-padding` | Padding for a list item. | `var(--graupl-spacer-3) var(--graupl-spacer-5)` |\n// | `--graupl-list-item-transition` | Transition applied to list items. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-list-item-transition-reduced-motion` | Transition for items when reduced motion is enabled. | `none` |\n// | `--graupl-list-item-transform` | Base transform for list items. | `none` |\n// | `--graupl-list-item-hover-transform` | Transform for hovered list items. | `none` |\n// | `--graupl-list-item-background` | Background colour of list items. | `var(--graupl-background)` |\n// | `--graupl-list-item-color` | Text colour of list items. | `var(--graupl-color)` |\n// | `--graupl-list-item-border-width` | Border width of list items. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-list-item-border-style` | Border style of list items. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-list-item-border-radius` | Border radius of list items. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-list-item-border-color` | Border colour of list items. | `var(--graupl-list-item-color)` |\n//\n// The following sass variables can be used to customize the generation of the list component:\n// | Variable | Description | Default Value |\n// | ---------------------------- | ----------------------------------------- | ---------------- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$list-selector-base` | Selector base for the list container. | `$selector-base` |\n// | `$list-selector` | Selector for the list container. | `\"list\"` |\n// | `$list-theme-selector-base` | Selector base for theme modifiers. | `\".\"` |\n// | `$list-theme-selector-prefix`| Selector prefix for theme modifiers. | `\"\"` |\n// | `$list-item-selector-base` | Selector base for list items. | `$selector-base` |\n// | `$list-item-selector` | Selector for list items. | `\"list-item\"` |\n// | `$list-item-transform` | Base transform for list items. | `none` |\n// | `$list-item-hover-transform` | Hover transform for list items. | `none` |\n// | `$list-theme-mappings` | Map of properties/shades for list themes. | `()` |\n// | `$list-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// ## Using `$list-theme-mappings`\n//\n// `$list-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $list-theme-mappings: (\n// color: 900,\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all list variants, telling them what shade to use for the base colour slots.\n// All list variants will use the following based on the example above:\n// - Primary lists will have their `--graupl-list-color` property set to `--graupl-theme-active--primary--900` and `--graupl-list-border-color` to `--graupl-theme-active--primary--700`,\n// - Secondary lists will use the same shades for the secondary palette, and\n// - Tertiary lists will use the same shades for the tertiary palette.\n//\n// You can use this to customize _all_ list variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $list-theme-mappings: (\n// color: 500,\n// item-color: 500,\n// )\n// ```\n//\n// All list variants will use the following:\n// - Primary lists will have their `--graupl-list-color` and `--graupl-list-item-color` properties set to `--graupl-theme-active--primary--500`,\n// - Secondary lists will have theirs set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary lists will have theirs set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$list-theme-mappings` gets parsed into a larger, more explicit map: `$list-theme-map`.\n//\n// Using `$list-theme-map`\n//\n// `$list-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $list-theme-map: (\n// primary: (\n// item-border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// item-border-color: (\n// color: secondary,\n// shade: 500\n// ),\n// ),\n// tertiary: (\n// item-border-color: (\n// color: tertiary,\n// shade: 300\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all list variants, telling them what shade to use for said property.\n// You can use this to customize list variants individually.\n//\n// @example\n// <ul class=\"list\">\n// <li class=\"list-item\">First item</li>\n// <li class=\"list-item\">Second item</li>\n// <li class=\"list-item\">Third item</li>\n// </ul>\n//\n// @example\n// <ol class=\"list list-style-decimal list-style-inside\">\n// <li class=\"list-item\">Numbered item one</li>\n// <li class=\"list-item\">Numbered item two</li>\n// <li class=\"list-item\">Numbered item three</li>\n// </ol>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/animation\";\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\" as theme;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(component) {\n // .list\n #{defaults.$list-selector-base}#{defaults.$list-selector} {\n display: grid;\n position: relative;\n margin: $list-margin;\n padding: $list-padding;\n border-width: $list-border-width;\n border-style: $list-border-style;\n border-radius: $list-border-radius;\n list-style: none;\n gap: $list-gap;\n }\n\n // .list-item\n #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {\n position: relative;\n padding: $list-item-padding;\n transform: $list-item-transform;\n transition: $list-item-transition;\n border-width: $list-item-border-width;\n border-style: $list-item-border-style;\n border-radius: $list-item-border-radius;\n\n @each $selector in map.get(root-defaults.$state-selectors, hover) {\n // e.g &:hover, &.hover\n &#{$selector} {\n --#{root-defaults.$prefix}list-item-transform: $list-item-hover-transform;\n }\n }\n }\n}\n\n@include layer(theme) {\n // .list\n #{defaults.$list-selector-base}#{defaults.$list-selector} {\n border-color: $list-border-color;\n background: $list-background;\n color: $list-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$list-theme-map,\n defaults.$list-theme-selector-base,\n defaults.$list-theme-selector-prefix,\n \"list-\"\n );\n @include theme.generate-modifiers(\n defaults.$list-theme-map,\n defaults.$list-theme-selector-base,\n defaults.$list-theme-selector-prefix,\n \"list-\",\n \"\"\n );\n }\n }\n\n // .list-item\n #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {\n border-color: $list-item-border-color;\n background: $list-item-background;\n color: $list-item-color;\n }\n}\n","// @graupl/core list component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-list-padding-x | var(--graupl-spacer-0) |\n// | --graupl-list-padding-y | var(--graupl-spacer-0) |\n// | --graupl-list-padding | var(--graupl-list-padding-y) var(--graupl-list-padding-x) |\n// | --graupl-list-margin-x | var(--graupl-spacer-0) |\n// | --graupl-list-margin-y | var(--graupl-spacer-0) |\n// | --graupl-list-margin | var(--graupl-list-margin-y) var(--graupl-list-margin-x) |\n// | --graupl-list-column-gap | var(--graupl-spacer-2) |\n// | --graupl-list-row-gap | var(--graupl-spacer-2) |\n// | --graupl-list-gap | var(--graupl-list-column-gap) var(--graupl-list-row-gap) |\n// | --graupl-list-background | var(--graupl-background) |\n// | --graupl-list-color | var(--graupl-color) |\n// | --graupl-list-border-color | var(--graupl-list-color) |\n// | --graupl-list-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-list-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-list-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-list-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-list-border-radius | var(--graupl-list-border-top-left-radius) var(--graupl-list-border-top-right-radius) var(--graupl-list-border-bottom-right-radius) var(--graupl-list-border-bottom-left-radius) |\n// | --graupl-list-border-top-width | 0 |\n// | --graupl-list-border-right-width | 0 |\n// | --graupl-list-border-bottom-width | 0 |\n// | --graupl-list-border-left-width | 0 |\n// | --graupl-list-border-width | var(--graupl-list-border-top-width) var(--graupl-list-border-right-width) var(--graupl-list-border-bottom-width) var(--graupl-list-border-left-width) |\n// | --graupl-list-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-list-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-list-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-list-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-list-border-style | var(--graupl-list-border-top-style) var(--graupl-list-border-right-style) var(--graupl-list-border-bottom-style) var(--graupl-list-border-left-style) |\n// | --graupl-list-item-padding-x | var(--graupl-spacer-5) |\n// | --graupl-list-item-padding-y | var(--graupl-spacer-3) |\n// | --graupl-list-item-padding | var(--graupl-list-item-padding-y) var(--graupl-list-item-padding-x) |\n// | --graupl-list-item-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-list-item-transition-reduced-motion | none |\n// | --graupl-list-item-transform | none |\n// | --graupl-list-item-hover-transform | none |\n// | --graupl-list-item-background | var(--graupl-background) |\n// | --graupl-list-item-color | var(--graupl-color) |\n// | --graupl-list-item-border-color | var(--graupl-list-item-color) |\n// | --graupl-list-item-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-list-item-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-list-item-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-list-item-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-list-item-border-radius | var(--graupl-list-item-border-top-left-radius) var(--graupl-list-item-border-top-right-radius) var(--graupl-list-item-border-bottom-right-radius) var(--graupl-list-item-border-bottom-left-radius) |\n// | --graupl-list-item-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-list-item-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-list-item-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-list-item-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-list-item-border-width | var(--graupl-list-item-border-top-width) var(--graupl-list-item-border-right-width) var(--graupl-list-item-border-bottom-width) var(--graupl-list-item-border-left-width) |\n// | --graupl-list-item-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-list-item-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-list-item-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-list-item-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-list-item-border-style | var(--graupl-list-item-border-top-style) var(--graupl-list-item-border-right-style) var(--graupl-list-item-border-bottom-style) var(--graupl-list-item-border-left-style) |\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"sass:map\";\n\n// List properties.\n// --graupl-list-padding-x\n$list-padding-x: var(\n --#{root-defaults.$prefix}list-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-padding-y\n$list-padding-y: var(\n --#{root-defaults.$prefix}list-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-padding\n$list-padding: var(\n --#{root-defaults.$prefix}list-padding,\n #{$list-padding-y} #{$list-padding-x}\n);\n\n// --graupl-list-margin-x\n$list-margin-x: var(\n --#{root-defaults.$prefix}list-margin-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-margin-y\n$list-margin-y: var(\n --#{root-defaults.$prefix}list-margin-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-margin\n$list-margin: var(\n --#{root-defaults.$prefix}list-margin,\n #{$list-margin-y} #{$list-margin-x}\n);\n\n// List gap properties.\n// --graupl-list-column-gap\n$list-column-gap: var(\n --#{root-defaults.$prefix}list-column-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-list-row-gap\n$list-row-gap: var(\n --#{root-defaults.$prefix}list-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-list-gap\n$list-gap: var(\n --#{root-defaults.$prefix}list-gap,\n #{$list-column-gap} #{$list-row-gap}\n);\n\n// List color properties.\n// --graupl-list-background\n$list-background: var(\n --#{root-defaults.$prefix}list-background,\n #{color.$background}\n);\n\n// --graupl-list-color\n$list-color: var(--#{root-defaults.$prefix}list-color, #{color.$color});\n\n// List border-properties.\n// --graupl-list-border-color\n$list-border-color: var(\n --#{root-defaults.$prefix}list-border-color,\n #{$list-color}\n);\n\n// --graupl-list-border-top-left-radius\n$list-border-top-left-radius: var(\n --#{root-defaults.$prefix}list-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-list-border-top-right-radius\n$list-border-top-right-radius: var(\n --#{root-defaults.$prefix}list-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-list-border-bottom-left-radius\n$list-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}list-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-list-border-bottom-right-radius\n$list-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}list-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-list-border-radius\n$list-border-radius: var(\n --#{root-defaults.$prefix}list-border-radius,\n #{$list-border-top-left-radius} #{$list-border-top-right-radius}\n #{$list-border-bottom-right-radius} #{$list-border-bottom-left-radius}\n);\n\n// --graupl-list-border-top-width\n$list-border-top-width: var(--#{root-defaults.$prefix}list-border-top-width, 0);\n\n// --graupl-list-border-right-width\n$list-border-right-width: var(\n --#{root-defaults.$prefix}list-border-right-width,\n 0\n);\n\n// --graupl-list-border-bottom-width\n$list-border-bottom-width: var(\n --#{root-defaults.$prefix}list-border-bottom-width,\n 0\n);\n\n// --graupl-list-border-left-width\n$list-border-left-width: var(\n --#{root-defaults.$prefix}list-border-left-width,\n 0\n);\n\n// --graupl-list-border-width\n$list-border-width: var(\n --#{root-defaults.$prefix}list-border-width,\n #{$list-border-top-width} #{$list-border-right-width}\n #{$list-border-bottom-width} #{$list-border-left-width}\n);\n\n// --graupl-list-border-top-style\n$list-border-top-style: var(\n --#{root-defaults.$prefix}list-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-list-border-right-style\n$list-border-right-style: var(\n --#{root-defaults.$prefix}list-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-list-border-bottom-style\n$list-border-bottom-style: var(\n --#{root-defaults.$prefix}list-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-list-border-left-style\n$list-border-left-style: var(\n --#{root-defaults.$prefix}list-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-list-border-style\n$list-border-style: var(\n --#{root-defaults.$prefix}list-border-style,\n #{$list-border-top-style} #{$list-border-right-style}\n #{$list-border-bottom-style} #{$list-border-left-style}\n);\n\n// List item properties.\n// --graupl-list-item-padding-x\n$list-item-padding-x: var(\n --#{root-defaults.$prefix}list-item-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-list-item-padding-y\n$list-item-padding-y: var(\n --#{root-defaults.$prefix}list-item-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-list-item-padding\n$list-item-padding: var(\n --#{root-defaults.$prefix}list-item-padding,\n #{$list-item-padding-y} #{$list-item-padding-x}\n);\n\n// --graupl-list-item-transition\n$list-item-transition: var(\n --#{root-defaults.$prefix}list-item-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-list-item-transition-reduced-motion\n$list-item-transition-reduced-motion: var(\n --#{root-defaults.$prefix}list-item-transition-reduced-motion,\n none\n);\n\n// List item transform properties.\n// --graupl-list-item-transform\n$list-item-transform: var(\n --#{root-defaults.$prefix}list-item-transform,\n #{defaults.$list-item-transform}\n);\n\n// --graupl-list-item-hover-transform\n$list-item-hover-transform: var(\n --#{root-defaults.$prefix}list-item-hover-transform,\n #{defaults.$list-item-hover-transform}\n);\n\n// List item color properties.\n// --graupl-list-item-background\n$list-item-background: var(\n --#{root-defaults.$prefix}list-item-background,\n #{color.$background}\n);\n\n// --graupl-list-item-color\n$list-item-color: var(\n --#{root-defaults.$prefix}list-item-color,\n #{color.$color}\n);\n\n// List item border-properties.\n// --graupl-list-item-border-color\n$list-item-border-color: var(\n --#{root-defaults.$prefix}list-item-border-color,\n #{$list-item-color}\n);\n\n// --graupl-list-item-border-top-left-radius\n$list-item-border-top-left-radius: var(\n --#{root-defaults.$prefix}list-item-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-list-item-border-top-right-radius\n$list-item-border-top-right-radius: var(\n --#{root-defaults.$prefix}list-item-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-list-item-border-bottom-left-radius\n$list-item-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}list-item-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-list-item-border-bottom-right-radius\n$list-item-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}list-item-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-list-item-border-radius\n$list-item-border-radius: var(\n --#{root-defaults.$prefix}list-item-border-radius,\n #{$list-item-border-top-left-radius} #{$list-item-border-top-right-radius}\n #{$list-item-border-bottom-right-radius}\n #{$list-item-border-bottom-left-radius}\n);\n\n// --graupl-list-item-border-top-width\n$list-item-border-top-width: var(\n --#{root-defaults.$prefix}list-item-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-list-item-border-right-width\n$list-item-border-right-width: var(\n --#{root-defaults.$prefix}list-item-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-list-item-border-bottom-width\n$list-item-border-bottom-width: var(\n --#{root-defaults.$prefix}list-item-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-list-item-border-left-width\n$list-item-border-left-width: var(\n --#{root-defaults.$prefix}list-item-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-list-item-border-width\n$list-item-border-width: var(\n --#{root-defaults.$prefix}list-item-border-width,\n #{$list-item-border-top-width} #{$list-item-border-right-width}\n #{$list-item-border-bottom-width} #{$list-item-border-left-width}\n);\n\n// --graupl-list-item-border-top-style\n$list-item-border-top-style: var(\n --#{root-defaults.$prefix}list-item-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-list-item-border-right-style\n$list-item-border-right-style: var(\n --#{root-defaults.$prefix}list-item-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-list-item-border-bottom-style\n$list-item-border-bottom-style: var(\n --#{root-defaults.$prefix}list-item-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-list-item-border-left-style\n$list-item-border-left-style: var(\n --#{root-defaults.$prefix}list-item-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-list-item-border-style\n$list-item-border-style: var(\n --#{root-defaults.$prefix}list-item-border-style,\n #{$list-item-border-top-style} #{$list-item-border-right-style}\n #{$list-item-border-bottom-style} #{$list-item-border-left-style}\n);\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCuIF,4yDAaA,o6DAWI,6GD/JF,oBCwKF,ioBAuBA","sources":["dist/css/component/list.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/component/list/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/list/_variables.scss"],"sourcesContent":["@layer graupl.component {\n .list {\n display: grid;\n position: relative;\n margin: var(--graupl-list-margin, var(--graupl-list-margin-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-list-margin-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n padding: var(--graupl-list-padding, var(--graupl-list-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-list-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n border-width: var(--graupl-list-border-width, var(--graupl-list-border-top-width, 0) var(--graupl-list-border-right-width, 0) var(--graupl-list-border-bottom-width, 0) var(--graupl-list-border-left-width, 0));\n border-style: var(--graupl-list-border-style, var(--graupl-list-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-list-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-list-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-list-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-list-border-radius, var(--graupl-list-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n list-style: none;\n gap: var(--graupl-list-gap, var(--graupl-list-column-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-list-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))));\n }\n .list-item {\n position: relative;\n padding: var(--graupl-list-item-padding, var(--graupl-list-item-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-list-item-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-list-item-transform, none);\n transition: var(--graupl-list-item-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-list-item-border-width, var(--graupl-list-item-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-list-item-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-list-item-border-style, var(--graupl-list-item-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-list-item-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-list-item-border-radius, var(--graupl-list-item-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-list-item-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n }\n .list-item:hover {\n --graupl-list-item-transform: var(--graupl-list-item-hover-transform, none);\n }\n .list-item.hover {\n --graupl-list-item-transform: var(--graupl-list-item-hover-transform, none);\n }\n}\n@layer graupl.theme {\n .list {\n border-color: var(--graupl-list-border-color, var(--graupl-list-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%))))))));\n background: var(--graupl-list-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-list-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%)))))));\n }\n .list-item {\n border-color: var(--graupl-list-item-border-color, var(--graupl-list-item-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%))))))));\n background: var(--graupl-list-item-background, var(--graupl-background, var(--graupl-root-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))))));\n color: var(--graupl-list-item-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%)))))));\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 list component styles.\n//\n// This module provides the list component styles.\n//\n// The following selectors are generated by default:\n// - `.list`: The list container.\n// - `.list-item`: The list item.\n//\n// The following custom properties can be used to customize the list component:\n// | Property | Description | Default Value |\n// | ---------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-list-padding-x` | Horizontal padding of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-padding-y` | Vertical padding of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-padding` | Shorthand padding of the list. | `var(--graupl-list-padding-y) var(--graupl-list-padding-x)` |\n// | `--graupl-list-margin-x` | Horizontal margin of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-margin-y` | Vertical margin of the list. | `var(--graupl-spacer-0)` |\n// | `--graupl-list-margin` | Shorthand margin of the list. | `var(--graupl-list-margin-y) var(--graupl-list-margin-x)` |\n// | `--graupl-list-gap` | Gap between list items (column/row). | `var(--graupl-list-column-gap) var(--graupl-list-row-gap)` |\n// | `--graupl-list-background` | Background colour of the list. | `var(--graupl-background)` |\n// | `--graupl-list-color` | Text colour of the list. | `var(--graupl-color)` |\n// | `--graupl-list-border-width` | Border width of the list. | `0 0 0 0` |\n// | `--graupl-list-border-style` | Border style of the list. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-list-border-radius` | Border radius of the list. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-list-border-color` | Border colour of the list. | `var(--graupl-list-color)` |\n// | `--graupl-list-item-padding` | Padding for a list item. | `var(--graupl-spacer-3) var(--graupl-spacer-5)` |\n// | `--graupl-list-item-transition` | Transition applied to list items. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-list-item-transition-reduced-motion` | Transition for items when reduced motion is enabled. | `none` |\n// | `--graupl-list-item-transform` | Base transform for list items. | `none` |\n// | `--graupl-list-item-hover-transform` | Transform for hovered list items. | `none` |\n// | `--graupl-list-item-background` | Background colour of list items. | `var(--graupl-background)` |\n// | `--graupl-list-item-color` | Text colour of list items. | `var(--graupl-color)` |\n// | `--graupl-list-item-border-width` | Border width of list items. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-list-item-border-style` | Border style of list items. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-list-item-border-radius` | Border radius of list items. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-list-item-border-color` | Border colour of list items. | `var(--graupl-list-item-color)` |\n//\n// The following sass variables can be used to customize the generation of the list component:\n// | Variable | Description | Default Value |\n// | ---------------------------- | ----------------------------------------- | ---------------- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | Flag to generate the base theme map. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$list-selector-base` | Selector base for the list container. | `$selector-base` |\n// | `$list-selector` | Selector for the list container. | `\"list\"` |\n// | `$list-theme-selector-base` | Selector base for theme modifiers. | `\".\"` |\n// | `$list-theme-selector-prefix`| Selector prefix for theme modifiers. | `\"\"` |\n// | `$list-item-selector-base` | Selector base for list items. | `$selector-base` |\n// | `$list-item-selector` | Selector for list items. | `\"list-item\"` |\n// | `$list-item-transform` | Base transform for list items. | `none` |\n// | `$list-item-hover-transform` | Hover transform for list items. | `none` |\n// | `$list-theme-mappings` | Map of properties/shades for list themes. | `()` |\n// | `$list-theme-map` | Expanded map of properties/colors/shades. | `()` |\n//\n// ## Using `$list-theme-mappings`\n//\n// `$list-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ```scss\n// $list-theme-mappings: (\n// color: 900,\n// border-color: 700,\n// )\n// ```\n//\n// This directly[1] maps to all list variants, telling them what shade to use for the base colour slots.\n// All list variants will use the following based on the example above:\n// - Primary lists will have their `--graupl-list-color` property set to `--graupl-theme-active--primary--900` and `--graupl-list-border-color` to `--graupl-theme-active--primary--700`,\n// - Secondary lists will use the same shades for the secondary palette, and\n// - Tertiary lists will use the same shades for the tertiary palette.\n//\n// You can use this to customize _all_ list variants in the same way.\n//\n// For example, if you use the following map:\n// ```scss\n// $list-theme-mappings: (\n// color: 500,\n// item-color: 500,\n// )\n// ```\n//\n// All list variants will use the following:\n// - Primary lists will have their `--graupl-list-color` and `--graupl-list-item-color` properties set to `--graupl-theme-active--primary--500`,\n// - Secondary lists will have theirs set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary lists will have theirs set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$list-theme-mappings` gets parsed into a larger, more explicit map: `$list-theme-map`.\n//\n// Using `$list-theme-map`\n//\n// `$list-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ```scss\n// $list-theme-map: (\n// primary: (\n// item-border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// item-border-color: (\n// color: secondary,\n// shade: 500\n// ),\n// ),\n// tertiary: (\n// item-border-color: (\n// color: tertiary,\n// shade: 300\n// ),\n// ),\n// )\n// ```\n//\n// This directly maps to all list variants, telling them what shade to use for said property.\n// You can use this to customize list variants individually.\n//\n// @example\n// <ul class=\"list\">\n// <li class=\"list-item\">First item</li>\n// <li class=\"list-item\">Second item</li>\n// <li class=\"list-item\">Third item</li>\n// </ul>\n//\n// @example\n// <ol class=\"list list-style-decimal list-style-inside\">\n// <li class=\"list-item\">Numbered item one</li>\n// <li class=\"list-item\">Numbered item two</li>\n// <li class=\"list-item\">Numbered item three</li>\n// </ol>\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/animation\";\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\" as theme;\n@use \"defaults\";\n@use \"sass:map\";\n@use \"variables\" as *;\n\n@include layer(component) {\n // .list\n #{defaults.$list-selector-base}#{defaults.$list-selector} {\n display: grid;\n position: relative;\n margin: $list-margin;\n padding: $list-padding;\n border-width: $list-border-width;\n border-style: $list-border-style;\n border-radius: $list-border-radius;\n list-style: none;\n gap: $list-gap;\n }\n\n // .list-item\n #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {\n position: relative;\n padding: $list-item-padding;\n transform: $list-item-transform;\n transition: $list-item-transition;\n border-width: $list-item-border-width;\n border-style: $list-item-border-style;\n border-radius: $list-item-border-radius;\n\n @each $selector in map.get(root-defaults.$state-selectors, hover) {\n // e.g &:hover, &.hover\n &#{$selector} {\n --#{root-defaults.$prefix}list-item-transform: #{$list-item-hover-transform};\n }\n }\n }\n}\n\n@include layer(theme) {\n // .list\n #{defaults.$list-selector-base}#{defaults.$list-selector} {\n border-color: $list-border-color;\n background: $list-background;\n color: $list-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$list-theme-map,\n defaults.$list-theme-selector-base,\n defaults.$list-theme-selector-prefix,\n \"list-\"\n );\n @include theme.generate-modifiers(\n defaults.$list-theme-map,\n defaults.$list-theme-selector-base,\n defaults.$list-theme-selector-prefix,\n \"list-\",\n \"\"\n );\n }\n }\n\n // .list-item\n #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {\n border-color: $list-item-border-color;\n background: $list-item-background;\n color: $list-item-color;\n }\n}\n","// @graupl/core list component variables.\n//\n// These values are to be used to directly style components and provide a\n// cleaner way to reference custom properties.\n\n// Custom property defaults:\n// | Custom property | Default |\n// | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | --graupl-list-padding-x | var(--graupl-spacer-0) |\n// | --graupl-list-padding-y | var(--graupl-spacer-0) |\n// | --graupl-list-padding | var(--graupl-list-padding-y) var(--graupl-list-padding-x) |\n// | --graupl-list-margin-x | var(--graupl-spacer-0) |\n// | --graupl-list-margin-y | var(--graupl-spacer-0) |\n// | --graupl-list-margin | var(--graupl-list-margin-y) var(--graupl-list-margin-x) |\n// | --graupl-list-column-gap | var(--graupl-spacer-2) |\n// | --graupl-list-row-gap | var(--graupl-spacer-2) |\n// | --graupl-list-gap | var(--graupl-list-column-gap) var(--graupl-list-row-gap) |\n// | --graupl-list-background | var(--graupl-background) |\n// | --graupl-list-color | var(--graupl-color) |\n// | --graupl-list-border-color | var(--graupl-list-color) |\n// | --graupl-list-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-list-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-list-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-list-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-list-border-radius | var(--graupl-list-border-top-left-radius) var(--graupl-list-border-top-right-radius) var(--graupl-list-border-bottom-right-radius) var(--graupl-list-border-bottom-left-radius) |\n// | --graupl-list-border-top-width | 0 |\n// | --graupl-list-border-right-width | 0 |\n// | --graupl-list-border-bottom-width | 0 |\n// | --graupl-list-border-left-width | 0 |\n// | --graupl-list-border-width | var(--graupl-list-border-top-width) var(--graupl-list-border-right-width) var(--graupl-list-border-bottom-width) var(--graupl-list-border-left-width) |\n// | --graupl-list-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-list-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-list-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-list-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-list-border-style | var(--graupl-list-border-top-style) var(--graupl-list-border-right-style) var(--graupl-list-border-bottom-style) var(--graupl-list-border-left-style) |\n// | --graupl-list-item-padding-x | var(--graupl-spacer-5) |\n// | --graupl-list-item-padding-y | var(--graupl-spacer-3) |\n// | --graupl-list-item-padding | var(--graupl-list-item-padding-y) var(--graupl-list-item-padding-x) |\n// | --graupl-list-item-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-list-item-transition-reduced-motion | none |\n// | --graupl-list-item-transform | none |\n// | --graupl-list-item-hover-transform | none |\n// | --graupl-list-item-background | var(--graupl-background) |\n// | --graupl-list-item-color | var(--graupl-color) |\n// | --graupl-list-item-border-color | var(--graupl-list-item-color) |\n// | --graupl-list-item-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-list-item-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-list-item-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-list-item-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-list-item-border-radius | var(--graupl-list-item-border-top-left-radius) var(--graupl-list-item-border-top-right-radius) var(--graupl-list-item-border-bottom-right-radius) var(--graupl-list-item-border-bottom-left-radius) |\n// | --graupl-list-item-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-list-item-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-list-item-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-list-item-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-list-item-border-width | var(--graupl-list-item-border-top-width) var(--graupl-list-item-border-right-width) var(--graupl-list-item-border-bottom-width) var(--graupl-list-item-border-left-width) |\n// | --graupl-list-item-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-list-item-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-list-item-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-list-item-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-list-item-border-style | var(--graupl-list-item-border-top-style) var(--graupl-list-item-border-right-style) var(--graupl-list-item-border-bottom-style) var(--graupl-list-item-border-left-style) |\n\n@use \"../../defaults\" as root-defaults;\n@use \"../../theme/color/variables\" as color;\n@use \"../../variables\" as root-variables;\n@use \"defaults\";\n@use \"sass:map\";\n\n// List properties.\n// --graupl-list-padding-x\n$list-padding-x: var(\n --#{root-defaults.$prefix}list-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-padding-y\n$list-padding-y: var(\n --#{root-defaults.$prefix}list-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-padding\n$list-padding: var(\n --#{root-defaults.$prefix}list-padding,\n #{$list-padding-y} #{$list-padding-x}\n);\n\n// --graupl-list-margin-x\n$list-margin-x: var(\n --#{root-defaults.$prefix}list-margin-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-margin-y\n$list-margin-y: var(\n --#{root-defaults.$prefix}list-margin-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-list-margin\n$list-margin: var(\n --#{root-defaults.$prefix}list-margin,\n #{$list-margin-y} #{$list-margin-x}\n);\n\n// List gap properties.\n// --graupl-list-column-gap\n$list-column-gap: var(\n --#{root-defaults.$prefix}list-column-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-list-row-gap\n$list-row-gap: var(\n --#{root-defaults.$prefix}list-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-list-gap\n$list-gap: var(\n --#{root-defaults.$prefix}list-gap,\n #{$list-column-gap} #{$list-row-gap}\n);\n\n// List color properties.\n// --graupl-list-background\n$list-background: var(\n --#{root-defaults.$prefix}list-background,\n #{color.$background}\n);\n\n// --graupl-list-color\n$list-color: var(--#{root-defaults.$prefix}list-color, #{color.$color});\n\n// List border-properties.\n// --graupl-list-border-color\n$list-border-color: var(\n --#{root-defaults.$prefix}list-border-color,\n #{$list-color}\n);\n\n// --graupl-list-border-top-left-radius\n$list-border-top-left-radius: var(\n --#{root-defaults.$prefix}list-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-list-border-top-right-radius\n$list-border-top-right-radius: var(\n --#{root-defaults.$prefix}list-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-list-border-bottom-left-radius\n$list-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}list-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-list-border-bottom-right-radius\n$list-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}list-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-list-border-radius\n$list-border-radius: var(\n --#{root-defaults.$prefix}list-border-radius,\n #{$list-border-top-left-radius} #{$list-border-top-right-radius}\n #{$list-border-bottom-right-radius} #{$list-border-bottom-left-radius}\n);\n\n// --graupl-list-border-top-width\n$list-border-top-width: var(--#{root-defaults.$prefix}list-border-top-width, 0);\n\n// --graupl-list-border-right-width\n$list-border-right-width: var(\n --#{root-defaults.$prefix}list-border-right-width,\n 0\n);\n\n// --graupl-list-border-bottom-width\n$list-border-bottom-width: var(\n --#{root-defaults.$prefix}list-border-bottom-width,\n 0\n);\n\n// --graupl-list-border-left-width\n$list-border-left-width: var(\n --#{root-defaults.$prefix}list-border-left-width,\n 0\n);\n\n// --graupl-list-border-width\n$list-border-width: var(\n --#{root-defaults.$prefix}list-border-width,\n #{$list-border-top-width} #{$list-border-right-width}\n #{$list-border-bottom-width} #{$list-border-left-width}\n);\n\n// --graupl-list-border-top-style\n$list-border-top-style: var(\n --#{root-defaults.$prefix}list-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-list-border-right-style\n$list-border-right-style: var(\n --#{root-defaults.$prefix}list-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-list-border-bottom-style\n$list-border-bottom-style: var(\n --#{root-defaults.$prefix}list-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-list-border-left-style\n$list-border-left-style: var(\n --#{root-defaults.$prefix}list-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-list-border-style\n$list-border-style: var(\n --#{root-defaults.$prefix}list-border-style,\n #{$list-border-top-style} #{$list-border-right-style}\n #{$list-border-bottom-style} #{$list-border-left-style}\n);\n\n// List item properties.\n// --graupl-list-item-padding-x\n$list-item-padding-x: var(\n --#{root-defaults.$prefix}list-item-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-list-item-padding-y\n$list-item-padding-y: var(\n --#{root-defaults.$prefix}list-item-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-list-item-padding\n$list-item-padding: var(\n --#{root-defaults.$prefix}list-item-padding,\n #{$list-item-padding-y} #{$list-item-padding-x}\n);\n\n// --graupl-list-item-transition\n$list-item-transition: var(\n --#{root-defaults.$prefix}list-item-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-list-item-transition-reduced-motion\n$list-item-transition-reduced-motion: var(\n --#{root-defaults.$prefix}list-item-transition-reduced-motion,\n none\n);\n\n// List item transform properties.\n// --graupl-list-item-transform\n$list-item-transform: var(\n --#{root-defaults.$prefix}list-item-transform,\n #{defaults.$list-item-transform}\n);\n\n// --graupl-list-item-hover-transform\n$list-item-hover-transform: var(\n --#{root-defaults.$prefix}list-item-hover-transform,\n #{defaults.$list-item-hover-transform}\n);\n\n// List item color properties.\n// --graupl-list-item-background\n$list-item-background: var(\n --#{root-defaults.$prefix}list-item-background,\n #{color.$background}\n);\n\n// --graupl-list-item-color\n$list-item-color: var(\n --#{root-defaults.$prefix}list-item-color,\n #{color.$color}\n);\n\n// List item border-properties.\n// --graupl-list-item-border-color\n$list-item-border-color: var(\n --#{root-defaults.$prefix}list-item-border-color,\n #{$list-item-color}\n);\n\n// --graupl-list-item-border-top-left-radius\n$list-item-border-top-left-radius: var(\n --#{root-defaults.$prefix}list-item-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-list-item-border-top-right-radius\n$list-item-border-top-right-radius: var(\n --#{root-defaults.$prefix}list-item-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-list-item-border-bottom-left-radius\n$list-item-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}list-item-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-list-item-border-bottom-right-radius\n$list-item-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}list-item-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-list-item-border-radius\n$list-item-border-radius: var(\n --#{root-defaults.$prefix}list-item-border-radius,\n #{$list-item-border-top-left-radius} #{$list-item-border-top-right-radius}\n #{$list-item-border-bottom-right-radius}\n #{$list-item-border-bottom-left-radius}\n);\n\n// --graupl-list-item-border-top-width\n$list-item-border-top-width: var(\n --#{root-defaults.$prefix}list-item-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-list-item-border-right-width\n$list-item-border-right-width: var(\n --#{root-defaults.$prefix}list-item-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-list-item-border-bottom-width\n$list-item-border-bottom-width: var(\n --#{root-defaults.$prefix}list-item-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-list-item-border-left-width\n$list-item-border-left-width: var(\n --#{root-defaults.$prefix}list-item-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-list-item-border-width\n$list-item-border-width: var(\n --#{root-defaults.$prefix}list-item-border-width,\n #{$list-item-border-top-width} #{$list-item-border-right-width}\n #{$list-item-border-bottom-width} #{$list-item-border-left-width}\n);\n\n// --graupl-list-item-border-top-style\n$list-item-border-top-style: var(\n --#{root-defaults.$prefix}list-item-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-list-item-border-right-style\n$list-item-border-right-style: var(\n --#{root-defaults.$prefix}list-item-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-list-item-border-bottom-style\n$list-item-border-bottom-style: var(\n --#{root-defaults.$prefix}list-item-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-list-item-border-left-style\n$list-item-border-left-style: var(\n --#{root-defaults.$prefix}list-item-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-list-item-border-style\n$list-item-border-style: var(\n --#{root-defaults.$prefix}list-item-border-style,\n #{$list-item-border-top-style} #{$list-item-border-right-style}\n #{$list-item-border-bottom-style} #{$list-item-border-left-style}\n);\n"],"names":[]}
|