@ulu/frontend 0.1.0-beta.10 → 0.1.0-beta.12

package/scss/_color.scss

@@ -25,9 +25,15 @@ $palette: (
   "background"              : white,
   "background-gray"         : #F7F8F7,
   "focus"                   : blue,
-  "error"                   : red,
-  "warning"                 : orange,
   "accent"                  : orange,
+  "info"                    : #00bde3,
+  "success"                 : #00a91c,
+  "warning"                 : #ffbe2e,  
+  "danger"                  : #d54309,  
+  "info-background"         : #e7f6f8,
+  "success-background"      : #ecf3ec,
+  "warning-background"      : #faf3d1,
+  "danger-background"       : #f4e3db,
   "selected"                : green,
   "box-shadow"              : rgba(0, 0, 0, 0.349),
   "box-shadow-hover"        : rgba(0, 0, 0, 0.5),

package/scss/components/README.todos

@@ -13,3 +13,17 @@ Todos:
       * May override base styles
       * May contain layouts
       * May wrap or contain base (button vs button-group)
+
+Daniel Todos:
+  ☐ Remove uswds stylings for informative and emergency callouts and move it into soar's site
+    ☐ get rid of extra styles in frontend to clean up the left cap
+      ✔ add a dash to left-cap mixin (to make private) and remove documentation for that mixin @done
+      ✔ setup cap colors (define colors) @done
+      remove the width of the individual callout styles
+      remove background-dark, light, emergency styles
+    ☐ Reach out to Rachel about the bug with the theme toggle not working
+      ☐ ask her to recreate it
+  ☐ Setup search results page
+    ☐ General Node/Page Setup
+    ☐ Setup View
+  

package/scss/components/_callout.scss

@@ -14,10 +14,6 @@
 
 // Used for function fallback
 $-fallbacks: (
-  "border" : (
-    "function" : meta.get-function("get-rule-style", false, "element"),
-    "property" : "light"
-  ),
   "border-radius" : (
     "function" : meta.get-function("get", false, "element"),
     "property" : "border-radius"
@@ -27,8 +23,9 @@ $-fallbacks: (
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [rgb(240, 240, 240)] The background color of the Callout.
-/// @prop {Boolean} border [true] The border of the Callout.
+/// @prop {Color} border-color ["rule-light"] The border color of the Callout.
 /// @prop {Boolean} border-radius [true] The border radius of the Callout.
+/// @prop {Dimension} border-width [1px] The border width of the Callout.
 /// @prop {CssValue} box-shadow [none] The box-shadow of the Callout.
 /// @prop {Boolean} left-cap [false] Toggles the use of left caps in styled callouts.
 /// @prop {Color} left-cap-color [green] Color of the left cap.
@@ -38,58 +35,41 @@ $-fallbacks: (
 
 $config: (
   "background-color" : rgb(240, 240, 240),
-  "border" : true,
+  "border-color" : "rule-light",
   "border-radius" :  true,
+  "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : false,
-  "left-cap-color" : green,
+  "left-cap" : true,
+  "left-cap-color" : rgb(160, 160, 160),
   "left-cap-width" : 0.5rem,
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
 $styles: (
-  "background-dark" : (
-    "background-color" : rgb(240, 240, 240)
-  ),
   "outline" : (
     "background-color": transparent
   ),
-  "light" : (
-    "background-color" : white,
-    "border-color" : gray
-  ),
-  "informative" : (
-    "background-color" : #e7f6f8,
-    "left-cap-color" : #00bde3,
+  "info" : (
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "warning" : (
-    "background-color" : #faf3d1,
-    "left-cap-color" : #ffbe2e,
+    "background-color" : "info-background",
+    "left-cap-color" : "info",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "success" : (
-    "background-color" : #ecf3ec,
-    "left-cap-color" : #00a91c,
+    "background-color" : "success-background",
+    "left-cap-color" : "success",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
   "danger" : (
-    "background-color" : #f4e3db,
-    "left-cap-color" : #d54309,
+    "background-color" : "danger-background",
+    "left-cap-color" : "danger",
     "left-cap" : true,
-    "left-cap-width": 0.5rem
   ),
-  "emergency" : (
-    "background-color" : #9c3d10,
-    "left-cap-color" : #9c3d10,
-    "left-cap" : true,
-    "color" : white,
-    "left-cap-width": 0.5rem
-  )
 ) !default;
 
 /// Change modules $config
@@ -119,22 +99,14 @@ $styles: (
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
-/// Output styling for a callout that adds a left cap
-/// @param {Dimension} $width The width of the left cap
-/// @param {Color} $color The left cap color
-
-@mixin left-cap($width: get("left-cap-width"), $color: get("left-cap-color")) {
+@mixin -left-cap($color: get("left-cap-color")) {
+  $left-padding: get-spacing-left(get("padding"));
   position: relative; 
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  padding-left: get("left-cap-width") + $left-padding;
   &::before {
-    position: absolute;
     content: "";
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: $width;
-    background-color: color.get($color);
   }
 }
 
@@ -144,19 +116,30 @@ $styles: (
 
 @mixin styles {
   $prefix: selector.class("callout");
-
+  
   #{ $prefix } {
     background-color: color.get(get("background-color"));
     padding: get("padding");
-    border: get("border");
+    border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
     border-radius: get("border-radius");
     & >:first-child {
       margin-top: 0;
     }
+    &::before {
+      position: absolute;
+      left: 0 - get("border-width");
+      top: 0 - get("border-width");
+      bottom: 0 - get("border-width");
+      width: get("left-cap-width");
+      background-color: color.get(get("left-cap-color"));
+    }
     @if get("left-cap") {
-      @include left-cap();
+      @include -left-cap();
+      &::before {
+        content: "";
+      }
     }
   }
   @each $name, $style in $styles {
@@ -168,8 +151,13 @@ $styles: (
       border-color: color.get(map.get($style, "border-color")); 
       box-shadow: map.get($style, "box-shadow"); 
       padding: map.get($style, "padding"); 
+      &::before {
+        background-color: color.get(map.get($style, "left-cap-color"));
+      }
       @if map.get($style, "left-cap") {
-        @include left-cap( map.get($style, "left-cap-width"), map.get($style, "left-cap-color"));
+        @if not get("left-cap") {
+          @include -left-cap();
+        }
       }
     }
   }

package/scss/components/_captioned-figure.scss

@@ -30,6 +30,23 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Boolean} text-alignment-matches [false] Toggles matching alignment.
+/// @prop {Boolean} text-alignment-matches-center-only [true] Toggles matching alignment, but only if center.
+/// @prop {Color} background-color [white] Background color of the component.
+/// @prop {CssValue} box-shadow [true] Box shadow the captioned figure.
+/// @prop {Dimension} margin-bottom [true] Bottom margin of the captioned figure.
+/// @prop {Number} line-height [true] Line height of the captioned figure caption.
+/// @prop {Dimension} caption-padding [0.5em] Padding of the captioned figure caption. 
+/// @prop {Color} color [null] Font color of the captioned figure caption. 
+/// @prop {String} type-size ["small"] Font size of the captioned figure caption. 
+/// @prop {Dimension} caption-max-width [min(100%, 15em)] Max width of the captioned figure caption. 
+/// @prop {Color} caption-background-color [rgba(255,255,255,0.7)] background color of the captioned figure caption. 
+/// @prop {CssValue} caption-backdrop-filter [blur(2px)] Filter of the backdrop of the captioned figure.
+/// @prop {Color} traditional-caption-color [null] Traditional style for font color.
+/// @prop {Color} traditional-caption-background-color [transparent] Traditional style for caption background color.
+/// @prop {Dimension} traditional-caption-padding [0.5em] Traditional style for caption padding.
+/// @prop {Dimension} traditional-caption-max-width [35em] Traditional style for caption max width.
+/// @prop {CssValue} traditional-caption-text-align [right] Traditional style for caption text-align.
 
 $config: (
   "text-alignment-matches" : false,

package/scss/components/_card-grid.scss

@@ -51,7 +51,7 @@ $config: (
   
   #{ $prefix } {
     display: grid;
-    grid-template-columns:  get("template-columns");
+    grid-template-columns: get("template-columns");
     grid-auto-rows: 1fr;
     gap: get("gap");
     margin: get("gap") 0;

package/scss/components/_card.scss

@@ -19,7 +19,6 @@
 /// @prop {Dimension} padding [2rem] The padding for the image icon
 /// @prop {Dimension} margin-y [3rem] Top and bottom margin for the card.
 /// @prop {Dimension} border-radius [5rem] The border radius of the card.
-/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
 /// @prop {CssValue} box-shadow [null] The box-shadow for the card.
 /// @prop {CssValue} box-shadow-hover [null] The box-shadow for the card when hovered or focused.
 /// @prop {Color} color [null] The type color of the card.
@@ -58,8 +57,10 @@
 /// @prop {Boolean} image-transition-enabled [true] Enable or disable the image transition.
 /// @prop {Time} image-transition-duration [350ms] The duration of the image transition.
 /// @prop {CssValue} image-transition-timing-function [ease-in-out] The timing function for the image transition.
+/// @prop {List} image-icon-max-width [30rem] Max width for image when using the modifier on the .card__image--icon
 /// @prop {List} image-transition-properties [(transform, filter)] The properties for the image transitions.
-
+/// @prop {String} horizontal-breakpoint [small] The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.
+/// @prop {Unit} horizontal-body-max-width [80rem] The max-width of body when horizontal
 
 
 $config: (
@@ -79,6 +80,8 @@ $config: (
   "footer-padding-y" : 0.25rem,
   "footer-min-height" : 2.5rem,
   "horizontal-breakpoint" : "small",
+  "horizontal-image-width" : 33%,
+  "horizontal-body-max-width" : 80rem,
   "header-margin" : 0.75em,
   "image-ratio" : 56.25%,
   "image-aspect-ratio": list.slash(5, 3),
@@ -86,6 +89,7 @@ $config: (
   "image-border" : null, // For when you have a margin
   "image-filter-hover" : null,
   "image-margin" : null,
+  "image-icon-max-width" : 30rem,
   "image-transform-hover" : null,
   "image-transition-duration" :    350ms,
   "image-transition-enabled" : true,
@@ -110,7 +114,7 @@ $config: (
   "overlay-background-color": rgba(0, 0, 0, 0.6),
   "overlay-shading": true,
   "overlay-body-padding-y": 1rem,
-  ) !default;
+) !default;
   
   /// Change modules $config
 /// @param {Map} $changes Map of changes
@@ -182,7 +186,7 @@ $config: (
     // Border is on pseudo so that it's on top of image/etc
     &:after {
       position: absolute;
-      content: if(get("border"), "", false);
+      content: if(get("border"), "", null);
       top: 0; 
       bottom: 0; 
       right: 0; 
@@ -300,7 +304,7 @@ $config: (
     img {
       position: static;
       display: block;
-      max-width: 30rem;
+      max-width: get("image-icon-max-width");
       height: auto;
       top: auto;
       left: auto;
@@ -414,8 +418,8 @@ $config: (
         justify-content: center;
         align-items: center;
         #{ $prefix }__image {
-          width: 33%;
-          flex: 0 1 33%;
+          width: get("horizontal-image-width");
+          flex: 0 1 get("horizontal-image-width");
           // max-width: 30rem;
           min-height: 28rem;
           // padding-top: 0;
@@ -425,7 +429,7 @@ $config: (
           flex: 1;
           flex-direction: column;
           justify-content: center;
-          max-width: 80rem;
+          max-width: get("horizontal-body-max-width");
         }
       }
     }

package/scss/components/_data-table.scss

@@ -24,16 +24,45 @@ $-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 {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,),
   "text-align" : left,
   "type-size" : "small",
   "background-color" : white,
-  "header-background-color" : #eeeeee,
+  "header-background-color" : #f5f4f4,
   "body-background-color" : white,
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
+  "header-color" : "headline",
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -48,8 +77,9 @@ $config: (
   "caption-type-size" : "large",
   "caption-background-color" : null,
   "caption-font-weight" : bold,
+  "caption-border-bottom" : null,
   "caption-margin" : (0,),
-  "caption-padding" : (0.5em,),
+  "caption-padding" : (0.65em 0),
   "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
@@ -113,7 +143,7 @@ $config: (
       margin: get("caption-margin");
       padding: get("caption-padding");
       background-color: get("caption-background-color");
-      border-bottom: $border;
+      border-bottom: get("caption-border-bottom");
     }
     th,
     tr,
@@ -137,6 +167,9 @@ $config: (
     thead tr {
       background-color: color.get(get("header-background-color"));
     }
+    thead th {
+      color: color.get(get("header-color"));
+    }
     tbody tr {
       background-color: color.get(get("body-background-color"));
     }

package/scss/components/_form-theme.scss

@@ -18,7 +18,7 @@
 /// @prop {} color [inherit]
 /// @prop {} color-placeholder ["type-tertiary"]
 /// @prop {} drupal [false]
-/// @prop {} error-color ["error"]
+/// @prop {} error-color ["danger"]
 /// @prop {} error-highlight-color [rgb(251, 242, 242)]
 /// @prop {} error-selector [".is-danger"]
 /// @prop {} file-button-style [true]
@@ -37,7 +37,7 @@
 /// @prop {} input-background-color [white]
 /// @prop {} item-border-radius [null]
 /// @prop {} item-highlight-width [6px]
-/// @prop {} required-color ["error"]
+/// @prop {} required-color ["danger"]
 /// @prop {} text-input-margin-bottom [0.5em]
 /// @prop {} text-input-margin-top [1em]
 /// @prop {} warning-color ["warning"]
@@ -82,9 +82,11 @@
 /// @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]
@@ -94,12 +96,13 @@
 /// @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
 
 $config: (
   "color"                                     : inherit,
   "color-placeholder"                         : "type-tertiary",
   "drupal"                                    : false,
-  "error-color"                               : "error",
+  "error-color"                               : "danger",
   "error-highlight-color"                     : rgb(251, 242, 242),
   "error-selector"                            : ".is-danger",
   "file-button-style"                         : true,
@@ -111,14 +114,14 @@ $config: (
   "font-weight-select"                        : null,
   "input-border"                              : element.get-rule-style(),
   "input-border-radius"                       : 0,
-  "input-margin-y"                            : 0.75em,
+  "item-margin-y"                            : 0.75em,
   "input-padding-x"                           : 0.5em,
   "input-padding-y"                           : 0.25em,
   "input-min-width"                           : 10em,
   "input-background-color"                    : white,
   "item-border-radius"                        : null,
   "item-highlight-width"                      : 6px,
-  "required-color"                            : "error",
+  "required-color"                            : "danger",
   "text-input-margin-bottom"                  : 0.5em,
   "text-input-margin-top"                     : 1em,
   "warning-color"                             : "warning",
@@ -166,6 +169,8 @@ $config: (
   "fieldset-border-radius"                    : 0,
   "fieldset-legend-color"                     : inherit,
   "fieldset-legend-border-bottom"             : null,
+  "fieldset-legend-padding-bottom"            : 0,
+  "fieldset-legend-margin-bottom"             : 0.5em,
   "select-border-radius"                      : 4px,
   "select-background-color"                   : null,
   "select-border"                             : null,
@@ -175,6 +180,7 @@ $config: (
   "select-image-size"                         : 0.9em,
   "select-image-offset"                       : 0.7em,
   "select-image-margin"                       : 0.65em,
+  "inline-gap"                                : 1em
 ) !default;
 
 /// Change modules $config
@@ -305,7 +311,6 @@ $config: (
   }
   select {
     font-weight: get("font-weight-select");
-    border: get("select-border");
     border-radius: get("select-border-radius");
     background-color: color.get(get("select-background-color"));
     padding: -fallback("select-padding-y", "input-padding-y") -fallback("select-padding-x", "input-padding-x");
@@ -456,19 +461,13 @@ $config: (
     > legend {
       font-weight: get("font-weight-legend");
       display: block;
-      margin: 0 0 0.5em 0;
+      margin: 0 0 get("fieldset-legend-margin-bottom") 0;
       border: 0;
-      padding: 0;
+      padding: 0 0 get("fieldset-legend-padding-bottom") 0;
       width: 100%;
       float: left;
-      > span {
-        display: block;
-        margin-bottom: 1rem;
-        padding-bottom: 0.5em;
-        padding-top: 0.5em;
-        border-bottom: get("fieldset-legend-border-bottom");
-        color: color.get(get("fieldset-legend-color"));
-      }
+      border-bottom: get("fieldset-legend-border-bottom");
+      color: color.get(get("fieldset-legend-color"));
       & ~ * {
         clear: left;
       }
@@ -547,7 +546,7 @@ $config: (
   #{ $prefix }__item {
     display: flex;
     align-items: center;
-    margin-bottom: get("input-margin-y");
+    margin-bottom: get("item-margin-y");
     border-radius: get("item-border-radius");
     flex-shrink: 0; // Cannot be smaller than content within
     @include -form-item-state($selectError, $errorColor, color.get(get("error-highlight-color")));
@@ -565,8 +564,9 @@ $config: (
   #{ $prefix }__items-inline {
     display: flex;
     flex-wrap: wrap;
+    gap: get("inline-gap");
     > #{ $prefix }__item {
-      margin-right: 1.5em;
+      margin: 0;
     }
   }
   #{ $prefix }__actions {

package/scss/components/_hero.scss

@@ -15,6 +15,15 @@
 /// Module Settings
 /// @type Map
 /// @prop {Map} extra-split-ratios  [wide 70/30] A map where the name is the modifier and the value is a list with two percentages (the first percentage will be correspond with the graphic or content depending on selector [ie. .hero--split-graphic-[name] would apply the first percentage to the graphic while hero--split-content-[name] would apply the first percentage to the content]) 
+/// @prop {String} breakpoint ["medium"] At what breakpoint the hero goes to small screen styling.
+/// @prop {Dimension} height [100vh] Height of the hero.
+/// @prop {Dimension} height-compact [40vh] Height of the hero when using the "--compact" styling.
+/// @prop {Dimension} graphic-height-stacked [60vh] Height of the graphic.
+/// @prop {Dimension} content-max-width [40rem] Max width of the content.
+/// @prop {Dimension} content-padding-top [3rem] Top padding of the content.
+/// @prop {Dimension} content-padding-bottom [3rem] Bottom padding of the content.
+/// @prop {CssValue} text-align [center] Text align of the content.
+
 
 $config: (
   "breakpoint" : "medium",

package/scss/components/_menu-stack.scss

@@ -24,7 +24,7 @@ $-fallbacks: (
     
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} checkbox-area-width [3em] The width of the checkbox area.
+/// @prop {Dimension} selectable-input-width [3em] The width of the checkbox/radio input
 /// @prop {Boolean} link-separated-margin [false] Enables a margin between the items in the menu-stack.
 /// @prop {Boolean} link-separated-rule-style [false] Enables a rule between the items in the menu-stack.
 /// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
@@ -53,7 +53,7 @@ $-fallbacks: (
 /// @prop {Dimension} link-padding-y [0.35em] Vertical padding for menu-stack toggle.
 
 $config: (
-  "checkbox-area-width" : 3em,
+  "selectable-input-width" : 3em,
   "nested-indent" : 0.5em,
   "rule-style" : "default",
   "rule-margin" : 0.5em,
@@ -115,6 +115,7 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("menu-stack");
+  $selectable-y: (get("link-padding-y") + get("link-margin"));
 
   #{ $prefix }--separated {
     border-top: element.get-rule-style(get("rule-style"));
@@ -149,7 +150,7 @@ $config: (
   // - Use the modifier "site-menu--contained" to keep the links within 
   //   the parent container (no optical alignment), should be within something that contains it
   #{ $prefix }__link,
-  #{ $prefix }__checkbox,
+  #{ $prefix }__selectable,
   #{ $prefix }__toggle {
     width: 100%;
     display: flex;
@@ -176,19 +177,21 @@ $config: (
       }
     }
   }
-  #{ $prefix }__checkbox {
-    $checkbox-y: (get("link-padding-y") + get("link-margin"));
+  #{ $prefix }__selectable {
     padding: 0;
     position: relative;
-    [type="checkbox"] {
-      position: absolute;
-      top: $checkbox-y;
-      left: get("link-padding-x");
-    }
-    label {
-      width: 100%;
-      padding: $checkbox-y get("link-padding-x") $checkbox-y get("checkbox-area-width");
-    }
+  }
+  #{ $prefix }__selectable [type="checkbox"],
+  #{ $prefix }__selectable [type="radio"],
+  #{ $prefix }__selectable-input {
+    position: absolute;
+    top: $selectable-y;
+    left: get("link-padding-x");
+  }
+  #{ $prefix }__selectable label,
+  #{ $prefix }__selectable-label {
+    width: 100%;
+    padding: $selectable-y get("link-padding-x") $selectable-y get("selectable-input-width");
   }
   #{ $prefix }__link-text {
     display: block;
@@ -219,8 +222,8 @@ $config: (
 
   // Link buttons hang outside in margin so that text optically aligns
   #{ $prefix }--hanging {
-    padding-left: get("link-padding-x");
-    padding-right: get("link-padding-x");
+    // padding-left: get("link-padding-x");
+    // padding-right: get("link-padding-x");
     > #{ $prefix }__list > #{ $prefix }__item {
       > #{ $prefix }__link, 
       >#{ $prefix }__collapsible > #{ $prefix }__toggle {