@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/components/_css-icon.scss

@@ -124,8 +124,8 @@ $config: (
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     // Icons that share pseudos for strokes
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       // content: "";
       display: block;
       position: absolute;
@@ -188,7 +188,7 @@ $config: (
   
   .css-icon--circle-info,
   .css-icon--circle-question {
-    &:before {
+    &::before {
       content: "i";
       text-align: center;
       font-size: get("text-size");
@@ -208,7 +208,7 @@ $config: (
     }
   }
   .css-icon--circle-question { 
-    &:before {
+    &::before {
       content: "?";
     }
   }
@@ -229,13 +229,13 @@ $config: (
     clip-path: polygon(10% 10%, 90% 50%, 10% 90%);
   }
   [class*="css-icon--arrow"] {
-    &:before {
+    &::before {
       content: "";
       width: 70%;
       left: 0;
     }
     // Note triangle clip-path is defined above with the solid triangle
-    &:after {
+    &::after {
       content: "";
       border-radius: 0;
       height: 100%;
@@ -246,8 +246,8 @@ $config: (
   }
   [class*="css-icon--angle"] {
     transform: rotate(135deg);
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: "";
       top: 30%;
       left: 30%;
@@ -255,14 +255,14 @@ $config: (
       transform: none;
       margin-top: 0;
     }
-    &:after {
+    &::after {
       width: $stroke-width;
       height: 70%;
     }
   }
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
     &[class*="css-icon--angle"] {
-      &:after {
+      &::after {
         width: $alt-width;
       }
     }
@@ -285,26 +285,26 @@ $config: (
 
   .css-icon--plus,
   .css-icon--plus-to-minus {
-    &:before {
+    &::before {
       transform: translateX(-50%) rotate(90deg);
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--minus {
-    &:before {
+    &::before {
       content: none;
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--close {
-    &:before {
+    &::before {
       transform: translate(-50%) rotate(45deg);
     }
-    &:after {
+    &::after {
       transform: translate(-50%) rotate(-45deg);
     }
   }
@@ -377,6 +377,16 @@ $config: (
   .css-icon--arrow-down {
     transform: rotate(90deg);
   }
+  .css-icon--drag-both {
+    transform: rotate(-45deg);
+    &::before {
+      transform: translateX(-50%) scale(0.8);
+      margin-top: -($stroke-width);
+    }
+    &::after {
+      transform: translateX(-50%) scaleX(0.5) scaleY(0.8);
+    }
+  }
 
   // Active icons
   .css-icon--plus-to-minus {
@@ -429,7 +439,7 @@ $config: (
         transition: none;
         transform: translate(-50%) rotate(-45deg);
       }
-      &:before {
+      &::before {
         box-shadow: none;
         transform: translate(-50%) rotate(45deg);
       }

package/scss/components/_data-grid.scss

@@ -3,9 +3,6 @@
 /// A page grid layout component that uses data attribute instead of class names, for brevity and readability
 ////
 
-/// Content Block
-/// @demo data-grid
-
 @use "sass:map";
 @use "sass:math";
 
@@ -38,6 +35,7 @@
 $config: (
   "attribute":           "data-grid",
   "attribute-container": "data-grid-container",
+  "attribute-init":      "data-grid-init",
   "breakpoint":          false,                   // Fallback to default
   "columns":             12,
   "gutter":              14px,
@@ -49,6 +47,7 @@ $config: (
   "sticky-top":                  var(--ulu-sticky-top-offset, 0),
   "rule-color" : "rule",
   "rule-size" : 1px,
+  "rule-fade-duration" : 400ms,
   "extra-breakpoints":   (
     "medium" : (
       "breakpoint": "medium",
@@ -134,6 +133,7 @@ $config: (
 /// @param {Map} $extra-rule-styles Map of other rule styles to add (map of maps of size, and color), key is the styles name ("name": ("size" : 4px, "color" : "color name" || color))
 /// @param {String} $extra-gutter-scales A map of gutter scales used like `data-grid="gutter-scale: large`, configuration map property becomes scale name and value is the amount (multiplier) to apply to the grid's gutter ie `( "large" : 2.25 )`
 /// @param {Map} $attribute Attribute to use for selecting grid and children. Children attribute get's "-item" as a suffix ("ie. data-grid, data-grid-item")
+/// @param {CssDuration} $rule-fade-duration The amount of time for rules to fade in (after init, script positioning), set to falsey value to disable rule fade in (rules will always be shown)
 
 @mixin create(
   $columns: get("columns"),
@@ -146,17 +146,20 @@ $config: (
   $extra-rule-styles: get("extra-rule-styles"),
   $extra-gutter-scales: get("extra-gutter-scales"),
   $attribute: get("attribute"),
+  $attribute-init: get("attribute-init"),
   $include-container: true,
   $container-attribute: get("attribute-container"),
   $container-gutter-scales: true,
   $sticky-top: get("sticky-top"),
-  $sticky-bottom: get("sticky-bottom")
+  $sticky-bottom: get("sticky-bottom"),
+  $rule-fade-duration: get("rule-fade-duration")
 ) {
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
+  $select-grid-not-init: '[#{ $attribute }]:not([#{ $attribute-init }])';
   $select-item: '[#{ $attribute-item }]';
-  $select-rule-col: ":before";
-  $select-rule-row: ":after";
+  $select-rule-col: "::before";
+  $select-rule-row: "::after";
   $select-container: "[#{ $container-attribute }]";
   // These through off syntax highlighting when inside interpolation
   $position-class-column-first: get("position-class-column-first");
@@ -215,6 +218,20 @@ $config: (
         }
       }
     }
+    // Rules: Applies to both column and row
+    &#{'[#{ $attribute }*="rules"]'} { 
+      > #{ $select-item } {
+        position: relative;
+        @if ($rule-fade-duration) {
+          &#{ $select-rule-col },
+          &#{ $select-rule-row } {
+            // For when grid init fades them in
+            opacity: 1;
+            transition: opacity $rule-fade-duration ease-in; 
+          }
+        }
+      }
+    }
     // Rules: Row
     &#{'[#{ $attribute }*="rules-row:"]'} { 
       > #{ $select-item } {
@@ -227,12 +244,6 @@ $config: (
         }
       }
     }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
     // Rules: Column
     &#{'[#{ $attribute }*="rules-column:"]'} { 
       > #{ $select-item } {
@@ -580,6 +591,21 @@ $config: (
       }
     }
   }
+
+  // Disable grid rules until init attribute it present (from positioning script)
+  // - In order to keep the rules for this compact it will only hide them if the init
+  //   is not present
+  
+  @if ($rule-fade-duration) {
+    #{ $select-grid-not-init } {
+      > #{ $select-item } {
+        &#{ $select-rule-col },
+        &#{ $select-rule-row } {
+          opacity: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 @mixin -create-extra-breakpoint(
@@ -635,6 +661,23 @@ $config: (
         }
       }
 
+      &#{'[#{ $attribute }*="gutters-row:"]'} { 
+        > #{ $select-item } {
+          padding-top:  $gutter;
+          padding-bottom: $gutter;
+        }
+        @if $extra-gutter-scales {
+          @each $scale, $amount in $extra-gutter-scales {
+            &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
+              > #{ $select-item } {
+                padding-top:  $gutter * $amount;
+                padding-bottom: $gutter * $amount;
+              }
+            }
+          }
+        }
+      }
+
       @include -create-column-widths(
         $columns: $columns,
         $attribute-item: $attribute-item,

package/scss/components/_data-table.scss

@@ -24,6 +24,35 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Dimension} cell-padding [(0.5em,)] Padding of the th and td elements.
+/// @prop {CssValue} text-align [left] Text align of the table.
+/// @prop {String} type-size ["small"] Font size of the table.
+/// @prop {Color} background-color [white] Background color of table container.
+/// @prop {Color} header-background-color [#f5f4f4] Background color of the the table header.
+/// @prop {Color} body-background-color [white] Background color of table body.
+/// @prop {Color} footer-background-color [#f3f3f3] Background color of table footer.
+/// @prop {Color} color ["type-secondary"] Font color of the table.
+/// @prop {Color} header-color ["headline"] Font color for the table header.
+/// @prop {Color} footer-color [null] Font color for the table footer.
+/// @prop {Number} line-height [true] Line height for the table.
+/// @prop {Dimension} column-min-width [6em] Min-width of the th element.
+/// @prop {Dimension} first-column-large-min-width [15em] When using "--large-first" style, the min width of the first th element.
+/// @prop {Dimension} border-width [1px] Border width of the table.
+/// @prop {Color} border-color [#dddddd] Border color for the table.
+/// @prop {Color} striped-row-background-color [#eeeeee] Background color for even rows if using "--striped" styling.
+/// @prop {Color} muted-row-background-color [#ccc] Background color for odd rows if using "--striped" styling.
+/// @prop {Color} muted-row-border-color [null] Border color for odd rows if using "--striped" styling.
+/// @prop {Color} highlighted-row-background-color [#ccc] Background color row if using "__row-highlighted" styling.
+/// @prop {Color} highlighted-row-border-color [null]  Border color row if using "__row-highlighted" styling.
+/// @prop {Dimension} large-header-cell-padding-y [1em]  Vertical padding of header if using "--large-header" styling.
+/// @prop {String} caption-type-size ["large"] Type size of table caption.
+/// @prop {Color} caption-background-color [null] Background color of table caption.
+/// @prop {CssValue} caption-font-weight [bold] Font weight of caption.
+/// @prop {CssBalue} caption-border-bottom [null] Bottom border of the caption.
+/// @prop {Dimension} caption-margin [(0,)] Margin of the caption.
+/// @prop {Dimension} caption-padding [(0.65em 0)] Padding of the caption.
+/// @prop {CssValue} caption-text-align [left] Text align of the caption.
+/// @prop {String} extra-selector [".wysiwyg table"] Additional selectors to include table styling.
 
 $config: (
   "cell-padding" : (0.5em,),
@@ -35,6 +64,7 @@ $config: (
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
   "header-color" : "headline",
+  "footer-color" : null,
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -147,6 +177,7 @@ $config: (
     }
     tfoot tr {
       background-color: color.get(get("footer-background-color"));
+      color: color.get(get("footer-color"));
     }
     th,
     td {

package/scss/components/_flipcard.scss

@@ -2,7 +2,7 @@
 ////
 /// @group flipcard
 ////
-/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
+/// Flipcard (content revealed on backside of card after click)
 
 @use "sass:map";
 @use "../color";
@@ -32,7 +32,6 @@
 /// @prop {Color} title-color-image-hover [blue] Color of the front page text when using an image and hovered or focused.
 /// @prop {Boolean} bottom-shadow [true] Boolean that enables a bottom shadow to the image flipcard.
 
-
 $config: (
   "anim-delay" : 200ms,
   "anim-duration" : 430ms,
@@ -86,6 +85,12 @@ $config: (
   @return utils.require-map-get($config, $name, "flipcard [config]");
 }
 
+/// Prints component styles
+/// @demo flipcard
+/// @example scss
+/// @example
+///   @include ulu.component-flipcard-styles();
+
 @mixin styles {
   $prefix: selector.class("flipcard");
 
@@ -193,7 +198,7 @@ $config: (
       color: color.get(get("title-color-image"));
       @if(get("bottom-shadow")) {
         // bottom position includes padding so that the shadow 
-        &:after {
+        &::after {
           content: '';
           display: block;
           position: absolute;

package/scss/components/_form-theme.scss

@@ -7,96 +7,104 @@
 @use "sass:meta";
 @use "sass:math";
 @use "sass:list";
+
 @use "../selector";
 @use "../utils";
 @use "../color";
 @use "../element";
 @use "../typography";
 
+// Used for function fallback
+$-fallbacks: (
+  "description-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense",
+  ),
+);
+
 /// Module Settings
 /// @type Map
-/// @prop {} color [inherit]
-/// @prop {} color-placeholder ["type-tertiary"]
-/// @prop {} drupal [false]
-/// @prop {} error-color ["danger"]
-/// @prop {} error-highlight-color [rgb(251, 242, 242)]
-/// @prop {} error-selector [".is-danger"]
-/// @prop {} file-button-style [true]
-/// @prop {} font-weight-label [bold]
-/// @prop {} font-weight-legend [bold]
-/// @prop {} font-weight-placeholder [normal]
-/// @prop {} font-weight-input [null]
-/// @prop {} font-weight-textarea [null]
-/// @prop {} font-weight-select [null]
-/// @prop {} input-border [element.get-rule-style()]
-/// @prop {} input-border-radius [0]
-/// @prop {} input-margin-y [0.75em]
-/// @prop {} input-padding-x [0.5em]
-/// @prop {} input-padding-y [0.25em]
-/// @prop {} input-min-width [10em]
-/// @prop {} input-background-color [white]
-/// @prop {} item-border-radius [null]
-/// @prop {} item-highlight-width [6px]
-/// @prop {} required-color ["danger"]
-/// @prop {} text-input-margin-bottom [0.5em]
-/// @prop {} text-input-margin-top [1em]
-/// @prop {} warning-color ["warning"]
-/// @prop {} warning-highlight-color [rgb(255, 249, 237)]
-/// @prop {} warning-selector [".is-warning"]
-/// @prop {} check-input-color [currentColor]
-/// @prop {} check-input-size [1.15em]
-/// @prop {} check-input-touch-size [2em]
-/// @prop {} check-input-background-color [white]
-/// @prop {} check-input-background-color-checked [white]
-/// @prop {} check-input-background-color-hover [white]
-/// @prop {} check-input-background-color-indeterminate [white]
-/// @prop {} check-input-border [null]
-/// @prop {} check-input-border-color-hover [null]
-/// @prop {} check-input-border-color-checked [null]
-/// @prop {} check-input-border-color-indeterminate [null]
-/// @prop {} check-input-border-color-focus [null]
-/// @prop {} check-input-outline [null]
-/// @prop {} check-input-outline-hover [null]
-/// @prop {} check-input-outline-checked [null]
-/// @prop {} check-input-outline-focus [1px solid white]
-/// @prop {} check-input-touch-color-hover [#e8e8e8]
-/// @prop {} check-input-touch-color-focus [null]
-/// @prop {} check-input-radio-size [0.3em]
-/// @prop {} check-input-checkmark-width [0.38em]
-/// @prop {} check-input-checkmark-height [0.68em]
-/// @prop {} check-input-checkmark-offset-y [-0.2em]
-/// @prop {} check-input-checkmark-stroke-size [0.18em]
-/// @prop {} check-input-mark-color [currentColor]
-/// @prop {} check-input-mark-color-hover [null]
-/// @prop {} check-input-mark-color-focus [null]
-/// @prop {} check-input-mark-color-checked [null]
-/// @prop {} check-input-mark-color-indeterminate [null]
-/// @prop {} check-input-disabled-opacity [0.6]
-/// @prop {} check-input-border-radius [null]
-/// @prop {} description-color [false]
-/// @prop {} description-margin [(0.25em 0)]
-/// @prop {} description-max-width [25em]
-/// @prop {} fieldset-background [transparent]
-/// @prop {} fieldset-border [none]
-/// @prop {} fieldset-margin-bottom [1rem]
-/// @prop {} fieldset-margin-top [1rem]
-/// @prop {} fieldset-padding [0]
-/// @prop {} fieldset-margin-compact [0]
-/// @prop {} fieldset-border-bottom [0]
-/// @prop {} fieldset-border-radius [0]
-/// @prop {} fieldset-legend-color [inherit]
-/// @prop {} fieldset-legend-border-bottom [null]
-/// @prop {} fieldset-legend-padding-bottom [null]
-/// @prop {} select-border-radius [4px]
-/// @prop {} select-background-color [null]
-/// @prop {} select-border [null]
-/// @prop {} select-padding-x [null]
-/// @prop {} select-padding-y [null]
-/// @prop {} select-image [null]
-/// @prop {} select-image-size [0.9em]
-/// @prop {} select-image-offset [0.7em]
-/// @prop {} select-image-margin [0.65em]
-/// @prop {Unit} inline-gap [1em] Gap between items that are inline like checkboxes
+/// @prop {CssValue} color [inherit] Color of the text of the form.
+/// @prop {CssValue} color-placeholder ["type-tertiary"] Color for the placeholder text.
+/// @prop {Boolean} drupal [false] Toggle if using drupal to include drupal specific styling.
+/// @prop {Color} error-color ["danger"] Type color for errors.
+/// @prop {Color} error-highlight-color [rgb(251, 242, 242)] Outline color of error container.
+/// @prop {String} error-selector [".is-danger"] Class for error styling.
+/// @prop {} file-button-style [true] @joe-check should this have a fallback
+/// @prop {CssValue} font-weight-label [bold] Font weight of the labels.
+/// @prop {CssValue} font-weight-legend [bold] Font weight of the legend.
+/// @prop {CssValue} font-weight-placeholder [normal] Font weight of placeholder text.
+/// @prop {CssValue} font-weight-input [null] Font weight of input text.
+/// @prop {CssValue} font-weight-textarea [null] Font weight of textarea text.
+/// @prop {CssValue} font-weight-select [null] Font weight of select text.
+/// @prop {CssValue} input-border [element.get-rule-style()] Border of the input.
+/// @prop {Dimension} input-border-radius [0] Border radius of the input.
+/// @prop {Dimension} input-padding-x [0.5em] Horizontal padding of the input.
+/// @prop {Dimension} input-padding-y [0.25em] Vertical padding of the input.
+/// @prop {Dimension} input-min-width [10em] Min width of the input.
+/// @prop {Color} input-background-color [white] Background color of the input.
+/// @prop {Dimension} item-border-radius [null] Border radius for __item.
+/// @prop {Dimension} item-highlight-width [6px] Width of the item box highlight.
+/// @prop {Color} required-color ["danger"] Color for required text.
+/// @prop {Dimension} text-input-margin-bottom [0.5em] Bottom margin for the label.
+/// @prop {Dimension} text-input-margin-top [1em] Top margin for the label.
+/// @prop {Color} warning-color ["warning"] The warning text color.
+/// @prop {Color} warning-highlight-color [rgb(255, 249, 237)] Outline color of the warning.
+/// @prop {String} warning-selector [".is-warning"] Selector for adding warning styles.
+/// @prop {Color} check-input-color [currentColor] @joe-check unused
+/// @prop {Dimension} check-input-size [1.15em] Size of input box.
+/// @prop {Dimension} check-input-touch-size [2em] Touchable size of the input box.
+/// @prop {Color} check-input-background-color [white] Background color for the check input.
+/// @prop {Color} check-input-background-color-checked [white] Background color for the check input when checked.
+/// @prop {Color} check-input-background-color-hover [white] Background color for the check input when hovered or focused.
+/// @prop {Color} check-input-background-color-indeterminate [white] Background color for the indeterminate check input.
+/// @prop {} check-input-border [null] @joe-check check how this is called with a fallback in the styles mixin
+/// @prop {Color} check-input-border-color-hover [null] Check input border color.
+/// @prop {Color} check-input-border-color-checked [null] Check input border color when checked.
+/// @prop {Color} check-input-border-color-indeterminate [null] Indeterminate check input border color.
+/// @prop {Color} check-input-border-color-focus [null] Check input border color when hovered or focused.
+/// @prop {CssValue} check-input-outline [null] Check input outline.
+/// @prop {CssValue} check-input-outline-hover [null] Check input outline when hovered.
+/// @prop {CssValue} check-input-outline-checked [null] Check input outline when checked.
+/// @prop {CssValue} check-input-outline-focus [1px solid white] Check input outline when focused.
+/// @prop {Color} check-input-touch-color-hover [#e8e8e8] Check input background color when hovered.
+/// @prop {Color} check-input-touch-color-focus [null] Check input background color when focused.
+/// @prop {Dimension} check-input-radio-size [0.3em] Radio border size.
+/// @prop {Dimension} check-input-checkmark-width [0.38em] Width of checkmark.
+/// @prop {Dimension} check-input-checkmark-height [0.68em] Height of checkmark.
+/// @prop {Dimension} check-input-checkmark-offset-y [-0.2em] vertical offset of checkmark.
+/// @prop {Dimension} check-input-checkmark-stroke-size [0.18em] stroke size of checkmark.
+/// @prop {Color} check-input-mark-color [currentColor] Check input color.
+/// @prop {Color} check-input-mark-color-hover [null] Check input color when hovered.
+/// @prop {Color} check-input-mark-color-focus [null] Check input color when focused.
+/// @prop {Color} check-input-mark-color-checked [null] Check input color when checked.
+/// @prop {Color} check-input-mark-color-indeterminate [null] Check input color when indeterminate.
+/// @prop {Number} check-input-disabled-opacity [0.6] Opacity of the check input when disabled.
+/// @prop {Dimension} check-input-border-radius [null] Checkbox input border radius.
+/// @prop {Color} description-color [false] Color of help text.
+/// @prop {CssValue} description-margin [(0.25em 0)] Margin for help text.
+/// @prop {Dimension} description-max-width [25em] Max width of help text.
+/// @prop {Number} description-line-height [true] Line height for description element, defaults to typography line-height-dense
+/// @prop {Color} fieldset-background [transparent] Background color of fieldset element.
+/// @prop {CssValue} fieldset-border [none] Border for fieldset
+/// @prop {Dimension} fieldset-margin-bottom [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-margin-top [1rem] Bottom margin for the fieldset element.
+/// @prop {Dimension} fieldset-padding [0] Padding for the fieldset element.
+/// @prop {Dimension} fieldset-margin-compact [0] @joe-check unused
+/// @prop {Dimension} fieldset-border-radius [0] Border radius of the fieldset element.
+/// @prop {Color} fieldset-legend-color [inherit] Text color for the fieldset's label.
+/// @prop {Dimension} fieldset-legend-border-bottom [null] Bottom border color for the fieldset's label
+/// @prop {Dimension} fieldset-legend-padding-bottom [null] Bottom padding for the fieldset's label
+/// @prop {Dimension} select-border-radius [4px] Border radius for the select element.
+/// @prop {Color} select-background-color [null] Background color for the select element.
+/// @prop {CssValue} select-border [null] The border for the select element. Fallback to input border.
+/// @prop {Dimension} select-padding-x [null] Horizontal padding for the select element. Fallback to input-padding-x.
+/// @prop {Dimension} select-padding-y [null] Vertical padding for the select element. Fallback to input-padding-y.
+/// @prop {CssValue} select-image [null] Url for select element's background image.
+/// @prop {Dimension} select-image-size [0.9em] Background size for the select image.
+/// @prop {Dimension} select-image-offset [0.7em] Offset for the select image.
+/// @prop {Dimension} select-image-margin [0.65em] select image margin.
+/// @prop {Dimension} inline-gap [1em] Gap between items that are inline like checkboxes
 
 $config: (
   "color"                                     : inherit,
@@ -160,6 +168,7 @@ $config: (
   "description-color"                         : false,
   "description-margin"                        : (0.25em 0),
   "description-max-width"                     : 25em,
+  "description-line-height"                   : true,
   "fieldset-background"                       : transparent,
   "fieldset-border"                           : none,
   "fieldset-margin-bottom"                    : 1rem,
@@ -198,7 +207,8 @@ $config: (
 ///   @include ulu.component-form-theme-get("property");
 
 @function get($name) {
-  @return utils.require-map-get($config, $name, "component-form-theme [config]");
+  $value: utils.require-map-get($config, $name, "component-form-theme [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
 }
 
 @function -fallback($op1, $op2) {
@@ -344,7 +354,7 @@ $config: (
     transition: background-color 220ms ease-in-out;
     flex: 0 0 $input-touch-size; // When used in flex container
     // Box / Circle (centered absolute)
-    &:before {
+    &::before {
       content: '';
       display: block;
       position: absolute;
@@ -362,7 +372,7 @@ $config: (
       transform: translate(-50%, -50%);
     }
     // Checkmark/ radio
-    &:after {
+    &::after {
       content: '';
       display: block;
       position: relative;
@@ -375,32 +385,32 @@ $config: (
     }
     &:focus {
       background-color: color.get(get("check-input-touch-color-focus"));
-      &:before {
+      &::before {
         border-color: color.get(get("check-input-border-color-focus"));
         outline: get("check-input-outline-focus");
       }
-      &:after {
+      &::after {
         border-color: color.get(get("check-input-mark-color-focus"));
       }
     }
     &:hover {
       background-color: color.get(get("check-input-touch-color-hover"));
-      &:before {
+      &::before {
         outline: get("check-input-outline-hover");
         background-color: color.get(get("check-input-background-color-hover"));
         border-color: color.get(get("check-input-border-color-hover"));
       }
-      &:after {
+      &::after {
         border-color: color.get(get("check-input-mark-color-hover"));
       }
     }
     &:checked {
-      &:before {
+      &::before {
         background-color: color.get(get("check-input-background-color-checked"));
         border-color: color.get(get("check-input-border-color-checked"));
         outline: get("check-input-outline-checked");
       }
-      &:after {
+      &::after {
         opacity: 1;
         border-color: color.get(get("check-input-mark-color-checked"));
       }
@@ -416,10 +426,10 @@ $config: (
     }
   }
   [type="checkbox"] {
-    &:before {
+    &::before {
       border-radius: -fallback("check-input-border-radius", "input-border-radius");
     }
-    &:after {
+    &::after {
       border-radius: 0;
       width: get("check-input-checkmark-width");
       height: get("check-input-checkmark-height");
@@ -432,11 +442,11 @@ $config: (
     }
     &:indeterminate,
     &[aria-checked=mixed] {
-      &:before {
+      &::before {
         background-color: color.get(get("check-input-background-color-indeterminate"));
         border-color: color.get(get("check-input-border-color-indeterminate"));
       }
-      &:after {
+      &::after {
         border-right: none;
         transform: translatey(50%);
         opacity: 1;
@@ -500,6 +510,7 @@ $config: (
   margin: get("description-margin");
   font-style: italic;
   @include typography.size("small", null, true);
+  line-height: get("description-line-height");
   max-width: get("description-max-width");
   color: color.get(get("description-color"));
 }