@graupl/core 1.0.0-beta.34 → 1.0.0-beta.36

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.
Files changed (50) hide show
  1. package/dist/css/component/card.css.map +1 -1
  2. package/dist/css/component/input-group.css.map +1 -1
  3. package/dist/css/component/navigation.css.map +1 -1
  4. package/dist/css/component.css.map +1 -1
  5. package/dist/css/graupl.css.map +1 -1
  6. package/dist/css/layout/columns.css.map +1 -1
  7. package/dist/css/layout/container.css.map +1 -1
  8. package/dist/css/layout/flex-columns.css.map +1 -1
  9. package/dist/css/layout.css.map +1 -1
  10. package/dist/css/theme/color.css.map +1 -1
  11. package/dist/css/theme.css.map +1 -1
  12. package/dist/css/utilities/display.css.map +1 -1
  13. package/dist/css/utilities/inset.css.map +1 -1
  14. package/dist/css/utilities/order.css.map +1 -1
  15. package/dist/css/utilities/position.css.map +1 -1
  16. package/dist/css/utilities/ratio.css.map +1 -1
  17. package/dist/css/utilities/spacing.css.map +1 -1
  18. package/dist/css/utilities/visibility.css.map +1 -1
  19. package/dist/css/utilities.css.map +1 -1
  20. package/dist/js/component/disclosure.cjs.js +1 -1
  21. package/dist/js/component/disclosure.cjs.js.map +1 -1
  22. package/dist/js/component/disclosure.es.js +1 -1
  23. package/dist/js/component/disclosure.es.js.map +1 -1
  24. package/dist/js/component/disclosure.iife.js +1 -1
  25. package/dist/js/component/disclosure.iife.js.map +1 -1
  26. package/dist/js/disclosure.js +1 -1
  27. package/dist/js/disclosure.js.map +1 -1
  28. package/dist/js/generator/disclosure.cjs.js +1 -1
  29. package/dist/js/generator/disclosure.cjs.js.map +1 -1
  30. package/dist/js/generator/disclosure.es.js +1 -1
  31. package/dist/js/generator/disclosure.es.js.map +1 -1
  32. package/dist/js/generator/disclosure.iife.js +1 -1
  33. package/dist/js/generator/disclosure.iife.js.map +1 -1
  34. package/dist/js/graupl.js +1 -1
  35. package/dist/js/graupl.js.map +1 -1
  36. package/package.json +1 -1
  37. package/src/scss/component/card/_defaults.scss +1 -0
  38. package/src/scss/component/card/_index.scss +40 -37
  39. package/src/scss/functions/_container.scss +31 -1
  40. package/src/scss/functions/_list.scss +22 -0
  41. package/src/scss/functions/_map.scss +34 -0
  42. package/src/scss/functions/_screen.scss +27 -2
  43. package/src/scss/functions/_theme.scss +55 -23
  44. package/src/scss/functions/_utility.scss +1 -1
  45. package/src/scss/layout/columns/_defaults.scss +1 -0
  46. package/src/scss/layout/columns/_index.scss +18 -15
  47. package/src/scss/mixins/_container.scss +24 -17
  48. package/src/scss/mixins/_screen.scss +24 -17
  49. package/src/scss/theme/color/_defaults.scss +73 -57
  50. package/src/scss/theme/color/_variables.scss +13 -13
