@ulu/frontend 0.1.0-beta.31 → 0.1.0-beta.33

package/scss/components/_button-verbose.scss

@@ -48,15 +48,16 @@ $-fallbacks: (
 /// @prop {String} title-color [link] Color of the title of the button.
 /// @prop {String} title-color-hover [link-hover] Color of the title of the button when hovered or focused.
 /// @prop {Dimension} title-margin [0.5em] Margin for the button's title.
-/// @prop {Boolean} left-cap [false] Enable left cap style 
-/// @prop {Color} left-cap-color ["link"] The color for the left cap
-/// @prop {color} left-cap-color-hover ["link-hover"] The color for the left cap when the button is hovered
-/// @prop {Number} left-cap-color-hover [0.5rem] Width of the cap
+/// @prop {Boolean} cap [false] Enable left cap style 
+/// @prop {Color} cap-side ["left"] The side that gets the cap
+/// @prop {Number} cap-match-radius [true] The cap should have be rounded to match the parent's border radius
+/// @prop {Map} cap-options The options for cap (see element.cap for options)
+/// @prop {Map} cap-options-hover The options for cap when hovered
 
 $config: (
   "background-color" : white,
   "background-color-hover" : #F7F8F7,
-  "border-radius" : "border-radius",
+  "border-radius" : true,
   "box-shadow" : true,
   "box-shadow-hover" : true,
   "color" : "type",
@@ -68,15 +69,21 @@ $config: (
   "margin" : 1em,
   "margin-inline" : 0.75em,
   "min-width": 20rem,
-  "padding-x": 0.65em,
+  "padding-x": 0.75em,
   "padding-y": 1em,
   "title-color": "link",
   "title-margin" : 0.5em,
   "title-color-hover" : "link-hover",
-  "left-cap" : false,
-  "left-cap-color" : "link",
-  "left-cap-color-hover" : "link-hover",
-  "left-cap-width" : 0.5rem
+  "cap" : false,
+  "cap-side" : "left",
+  "cap-match-radius" : true,
+  "cap-options" : (
+    "color" : "link",
+    "size" : 0.5rem,
+  ),
+  "cap-options-hover" : (
+    "color" : "link-hover"
+  ),
 ) !default;
 
 /// Change modules $config
@@ -110,36 +117,30 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("button-verbose");
+  $padding-x: get("padding-x");
+  $padding-y: get("padding-y");
+  $padding-right: ($padding-x * 2) + 1em;
+  $cap-side: get("cap-side");
+  $cap-defaults: (
+    "border-radius" : if(get("cap-match-radius"), get("border-radius"), 0),
+    "padding-adjust" : if(utils.is-side($cap-side), $padding-x, $padding-y)
+  );
   
   #{ $prefix } {
     text-decoration: none;
-    border-radius: element.get(get("border-radius"));
+    border-radius: get("border-radius");
     box-shadow: get("box-shadow");
     line-height: get("line-height");
-    position: relative;
+    position: relative; // For cap and icon
     display: block;
     margin-bottom: get("margin");
     max-width: 100%;
     width: get("min-width");
     background-color: color.get(get("background-color"));
-    padding: get("padding-y") get("padding-x");
-    padding-right: (get("padding-x") * 2) + 1em;
+    padding: $padding-y $padding-right $padding-y $padding-x;
     color: color.get(get("color"));
     text-align: left;
-    // Add border like cap
-    @if get("left-cap") {
-      padding-left: calc(get("padding-x") + get("left-cap-width"));
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        width: get("left-cap-width");
-        background-color: color.get(get("left-cap-color"));
-      }
-    }
+
     &:hover {
       color: color.get(get("color-hover"));
       background-color: color.get(get("background-color-hover"));
@@ -154,9 +155,19 @@ $config: (
           color: color.get(get("icon-color-hover"));
         }
       }
-      @if (get("left-cap") and get("left-cap-color-hover")) {
-        &::after {
-          background-color: color.get(get("left-cap-color-hover"));
+    }
+    @if get("cap") {
+      @include element.cap(
+        $side: $cap-side,
+        $options: map.merge($cap-defaults, get("cap-options"))
+      );
+      @if get("cap-options-hover") {
+        &:hover,
+        &:focus {
+          @include element.cap-appearance(
+            $side: $cap-side,
+            $options: get("cap-options-hover")
+          );
         }
       }
     }
@@ -174,7 +185,7 @@ $config: (
   #{ $prefix }__icon {
     position: absolute;
     top: 50%;
-    right: get("padding-x");
+    right: $padding-x;
     transform: translateY(-50%);
     font-size: get("icon-font-size");
     color: color.get(get("icon-color"));

package/scss/components/_callout.scss

@@ -27,48 +27,51 @@ $-fallbacks: (
 /// @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.
-/// @prop {Dimension} left-cap-width [0.5rem] Width of the left cap.
+/// @prop {Boolean} caps-disabled [false] If set will not output any cap styles for both base and styles
+/// @prop {Boolean} cap [false] Toggles the use of caps on default callout
+/// @prop {Boolean} cap-side ["left"] The side that gets the cap
+/// @prop {Number} cap-match-radius [true] The cap should have be rounded to match the parent's border radius
+/// @prop {Map} cap-options The options for cap (see element.cap for options)
 /// @prop {Dimension} margin [2rem] Bottom margin of the Callout.
 /// @prop {Dimension} padding [1.5rem] Padding of the Callout.
 
 $config: (
   "background-color" : rgb(240, 240, 240),
   "border-color" : "rule-light",
-  "border-radius" :  true,
+  "border-radius" :  6px,
   "border-width" : 1px,
   "box-shadow" : none,
-  "left-cap" : true,
-  "left-cap-color" : rgb(160, 160, 160),
-  "left-cap-width" : 0.5rem,
+  "caps-disabled" : false,
+  "cap" : false,
+  "cap-side" : "left",
+  "cap-match-radius" : false,
+  "cap-options" : (
+    "color" : rgb(160, 160, 160),
+    "size" : 0.5rem,
+  ),
   "margin" : 2rem,
   "padding" : 1.5rem,
 ) !default;
 
+/// Styles Map (for unique variations/modifiers)
+/// - Adjust this with set-styles
+/// @type Map
+
 $styles: (
   "outline" : (
     "background-color": transparent
   ),
   "info" : (
     "background-color" : "info-background",
-    "left-cap-color" : "info",
-    "left-cap" : true,
   ),
   "warning" : (
     "background-color" : "info-background",
-    "left-cap-color" : "info",
-    "left-cap" : true,
   ),
   "success" : (
     "background-color" : "success-background",
-    "left-cap-color" : "success",
-    "left-cap" : true,
   ),
   "danger" : (
     "background-color" : "danger-background",
-    "left-cap-color" : "danger",
-    "left-cap" : true,
   ),
 ) !default;
 
@@ -92,34 +95,30 @@ $styles: (
 }
 
 /// Set callout style variations
-/// @param {Map} $changes Map of changes (options for style include [background-color, color, border, border-radius, border-color, box-shadow, padding, left-cap, left-cap-width, left-cap-color]
+/// - Styles that modify padding when using mix-match caps on/off should be included last
+/// @param {Map} $changes Map of changes (options for style include [background-color, color, border-color, border-radius, border-width, box-shadow, padding, cap, cap-options]
 /// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
 
 @mixin set-styles($changes, $merge-mode: null) {
   $styles: utils.map-merge($styles, $changes, $merge-mode) !global;
 }
 
-@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 {
-    content: "";
-  }
-}
-
 /// Output component stylesheet
 /// @example scss
 ///  @include ulu.component-callout-styles();
 
 @mixin styles {
-  $prefix: selector.class("callout");
-  
+  $prefix: selector.class("callout");  
+  $padding: get("padding");
+  $padding-info: utils.get-spacing($padding);
+  $cap-options: get("cap-options");
+  $cap-size: map.get($cap-options, "size");
+  $cap-side: get("cap-side");
+
   #{ $prefix } {
+    position: relative; // For cap
     background-color: color.get(get("background-color"));
-    padding: get("padding");
+    padding: $padding;
     border: get("border-width") solid color.get(get("border-color"));
     margin-bottom: get("margin");
     box-shadow: get("box-shadow");
@@ -127,36 +126,96 @@ $styles: (
     & >: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 we have left cap on default we reuse this for all
+    // Else we will print it out manually for each unique style
+    @if (not get("caps-disabled")) {   
+      $cap-defaults: (
+        "offset" : get("border-width"),
+        "border-radius" : if(get("cap-match-radius"), get("border-radius"), null),
+        // "padding-adjust" : map.get($padding-info, $cap-side)
+      );
+      @include element.cap(
+        $side: $cap-side,
+        $options: map.merge($cap-defaults, $cap-options)
+      );
     }
-    @if get("left-cap") {
-      @include -left-cap();
+      
+    // If the left cap is disabled we still include it's CSS but we hide it
+    // so that other styles of callouts can use it
+    @if (not get("cap")) {
       &::before {
-        content: "";
+        content: none;
       }
+    // Since this is hidden and reused we need to not use padding adjust unless it
+    // was visible
+    } @else if ($cap-size) {
+      padding-#{ $cap-side }: calc(map.get($padding-info, $cap-side) + $cap-size);
     }
   }
+
+  @include -output-style-modifiers();
+}
+
+// Output Each Style Modifier
+// - Note if cap is not disabled this will just update appearance values of cap styling
+@mixin -output-style-modifiers() {
+  $prefix: selector.class("callout");  
+  $caps-enabled: not get("caps-disabled");
+  $cap-side: get("cap-side");
+
   @each $name, $style in $styles {
+    $cap: map.get($style, "cap");
+    $padding: map.get($style, "padding");
+    $border-radius: map.get($style, "border-radius");
+    $background-color: map.get($style, "background-color");
+    $color: map.get($style, "color");
+    $border-color: map.get($style, "border-color");
+    $border-width: map.get($style, "border-width");
+    $box-shadow: map.get($style, "box-shadow");
+    $cap-match-radius: map.get($style, "cap-match-radius");
+
     #{ $prefix }--#{ $name } {
-      background-color: color.get(map.get($style, "background-color")); 
-      color: color.get(map.get($style, "color")); 
-      border: map.get($style, "border"); 
-      border-radius: map.get($style, "border-radius"); 
-      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") {
-        @if not get("left-cap") {
-          @include -left-cap();
+      background-color: color.get($background-color); 
+      color: color.get($color); 
+      border-radius: $border-radius; 
+      border-color: color.get($border-color); 
+      border-width: $border-width; 
+      box-shadow: $box-shadow; 
+      padding: $padding; 
+
+      @if ($cap and $caps-enabled) {
+        $match-radius: utils.if-type("bool", $cap-match-radius, get("cap-match-radius"));
+        // Padding adjust always has to be set (since size could change or padding)
+        $padding-info: utils.get-spacing(if($padding, $padding, get("padding")));
+        $cap-radius: utils.if-type("number", $border-radius, get("border-radius"));
+        $cap-options: utils.ensure-map(map.get($style, "cap-options"));
+        $cap-defaults: (
+          "size" : map.get(get("cap-options"), "size"),
+          "padding-adjust" : map.get($padding-info, $cap-side),
+          "offset" : $border-width,
+          "border-radius" : if($match-radius, $cap-radius, null)
+        );
+
+        @include element.cap-appearance(
+          $side: $cap-side,
+          $options: map.merge($cap-defaults, $cap-options),
+          $before: true
+        );
+
+        // Because the main callout's cap may not be visible
+        &::before {
+          content: "";
+        }
+      // If set to false remove the cap (if enabled) and reset default cap padding adjust
+      } @else if ($cap == false and $caps-enabled) {
+        // if this style doesn't set padding
+        @if (not $padding) {
+          $padding-info: utils.get-spacing(get("padding"));
+          padding-#{ $cap-side }: map.get($padding-info, $cap-side);
+        }
+        &::before {
+          content: none;
         }
       }
     }

package/scss/components/_card.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../selector";
 @use "../color";
+@use "../layout";
 
 // todo
 // sass color adjust for smooth transition. Add a comment for this if we can’t get to this
@@ -209,13 +210,9 @@ $config: (
     overflow: hidden; 
 
     // Border is on pseudo so that it's on top of image/etc
-    &:after {
-      position: absolute;
+    &::after {
+      @include layout.absolute-fill();
       content: if(get("border"), "", null);
-      top: 0; 
-      bottom: 0; 
-      right: 0; 
-      left: 0;
       border: get("border");
       border-radius: get("border-radius");
       z-index: 4;
@@ -229,7 +226,7 @@ $config: (
     box-shadow: get("box-shadow-hover");
     
     @if (get("border-hover") or get("overlay-background-color-hover")) {
-      &:after {
+      &::after {
         content: "";
         border: get("border-hover");
         background-color: color.get(get("overlay-background-color-hover"));
@@ -293,11 +290,7 @@ $config: (
   }
   #{ $prefix }__image img,
   #{ $prefix}__image-media {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     border: 0;
     object-fit: cover;
     transform-origin: center center;
@@ -407,11 +400,7 @@ $config: (
       color: color.get(get("color-overlay"));
     }
     #{ $prefix }__image {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
+      @include layout.absolute-fill();
       overflow: hidden;
       padding-top: 0;
       background-color: color.get(rgb(255, 255, 255));
@@ -425,12 +414,8 @@ $config: (
         border: 0;
         object-fit: cover;
         &::before {
-          position: absolute;
+          @include layout.absolute-fill(true);
           display: block;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
           background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.9));
         }
       }

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);
     }
   }
@@ -429,7 +429,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

@@ -155,8 +155,8 @@ $config: (
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
   $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");

package/scss/components/_flipcard.scss

@@ -198,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

@@ -355,7 +355,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;
@@ -373,7 +373,7 @@ $config: (
       transform: translate(-50%, -50%);
     }
     // Checkmark/ radio
-    &:after {
+    &::after {
       content: '';
       display: block;
       position: relative;
@@ -386,32 +386,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"));
       }
@@ -427,10 +427,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");
@@ -443,11 +443,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;