@graupl/core 1.0.0-beta.41 → 1.0.0-beta.43
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.map +1 -1
- package/dist/css/component/card.css +1 -1
- package/dist/css/component/card.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/css/layout/columns.css +1 -1
- package/dist/css/layout/columns.css.map +1 -1
- package/dist/css/layout/container.css +1 -1
- package/dist/css/layout/container.css.map +1 -1
- package/dist/css/layout/flex-columns.css +1 -1
- package/dist/css/layout/flex-columns.css.map +1 -1
- package/dist/css/layout.css +1 -1
- package/dist/css/layout.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/component/accordion/_index.scss +125 -125
- package/src/scss/component/card/_index.scss +54 -0
- package/src/scss/layout/columns/_index.scss +1 -1
- package/src/scss/layout/columns/_variables.scss +4 -7
- package/src/scss/layout/container/_index.scss +1 -1
- package/src/scss/layout/container/_variables.scss +4 -10
- package/src/scss/layout/flex-columns/_index.scss +1 -1
- package/src/scss/layout/flex-columns/_variables.scss +11 -15
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.component{.card{padding:var(--graupl-card-padding,var(--graupl-card-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));transform:var(--graupl-card-transform,none);transition:var(--graupl-card-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));border-width:var(--graupl-card-border-width,var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-card-border-style,var(--graupl-card-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-card-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-card-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-card-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-card-border-radius,var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-card-gap,var(--graupl-card-column-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-row-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));isolation:isolate;grid-template-columns:[image-start content-start]1fr[image-end content-end];display:grid;position:relative}.card,.card.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.bottom,.card.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card:hover{--graupl-card-transform:var(--graupl-card-hover-transform,none)}.card.horizontal,.card.horizontal.left{--graupl-card-content-ratio:var(--graupl-horizontal-card-content-ratio,3fr);--graupl-card-image-ratio:var(--graupl-horizontal-card-image-ratio,2fr);grid-template-columns:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end];grid-template-rows:[image-start content-start]1fr[image-end content-end]}.card.horizontal .card-image img,.card.horizontal.left .card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))}.card.horizontal.right,.card.horizontal.inverse{grid-template-columns:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card.horizontal.right .card-image img,.card.horizontal.inverse .card-image img{border-radius:0 calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) 0}.card-image{padding:var(--graupl-card-image-padding,var(--graupl-card-image-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-image-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));grid-area:image}.card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) 0 0;object-fit:cover;width:100%;height:100%}.card-content{padding:var(--graupl-card-content-padding,var(--graupl-card-content-padding-y,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))) var(--graupl-card-content-padding-x,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))));gap:var(--graupl-card-content-gap,var(--graupl-card-content-column-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-content-row-gap,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))));flex-direction:column;grid-area:content;display:flex}.card-body{flex:1 0 auto}.card-footer,.card-title{flex:none}@container (width<=767px){.card.horizontal,.card.horizontal.left,.card.horizontal.top,.card.horizontal.right,.card.horizontal.bottom,.card.horizontal.inverse{--graupl-horizontal-card-image-ratio:auto;--graupl-horizontal-card-content-ratio:1fr;grid-template-columns:[image-start content-start]1fr[image-end content-end]}.card.horizontal,.card.horizontal.left,.card.horizontal.right,.card.horizontal.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.horizontal.bottom,.card.horizontal.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}}@media (prefers-reduced-motion:reduce){.card{--graupl-card-transition:var(--graupl-card-transition-reduced-motion,none)}}}@layer graupl.theme{.card{--graupl-color:var(--graupl-card-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))))));--graupl-background:var(--graupl-card-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))))));border-color:var(--graupl-card-border-color,var(--graupl-card-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-card-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-card-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))))))}.card-title{color:var(--graupl-card-title-color,var(--graupl-card-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)))))));font-size:var(--graupl-card-title-font-size,var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(1.728 * var(--graupl-font-size-base,1rem)))));font-weight:var(--graupl-card-title-font-weight,var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)))));line-height:var(--graupl-card-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,var(--graupl-root-line-height,1.2em)))))}}
|
|
1
|
+
@layer graupl.component{.card{padding:var(--graupl-card-padding,var(--graupl-card-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));transform:var(--graupl-card-transform,none);transition:var(--graupl-card-transition,transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease));border-width:var(--graupl-card-border-width,var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))) var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))));border-style:var(--graupl-card-border-style,var(--graupl-card-border-top-style,var(--graupl-border-top-style,var(--graupl-border-style,solid))) var(--graupl-card-border-right-style,var(--graupl-border-right-style,var(--graupl-border-style,solid))) var(--graupl-card-border-bottom-style,var(--graupl-border-bottom-style,var(--graupl-border-style,solid))) var(--graupl-card-border-left-style,var(--graupl-border-left-style,var(--graupl-border-style,solid))));border-radius:var(--graupl-card-border-radius,var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))));gap:var(--graupl-card-gap,var(--graupl-card-column-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-row-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));isolation:isolate;grid-template-columns:[image-start content-start]1fr[image-end content-end];display:grid;position:relative}.card,.card.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.bottom,.card.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card.bottom .card-image img,.card.inverse .card-image img{border-radius:0 0 calc(var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))}.card:hover{--graupl-card-transform:var(--graupl-card-hover-transform,none)}.card.horizontal,.card.horizontal.left{--graupl-card-content-ratio:var(--graupl-horizontal-card-content-ratio,3fr);--graupl-card-image-ratio:var(--graupl-horizontal-card-image-ratio,2fr);grid-template-columns:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end];grid-template-rows:[image-start content-start]1fr[image-end content-end]}.card.horizontal .card-image img,.card.horizontal.left .card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))}.card.horizontal.right,.card.horizontal.inverse{grid-template-columns:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card.horizontal.right .card-image img,.card.horizontal.inverse .card-image img{border-radius:0 calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) 0}.card-image{padding:var(--graupl-card-image-padding,var(--graupl-card-image-padding-y,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-image-padding-x,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))));grid-area:image}.card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) 0 0;object-fit:cover;width:100%;height:100%}.card-content{padding:var(--graupl-card-content-padding,var(--graupl-card-content-padding-y,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))) var(--graupl-card-content-padding-x,var(--graupl-spacer-5,calc(1 * var(--graupl-spacer,1rem)))));gap:var(--graupl-card-content-gap,var(--graupl-card-content-column-gap,var(--graupl-spacer-0,calc(0 * var(--graupl-spacer,1rem)))) var(--graupl-card-content-row-gap,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))));flex-direction:column;grid-area:content;display:flex}.card-body{flex:1 0 auto}.card-footer,.card-title{flex:none}@container (width<=767px){.card.horizontal,.card.horizontal.left,.card.horizontal.top,.card.horizontal.right,.card.horizontal.bottom,.card.horizontal.inverse{--graupl-horizontal-card-image-ratio:auto;--graupl-horizontal-card-content-ratio:1fr;grid-template-columns:[image-start content-start]1fr[image-end content-end]}.card.horizontal,.card.horizontal.left,.card.horizontal.right,.card.horizontal.top{grid-template-rows:[image-start] var(--graupl-card-image-ratio,auto) [image-end content-start] var(--graupl-card-content-ratio,1fr) [content-end]}.card.horizontal .card-image img,.card.horizontal.left .card-image img,.card.horizontal.right .card-image img,.card.horizontal.top .card-image img{border-radius:calc(var(--graupl-card-border-top-left-radius,var(--graupl-border-top-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-top-right-radius,var(--graupl-border-top-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-top-width,var(--graupl-border-top-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) 0 0}.card.horizontal.bottom,.card.horizontal.inverse{grid-template-rows:[content-start] var(--graupl-card-content-ratio,1fr) [content-end image-start] var(--graupl-card-image-ratio,auto) [image-end]}.card.horizontal.bottom .card-image img,.card.horizontal.inverse .card-image img{border-radius:0 0 calc(var(--graupl-card-border-bottom-right-radius,var(--graupl-border-bottom-right-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-right-width,var(--graupl-border-right-width,var(--graupl-border-width,.125rem))))) calc(var(--graupl-card-border-bottom-left-radius,var(--graupl-border-bottom-left-radius,var(--graupl-border-radius,.125rem))) - min(var(--graupl-card-border-bottom-width,var(--graupl-border-bottom-width,var(--graupl-border-width,.125rem))), var(--graupl-card-border-left-width,var(--graupl-border-left-width,var(--graupl-border-width,.125rem)))))}}@media (prefers-reduced-motion:reduce){.card{--graupl-card-transition:var(--graupl-card-transition-reduced-motion,none)}}}@layer graupl.theme{.card{--graupl-color:var(--graupl-card-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))))));--graupl-background:var(--graupl-card-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))))));border-color:var(--graupl-card-border-color,var(--graupl-card-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-card-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-card-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))))))}.card-title{color:var(--graupl-card-title-color,var(--graupl-card-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)))))));font-size:var(--graupl-card-title-font-size,var(--graupl-h4-font-size,var(--graupl-font-2xl,calc(1.728 * var(--graupl-font-size-base,1rem)))));font-weight:var(--graupl-card-title-font-weight,var(--graupl-h4-font-weight,var(--graupl-heading-font-weight,var(--graupl-font-weight-bold,var(--graupl-font-weight-bold,700)))));line-height:var(--graupl-card-title-line-height,var(--graupl-h4-line-height,var(--graupl-heading-line-height,var(--graupl-line-height,var(--graupl-root-line-height,1.2em)))))}}
|
|
2
2
|
/*# sourceMappingURL=card.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"AESI,wBC2OF,8nEAcE,kKAWA,6KAUA,4EAOE,yZAcE,mwBAmBF,qMAUE,oxBAsBN,iQAIE,4uBAqBF,khBASA,yBAKA,mCE/WA,0BF+XQ,qSAaA,qOAaA,oMGraR,uCHqbE,mFDvbA,oBC+bF,uiCAmBA","sources":["dist/css/component/card.css","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/theme/typography/_defaults.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/component/card/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/component/card/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_container.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_animation.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n .card {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: var(--graupl-card-padding, var(--graupl-card-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-card-transform, none);\n transition: var(--graupl-card-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-card-border-width, var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-card-border-style, var(--graupl-card-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-card-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-card-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-card-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-card-border-radius, var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n gap: var(--graupl-card-gap, var(--graupl-card-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-row-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n isolation: isolate;\n }\n .card, .card.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.bottom, .card.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card:hover {\n --graupl-card-transform: var(--graupl-card-hover-transform, none);\n }\n .card.horizontal, .card.horizontal.left {\n --graupl-card-content-ratio: var(--graupl-horizontal-card-content-ratio, 3fr);\n --graupl-card-image-ratio: var(--graupl-horizontal-card-image-ratio, 2fr);\n grid-template-columns: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal .card-image img, .card.horizontal.left .card-image img {\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n }\n .card.horizontal.right, .card.horizontal.inverse {\n grid-template-columns: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card.horizontal.right .card-image img, .card.horizontal.inverse .card-image img {\n border-radius: 0 calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0;\n }\n .card-image {\n grid-area: image;\n padding: var(--graupl-card-image-padding, var(--graupl-card-image-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-image-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .card-image img {\n width: 100%;\n height: 100%;\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0 0;\n object-fit: cover;\n }\n .card-content {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: var(--graupl-card-content-padding, var(--graupl-card-content-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n gap: var(--graupl-card-content-gap, var(--graupl-card-content-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-row-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .card-body {\n flex: 1 0 auto;\n }\n .card-footer {\n flex: 0 0 auto;\n }\n .card-title {\n flex: 0 0 auto;\n }\n @container (width <= 767px) {\n .card.horizontal, .card.horizontal.left, .card.horizontal.top, .card.horizontal.right, .card.horizontal.bottom, .card.horizontal.inverse {\n --graupl-horizontal-card-image-ratio: auto;\n --graupl-horizontal-card-content-ratio: 1fr;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal, .card.horizontal.left, .card.horizontal.right, .card.horizontal.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.horizontal.bottom, .card.horizontal.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .card {\n --graupl-card-transition: var(--graupl-card-transition-reduced-motion, none);\n }\n }\n}\n@layer graupl.theme {\n .card {\n --graupl-color: var(--graupl-card-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 --graupl-background: var(--graupl-card-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 border-color: var(--graupl-card-border-color, var(--graupl-card-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-card-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-card-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 .card-title {\n color: var(--graupl-card-title-color, var(--graupl-card-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 font-size: var(--graupl-card-title-font-size, var(--graupl-h4-font-size, var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem)))));\n font-weight: var(--graupl-card-title-font-weight, var(--graupl-h4-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))));\n line-height: var(--graupl-card-title-line-height, var(--graupl-h4-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, var(--graupl-root-line-height, 1.2em)))));\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: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !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$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !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$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !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 card component styles.\n//\n// This module provides the card component styles for vertical and horizontal layouts.\n//\n// The following selectors are generated by default:\n// - `.card`: The card container.\n// - `.card-image`: The card image wrapper.\n// - `.card-content`: The card content wrapper.\n// - `.card-body`: The main body region.\n// - `.card-header`: The header region.\n// - `.card-footer`: The footer region.\n// - `.card-title`: The title element.\n// - `.horizontal`: A modifier to use a horizontal layout for the card.\n// - `.left`: A modifier to position the image on the left in a horizontal layout.\n// - `.right`: A modifier to position the image on the right in a horizontal layout.\n// - `.top`: A modifier to position the image on the top in a vertical layout.\n// - `.bottom`: A modifier to position the image on the bottom in a vertical layout.\n// - `.inverse`: A modifier to invert the image/content positioning.\n//\n// The following custom properties can be used to customize the card component:\n// | Property | Description | Default Value |\n// | ------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-card-padding-x` | Value for card padding horizontal. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding-y` | Value for card padding vertical. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding` | Value for card padding. | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)` |\n// | `--graupl-card-transition` | Value for card transition. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-card-transition-reduced-motion` | Value for card transition reduced motion. | `none` |\n// | `--graupl-card-transform` | Value for card transform. | `none` |\n// | `--graupl-card-hover-transform` | Value for card hover transform. | `none` |\n// | `--graupl-card-column-gap` | Value for card column gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-row-gap` | Value for card row gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-gap` | Value for card gap. | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)` |\n// | `--graupl-card-background` | Value for card background. | `var(--graupl-background)` |\n// | `--graupl-card-color` | Value for card color. | `var(--graupl-color)` |\n// | `--graupl-card-border-color` | Value for card border color. | `var(--graupl-card-color)` |\n// | `--graupl-card-border-top-left-radius` | Value for card border top left radius. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-card-border-top-right-radius` | Value for card border top right radius. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-card-border-bottom-left-radius` | Value for card border bottom left radius. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-card-border-bottom-right-radius` | Value for card border bottom right radius. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-card-border-radius` | Value for card border radius. | `var(--graupl-card-border-top-left-radius) var(--graupl-card-border-top-right-radius) var(--graupl-card-border-bottom-right-radius) var(--graupl-card-border-bottom-left-radius)` |\n// | `--graupl-card-border-top-width` | Value for card border top width. | `var(--graupl-border-top-width)` |\n// | `--graupl-card-border-right-width` | Value for card border right width. | `var(--graupl-border-right-width)` |\n// | `--graupl-card-border-bottom-width` | Value for card border bottom width. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-card-border-left-width` | Value for card border left width. | `var(--graupl-border-left-width)` |\n// | `--graupl-card-border-width` | Value for card border width. | `var(--graupl-card-border-top-width) var(--graupl-card-border-right-width) var(--graupl-card-border-bottom-width) var(--graupl-card-border-left-width)` |\n// | `--graupl-card-border-top-style` | Value for card border top style. | `var(--graupl-border-top-style)` |\n// | `--graupl-card-border-right-style` | Value for card border right style. | `var(--graupl-border-right-style)` |\n// | `--graupl-card-border-bottom-style` | Value for card border bottom style. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-card-border-left-style` | Value for card border left style. | `var(--graupl-border-left-style)` |\n// | `--graupl-card-border-style` | Value for card border style. | `var(--graupl-card-border-top-style) var(--graupl-card-border-right-style) var(--graupl-card-border-bottom-style) var(--graupl-card-border-left-style)` |\n// | `--graupl-card-content-ratio` | Value for card content ratio. | `1fr` |\n// | `--graupl-card-image-ratio` | Value for card image ratio. | `auto` |\n// | `--graupl-horizontal-card-content-ratio` | Value for card horizontal card content ratio. | `3fr` |\n// | `--graupl-horizontal-card-image-ratio` | Value for card horizontal card image ratio. | `2fr` |\n// | `--graupl-card-image-padding-x` | Value for card image padding horizontal. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-image-padding-y` | Value for card image padding vertical. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-image-padding` | Value for card image padding. | `var(--graupl-card-image-padding-y) var(--graupl-card-image-padding-x)` |\n// | `--graupl-card-content-padding-x` | Value for card content padding horizontal. | `var(--graupl-spacer-5)` |\n// | `--graupl-card-content-padding-y` | Value for card content padding vertical. | `var(--graupl-spacer-3)` |\n// | `--graupl-card-content-padding` | Value for card content padding. | `var(--graupl-card-content-padding-y) var(--graupl-card-content-padding-x)` |\n// | `--graupl-card-content-column-gap` | Value for card content column gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-content-row-gap` | Value for card content row gap. | `var(--graupl-spacer-3)` |\n// | `--graupl-card-content-gap` | Value for card content gap. | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)` |\n// | `--graupl-card-title-color` | Value for card title color. | `var(--graupl-card-color)` |\n// | `--graupl-card-title-font-size` | Value for card title font size. | `var(--graupl-h4-font-size)` |\n// | `--graupl-card-title-font-weight` | Value for card title font weight. | `var(--graupl-h4-font-weight)` |\n// | `--graupl-card-title-font-family` | Value for card title font family. | `var(--graupl-h4-font-family)` |\n// | `--graupl-card-title-line-height` | Value for card title line height. | `var(--graupl-h4-line-height)` |\n// The following sass variables can be used to customize the generation of the card component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |\n// | `$selector-base` | Default for selector base. | `\".\"` |\n// | `$modifier-selector-base` | Default for modifier selector base. | `\".\"` |\n// | `$generate-base-theme-map` | Default for generate base theme map. | `true` |\n// | `$themeable` | Default for themeable. | `false` |\n// | `$force-vertical-cards` | Default for force vertical cards. | `true` |\n// | `$card-selector-base` | Default for card selector base. | `\".\"` |\n// | `$card-selector` | Default for card selector. | `\"card\"` |\n// | `$card-theme-selector-base` | Default for card theme selector base. | `\".\"` |\n// | `$card-theme-selector-prefix` | Default for card theme selector prefix. | `\"\"` |\n// | `$card-image-selector-base` | Default for card image selector base. | `\".\"` |\n// | `$card-image-selector` | Default for card image selector. | `\"card-image\"` |\n// | `$card-content-selector-base` | Default for card content selector base. | `\".\"` |\n// | `$card-content-selector` | Default for card content selector. | `\"card-content\"` |\n// | `$card-body-selector-base` | Default for card body selector base. | `\".\"` |\n// | `$card-body-selector` | Default for card body selector. | `\"card-body\"` |\n// | `$card-header-selector-base` | Default for card header selector base. | `\".\"` |\n// | `$card-header-selector` | Default for card header selector. | `\"card-header\"` |\n// | `$card-footer-selector-base` | Default for card footer selector base. | `\".\"` |\n// | `$card-footer-selector` | Default for card footer selector. | `\"card-footer\"` |\n// | `$card-title-selector-base` | Default for card title selector base. | `\".\"` |\n// | `$card-title-selector` | Default for card title selector. | `\"card-title\"` |\n// | `$horizontal-card-selector-base` | Default for horizontal card selector base. | `\".\"` |\n// | `$horizontal-card-selector` | Default for horizontal card selector. | `\"horizontal\"` |\n// | `$horizontal-card-left-selector-base` | Default for horizontal card left selector base. | `\".\"` |\n// | `$horizontal-card-left-selector` | Default for horizontal card left selector. | `\"left\"` |\n// | `$horizontal-card-right-selector-base` | Default for horizontal card right selector base. | `\".\"` |\n// | `$horizontal-card-right-selector` | Default for horizontal card right selector. | `\"right\"` |\n// | `$vertical-card-top-selector-base` | Default for vertical card top selector base. | `\".\"` |\n// | `$vertical-card-top-selector` | Default for vertical card top selector. | `\"top\"` |\n// | `$vertical-card-bottom-selector-base` | Default for vertical card bottom selector base. | `\".\"` |\n// | `$vertical-card-bottom-selector` | Default for vertical card bottom selector. | `\"bottom\"` |\n// | `$inverse-card-selector-base` | Default for inverse card selector base. | `\".\"` |\n// | `$inverse-card-selector` | Default for inverse card selector. | `\"inverse\"` |\n// | `$card-transform` | Default for card transform. | `none` |\n// | `$card-hover-transform` | Default for card hover transform. | `none` |\n// | `$card-content-ratio` | Default for card content ratio. | `1fr` |\n// | `$card-image-ratio` | Default for card image ratio. | `auto` |\n// | `$horizontal-card-content-ratio` | Default for horizontal card content ratio. | `3fr` |\n// | `$horizontal-card-image-ratio` | Default for horizontal card image ratio. | `2fr` |\n// | `$card-item-content-transform` | Default for card item content transform. | `translateY(-100%)` |\n// | `$card-item-content-open-transform` | Default for card item content open transform. | `translateY(0)` |\n// | `$card-theme-mappings` | Default for card theme mappings. | `map.merge($-card-theme-mappings, $card-theme-mappings)` |\n// | `$card-theme-map` | Default for card theme map. | `map.deep-merge($-card-theme-map, $card-theme-map)` |\n//\n// ## Using `$card-theme-mappings`\n//\n// `$card-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ``scss\n// $card-theme-mappings: (\n// border-color: 700,\n// )\n// ``\n//\n// This directly[1] maps to all card variants, telling them what shade to use for said property.\n// All card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ cards variants in the same way.\n//\n// For example, if you use the following map:\n// ``scss\n// $card-theme-mappings: (\n// border-color: 500,\n// )\n// ``\n//\n// All card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$card-theme-mappings` gets parsed into a larger, more explicit map: `$card-theme-map`.\n//\n// Using `$card-theme-map`\n//\n// `$card-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ``scss\n// $card-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ``\n//\n// This directly maps to all card variants, telling them what shade to use for said property.\n// The card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize card variants individually.\n//\n// For example, if you use the following map:\n//\n// ``scss\n// $card-theme-map: (\n// primary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ``\n//\n// The card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <div class=\"card\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n//\n// @example\n// <div class=\"card horizontal right\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"../../mixins/animation\";\n@use \"../../mixins/container\";\n\n@include layer(component) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: $card-padding;\n transform: $card-transform;\n transition: $card-transition;\n border-width: $card-border-width;\n border-style: $card-border-style;\n border-radius: $card-border-radius;\n gap: $card-gap;\n isolation: isolate;\n\n // &, &.top\n &,\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n }\n\n &:hover {\n --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};\n }\n\n // &.horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector} {\n --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};\n --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};\n\n grid-template-columns:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n 0 0\n calc(\n $card-border-bottom-left-radius - min(\n $card-border-bottom-width,\n $card-border-left-width\n )\n );\n }\n }\n\n // &.right, &.inverse\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-columns:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: 0\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n calc(\n $card-border-bottom-right-radius - min(\n $card-border-bottom-width,\n $card-border-right-width\n )\n )\n 0;\n }\n }\n }\n }\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector} {\n grid-area: image;\n padding: $card-image-padding;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n 0 0;\n object-fit: cover;\n }\n }\n\n // .card-content\n #{defaults.$card-content-selector-base}#{defaults.$card-content-selector} {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: $card-content-padding;\n gap: $card-content-gap;\n }\n\n // .card-body\n #{defaults.$card-body-selector-base}#{defaults.$card-body-selector} {\n flex: 1 0 auto;\n }\n\n // .card-footer\n #{defaults.$card-footer-selector-base}#{defaults.$card-footer-selector} {\n flex: 0 0 auto;\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n flex: 0 0 auto;\n }\n\n @if defaults.$force-vertical-cards {\n @include container.trigger(force-vertical-card) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n // .horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left, &.top, &.right, &.bottom, &.inverse\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n --#{root-defaults.$prefix}horizontal-card-image-ratio: #{defaults.$card-image-ratio};\n --#{root-defaults.$prefix}horizontal-card-content-ratio: #{defaults.$card-content-ratio};\n\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n\n // &, &.left, &.top\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n }\n }\n }\n }\n }\n\n @include animation.off {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}color: #{$card-color};\n --#{root-defaults.$prefix}background: #{$card-background};\n\n border-color: $card-border-color;\n background: $card-background;\n color: $card-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$card-theme-map,\n defaults.$card-theme-selector-base,\n defaults.$card-theme-selector-prefix,\n \"card-\"\n );\n }\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n color: $card-title-color;\n font-size: $card-title-font-size;\n font-weight: $card-title-font-weight;\n line-height: $card-title-line-height;\n }\n}\n","// @graupl/core card 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-card-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-padding | var(--graupl-card-padding-y) var(--graupl-card-padding-x) |\n// | --graupl-card-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-card-transition-reduced-motion | none |\n// | --graupl-card-transform | none |\n// | --graupl-card-hover-transform | none |\n// | --graupl-card-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-row-gap | var(--graupl-spacer-0) |\n// | --graupl-card-gap | var(--graupl-card-column-gap) var(--graupl-card-row-gap) |\n// | --graupl-card-background | var(--graupl-background) |\n// | --graupl-card-color | var(--graupl-color) |\n// | --graupl-card-border-color | var(--graupl-card-color) |\n// | --graupl-card-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-card-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-card-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-card-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-card-border-radius | var(--graupl-card-border-top-left-radius) var(--graupl-card-border-top-right-radius) var(--graupl-card-border-bottom-right-radius) var(--graupl-card-border-bottom-left-radius) |\n// | --graupl-card-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-card-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-card-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-card-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-card-border-width | var(--graupl-card-border-top-width) var(--graupl-card-border-right-width) var(--graupl-card-border-bottom-width) var(--graupl-card-border-left-width) |\n// | --graupl-card-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-card-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-card-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-card-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-card-border-style | var(--graupl-card-border-top-style) var(--graupl-card-border-right-style) var(--graupl-card-border-bottom-style) var(--graupl-card-border-left-style) |\n// | --graupl-card-content-ratio | 1fr |\n// | --graupl-card-image-ratio | auto |\n// | --graupl-horizontal-card-content-ratio | 3fr |\n// | --graupl-horizontal-card-image-ratio | 2fr |\n// | --graupl-card-image-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding | var(--graupl-card-image-padding-y) var(--graupl-card-image-padding-x) |\n// | --graupl-card-content-padding-x | var(--graupl-spacer-5) |\n// | --graupl-card-content-padding-y | var(--graupl-spacer-3) |\n// | --graupl-card-content-padding | var(--graupl-card-content-padding-y) var(--graupl-card-content-padding-x) |\n// | --graupl-card-content-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-content-row-gap | var(--graupl-spacer-3) |\n// | --graupl-card-content-gap | var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap) |\n// | --graupl-card-title-color | var(--graupl-card-color) |\n// | --graupl-card-title-font-size | var(--graupl-h4-font-size) |\n// | --graupl-card-title-font-weight | var(--graupl-h4-font-weight) |\n// | --graupl-card-title-font-family | var(--graupl-h4-font-family) |\n// | --graupl-card-title-line-height | var(--graupl-h4-line-height) |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"sass:map\";\n\n// Card properties.\n// --graupl-card-padding-x\n$card-padding-x: var(\n --#{root-defaults.$prefix}card-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding-y\n$card-padding-y: var(\n --#{root-defaults.$prefix}card-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding\n$card-padding: var(\n --#{root-defaults.$prefix}card-padding,\n #{$card-padding-y} #{$card-padding-x}\n);\n\n// --graupl-card-transition\n$card-transition: var(\n --#{root-defaults.$prefix}card-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-card-transition-reduced-motion\n$card-transition-reduced-motion: var(\n --#{root-defaults.$prefix}card-transition-reduced-motion,\n none\n);\n\n// Card transform properties.\n// --graupl-card-transform\n$card-transform: var(\n --#{root-defaults.$prefix}card-transform,\n #{defaults.$card-transform}\n);\n\n// --graupl-card-hover-transform\n$card-hover-transform: var(\n --#{root-defaults.$prefix}card-hover-transform,\n #{defaults.$card-hover-transform}\n);\n\n// Card gap properties.\n// --graupl-card-column-gap\n$card-column-gap: var(\n --#{root-defaults.$prefix}card-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-row-gap\n$card-row-gap: var(\n --#{root-defaults.$prefix}card-row-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-gap\n$card-gap: var(\n --#{root-defaults.$prefix}card-gap,\n #{$card-column-gap} #{$card-row-gap}\n);\n\n// Card color properties.\n// --graupl-card-background\n$card-background: var(\n --#{root-defaults.$prefix}card-background,\n #{color.$background}\n);\n\n// --graupl-card-color\n$card-color: var(--#{root-defaults.$prefix}card-color, #{color.$color});\n\n// Card border-properties.\n// --graupl-card-border-color\n$card-border-color: var(\n --#{root-defaults.$prefix}card-border-color,\n #{$card-color}\n);\n\n// --graupl-card-border-top-left-radius\n$card-border-top-left-radius: var(\n --#{root-defaults.$prefix}card-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-card-border-top-right-radius\n$card-border-top-right-radius: var(\n --#{root-defaults.$prefix}card-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-card-border-bottom-left-radius\n$card-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-card-border-bottom-right-radius\n$card-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-card-border-radius\n$card-border-radius: var(\n --#{root-defaults.$prefix}card-border-radius,\n #{$card-border-top-left-radius} #{$card-border-top-right-radius}\n #{$card-border-bottom-right-radius} #{$card-border-bottom-left-radius}\n);\n\n// --graupl-card-border-top-width\n$card-border-top-width: var(\n --#{root-defaults.$prefix}card-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-card-border-right-width\n$card-border-right-width: var(\n --#{root-defaults.$prefix}card-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-card-border-bottom-width\n$card-border-bottom-width: var(\n --#{root-defaults.$prefix}card-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-card-border-left-width\n$card-border-left-width: var(\n --#{root-defaults.$prefix}card-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-card-border-width\n$card-border-width: var(\n --#{root-defaults.$prefix}card-border-width,\n #{$card-border-top-width} #{$card-border-right-width}\n #{$card-border-bottom-width} #{$card-border-left-width}\n);\n\n// --graupl-card-border-top-style\n$card-border-top-style: var(\n --#{root-defaults.$prefix}card-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-card-border-right-style\n$card-border-right-style: var(\n --#{root-defaults.$prefix}card-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-card-border-bottom-style\n$card-border-bottom-style: var(\n --#{root-defaults.$prefix}card-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-card-border-left-style\n$card-border-left-style: var(\n --#{root-defaults.$prefix}card-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-card-border-style\n$card-border-style: var(\n --#{root-defaults.$prefix}card-border-style,\n #{$card-border-top-style} #{$card-border-right-style}\n #{$card-border-bottom-style} #{$card-border-left-style}\n);\n\n// Card layout properties.\n// --graupl-card-content-ratio\n$card-content-ratio: var(\n --#{root-defaults.$prefix}card-content-ratio,\n defaults.$card-content-ratio\n);\n\n// --graupl-card-image-ratio\n$card-image-ratio: var(\n --#{root-defaults.$prefix}card-image-ratio,\n defaults.$card-image-ratio\n);\n\n// --graupl-horizontal-card-content-ratio\n$horizontal-card-content-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-content-ratio,\n defaults.$horizontal-card-content-ratio\n);\n\n// --graupl-horizontal-card-image-ratio\n$horizontal-card-image-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-image-ratio,\n defaults.$horizontal-card-image-ratio\n);\n\n// Card image properties.\n// --graupl-card-image-padding-x\n$card-image-padding-x: var(\n --#{root-defaults.$prefix}card-image-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding-y\n$card-image-padding-y: var(\n --#{root-defaults.$prefix}card-image-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding\n$card-image-padding: var(\n --#{root-defaults.$prefix}card-image-padding,\n #{$card-image-padding-y} #{$card-image-padding-x}\n);\n\n// Card content properties.\n// --graupl-card-content-padding-x\n$card-content-padding-x: var(\n --#{root-defaults.$prefix}card-content-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-card-content-padding-y\n$card-content-padding-y: var(\n --#{root-defaults.$prefix}card-content-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-padding\n$card-content-padding: var(\n --#{root-defaults.$prefix}card-content-padding,\n #{$card-content-padding-y} #{$card-content-padding-x}\n);\n\n// Card content gap properties.\n// --graupl-card-content-column-gap\n$card-content-column-gap: var(\n --#{root-defaults.$prefix}card-content-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-content-row-gap\n$card-content-row-gap: var(\n --#{root-defaults.$prefix}card-content-row-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-gap\n$card-content-gap: var(\n --#{root-defaults.$prefix}card-content-gap,\n #{$card-content-column-gap} #{$card-content-row-gap}\n);\n\n// Card title properties.\n// --graupl-card-title-color\n$card-title-color: var(\n --#{root-defaults.$prefix}card-title-color,\n #{$card-color}\n);\n\n// --graupl-card-title-font-size\n$card-title-font-size: var(\n --#{root-defaults.$prefix}card-title-font-size,\n #{typography.$h4-font-size}\n);\n\n// --graupl-card-title-font-weight\n$card-title-font-weight: var(\n --#{root-defaults.$prefix}card-title-font-weight,\n #{typography.$h4-font-weight}\n);\n\n// --graupl-card-title-font-family\n$card-title-font-family: var(\n --#{root-defaults.$prefix}card-title-font-family,\n #{typography.$h4-font-family}\n);\n\n// --graupl-card-title-line-height\n$card-title-line-height: var(\n --#{root-defaults.$prefix}card-title-line-height,\n #{typography.$h4-line-height}\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 // Validate that the trigger exists.\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 the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\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 // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AESI,wBC2OF,8nEAcE,kKAWA,6KAUE,uwBAkBF,4EAOE,yZAcE,mwBAmBF,qMAUE,oxBAsBN,iQAIE,4uBAqBF,khBASA,yBAKA,mCEjYA,0BFiZQ,qSAaA,qOAYE,u0BAmBF,mMAUE,8xBGndV,uCH2eE,mFD7eA,oBCqfF,uiCAmBA","sources":["dist/css/component/card.css","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/theme/typography/_defaults.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_layer.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/component/card/_index.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/component/card/_variables.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_container.scss","Users/nickdjm/Development/contrib/graupl/graupl/packages/core/src/scss/mixins/_animation.scss"],"sourcesContent":["/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n@layer graupl.component {\n .card {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: var(--graupl-card-padding, var(--graupl-card-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n transform: var(--graupl-card-transform, none);\n transition: var(--graupl-card-transition, transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));\n border-width: var(--graupl-card-border-width, var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))) var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))));\n border-style: var(--graupl-card-border-style, var(--graupl-card-border-top-style, var(--graupl-border-top-style, var(--graupl-border-style, solid))) var(--graupl-card-border-right-style, var(--graupl-border-right-style, var(--graupl-border-style, solid))) var(--graupl-card-border-bottom-style, var(--graupl-border-bottom-style, var(--graupl-border-style, solid))) var(--graupl-card-border-left-style, var(--graupl-border-left-style, var(--graupl-border-style, solid))));\n border-radius: var(--graupl-card-border-radius, var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))));\n gap: var(--graupl-card-gap, var(--graupl-card-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-row-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n isolation: isolate;\n }\n .card, .card.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.bottom, .card.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card.bottom .card-image img, .card.inverse .card-image img {\n border-radius: 0 0 calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n }\n .card:hover {\n --graupl-card-transform: var(--graupl-card-hover-transform, none);\n }\n .card.horizontal, .card.horizontal.left {\n --graupl-card-content-ratio: var(--graupl-horizontal-card-content-ratio, 3fr);\n --graupl-card-image-ratio: var(--graupl-horizontal-card-image-ratio, 2fr);\n grid-template-columns: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal .card-image img, .card.horizontal.left .card-image img {\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) 0 0 calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n }\n .card.horizontal.right, .card.horizontal.inverse {\n grid-template-columns: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card.horizontal.right .card-image img, .card.horizontal.inverse .card-image img {\n border-radius: 0 calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0;\n }\n .card-image {\n grid-area: image;\n padding: var(--graupl-card-image-padding, var(--graupl-card-image-padding-y, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-image-padding-x, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))));\n }\n .card-image img {\n width: 100%;\n height: 100%;\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0 0;\n object-fit: cover;\n }\n .card-content {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: var(--graupl-card-content-padding, var(--graupl-card-content-padding-y, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-padding-x, var(--graupl-spacer-5, calc(1 * var(--graupl-spacer, 1rem)))));\n gap: var(--graupl-card-content-gap, var(--graupl-card-content-column-gap, var(--graupl-spacer-0, calc(0 * var(--graupl-spacer, 1rem)))) var(--graupl-card-content-row-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .card-body {\n flex: 1 0 auto;\n }\n .card-footer {\n flex: 0 0 auto;\n }\n .card-title {\n flex: 0 0 auto;\n }\n @container (width <= 767px) {\n .card.horizontal, .card.horizontal.left, .card.horizontal.top, .card.horizontal.right, .card.horizontal.bottom, .card.horizontal.inverse {\n --graupl-horizontal-card-image-ratio: auto;\n --graupl-horizontal-card-content-ratio: 1fr;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n .card.horizontal, .card.horizontal.left, .card.horizontal.right, .card.horizontal.top {\n grid-template-rows: [image-start] var(--graupl-card-image-ratio, auto) [image-end content-start] var(--graupl-card-content-ratio, 1fr) [content-end];\n }\n .card.horizontal .card-image img, .card.horizontal.left .card-image img, .card.horizontal.right .card-image img, .card.horizontal.top .card-image img {\n border-radius: calc(var(--graupl-card-border-top-left-radius, var(--graupl-border-top-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-top-right-radius, var(--graupl-border-top-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-top-width, var(--graupl-border-top-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) 0 0;\n }\n .card.horizontal.bottom, .card.horizontal.inverse {\n grid-template-rows: [content-start] var(--graupl-card-content-ratio, 1fr) [content-end image-start] var(--graupl-card-image-ratio, auto) [image-end];\n }\n .card.horizontal.bottom .card-image img, .card.horizontal.inverse .card-image img {\n border-radius: 0 0 calc(var(--graupl-card-border-bottom-right-radius, var(--graupl-border-bottom-right-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-right-width, var(--graupl-border-right-width, var(--graupl-border-width, 0.125rem))))) calc(var(--graupl-card-border-bottom-left-radius, var(--graupl-border-bottom-left-radius, var(--graupl-border-radius, 0.125rem))) - min(var(--graupl-card-border-bottom-width, var(--graupl-border-bottom-width, var(--graupl-border-width, 0.125rem))), var(--graupl-card-border-left-width, var(--graupl-border-left-width, var(--graupl-border-width, 0.125rem)))));\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .card {\n --graupl-card-transition: var(--graupl-card-transition-reduced-motion, none);\n }\n }\n}\n@layer graupl.theme {\n .card {\n --graupl-color: var(--graupl-card-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 --graupl-background: var(--graupl-card-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 border-color: var(--graupl-card-border-color, var(--graupl-card-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-card-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-card-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 .card-title {\n color: var(--graupl-card-title-color, var(--graupl-card-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 font-size: var(--graupl-card-title-font-size, var(--graupl-h4-font-size, var(--graupl-font-2xl, calc(1.728 * var(--graupl-font-size-base, 1rem)))));\n font-weight: var(--graupl-card-title-font-weight, var(--graupl-h4-font-weight, var(--graupl-heading-font-weight, var(--graupl-font-weight-bold, var(--graupl-font-weight-bold, 700)))));\n line-height: var(--graupl-card-title-line-height, var(--graupl-h4-line-height, var(--graupl-heading-line-height, var(--graupl-line-height, var(--graupl-root-line-height, 1.2em)))));\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: root-defaults.$root-selector-base !default;\n$root-selector: root-defaults.$root-selector !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$emphasis-selector-base: $selector-base !default;\n$emphasis-selector: \"em\" !default;\n$italic-selector-base: $selector-base !default;\n$italic-selector: \"i\" !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$root-line-height: 1.2em !default;\n$root-letter-spacing: normal !default;\n$root-word-spacing: normal !default;\n$root-font-style: normal !default;\n$root-font-variant: normal !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 card component styles.\n//\n// This module provides the card component styles for vertical and horizontal layouts.\n//\n// The following selectors are generated by default:\n// - `.card`: The card container.\n// - `.card-image`: The card image wrapper.\n// - `.card-content`: The card content wrapper.\n// - `.card-body`: The main body region.\n// - `.card-header`: The header region.\n// - `.card-footer`: The footer region.\n// - `.card-title`: The title element.\n// - `.horizontal`: A modifier to use a horizontal layout for the card.\n// - `.left`: A modifier to position the image on the left in a horizontal layout.\n// - `.right`: A modifier to position the image on the right in a horizontal layout.\n// - `.top`: A modifier to position the image on the top in a vertical layout.\n// - `.bottom`: A modifier to position the image on the bottom in a vertical layout.\n// - `.inverse`: A modifier to invert the image/content positioning.\n//\n// The following custom properties can be used to customize the card component:\n// | Property | Description | Default Value |\n// | ------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n// | `--graupl-card-padding-x` | Value for card padding horizontal. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding-y` | Value for card padding vertical. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding` | Value for card padding. | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)` |\n// | `--graupl-card-transition` | Value for card transition. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-card-transition-reduced-motion` | Value for card transition reduced motion. | `none` |\n// | `--graupl-card-transform` | Value for card transform. | `none` |\n// | `--graupl-card-hover-transform` | Value for card hover transform. | `none` |\n// | `--graupl-card-column-gap` | Value for card column gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-row-gap` | Value for card row gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-gap` | Value for card gap. | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)` |\n// | `--graupl-card-background` | Value for card background. | `var(--graupl-background)` |\n// | `--graupl-card-color` | Value for card color. | `var(--graupl-color)` |\n// | `--graupl-card-border-color` | Value for card border color. | `var(--graupl-card-color)` |\n// | `--graupl-card-border-top-left-radius` | Value for card border top left radius. | `var(--graupl-border-top-left-radius)` |\n// | `--graupl-card-border-top-right-radius` | Value for card border top right radius. | `var(--graupl-border-top-right-radius)` |\n// | `--graupl-card-border-bottom-left-radius` | Value for card border bottom left radius. | `var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-card-border-bottom-right-radius` | Value for card border bottom right radius. | `var(--graupl-border-bottom-right-radius)` |\n// | `--graupl-card-border-radius` | Value for card border radius. | `var(--graupl-card-border-top-left-radius) var(--graupl-card-border-top-right-radius) var(--graupl-card-border-bottom-right-radius) var(--graupl-card-border-bottom-left-radius)` |\n// | `--graupl-card-border-top-width` | Value for card border top width. | `var(--graupl-border-top-width)` |\n// | `--graupl-card-border-right-width` | Value for card border right width. | `var(--graupl-border-right-width)` |\n// | `--graupl-card-border-bottom-width` | Value for card border bottom width. | `var(--graupl-border-bottom-width)` |\n// | `--graupl-card-border-left-width` | Value for card border left width. | `var(--graupl-border-left-width)` |\n// | `--graupl-card-border-width` | Value for card border width. | `var(--graupl-card-border-top-width) var(--graupl-card-border-right-width) var(--graupl-card-border-bottom-width) var(--graupl-card-border-left-width)` |\n// | `--graupl-card-border-top-style` | Value for card border top style. | `var(--graupl-border-top-style)` |\n// | `--graupl-card-border-right-style` | Value for card border right style. | `var(--graupl-border-right-style)` |\n// | `--graupl-card-border-bottom-style` | Value for card border bottom style. | `var(--graupl-border-bottom-style)` |\n// | `--graupl-card-border-left-style` | Value for card border left style. | `var(--graupl-border-left-style)` |\n// | `--graupl-card-border-style` | Value for card border style. | `var(--graupl-card-border-top-style) var(--graupl-card-border-right-style) var(--graupl-card-border-bottom-style) var(--graupl-card-border-left-style)` |\n// | `--graupl-card-content-ratio` | Value for card content ratio. | `1fr` |\n// | `--graupl-card-image-ratio` | Value for card image ratio. | `auto` |\n// | `--graupl-horizontal-card-content-ratio` | Value for card horizontal card content ratio. | `3fr` |\n// | `--graupl-horizontal-card-image-ratio` | Value for card horizontal card image ratio. | `2fr` |\n// | `--graupl-card-image-padding-x` | Value for card image padding horizontal. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-image-padding-y` | Value for card image padding vertical. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-image-padding` | Value for card image padding. | `var(--graupl-card-image-padding-y) var(--graupl-card-image-padding-x)` |\n// | `--graupl-card-content-padding-x` | Value for card content padding horizontal. | `var(--graupl-spacer-5)` |\n// | `--graupl-card-content-padding-y` | Value for card content padding vertical. | `var(--graupl-spacer-3)` |\n// | `--graupl-card-content-padding` | Value for card content padding. | `var(--graupl-card-content-padding-y) var(--graupl-card-content-padding-x)` |\n// | `--graupl-card-content-column-gap` | Value for card content column gap. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-content-row-gap` | Value for card content row gap. | `var(--graupl-spacer-3)` |\n// | `--graupl-card-content-gap` | Value for card content gap. | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)` |\n// | `--graupl-card-title-color` | Value for card title color. | `var(--graupl-card-color)` |\n// | `--graupl-card-title-font-size` | Value for card title font size. | `var(--graupl-h4-font-size)` |\n// | `--graupl-card-title-font-weight` | Value for card title font weight. | `var(--graupl-h4-font-weight)` |\n// | `--graupl-card-title-font-family` | Value for card title font family. | `var(--graupl-h4-font-family)` |\n// | `--graupl-card-title-line-height` | Value for card title line height. | `var(--graupl-h4-line-height)` |\n// The following sass variables can be used to customize the generation of the card component:\n// | Variable | Description | Default Value |\n// | -------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |\n// | `$selector-base` | Default for selector base. | `\".\"` |\n// | `$modifier-selector-base` | Default for modifier selector base. | `\".\"` |\n// | `$generate-base-theme-map` | Default for generate base theme map. | `true` |\n// | `$themeable` | Default for themeable. | `false` |\n// | `$force-vertical-cards` | Default for force vertical cards. | `true` |\n// | `$card-selector-base` | Default for card selector base. | `\".\"` |\n// | `$card-selector` | Default for card selector. | `\"card\"` |\n// | `$card-theme-selector-base` | Default for card theme selector base. | `\".\"` |\n// | `$card-theme-selector-prefix` | Default for card theme selector prefix. | `\"\"` |\n// | `$card-image-selector-base` | Default for card image selector base. | `\".\"` |\n// | `$card-image-selector` | Default for card image selector. | `\"card-image\"` |\n// | `$card-content-selector-base` | Default for card content selector base. | `\".\"` |\n// | `$card-content-selector` | Default for card content selector. | `\"card-content\"` |\n// | `$card-body-selector-base` | Default for card body selector base. | `\".\"` |\n// | `$card-body-selector` | Default for card body selector. | `\"card-body\"` |\n// | `$card-header-selector-base` | Default for card header selector base. | `\".\"` |\n// | `$card-header-selector` | Default for card header selector. | `\"card-header\"` |\n// | `$card-footer-selector-base` | Default for card footer selector base. | `\".\"` |\n// | `$card-footer-selector` | Default for card footer selector. | `\"card-footer\"` |\n// | `$card-title-selector-base` | Default for card title selector base. | `\".\"` |\n// | `$card-title-selector` | Default for card title selector. | `\"card-title\"` |\n// | `$horizontal-card-selector-base` | Default for horizontal card selector base. | `\".\"` |\n// | `$horizontal-card-selector` | Default for horizontal card selector. | `\"horizontal\"` |\n// | `$horizontal-card-left-selector-base` | Default for horizontal card left selector base. | `\".\"` |\n// | `$horizontal-card-left-selector` | Default for horizontal card left selector. | `\"left\"` |\n// | `$horizontal-card-right-selector-base` | Default for horizontal card right selector base. | `\".\"` |\n// | `$horizontal-card-right-selector` | Default for horizontal card right selector. | `\"right\"` |\n// | `$vertical-card-top-selector-base` | Default for vertical card top selector base. | `\".\"` |\n// | `$vertical-card-top-selector` | Default for vertical card top selector. | `\"top\"` |\n// | `$vertical-card-bottom-selector-base` | Default for vertical card bottom selector base. | `\".\"` |\n// | `$vertical-card-bottom-selector` | Default for vertical card bottom selector. | `\"bottom\"` |\n// | `$inverse-card-selector-base` | Default for inverse card selector base. | `\".\"` |\n// | `$inverse-card-selector` | Default for inverse card selector. | `\"inverse\"` |\n// | `$card-transform` | Default for card transform. | `none` |\n// | `$card-hover-transform` | Default for card hover transform. | `none` |\n// | `$card-content-ratio` | Default for card content ratio. | `1fr` |\n// | `$card-image-ratio` | Default for card image ratio. | `auto` |\n// | `$horizontal-card-content-ratio` | Default for horizontal card content ratio. | `3fr` |\n// | `$horizontal-card-image-ratio` | Default for horizontal card image ratio. | `2fr` |\n// | `$card-item-content-transform` | Default for card item content transform. | `translateY(-100%)` |\n// | `$card-item-content-open-transform` | Default for card item content open transform. | `translateY(0)` |\n// | `$card-theme-mappings` | Default for card theme mappings. | `map.merge($-card-theme-mappings, $card-theme-mappings)` |\n// | `$card-theme-map` | Default for card theme map. | `map.deep-merge($-card-theme-map, $card-theme-map)` |\n//\n// ## Using `$card-theme-mappings`\n//\n// `$card-theme-mappings` is a 1-level map of properties and shade values.\n//\n// e.g.\n// ``scss\n// $card-theme-mappings: (\n// border-color: 700,\n// )\n// ``\n//\n// This directly[1] maps to all card variants, telling them what shade to use for said property.\n// All card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize _all_ cards variants in the same way.\n//\n// For example, if you use the following map:\n// ``scss\n// $card-theme-mappings: (\n// border-color: 500,\n// )\n// ``\n//\n// All card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--500`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--500`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--500`.\n//\n// [1] `$card-theme-mappings` gets parsed into a larger, more explicit map: `$card-theme-map`.\n//\n// Using `$card-theme-map`\n//\n// `$card-theme-map` is a multi-level map of properties, colors, and shade values.\n//\n// e.g.\n// ``scss\n// $card-theme-map: (\n// primary: (\n// border-color: (\n// color: primary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: tertiary,\n// shade: 700\n// ),\n// ),\n// )\n// ``\n//\n// This directly maps to all card variants, telling them what shade to use for said property.\n// The card variants will use the following based on the example above:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--primary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--tertiary--700`.\n//\n// You can use this to customize card variants individually.\n//\n// For example, if you use the following map:\n//\n// ``scss\n// $card-theme-map: (\n// primary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// secondary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// tertiary: (\n// border-color: (\n// color: secondary,\n// shade: 700\n// ),\n// ),\n// )\n// ``\n//\n// The card variants will use the following:\n// - Primary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`,\n// - Secondary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`, and\n// - Tertiary cards will have their `--graupl-card-border-color` property set to `--graupl-theme-active--secondary--700`.\n//\n// @example\n// <div class=\"card\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n//\n// @example\n// <div class=\"card horizontal right\">\n// <div class=\"card-image\"><img src=\"https://picsum.photos/600/400\" alt=\"Card image\" /></div>\n// <div class=\"card-content\">\n// <div class=\"card-header\"><h3 class=\"card-title\">Card Title</h3></div>\n// <div class=\"card-body\"><p>This is some text that describes the card.</p></div>\n// <div class=\"card-footer\"><a class=\"card stretched\" href=\"#\">Card Action</a></div>\n// </div>\n// </div>\n\n@use \"defaults\";\n@use \"variables\" as *;\n@use \"../../defaults\" as root-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/theme\";\n@use \"../../mixins/animation\";\n@use \"../../mixins/container\";\n\n@include layer(component) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n display: grid;\n position: relative;\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n padding: $card-padding;\n transform: $card-transform;\n transition: $card-transition;\n border-width: $card-border-width;\n border-style: $card-border-style;\n border-radius: $card-border-radius;\n gap: $card-gap;\n isolation: isolate;\n\n // &, &.top\n &,\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n\n // .card-image img\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: 0 0\n calc(\n $card-border-bottom-right-radius - min(\n $card-border-bottom-width,\n $card-border-right-width\n )\n )\n calc(\n $card-border-bottom-left-radius - min(\n $card-border-bottom-width,\n $card-border-left-width\n )\n );\n }\n }\n\n &:hover {\n --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};\n }\n\n // &.horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector} {\n --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};\n --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};\n\n grid-template-columns:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n grid-template-rows: [image-start content-start] 1fr [image-end content-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n 0 0\n calc(\n $card-border-bottom-left-radius - min(\n $card-border-bottom-width,\n $card-border-left-width\n )\n );\n }\n }\n\n // &.right, &.inverse\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-columns:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: 0\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n calc(\n $card-border-bottom-right-radius - min(\n $card-border-bottom-width,\n $card-border-right-width\n )\n )\n 0;\n }\n }\n }\n }\n\n // .card-image\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector} {\n grid-area: image;\n padding: $card-image-padding;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n 0 0;\n object-fit: cover;\n }\n }\n\n // .card-content\n #{defaults.$card-content-selector-base}#{defaults.$card-content-selector} {\n display: flex;\n grid-area: content;\n flex-direction: column;\n padding: $card-content-padding;\n gap: $card-content-gap;\n }\n\n // .card-body\n #{defaults.$card-body-selector-base}#{defaults.$card-body-selector} {\n flex: 1 0 auto;\n }\n\n // .card-footer\n #{defaults.$card-footer-selector-base}#{defaults.$card-footer-selector} {\n flex: 0 0 auto;\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n flex: 0 0 auto;\n }\n\n @if defaults.$force-vertical-cards {\n @include container.trigger(force-vertical-card) {\n // .card\n #{defaults.$card-selector-base}#{defaults.$card-selector} {\n // .horizontal\n &#{defaults.$horizontal-card-selector-base}#{defaults.$horizontal-card-selector} {\n // &, &.left, &.top, &.right, &.bottom, &.inverse\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n --#{root-defaults.$prefix}horizontal-card-image-ratio: #{defaults.$card-image-ratio};\n --#{root-defaults.$prefix}horizontal-card-content-ratio: #{defaults.$card-content-ratio};\n\n grid-template-columns: [image-start content-start] 1fr [image-end content-end];\n }\n\n // &, &.left, &.top\n &,\n &#{defaults.$horizontal-card-left-selector-base}#{defaults.$horizontal-card-left-selector},\n &#{defaults.$horizontal-card-right-selector-base}#{defaults.$horizontal-card-right-selector},\n &#{defaults.$vertical-card-top-selector-base}#{defaults.$vertical-card-top-selector} {\n grid-template-rows:\n [image-start]\n $card-image-ratio\n [image-end content-start]\n $card-content-ratio\n [content-end];\n\n // .card-image img\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: calc(\n $card-border-top-left-radius - min(\n $card-border-top-width,\n $card-border-left-width\n )\n )\n calc(\n $card-border-top-right-radius - min(\n $card-border-top-width,\n $card-border-right-width\n )\n )\n 0 0;\n }\n }\n\n // &.bottom, &.inverse\n &#{defaults.$vertical-card-bottom-selector-base}#{defaults.$vertical-card-bottom-selector},\n &#{defaults.$inverse-card-selector-base}#{defaults.$inverse-card-selector} {\n grid-template-rows:\n [content-start]\n $card-content-ratio\n [content-end image-start]\n $card-image-ratio\n [image-end];\n\n // .card-image img\n #{defaults.$card-image-selector-base}#{defaults.$card-image-selector}\n img {\n border-radius: 0 0\n calc(\n $card-border-bottom-right-radius - min(\n $card-border-bottom-width,\n $card-border-right-width\n )\n )\n calc(\n $card-border-bottom-left-radius - min(\n $card-border-bottom-width,\n $card-border-left-width\n )\n );\n }\n }\n }\n }\n }\n }\n\n @include animation.off {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};\n }\n }\n}\n\n@include layer(theme) {\n // .card\n #{#{defaults.$card-selector-base}}#{defaults.$card-selector} {\n --#{root-defaults.$prefix}color: #{$card-color};\n --#{root-defaults.$prefix}background: #{$card-background};\n\n border-color: $card-border-color;\n background: $card-background;\n color: $card-color;\n\n @if root-defaults.$themeable-components and defaults.$themeable {\n @include theme.generate-modifiers(\n defaults.$card-theme-map,\n defaults.$card-theme-selector-base,\n defaults.$card-theme-selector-prefix,\n \"card-\"\n );\n }\n }\n\n // .card-title\n #{defaults.$card-title-selector-base}#{defaults.$card-title-selector} {\n color: $card-title-color;\n font-size: $card-title-font-size;\n font-weight: $card-title-font-weight;\n line-height: $card-title-line-height;\n }\n}\n","// @graupl/core card 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-card-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-padding | var(--graupl-card-padding-y) var(--graupl-card-padding-x) |\n// | --graupl-card-transition | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function) |\n// | --graupl-card-transition-reduced-motion | none |\n// | --graupl-card-transform | none |\n// | --graupl-card-hover-transform | none |\n// | --graupl-card-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-row-gap | var(--graupl-spacer-0) |\n// | --graupl-card-gap | var(--graupl-card-column-gap) var(--graupl-card-row-gap) |\n// | --graupl-card-background | var(--graupl-background) |\n// | --graupl-card-color | var(--graupl-color) |\n// | --graupl-card-border-color | var(--graupl-card-color) |\n// | --graupl-card-border-top-left-radius | var(--graupl-border-top-left-radius) |\n// | --graupl-card-border-top-right-radius | var(--graupl-border-top-right-radius) |\n// | --graupl-card-border-bottom-left-radius | var(--graupl-border-bottom-left-radius) |\n// | --graupl-card-border-bottom-right-radius | var(--graupl-border-bottom-right-radius) |\n// | --graupl-card-border-radius | var(--graupl-card-border-top-left-radius) var(--graupl-card-border-top-right-radius) var(--graupl-card-border-bottom-right-radius) var(--graupl-card-border-bottom-left-radius) |\n// | --graupl-card-border-top-width | var(--graupl-border-top-width) |\n// | --graupl-card-border-right-width | var(--graupl-border-right-width) |\n// | --graupl-card-border-bottom-width | var(--graupl-border-bottom-width) |\n// | --graupl-card-border-left-width | var(--graupl-border-left-width) |\n// | --graupl-card-border-width | var(--graupl-card-border-top-width) var(--graupl-card-border-right-width) var(--graupl-card-border-bottom-width) var(--graupl-card-border-left-width) |\n// | --graupl-card-border-top-style | var(--graupl-border-top-style) |\n// | --graupl-card-border-right-style | var(--graupl-border-right-style) |\n// | --graupl-card-border-bottom-style | var(--graupl-border-bottom-style) |\n// | --graupl-card-border-left-style | var(--graupl-border-left-style) |\n// | --graupl-card-border-style | var(--graupl-card-border-top-style) var(--graupl-card-border-right-style) var(--graupl-card-border-bottom-style) var(--graupl-card-border-left-style) |\n// | --graupl-card-content-ratio | 1fr |\n// | --graupl-card-image-ratio | auto |\n// | --graupl-horizontal-card-content-ratio | 3fr |\n// | --graupl-horizontal-card-image-ratio | 2fr |\n// | --graupl-card-image-padding-x | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding-y | var(--graupl-spacer-0) |\n// | --graupl-card-image-padding | var(--graupl-card-image-padding-y) var(--graupl-card-image-padding-x) |\n// | --graupl-card-content-padding-x | var(--graupl-spacer-5) |\n// | --graupl-card-content-padding-y | var(--graupl-spacer-3) |\n// | --graupl-card-content-padding | var(--graupl-card-content-padding-y) var(--graupl-card-content-padding-x) |\n// | --graupl-card-content-column-gap | var(--graupl-spacer-0) |\n// | --graupl-card-content-row-gap | var(--graupl-spacer-3) |\n// | --graupl-card-content-gap | var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap) |\n// | --graupl-card-title-color | var(--graupl-card-color) |\n// | --graupl-card-title-font-size | var(--graupl-h4-font-size) |\n// | --graupl-card-title-font-weight | var(--graupl-h4-font-weight) |\n// | --graupl-card-title-font-family | var(--graupl-h4-font-family) |\n// | --graupl-card-title-line-height | var(--graupl-h4-line-height) |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"../../theme/color/variables\" as color;\n@use \"../../theme/typography/variables\" as typography;\n@use \"sass:map\";\n\n// Card properties.\n// --graupl-card-padding-x\n$card-padding-x: var(\n --#{root-defaults.$prefix}card-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding-y\n$card-padding-y: var(\n --#{root-defaults.$prefix}card-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-padding\n$card-padding: var(\n --#{root-defaults.$prefix}card-padding,\n #{$card-padding-y} #{$card-padding-x}\n);\n\n// --graupl-card-transition\n$card-transition: var(\n --#{root-defaults.$prefix}card-transition,\n transform #{map.get(root-variables.$transition-durations, fast)}\n #{root-variables.$transition-timing-function}\n);\n\n// --graupl-card-transition-reduced-motion\n$card-transition-reduced-motion: var(\n --#{root-defaults.$prefix}card-transition-reduced-motion,\n none\n);\n\n// Card transform properties.\n// --graupl-card-transform\n$card-transform: var(\n --#{root-defaults.$prefix}card-transform,\n #{defaults.$card-transform}\n);\n\n// --graupl-card-hover-transform\n$card-hover-transform: var(\n --#{root-defaults.$prefix}card-hover-transform,\n #{defaults.$card-hover-transform}\n);\n\n// Card gap properties.\n// --graupl-card-column-gap\n$card-column-gap: var(\n --#{root-defaults.$prefix}card-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-row-gap\n$card-row-gap: var(\n --#{root-defaults.$prefix}card-row-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-gap\n$card-gap: var(\n --#{root-defaults.$prefix}card-gap,\n #{$card-column-gap} #{$card-row-gap}\n);\n\n// Card color properties.\n// --graupl-card-background\n$card-background: var(\n --#{root-defaults.$prefix}card-background,\n #{color.$background}\n);\n\n// --graupl-card-color\n$card-color: var(--#{root-defaults.$prefix}card-color, #{color.$color});\n\n// Card border-properties.\n// --graupl-card-border-color\n$card-border-color: var(\n --#{root-defaults.$prefix}card-border-color,\n #{$card-color}\n);\n\n// --graupl-card-border-top-left-radius\n$card-border-top-left-radius: var(\n --#{root-defaults.$prefix}card-border-top-left-radius,\n #{root-variables.$border-top-left-radius}\n);\n\n// --graupl-card-border-top-right-radius\n$card-border-top-right-radius: var(\n --#{root-defaults.$prefix}card-border-top-right-radius,\n #{root-variables.$border-top-right-radius}\n);\n\n// --graupl-card-border-bottom-left-radius\n$card-border-bottom-left-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-left-radius,\n #{root-variables.$border-bottom-left-radius}\n);\n\n// --graupl-card-border-bottom-right-radius\n$card-border-bottom-right-radius: var(\n --#{root-defaults.$prefix}card-border-bottom-right-radius,\n #{root-variables.$border-bottom-right-radius}\n);\n\n// --graupl-card-border-radius\n$card-border-radius: var(\n --#{root-defaults.$prefix}card-border-radius,\n #{$card-border-top-left-radius} #{$card-border-top-right-radius}\n #{$card-border-bottom-right-radius} #{$card-border-bottom-left-radius}\n);\n\n// --graupl-card-border-top-width\n$card-border-top-width: var(\n --#{root-defaults.$prefix}card-border-top-width,\n #{root-variables.$border-top-width}\n);\n\n// --graupl-card-border-right-width\n$card-border-right-width: var(\n --#{root-defaults.$prefix}card-border-right-width,\n #{root-variables.$border-right-width}\n);\n\n// --graupl-card-border-bottom-width\n$card-border-bottom-width: var(\n --#{root-defaults.$prefix}card-border-bottom-width,\n #{root-variables.$border-bottom-width}\n);\n\n// --graupl-card-border-left-width\n$card-border-left-width: var(\n --#{root-defaults.$prefix}card-border-left-width,\n #{root-variables.$border-left-width}\n);\n\n// --graupl-card-border-width\n$card-border-width: var(\n --#{root-defaults.$prefix}card-border-width,\n #{$card-border-top-width} #{$card-border-right-width}\n #{$card-border-bottom-width} #{$card-border-left-width}\n);\n\n// --graupl-card-border-top-style\n$card-border-top-style: var(\n --#{root-defaults.$prefix}card-border-top-style,\n #{root-variables.$border-top-style}\n);\n\n// --graupl-card-border-right-style\n$card-border-right-style: var(\n --#{root-defaults.$prefix}card-border-right-style,\n #{root-variables.$border-right-style}\n);\n\n// --graupl-card-border-bottom-style\n$card-border-bottom-style: var(\n --#{root-defaults.$prefix}card-border-bottom-style,\n #{root-variables.$border-bottom-style}\n);\n\n// --graupl-card-border-left-style\n$card-border-left-style: var(\n --#{root-defaults.$prefix}card-border-left-style,\n #{root-variables.$border-left-style}\n);\n\n// --graupl-card-border-style\n$card-border-style: var(\n --#{root-defaults.$prefix}card-border-style,\n #{$card-border-top-style} #{$card-border-right-style}\n #{$card-border-bottom-style} #{$card-border-left-style}\n);\n\n// Card layout properties.\n// --graupl-card-content-ratio\n$card-content-ratio: var(\n --#{root-defaults.$prefix}card-content-ratio,\n defaults.$card-content-ratio\n);\n\n// --graupl-card-image-ratio\n$card-image-ratio: var(\n --#{root-defaults.$prefix}card-image-ratio,\n defaults.$card-image-ratio\n);\n\n// --graupl-horizontal-card-content-ratio\n$horizontal-card-content-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-content-ratio,\n defaults.$horizontal-card-content-ratio\n);\n\n// --graupl-horizontal-card-image-ratio\n$horizontal-card-image-ratio: var(\n --#{root-defaults.$prefix}horizontal-card-image-ratio,\n defaults.$horizontal-card-image-ratio\n);\n\n// Card image properties.\n// --graupl-card-image-padding-x\n$card-image-padding-x: var(\n --#{root-defaults.$prefix}card-image-padding-x,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding-y\n$card-image-padding-y: var(\n --#{root-defaults.$prefix}card-image-padding-y,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-image-padding\n$card-image-padding: var(\n --#{root-defaults.$prefix}card-image-padding,\n #{$card-image-padding-y} #{$card-image-padding-x}\n);\n\n// Card content properties.\n// --graupl-card-content-padding-x\n$card-content-padding-x: var(\n --#{root-defaults.$prefix}card-content-padding-x,\n #{map.get(root-variables.$spacers, 5)}\n);\n\n// --graupl-card-content-padding-y\n$card-content-padding-y: var(\n --#{root-defaults.$prefix}card-content-padding-y,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-padding\n$card-content-padding: var(\n --#{root-defaults.$prefix}card-content-padding,\n #{$card-content-padding-y} #{$card-content-padding-x}\n);\n\n// Card content gap properties.\n// --graupl-card-content-column-gap\n$card-content-column-gap: var(\n --#{root-defaults.$prefix}card-content-column-gap,\n #{map.get(root-variables.$spacers, 0)}\n);\n\n// --graupl-card-content-row-gap\n$card-content-row-gap: var(\n --#{root-defaults.$prefix}card-content-row-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-card-content-gap\n$card-content-gap: var(\n --#{root-defaults.$prefix}card-content-gap,\n #{$card-content-column-gap} #{$card-content-row-gap}\n);\n\n// Card title properties.\n// --graupl-card-title-color\n$card-title-color: var(\n --#{root-defaults.$prefix}card-title-color,\n #{$card-color}\n);\n\n// --graupl-card-title-font-size\n$card-title-font-size: var(\n --#{root-defaults.$prefix}card-title-font-size,\n #{typography.$h4-font-size}\n);\n\n// --graupl-card-title-font-weight\n$card-title-font-weight: var(\n --#{root-defaults.$prefix}card-title-font-weight,\n #{typography.$h4-font-weight}\n);\n\n// --graupl-card-title-font-family\n$card-title-font-family: var(\n --#{root-defaults.$prefix}card-title-font-family,\n #{typography.$h4-font-family}\n);\n\n// --graupl-card-title-line-height\n$card-title-line-height: var(\n --#{root-defaults.$prefix}card-title-line-height,\n #{typography.$h4-line-height}\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 // Validate that the trigger exists.\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 the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($container-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\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 // Validate that the mixin exists.\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 // Include the mixin with the provided arguments and content.\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}\n","// @graupl/core animation media query mixins.\n\n// A media query for targeting users who have not requested reduced motion.\n@mixin on {\n @media (prefers-reduced-motion: no-preference) {\n @content;\n }\n}\n\n// A media query for targeting users who have requested reduced motion.\n@mixin off {\n @media (prefers-reduced-motion: reduce) {\n @content;\n }\n}\n"],"names":[]}
|