@graupl/graupl 1.0.0-beta.48 → 1.0.0-beta.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/base/form.css.map +1 -1
- package/dist/css/base.css.map +1 -1
- package/dist/css/component/input-group.css +1 -1
- package/dist/css/component/input-group.css.map +1 -1
- package/dist/css/component.css +1 -1
- package/dist/css/component.css.map +1 -1
- package/dist/css/graupl.css +1 -1
- package/dist/css/graupl.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer graupl.component{.input-group{grid-template-
|
|
1
|
+
@layer graupl.component{.input-group{grid-template-columns:var(--graupl-input-group-grid-template-columns,var(--graupl-input-group-bottom-grid-template-columns,[label-start input-start help-start] 100% [help-end input-end label-end]));grid-template-rows:var(--graupl-input-group-grid-template-rows,var(--graupl-input-group-bottom-grid-template-rows,[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]));align-items:center;gap:var(--graupl-input-group-gap,var(--graupl-input-group-row-gap,var(--graupl-spacer-2,calc(.25 * var(--graupl-spacer,1rem)))) var(--graupl-input-group-column-gap,var(--graupl-spacer-3,calc(.5 * var(--graupl-spacer,1rem)))));display:grid}.input-group label{grid-area:label}.input-group input,.input-group textarea,.input-group select{grid-area:input}.input-group [type=checkbox],.input-group [type=radio]{justify-self:start}.input-group .help-text{grid-area:help}.input-group.top{grid-template-columns:var(--graupl-input-group-top-grid-template-columns,[label-start input-start help-start] 100% [help-end input-end label-end]);grid-template-rows:var(--graupl-input-group-top-grid-template-rows,[input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end])}.input-group.bottom{grid-template-columns:var(--graupl-input-group-bottom-grid-template-columns,[label-start input-start help-start] 100% [help-end input-end label-end]);grid-template-rows:var(--graupl-input-group-bottom-grid-template-rows,[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end])}.input-group.inline{grid-template-columns:var(--graupl-input-group-inline-grid-template-columns,var(--graupl-input-group-right-grid-template-columns,[label-start] auto [label-end input-start help-start] 1fr [help-end input-end]));grid-template-rows:var(--graupl-input-group-inline-grid-template-rows,var(--graupl-input-group-right-grid-template-rows,[label-start input-start] auto [input-end label-end help-start] auto [help-end]))}.input-group.inline.left{grid-template-columns:var(--graupl-input-group-left-grid-template-columns,[input-start] auto [input-end label-start help-start] 1fr [help-end label-end]);grid-template-rows:var(--graupl-input-group-left-grid-template-rows,[label-start input-start] auto [input-end label-end help-start] auto [help-end])}.input-group.inline.right,.input-group.inverse{grid-template-columns:var(--graupl-input-group-right-grid-template-columns,[label-start] auto [label-end input-start help-start] 1fr [help-end input-end]);grid-template-rows:var(--graupl-input-group-right-grid-template-rows,[label-start input-start] auto [input-end label-end help-start] auto [help-end])}@media screen and (width<=575px){.input-group.inline,.input-group.inline.left,.input-group.inline.right{grid-template-columns:var(--graupl-input-group-grid-template-columns,var(--graupl-input-group-bottom-grid-template-columns,[label-start input-start help-start] 100% [help-end input-end label-end]));grid-template-rows:var(--graupl-input-group-grid-template-rows,var(--graupl-input-group-bottom-grid-template-rows,[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]))}.input-group.inverse{grid-template-columns:var(--graupl-input-group-bottom-grid-template-columns,[label-start input-start help-start] 100% [help-end input-end label-end]);grid-template-rows:var(--graupl-input-group-bottom-grid-template-rows,[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end])}}}
|
|
2
2
|
/*# sourceMappingURL=input-group.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBCgEF,kgBASE,6EAKA,uHAOA,gFAKA,2RE5EF,iCFqFE","sources":["dist/css/component/input-group.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/component/input-group/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/input-group/_variables.scss","var/www/html/node_modules/@graupl/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. | `\".\"` |\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. | `\".\"` |\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":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACSI,wBC0EF,gqBAQE,mCAKA,6EAaE,0EAMF,uCAKA,+TAMA,wUAMA,gbAKE,wUAMA,gWExHJ,iCF0IM,wdASF","sources":["dist/css/component/input-group.css","var/www/html/node_modules/@graupl/core/src/scss/mixins/_layer.scss","var/www/html/node_modules/@graupl/core/src/scss/component/input-group/_index.scss","var/www/html/node_modules/@graupl/core/src/scss/component/input-group/_variables.scss","var/www/html/node_modules/@graupl/core/src/scss/mixins/_screen.scss"],"sourcesContent":["@layer graupl.component {\n .input-group {\n display: grid;\n grid-template-columns: var(--graupl-input-group-grid-template-columns, var(--graupl-input-group-bottom-grid-template-columns, [label-start input-start help-start] 100% [help-end input-end label-end]));\n grid-template-rows: var(--graupl-input-group-grid-template-rows, var(--graupl-input-group-bottom-grid-template-rows, [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]));\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: label;\n }\n .input-group input,\n .input-group textarea,\n .input-group select {\n grid-area: input;\n }\n .input-group [type=checkbox] {\n justify-self: start;\n }\n .input-group [type=radio] {\n justify-self: start;\n }\n .input-group .help-text {\n grid-area: help;\n }\n .input-group.top {\n grid-template-columns: var(--graupl-input-group-top-grid-template-columns, [label-start input-start help-start] 100% [help-end input-end label-end]);\n grid-template-rows: var(--graupl-input-group-top-grid-template-rows, [input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end]);\n }\n .input-group.bottom {\n grid-template-columns: var(--graupl-input-group-bottom-grid-template-columns, [label-start input-start help-start] 100% [help-end input-end label-end]);\n grid-template-rows: var(--graupl-input-group-bottom-grid-template-rows, [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]);\n }\n .input-group.inline {\n grid-template-columns: var(--graupl-input-group-inline-grid-template-columns, var(--graupl-input-group-right-grid-template-columns, [label-start] auto [label-end input-start help-start] 1fr [help-end input-end]));\n grid-template-rows: var(--graupl-input-group-inline-grid-template-rows, var(--graupl-input-group-right-grid-template-rows, [label-start input-start] auto [input-end label-end help-start] auto [help-end]));\n }\n .input-group.inline.left {\n grid-template-columns: var(--graupl-input-group-left-grid-template-columns, [input-start] auto [input-end label-start help-start] 1fr [help-end label-end]);\n grid-template-rows: var(--graupl-input-group-left-grid-template-rows, [label-start input-start] auto [input-end label-end help-start] auto [help-end]);\n }\n .input-group.inline.right {\n grid-template-columns: var(--graupl-input-group-right-grid-template-columns, [label-start] auto [label-end input-start help-start] 1fr [help-end input-end]);\n grid-template-rows: var(--graupl-input-group-right-grid-template-rows, [label-start input-start] auto [input-end label-end help-start] auto [help-end]);\n }\n .input-group.inverse {\n grid-template-columns: var(--graupl-input-group-right-grid-template-columns, [label-start] auto [label-end input-start help-start] 1fr [help-end input-end]);\n grid-template-rows: var(--graupl-input-group-right-grid-template-rows, [label-start input-start] auto [input-end label-end help-start] auto [help-end]);\n }\n @media screen and (width <= 575px) {\n .input-group.inline, .input-group.inline.left, .input-group.inline.right {\n grid-template-columns: var(--graupl-input-group-grid-template-columns, var(--graupl-input-group-bottom-grid-template-columns, [label-start input-start help-start] 100% [help-end input-end label-end]));\n grid-template-rows: var(--graupl-input-group-grid-template-rows, var(--graupl-input-group-bottom-grid-template-rows, [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]));\n }\n .input-group.inverse {\n grid-template-columns: var(--graupl-input-group-bottom-grid-template-columns, [label-start input-start help-start] 100% [help-end input-end label-end]);\n grid-template-rows: var(--graupl-input-group-bottom-grid-template-rows, [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]);\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 in a single row with help below (when allowed).\n// - `.top`: Modifier to lay out input/label/help in a single column, respectively.\n// - `.bottom`: Modifier to lay out label/input/help in a single column, respectively.\n// - `.left`: Modifier to lay out input/label in a single row, respectively.\n// - `.right`: Modifier to layout label/input in a single row, respectively.\n// - `.inverse`: Modifier to combine both the top and left modifiers (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-top-grid-template-columns` | Grid template columns for the top layout. | `[label-start input-start help-start] 100% [help-end input-end label-end]` |\n// | `--graupl-input-group-top-grid-template-rows` | Grid template rows for the top layout. | `[input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end]` |\n// | `--graupl-input-group-bottom-grid-template-columns` | Grid template columns for the bottom layout. | `[label-start input-start help-start] 100% [help-end input-end label-end]` |\n// | `--graupl-input-group-bottom-grid-template-rows` | Grid template rows for the bottom layout. | `[label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end]` |\n// | `--graupl-input-group-left-grid-template-columns` | Grid template columns for the left layout. | `[input-start] auto [input-end label-start help-start] 1fr [help-end label-end]` |\n// | `--graupl-input-group-left-grid-template-rows` | Grid template rows for the left layout. | `[label-start input-start] auto [input-end label-end help-start] auto [help-end]` |\n// | `--graupl-input-group-right-grid-template-columns` | Grid template columns for the right layout. | `[label-start] auto [label-end input-start help-start] 1fr [help-end input-end]` |\n// | `--graupl-input-group-right-grid-template-rows` | Grid template rows for the right layout. | `[label-start input-start] auto [input-end label-end help-start] auto [help-end]` |\n// | `--graupl-input-group-grid-template-columns` | Grid template columns for the default layout | `var(--graupl-input-group-bottom-grid-template-columns)` |\n// | `--graupl-input-group-grid-template-rows` | Grid template rows for the default layout. | `var(--graupl-input-group-bottom-grid-template-rows)` |\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-columns` | Grid template columns for the inline layout. | `var(--graupl-input-group-right-grid-template-columns)` |\n// | `--graupl-input-group-inline-grid-template-rows` | Grid template rows for the inline layout. | `var(--graupl-input-group-right-grid-template-rows)` |\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. | `\".\"` |\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. | `\".\"` |\n// | `$input-group-help-text-selector` | Selector for the help text. | `\"help-text\"` |\n// | `$input-group-top-selector-base` | Selector base for the top modifier. | `\".\"` |\n// | `$input-group-top-selector` | Selector for the top modifier. | `\"top\"` |\n// | `$input-group-bottom-selector-base` | Selector base for the bottom modifier. | `\".\"` |\n// | `$input-group-bottom-selector` | Selector for the bottom modifier. | `\"bottom\"` |\n// | `$input-group-left-selector-base` | Selector base for the left modifier. | `\".\"` |\n// | `$input-group-left-selector` | Selector for the left modifier. | `\"left\"` |\n// | `$input-group-right-selector-base` | Selector base for the right modifier. | `\".\"` |\n// | `$input-group-right-selector` | Selector for the right modifier. | `\"right\"` |\n// | `$input-group-inverse-selector-base` | Selector base for the inverse modifier. | `\".\"` |\n// | `$input-group-inverse-selector` | Selector for the inverse modifier. | `\"inverse\"` |\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 \"../../base/form/defaults\" as form-defaults;\n@use \"../../mixins/layer\" as *;\n@use \"../../mixins/screen\";\n@use \"defaults\";\n@use \"sass:list\";\n@use \"sass:map\";\n@use \"variables\" as *;\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-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: label;\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;\n }\n\n @each $selector\n in list.join(\n map.get(form-defaults.$input-type-selectors, \"checkbox\"),\n map.get(form-defaults.$input-type-selectors, \"radio\")\n )\n {\n // e.g. [type=checkbox], [type=radio]\n #{$selector} {\n justify-self: start;\n }\n }\n\n // .help-text\n #{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {\n grid-area: help;\n }\n\n // &.top\n &#{defaults.$input-group-top-selector-base}#{defaults.$input-group-top-selector} {\n grid-template-columns: $input-group-top-grid-template-columns;\n grid-template-rows: $input-group-top-grid-template-rows;\n }\n\n // &.bottom\n &#{defaults.$input-group-bottom-selector-base}#{defaults.$input-group-bottom-selector} {\n grid-template-columns: $input-group-bottom-grid-template-columns;\n grid-template-rows: $input-group-bottom-grid-template-rows;\n }\n\n // &.inline\n &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n grid-template-columns: $input-group-inline-grid-template-columns;\n grid-template-rows: $input-group-inline-grid-template-rows;\n\n // &.left\n &#{defaults.$input-group-left-selector-base}#{defaults.$input-group-left-selector} {\n grid-template-columns: $input-group-left-grid-template-columns;\n grid-template-rows: $input-group-left-grid-template-rows;\n }\n\n // &.right\n &#{defaults.$input-group-right-selector-base}#{defaults.$input-group-right-selector} {\n grid-template-columns: $input-group-right-grid-template-columns;\n grid-template-rows: $input-group-right-grid-template-rows;\n }\n }\n\n // &.inverse\n &#{defaults.$input-group-inverse-selector-base}#{defaults.$input-group-inverse-selector} {\n grid-template-columns: $input-group-right-grid-template-columns;\n grid-template-rows: $input-group-right-grid-template-rows;\n }\n }\n\n @include screen.down(xs) {\n // .input-group\n #{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {\n // &.inline, &.left, &.right\n &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {\n &,\n &#{defaults.$input-group-left-selector-base}#{defaults.$input-group-left-selector},\n &#{defaults.$input-group-right-selector-base}#{defaults.$input-group-right-selector} {\n grid-template-columns: $input-group-grid-template-columns;\n grid-template-rows: $input-group-grid-template-rows;\n }\n }\n\n // &.inverse\n &#{defaults.$input-group-inverse-selector-base}#{defaults.$input-group-inverse-selector} {\n grid-template-columns: $input-group-bottom-grid-template-columns;\n grid-template-rows: $input-group-bottom-grid-template-rows;\n }\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-top-grid-template-columns | [label-start input-start help-start] 100% [help-end input-end label-end] |\n// | --graupl-input-group-top-grid-template-rows | [input-start] auto [input-end label-start] auto [label-end help-start] auto [help-end] |\n// | --graupl-input-group-bottom-grid-template-columns | [label-start input-start help-start] 100% [help-end input-end label-end] |\n// | --graupl-input-group-bottom-grid-template-rows | [label-start] auto [label-end input-start] auto [input-end help-start] auto [help-end] |\n// | --graupl-input-group-left-grid-template-columns | [input-start] auto [input-end label-start help-start] 1fr [help-end label-end] |\n// | --graupl-input-group-left-grid-template-rows | [label-start input-start] auto [input-end label-end help-start] auto [help-end] |\n// | --graupl-input-group-right-grid-template-columns | [label-start] auto [label-end input-start help-start] 1fr [help-end input-end] |\n// | --graupl-input-group-right-grid-template-rows | [label-start input-start] auto [input-end label-end help-start] auto [help-end] |\n// | --graupl-input-group-grid-template-columns | var(--graupl-input-group-bottom-grid-template-columns) |\n// | --graupl-input-group-grid-template-rows | var(--graupl-input-group-bottom-grid-template-rows) |\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-columns | var(--graupl-input-group-right-grid-template-columns) |\n// | --graupl-input-group-inline-grid-template-rows | var(--graupl-input-group-right-grid-template-rows) |\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-top-grid-template-columns\n$input-group-top-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-top-grid-template-columns,\n [label-start input-start help-start] 100% [help-end input-end label-end]\n);\n\n// --graupl-input-group-top-grid-template-rows\n$input-group-top-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-top-grid-template-rows,\n [input-start] auto [input-end label-start] auto [label-end help-start] auto\n [help-end]\n);\n\n// --graupl-input-group-bottom-grid-template-columns\n$input-group-bottom-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-bottom-grid-template-columns,\n [label-start input-start help-start] 100% [help-end input-end label-end]\n);\n\n// --graupl-input-group-bottom-grid-template-rows\n$input-group-bottom-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-bottom-grid-template-rows,\n [label-start] auto [label-end input-start] auto [input-end help-start] auto\n [help-end]\n);\n\n// --graupl-input-group-left-grid-template-columns\n$input-group-left-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-left-grid-template-columns,\n [input-start] auto [input-end label-start help-start] 1fr [help-end label-end]\n);\n\n// --graupl-input-group-left-grid-template-rows\n$input-group-left-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-left-grid-template-rows,\n [label-start input-start] auto [input-end label-end help-start] auto\n [help-end]\n);\n\n// --graupl-input-group-right-grid-template-columns\n$input-group-right-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-right-grid-template-columns,\n [label-start] auto [label-end input-start help-start] 1fr [help-end input-end]\n);\n\n// --graupl-input-group-right-grid-template-rows\n$input-group-right-grid-template-rows: var(\n --#{root-defaults.$prefix}input-group-right-grid-template-rows,\n [label-start input-start] auto [input-end label-end help-start] auto\n [help-end]\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 #{$input-group-bottom-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 #{$input-group-bottom-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-columns\n$input-group-inline-grid-template-columns: var(\n --#{root-defaults.$prefix}input-group-inline-grid-template-columns,\n #{$input-group-right-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 #{$input-group-right-grid-template-rows}\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":[]}
|