package/dist/css/component/card.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AESI,wBCqNF,0mEAcE,8JAWA,yKAUA,4EAOE,qZAcE,gwBAmBF,iMAUE,gxBAsBN,4PAIE,wuBAqBF,wgBASA,yBAKA,mCEzVA,0BFwWM,qSAaA,iOAaA,gMG9YN,uCH6ZE,mFD/ZA,oBCuaF,uiCAmBA","sources":["dist/css/component/card.css","var/www/html/packages/core/src/scss/theme/typography/_defaults.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/card/_index.scss","var/www/html/packages/core/src/scss/component/card/_variables.scss","var/www/html/packages/core/src/scss/mixins/_container.scss","var/www/html/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, 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: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core 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` | Horizontal padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding-y` | Vertical padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding` | Shorthand padding of the card. | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)` |\n// | `--graupl-card-transition` | Transition applied to the card. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-card-transition-reduced-motion` | Transition when reduced motion is enabled. | `none` |\n// | `--graupl-card-transform` | Base transform for the card. | `none` |\n// | `--graupl-card-hover-transform` | Transform for hovered cards. | `none` |\n// | `--graupl-card-column-gap` | Column gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-row-gap` | Row gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-gap` | Gap inside the card (column/row). | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)` |\n// | `--graupl-card-background` | Background colour of the card. | `var(--graupl-background)` |\n// | `--graupl-card-color` | Text colour of the card. | `var(--graupl-color)` |\n// | `--graupl-card-border-width` | Border width of the card. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-card-border-style` | Border style of the card. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-card-border-radius` | Border radius of the card. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-card-border-color` | Border colour of the card. | `var(--graupl-card-color)` |\n// | `--graupl-card-content-ratio` | Grid row ratio used for card content. | `1fr` |\n// | `--graupl-card-image-ratio` | Grid row ratio used for card images. | `auto` |\n// | `--graupl-horizontal-card-content-ratio` | Grid column ratio for horizontal cards (content area). | `3fr` |\n// | `--graupl-horizontal-card-image-ratio` | Grid column ratio for horizontal cards (image area). | `2fr` |\n// | `--graupl-card-image-padding` | Padding for the card image wrapper. | `var(--graupl-spacer-0) var(--graupl-spacer-0)` |\n// | `--graupl-card-content-padding` | Padding for the card content wrapper. | `var(--graupl-spacer-3) var(--graupl-spacer-5)` |\n// | `--graupl-card-content-gap` | Gap inside the card content (column/row). | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)` |\n// | `--graupl-card-title-color` | Text colour of the card title. | `var(--graupl-card-color)` |\n// | `--graupl-card-title-font-size` | Font size of the card title. | `var(--graupl-h4)` |\n// | `--graupl-card-title-font-weight` | Font weight of the card title. | `var(--graupl-font-weight-h4)` |\n// | `--graupl-card-title-font-family` | Font family of the card title. | `var(--graupl-font-family-h4)` |\n// | `--graupl-card-title-line-height` | Line height of the card title. | `var(--graupl-line-height-h4)` |\n//\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` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for accordion variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$card-selector-base` | Selector base for the card container. | `$selector-base` |\n// | `$card-selector` | Selector for the card container. | `\"card\"` |\n// | `$card-image-selector-base` | Selector base for the image wrapper. | `$selector-base` |\n// | `$card-image-selector` | Selector for the image wrapper. | `\"card-image\"` |\n// | `$card-content-selector-base` | Selector base for the content wrapper. | `$selector-base` |\n// | `$card-content-selector` | Selector for the content wrapper. | `\"card-content\"` |\n// | `$card-body-selector-base` | Selector base for the body region. | `$selector-base` |\n// | `$card-body-selector` | Selector for the body region. | `\"card-body\"` |\n// | `$card-header-selector-base` | Selector base for the header region. | `$selector-base` |\n// | `$card-header-selector` | Selector for the header region. | `\"card-header\"` |\n// | `$card-footer-selector-base` | Selector base for the footer region. | `$selector-base` |\n// | `$card-footer-selector` | Selector for the footer region. | `\"card-footer\"` |\n// | `$card-title-selector-base` | Selector base for the title element. | `$selector-base` |\n// | `$card-title-selector` | Selector for the title element. | `\"card-title\"` |\n// | `$horizontal-card-selector-base` | Selector base for horizontal layout modifier. | `\".\"` |\n// | `$horizontal-card-selector` | Selector for horizontal layout modifier. | `\"horizontal\"` |\n// | `$horizontal-card-left-selector-base` | Selector base for left modifier. | `\".\"` |\n// | `$horizontal-card-left-selector` | Selector for left modifier. | `\"left\"` |\n// | `$horizontal-card-right-selector-base` | Selector base for right modifier. | `\".\"` |\n// | `$horizontal-card-right-selector` | Selector for right modifier. | `\"right\"` |\n// | `$vertical-card-top-selector-base` | Selector base for top modifier. | `\".\"` |\n// | `$vertical-card-top-selector` | Selector for top modifier. | `\"top\"` |\n// | `$vertical-card-bottom-selector-base` | Selector base for bottom modifier. | `\".\"` |\n// | `$vertical-card-bottom-selector` | Selector for bottom modifier. | `\"bottom\"` |\n// | `$inverse-card-selector-base` | Selector base for inverse layout modifier. | `\".\"` |\n// | `$inverse-card-selector` | Selector for inverse layout modifier. | `\"inverse\"` |\n// | `$card-transform` | Base transform for the card. | `none` |\n// | `$card-hover-transform` | Hover transform for the card. | `none` |\n// | `$card-content-ratio` | Grid ratio for content rows. | `1fr` |\n// | `$card-image-ratio` | Grid ratio for image rows. | `auto` |\n// | `$horizontal-card-content-ratio` | Grid ratio for content in horizontal layout. | `3fr` |\n// | `$horizontal-card-image-ratio` | Grid ratio for images in horizontal layout. | `2fr` |\n// | `$card-theme-mappings` | A map of properties and color shades used generate all card variants. | `()` |\n// | `$card-theme-map` | A map of all properties, colors, and color shades used to generate all card variants. | `()` |\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 @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 @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 @if not map.has-key(root-defaults.$container-size-triggers, $trigger) {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $container-size-trigger: map.get(\n root-defaults.$container-size-triggers,\n $trigger\n );\n\n @if not map.has-key($container-size-trigger, \"mixin\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($container-size-trigger, \"args\") {\n @error \"The container size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($container-size-trigger, \"mixin\");\n $mixin-args: map.get($container-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n","// @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,wBCsNF,0mEAcE,8JAWA,yKAUA,4EAOE,qZAcE,gwBAmBF,iMAUE,gxBAsBN,4PAIE,wuBAqBF,wgBASA,yBAKA,mCE1VA,0BF0WQ,qSAaA,iOAaA,gMGhZR,uCHgaE,mFDlaA,oBC0aF,uiCAmBA","sources":["dist/css/component/card.css","var/www/html/packages/core/src/scss/theme/typography/_defaults.scss","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/card/_index.scss","var/www/html/packages/core/src/scss/component/card/_variables.scss","var/www/html/packages/core/src/scss/mixins/_container.scss","var/www/html/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, 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: \":\" !default;\n$root-selector: \"root\" !default;\n$bold-selector-base: $selector-base !default;\n$bold-selector: \"b\" !default;\n$strong-selector-base: $selector-base !default;\n$strong-selector: \"strong\" !default;\n$body-selector-base: $selector-base !default;\n$body-selector: \"body\" !default;\n$generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;\n$generate-base-font-weights: root-defaults.$generate-base-font-weights !default;\n$font-size-base: 1rem !default;\n$root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;\n$line-height: 1.2em !default;\n\n// Multipliers for font sizes.\n// This uses a minor third scale.\n// See: https://typescale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Lato&fontweight=400&bodyfont=body_font_default&bodyfontweight=400&lineheight=1.75&backgroundcolor=%23ffffff&fontcolor=%23000000\n$-font-size-multipliers: (\n xs: 0.694,\n sm: 0.833,\n base: 1,\n lg: 1.2,\n xl: 1.44,\n 2xl: 1.728,\n 3xl: 2.074,\n 4xl: 2.488,\n 5xl: 2.986,\n);\n$font-size-multipliers: () !default;\n\n// Merge the font size multipliers with the default ones.\n@if $generate-base-font-sizes {\n $font-size-multipliers: map.merge(\n $-font-size-multipliers,\n $font-size-multipliers\n );\n}\n\n// Weights.\n$-font-weights: (\n light: 300,\n normal: 400,\n bold: 700,\n);\n$font-weights: () !default;\n\n// Merge the custom font weights with the default ones.\n@if $generate-base-font-weights {\n $font-weights: map.merge($-font-weights, $font-weights);\n}\n\n/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */\n$root-font-family:\n system-ui,\n -apple-system,\n blinkmacsystemfont,\n \"Segoe UI\",\n roboto,\n \"Helvetica Neue\",\n arial,\n sans-serif !default;\n","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core 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` | Horizontal padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding-y` | Vertical padding of the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-padding` | Shorthand padding of the card. | `var(--graupl-card-padding-y) var(--graupl-card-padding-x)` |\n// | `--graupl-card-transition` | Transition applied to the card. | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |\n// | `--graupl-card-transition-reduced-motion` | Transition when reduced motion is enabled. | `none` |\n// | `--graupl-card-transform` | Base transform for the card. | `none` |\n// | `--graupl-card-hover-transform` | Transform for hovered cards. | `none` |\n// | `--graupl-card-column-gap` | Column gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-row-gap` | Row gap inside the card. | `var(--graupl-spacer-0)` |\n// | `--graupl-card-gap` | Gap inside the card (column/row). | `var(--graupl-card-column-gap) var(--graupl-card-row-gap)` |\n// | `--graupl-card-background` | Background colour of the card. | `var(--graupl-background)` |\n// | `--graupl-card-color` | Text colour of the card. | `var(--graupl-color)` |\n// | `--graupl-card-border-width` | Border width of the card. | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)` |\n// | `--graupl-card-border-style` | Border style of the card. | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)` |\n// | `--graupl-card-border-radius` | Border radius of the card. | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |\n// | `--graupl-card-border-color` | Border colour of the card. | `var(--graupl-card-color)` |\n// | `--graupl-card-content-ratio` | Grid row ratio used for card content. | `1fr` |\n// | `--graupl-card-image-ratio` | Grid row ratio used for card images. | `auto` |\n// | `--graupl-horizontal-card-content-ratio` | Grid column ratio for horizontal cards (content area). | `3fr` |\n// | `--graupl-horizontal-card-image-ratio` | Grid column ratio for horizontal cards (image area). | `2fr` |\n// | `--graupl-card-image-padding` | Padding for the card image wrapper. | `var(--graupl-spacer-0) var(--graupl-spacer-0)` |\n// | `--graupl-card-content-padding` | Padding for the card content wrapper. | `var(--graupl-spacer-3) var(--graupl-spacer-5)` |\n// | `--graupl-card-content-gap` | Gap inside the card content (column/row). | `var(--graupl-card-content-column-gap) var(--graupl-card-content-row-gap)` |\n// | `--graupl-card-title-color` | Text colour of the card title. | `var(--graupl-card-color)` |\n// | `--graupl-card-title-font-size` | Font size of the card title. | `var(--graupl-h4)` |\n// | `--graupl-card-title-font-weight` | Font weight of the card title. | `var(--graupl-font-weight-h4)` |\n// | `--graupl-card-title-font-family` | Font family of the card title. | `var(--graupl-font-family-h4)` |\n// | `--graupl-card-title-line-height` | Line height of the card title. | `var(--graupl-line-height-h4)` |\n//\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` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$generate-base-theme-map` | A flag to generate the base theme maps for accordion variants. | `true` |\n// | `$themeable` | Flag to generate theme modifiers. | `false` |\n// | `$force-vertical-cards` | Flag to enable forced vertical cards on small screens. | `true` |\n// | `$card-selector-base` | Selector base for the card container. | `$selector-base` |\n// | `$card-selector` | Selector for the card container. | `\"card\"` |\n// | `$card-image-selector-base` | Selector base for the image wrapper. | `$selector-base` |\n// | `$card-image-selector` | Selector for the image wrapper. | `\"card-image\"` |\n// | `$card-content-selector-base` | Selector base for the content wrapper. | `$selector-base` |\n// | `$card-content-selector` | Selector for the content wrapper. | `\"card-content\"` |\n// | `$card-body-selector-base` | Selector base for the body region. | `$selector-base` |\n// | `$card-body-selector` | Selector for the body region. | `\"card-body\"` |\n// | `$card-header-selector-base` | Selector base for the header region. | `$selector-base` |\n// | `$card-header-selector` | Selector for the header region. | `\"card-header\"` |\n// | `$card-footer-selector-base` | Selector base for the footer region. | `$selector-base` |\n// | `$card-footer-selector` | Selector for the footer region. | `\"card-footer\"` |\n// | `$card-title-selector-base` | Selector base for the title element. | `$selector-base` |\n// | `$card-title-selector` | Selector for the title element. | `\"card-title\"` |\n// | `$horizontal-card-selector-base` | Selector base for horizontal layout modifier. | `\".\"` |\n// | `$horizontal-card-selector` | Selector for horizontal layout modifier. | `\"horizontal\"` |\n// | `$horizontal-card-left-selector-base` | Selector base for left modifier. | `\".\"` |\n// | `$horizontal-card-left-selector` | Selector for left modifier. | `\"left\"` |\n// | `$horizontal-card-right-selector-base` | Selector base for right modifier. | `\".\"` |\n// | `$horizontal-card-right-selector` | Selector for right modifier. | `\"right\"` |\n// | `$vertical-card-top-selector-base` | Selector base for top modifier. | `\".\"` |\n// | `$vertical-card-top-selector` | Selector for top modifier. | `\"top\"` |\n// | `$vertical-card-bottom-selector-base` | Selector base for bottom modifier. | `\".\"` |\n// | `$vertical-card-bottom-selector` | Selector for bottom modifier. | `\"bottom\"` |\n// | `$inverse-card-selector-base` | Selector base for inverse layout modifier. | `\".\"` |\n// | `$inverse-card-selector` | Selector for inverse layout modifier. | `\"inverse\"` |\n// | `$card-transform` | Base transform for the card. | `none` |\n// | `$card-hover-transform` | Hover transform for the card. | `none` |\n// | `$card-content-ratio` | Grid ratio for content rows. | `1fr` |\n// | `$card-image-ratio` | Grid ratio for image rows. | `auto` |\n// | `$horizontal-card-content-ratio` | Grid ratio for content in horizontal layout. | `3fr` |\n// | `$horizontal-card-image-ratio` | Grid ratio for images in horizontal layout. | `2fr` |\n// | `$card-theme-mappings` | A map of properties and color shades used generate all card variants. | `()` |\n// | `$card-theme-map` | A map of all properties, colors, and color shades used to generate all card variants. | `()` |\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":[]}
package/dist/css/component/input-group.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"ACSI,wBCgEF,6fASE,6EAKA,uHAOA,gFAKA,2RE5EF,iCFqFE","sources":["dist/css/component/input-group.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/input-group/_index.scss","var/www/html/packages/core/src/scss/component/input-group/_variables.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss"],"sourcesContent":["@layer graupl.component {\n .input-group {\n display: grid;\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n align-items: center;\n gap: var(--graupl-input-group-gap, var(--graupl-input-group-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-input-group-column-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .input-group label {\n grid-area: var(--graupl-input-group-label-grid-area, label);\n }\n .input-group input,\n .input-group textarea,\n .input-group select {\n grid-area: var(--graupl-input-group-input-grid-area, input);\n }\n .input-group .help-text {\n grid-area: var(--graupl-input-group-help-grid-area, help);\n }\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-inline-grid-template-areas, \"label input\" \"- help\");\n grid-template-columns: var(--graupl-input-group-inline-grid-template-columns, auto 1fr);\n grid-template-rows: var(--graupl-input-group-inline-grid-template-rows, auto auto);\n }\n @media screen and (width <= 575px) {\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n }\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core input group component styles.\n//\n// This module provides grid-based alignment for labels, inputs, and help text.\n//\n// The following selectors are generated by default:\n// - `.input-group`: The input group container.\n// - `.help-text`: Inline help text element.\n// - `.inline`: Modifier to lay out label/input/help in a single row (when allowed).\n//\n// The following custom properties can be used to customize the input group component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-input-group-grid-template-areas` | Grid template areas for the default layout. | `\"label\" \"input\" \"help\"` |\n// | `--graupl-input-group-grid-template-columns` | Grid template columns for the default layout. | `100%` |\n// | `--graupl-input-group-grid-template-rows` | Grid template rows for the default layout. | `auto auto auto` |\n// | `--graupl-input-group-row-gap` | Row gap between label/input/help. | `var(--graupl-spacer-2)` |\n// | `--graupl-input-group-column-gap` | Column gap between label/input/help. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-group-gap` | Shorthand gap (row/column) for the group. | `var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap)` |\n// | `--graupl-input-group-inline-grid-template-areas` | Grid template areas for the inline layout. | `\"label input\" \"- help\"` |\n// | `--graupl-input-group-inline-grid-template-columns` | Grid template columns for the inline layout. | `auto 1fr` |\n// | `--graupl-input-group-inline-grid-template-rows` | Grid template rows for the inline layout. | `auto auto` |\n// | `--graupl-input-group-label-grid-area` | Grid area name used by the label. | `label` |\n// | `--graupl-input-group-input-grid-area` | Grid area name used by form controls. | `input` |\n// | `--graupl-input-group-help-grid-area` | Grid area name used by help text. | `help` |\n//\n// The following sass variables can be used to customize the generation of the input group component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$input-group-selector-base` | Selector base for the input group container. | `$selector-base` |\n// | `$input-group-selector` | Selector for the input group container. | `\"input-group\"` |\n// | `$input-group-inline-selector-base` | Selector base for the inline modifier. | `\".\"` |\n// | `$input-group-inline-selector` | Selector for the inline modifier. | `\"inline\"` |\n// | `$input-group-help-text-selector-base` | Selector base for the help text. | `$selector-base` |\n// | `$input-group-help-text-selector` | Selector for the help text. | `\"help-text\"` |\n// | `$input-group-grid-label-name` | Grid area name for labels. | `label` |\n// | `$input-group-grid-input-name` | Grid area name for inputs. | `input` |\n// | `$input-group-grid-help-name` | Grid area name for help text. | `help` |\n// | `$input-group-grid-template-columns` | Default grid columns. | `100%` |\n// | `$input-group-grid-template-rows` | Default grid rows. | `auto auto auto` |\n// | `$input-group-inline-grid-template-columns` | Inline layout grid columns. | `auto 1fr` |\n// | `$input-group-inline-grid-template-rows` | Inline layout grid rows. | `auto auto` |\n// | `$input-group-label-grid-area` | Grid area value for labels. | `label` |\n// | `$input-group-input-grid-area` | Grid area value for inputs. | `input` |\n// | `$input-group-help-grid-area` | Grid area value for help text. | `help` |\n//\n// @example\n// <div class=\"input-group\">\n// <label for=\"input-default\">Label</label>\n// <input id=\"input-default\" type=\"text\" placeholder=\"Enter text\" />\n// <span class=\"help-text\">Helpful hint</span>\n// </div>\n//\n// @example\n// <div class=\"input-group inline\">\n// <label for=\"select-inline\">Label</label>\n// <select id=\"select-inline\">\n// <option value=\"1\">One</option>\n// <option value=\"2\">Two</option>\n// </select>\n// <span class=\"help-text\">Inline help</span>\n// </div>\n\n@use \"defaults\";\n@use \"../../base/form/defaults\" as form-defaults;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n\n// stylelint-disable declaration-block-no-redundant-longhand-properties\n@include layer(component) {\n // .input-group\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {\n display: grid;\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n align-items: center;\n gap: $input-group-gap;\n\n // label\n #{form-defaults.$label-selector} {\n grid-area: $input-group-label-grid-area;\n }\n\n // input, textarea, select\n #{form-defaults.$input-selector},\n #{form-defaults.$textarea-selector},\n #{form-defaults.$select-selector} {\n grid-area: $input-group-input-grid-area;\n }\n\n // .help-text\n #{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {\n grid-area: $input-group-help-grid-area;\n }\n\n // &.inline\n &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-inline-grid-template-areas;\n grid-template-columns: $input-group-inline-grid-template-columns;\n grid-template-rows: $input-group-inline-grid-template-rows;\n }\n }\n\n @include screen.down(xs) {\n // .input-group.inline\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector}#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n }\n }\n}\n","// @graupl/core input group 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-input-group-grid-template-areas | \"label\" \"input\" \"help\" |\n// | --graupl-input-group-grid-template-columns | 100% |\n// | --graupl-input-group-grid-template-rows | auto auto auto |\n// | --graupl-input-group-row-gap | var(--graupl-spacer-2) |\n// | --graupl-input-group-column-gap | var(--graupl-spacer-3) |\n// | --graupl-input-group-gap | var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap) |\n// | --graupl-input-group-inline-grid-template-areas | \"label input\" \"- help\" |\n// | --graupl-input-group-inline-grid-template-columns | auto 1fr |\n// | --graupl-input-group-inline-grid-template-rows | auto auto |\n// | --graupl-input-group-label-grid-area | label |\n// | --graupl-input-group-input-grid-area | input |\n// | --graupl-input-group-help-grid-area | help |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"sass:map\";\n\n// Input group properties.\n// --graupl-input-group-grid-template-areas\n$input-group-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name}\"\n \"#{defaults.$input-group-grid-input-name}\"\n \"#{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-grid-template-columns\n$input-group-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-grid-template-columns,\n #{defaults.$input-group-grid-template-columns}\n);\n\n// --graupl-input-group-grid-template-rows\n$input-group-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-grid-template-rows,\n #{defaults.$input-group-grid-template-rows}\n);\n\n// --graupl-input-group-row-gap\n$input-group-row-gap: var(\n --#{root-defaults.$prefix}input-group-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-input-group-column-gap\n$input-group-column-gap: var(\n --#{root-defaults.$prefix}input-group-column-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-group-gap\n$input-group-gap: var(\n --#{root-defaults.$prefix}input-group-gap,\n #{$input-group-row-gap} #{$input-group-column-gap}\n);\n\n// Inline input group properties.\n// --graupl-input-group-inline-grid-template-areas\n$input-group-inline-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}\"\n \"- #{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-inline-grid-template-columns\n$input-group-inline-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-columns,\n #{defaults.$input-group-inline-grid-template-columns}\n);\n\n// --graupl-input-group-inline-grid-template-rows\n$input-group-inline-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-rows,\n #{defaults.$input-group-inline-grid-template-rows}\n);\n\n// Inner element properties.\n// --graupl-input-group-label-grid-area\n$input-group-label-grid-area: var(\n --#{root-defaults.$prefix}input-group-label-grid-area,\n #{defaults.$input-group-label-grid-area}\n);\n\n// --graupl-input-group-input-grid-area\n$input-group-input-grid-area: var(\n --#{root-defaults.$prefix}input-group-input-grid-area,\n #{defaults.$input-group-input-grid-area}\n);\n\n// --graupl-input-group-help-grid-area\n$input-group-help-grid-area: var(\n --#{root-defaults.$prefix}input-group-help-grid-area,\n #{defaults.$input-group-help-grid-area}\n);\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n @if not meta.mixin-exists($mixin-name) {\n @error \"The mixin \\\"#{$mixin-name}\\\" does not exist.\";\n }\n\n $mixin: meta.get-mixin($mixin-name);\n\n @if meta.accepts-content($mixin) {\n @include meta.apply($mixin, $mixin-args...) {\n @content;\n }\n } @else {\n @warn \"The mixin \\\"#{$mixin-name}\\\" does not accept content.\";\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACSI,wBCgEF,6fASE,6EAKA,uHAOA,gFAKA,2RE5EF,iCFqFE","sources":["dist/css/component/input-group.css","var/www/html/packages/core/src/scss/mixins/_layer.scss","var/www/html/packages/core/src/scss/component/input-group/_index.scss","var/www/html/packages/core/src/scss/component/input-group/_variables.scss","var/www/html/packages/core/src/scss/mixins/_screen.scss"],"sourcesContent":["@layer graupl.component {\n .input-group {\n display: grid;\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n align-items: center;\n gap: var(--graupl-input-group-gap, var(--graupl-input-group-row-gap, var(--graupl-spacer-2, calc(0.25 * var(--graupl-spacer, 1rem)))) var(--graupl-input-group-column-gap, var(--graupl-spacer-3, calc(0.5 * var(--graupl-spacer, 1rem)))));\n }\n .input-group label {\n grid-area: var(--graupl-input-group-label-grid-area, label);\n }\n .input-group input,\n .input-group textarea,\n .input-group select {\n grid-area: var(--graupl-input-group-input-grid-area, input);\n }\n .input-group .help-text {\n grid-area: var(--graupl-input-group-help-grid-area, help);\n }\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-inline-grid-template-areas, \"label input\" \"- help\");\n grid-template-columns: var(--graupl-input-group-inline-grid-template-columns, auto 1fr);\n grid-template-rows: var(--graupl-input-group-inline-grid-template-rows, auto auto);\n }\n @media screen and (width <= 575px) {\n .input-group.inline {\n grid-template-areas: var(--graupl-input-group-grid-template-areas, \"label\" \"input\" \"help\");\n grid-template-columns: var(--graupl-input-group-grid-template-columns, 100%);\n grid-template-rows: var(--graupl-input-group-grid-template-rows, auto auto auto);\n }\n }\n}","// @graupl/core layer mixins.\n//\n// These should be used to define the layers of your components to ensure that\n// they are output in the correct order in the final compiled CSS.\n\n@use \"../defaults\" as root-defaults;\n\n@mixin layer($layer) {\n @if root-defaults.$use-layers {\n @layer #{root-defaults.$id}.#{$layer} {\n @content;\n }\n } @else {\n @content;\n }\n}\n","// @graupl/core input group component styles.\n//\n// This module provides grid-based alignment for labels, inputs, and help text.\n//\n// The following selectors are generated by default:\n// - `.input-group`: The input group container.\n// - `.help-text`: Inline help text element.\n// - `.inline`: Modifier to lay out label/input/help in a single row (when allowed).\n//\n// The following custom properties can be used to customize the input group component:\n// | Property | Description | Default Value |\n// | --- | --- | --- |\n// | `--graupl-input-group-grid-template-areas` | Grid template areas for the default layout. | `\"label\" \"input\" \"help\"` |\n// | `--graupl-input-group-grid-template-columns` | Grid template columns for the default layout. | `100%` |\n// | `--graupl-input-group-grid-template-rows` | Grid template rows for the default layout. | `auto auto auto` |\n// | `--graupl-input-group-row-gap` | Row gap between label/input/help. | `var(--graupl-spacer-2)` |\n// | `--graupl-input-group-column-gap` | Column gap between label/input/help. | `var(--graupl-spacer-3)` |\n// | `--graupl-input-group-gap` | Shorthand gap (row/column) for the group. | `var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap)` |\n// | `--graupl-input-group-inline-grid-template-areas` | Grid template areas for the inline layout. | `\"label input\" \"- help\"` |\n// | `--graupl-input-group-inline-grid-template-columns` | Grid template columns for the inline layout. | `auto 1fr` |\n// | `--graupl-input-group-inline-grid-template-rows` | Grid template rows for the inline layout. | `auto auto` |\n// | `--graupl-input-group-label-grid-area` | Grid area name used by the label. | `label` |\n// | `--graupl-input-group-input-grid-area` | Grid area name used by form controls. | `input` |\n// | `--graupl-input-group-help-grid-area` | Grid area name used by help text. | `help` |\n//\n// The following sass variables can be used to customize the generation of the input group component:\n// | Variable | Description | Default Value |\n// | --- | --- | --- |\n// | `$selector-base` | Selector base for the component. | `\".\"` |\n// | `$modifier-selector-base` | Selector base for component modifiers. | `\".\"` |\n// | `$input-group-selector-base` | Selector base for the input group container. | `$selector-base` |\n// | `$input-group-selector` | Selector for the input group container. | `\"input-group\"` |\n// | `$input-group-inline-selector-base` | Selector base for the inline modifier. | `\".\"` |\n// | `$input-group-inline-selector` | Selector for the inline modifier. | `\"inline\"` |\n// | `$input-group-help-text-selector-base` | Selector base for the help text. | `$selector-base` |\n// | `$input-group-help-text-selector` | Selector for the help text. | `\"help-text\"` |\n// | `$input-group-grid-label-name` | Grid area name for labels. | `label` |\n// | `$input-group-grid-input-name` | Grid area name for inputs. | `input` |\n// | `$input-group-grid-help-name` | Grid area name for help text. | `help` |\n// | `$input-group-grid-template-columns` | Default grid columns. | `100%` |\n// | `$input-group-grid-template-rows` | Default grid rows. | `auto auto auto` |\n// | `$input-group-inline-grid-template-columns` | Inline layout grid columns. | `auto 1fr` |\n// | `$input-group-inline-grid-template-rows` | Inline layout grid rows. | `auto auto` |\n// | `$input-group-label-grid-area` | Grid area value for labels. | `label` |\n// | `$input-group-input-grid-area` | Grid area value for inputs. | `input` |\n// | `$input-group-help-grid-area` | Grid area value for help text. | `help` |\n//\n// @example\n// <div class=\"input-group\">\n// <label for=\"input-default\">Label</label>\n// <input id=\"input-default\" type=\"text\" placeholder=\"Enter text\" />\n// <span class=\"help-text\">Helpful hint</span>\n// </div>\n//\n// @example\n// <div class=\"input-group inline\">\n// <label for=\"select-inline\">Label</label>\n// <select id=\"select-inline\">\n// <option value=\"1\">One</option>\n// <option value=\"2\">Two</option>\n// </select>\n// <span class=\"help-text\">Inline help</span>\n// </div>\n\n@use \"defaults\";\n@use \"../../base/form/defaults\" as form-defaults;\n@use \"variables\" as *;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n\n// stylelint-disable declaration-block-no-redundant-longhand-properties\n@include layer(component) {\n // .input-group\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {\n display: grid;\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n align-items: center;\n gap: $input-group-gap;\n\n // label\n #{form-defaults.$label-selector} {\n grid-area: $input-group-label-grid-area;\n }\n\n // input, textarea, select\n #{form-defaults.$input-selector},\n #{form-defaults.$textarea-selector},\n #{form-defaults.$select-selector} {\n grid-area: $input-group-input-grid-area;\n }\n\n // .help-text\n #{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {\n grid-area: $input-group-help-grid-area;\n }\n\n // &.inline\n &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-inline-grid-template-areas;\n grid-template-columns: $input-group-inline-grid-template-columns;\n grid-template-rows: $input-group-inline-grid-template-rows;\n }\n }\n\n @include screen.down(xs) {\n // .input-group.inline\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector}#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-areas: $input-group-grid-template-areas;\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n }\n }\n}\n","// @graupl/core input group 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-input-group-grid-template-areas | \"label\" \"input\" \"help\" |\n// | --graupl-input-group-grid-template-columns | 100% |\n// | --graupl-input-group-grid-template-rows | auto auto auto |\n// | --graupl-input-group-row-gap | var(--graupl-spacer-2) |\n// | --graupl-input-group-column-gap | var(--graupl-spacer-3) |\n// | --graupl-input-group-gap | var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap) |\n// | --graupl-input-group-inline-grid-template-areas | \"label input\" \"- help\" |\n// | --graupl-input-group-inline-grid-template-columns | auto 1fr |\n// | --graupl-input-group-inline-grid-template-rows | auto auto |\n// | --graupl-input-group-label-grid-area | label |\n// | --graupl-input-group-input-grid-area | input |\n// | --graupl-input-group-help-grid-area | help |\n\n@use \"defaults\";\n@use \"../../defaults\" as root-defaults;\n@use \"../../variables\" as root-variables;\n@use \"sass:map\";\n\n// Input group properties.\n// --graupl-input-group-grid-template-areas\n$input-group-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name}\"\n \"#{defaults.$input-group-grid-input-name}\"\n \"#{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-grid-template-columns\n$input-group-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-grid-template-columns,\n #{defaults.$input-group-grid-template-columns}\n);\n\n// --graupl-input-group-grid-template-rows\n$input-group-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-grid-template-rows,\n #{defaults.$input-group-grid-template-rows}\n);\n\n// --graupl-input-group-row-gap\n$input-group-row-gap: var(\n --#{root-defaults.$prefix}input-group-row-gap,\n #{map.get(root-variables.$spacers, 2)}\n);\n\n// --graupl-input-group-column-gap\n$input-group-column-gap: var(\n --#{root-defaults.$prefix}input-group-column-gap,\n #{map.get(root-variables.$spacers, 3)}\n);\n\n// --graupl-input-group-gap\n$input-group-gap: var(\n --#{root-defaults.$prefix}input-group-gap,\n #{$input-group-row-gap} #{$input-group-column-gap}\n);\n\n// Inline input group properties.\n// --graupl-input-group-inline-grid-template-areas\n$input-group-inline-grid-template-areas: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-areas,\n \"#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}\"\n \"- #{defaults.$input-group-grid-help-name}\"\n);\n\n// --graupl-input-group-inline-grid-template-columns\n$input-group-inline-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-columns,\n #{defaults.$input-group-inline-grid-template-columns}\n);\n\n// --graupl-input-group-inline-grid-template-rows\n$input-group-inline-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-rows,\n #{defaults.$input-group-inline-grid-template-rows}\n);\n\n// Inner element properties.\n// --graupl-input-group-label-grid-area\n$input-group-label-grid-area: var(\n --#{root-defaults.$prefix}input-group-label-grid-area,\n #{defaults.$input-group-label-grid-area}\n);\n\n// --graupl-input-group-input-grid-area\n$input-group-input-grid-area: var(\n --#{root-defaults.$prefix}input-group-input-grid-area,\n #{defaults.$input-group-input-grid-area}\n);\n\n// --graupl-input-group-help-grid-area\n$input-group-help-grid-area: var(\n --#{root-defaults.$prefix}input-group-help-grid-area,\n #{defaults.$input-group-help-grid-area}\n);\n","// @graupl/core screen mixins.\n//\n// A series of mixins to generate breakpoints.\n\n// @use \"../defaults\" as root-defaults;\n@use \"../functions/screen\";\n@use \"../defaults\" as root-defaults;\n@use \"sass:map\";\n@use \"sass:meta\";\n\n// A mixin to generate a minimum screen width media query.\n@mixin up($size) {\n $screen-size: screen.min($size);\n\n @media screen and (#{$screen-size} <= width) {\n @content;\n }\n}\n\n// A mixin to generate a maximum screen width media query.\n@mixin down($size) {\n $screen-size: screen.max($size);\n\n @media screen and (width <= #{$screen-size}) {\n @content;\n }\n}\n\n// A mixin to generate a range of screen widths media query.\n@mixin between($min, $max) {\n $screen-size: screen.range($min, $max);\n $min: map.get($screen-size, \"min\");\n $max: map.get($screen-size, \"max\");\n\n @media screen and (#{$min} <= width <= #{$max}) {\n @content;\n }\n}\n\n@mixin only($size) {\n @include between($size, $size) {\n @content;\n }\n}\n\n@mixin trigger($trigger) {\n // Validate that the trigger exists.\n @if not map.has-key(root-defaults.$screen-size-triggers, $trigger) {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not exist.\";\n }\n\n $screen-size-trigger: map.get(root-defaults.$screen-size-triggers, $trigger);\n\n // If the trigger is null, assume the user has disabled it and output the content as-is.\n @if meta.type-of($screen-size-trigger) != \"null\" {\n // Validate that the trigger has the required keys.\n @if not map.has-key($screen-size-trigger, \"mixin\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have a mixin key.\";\n }\n\n @if not map.has-key($screen-size-trigger, \"args\") {\n @error \"The screen size trigger \\\"#{$trigger}\\\" does not have an args key.\";\n }\n\n $mixin-name: map.get($screen-size-trigger, \"mixin\");\n $mixin-args: map.get($screen-size-trigger, \"args\");\n\n // 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"],"names":[]}