@ulu/frontend 0.1.0-beta.30 → 0.1.0-beta.32

package/docs-dev/sass/core/utils/index.html

@@ -7294,7 +7294,7 @@
 <li><strong>File:</strong> _utils.scss</li>
 <li><strong>Group:</strong> utils</li>
 <li><strong>Type:</strong> function</li>
-<li><strong>Lines (comments):</strong> 658-661</li>
+<li><strong>Lines (comments):</strong> 658-660</li>
 <li><strong>Lines (code):</strong> 662-664</li>
 </ul>
 </details>
@@ -7328,10 +7328,6 @@
 <td style="text-align:left">Boolean</td>
 <td style="text-align:left">Whether or not it is an odd number</td>
 </tr>
-<tr>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
 </tbody>
 </table>
 <h4 id="require-19" tabindex="-1">Require</h4>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.30",
+  "version": "0.1.0-beta.32",
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/_breakpoint.scss

@@ -220,7 +220,7 @@ $sizes: (
 /// - Breakpoints always min-width (upwards) for javascript setup
 
 @mixin embed-for-scripts() {
-  &:before {
+  &::before {
     display: none;
     content: get("null-name");
     @each $size, $breakpoint in $sizes {

package/scss/_layout.scss

@@ -240,14 +240,14 @@ $containers: (
 /// Prints clearfix styles
 
 @mixin clearfix() {
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: "";
     display: table;
     flex-basis: 0; // Flexbox, clear fix for pseudo elements in Safari
     order: 1;
   }
-  &:after { 
+  &::after { 
     clear: both; 
   }
 }

package/scss/components/_button-verbose.scss

@@ -52,11 +52,12 @@ $-fallbacks: (
 /// @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 {Number} left-cap-match-radius [true] The cap should have be rounded to match the parent's border radius
 
 $config: (
   "background-color" : white,
   "background-color-hover" : #F7F8F7,
-  "border-radius" : "border-radius",
+  "border-radius" : true,
   "box-shadow" : true,
   "box-shadow-hover" : true,
   "color" : "type",
@@ -73,10 +74,11 @@ $config: (
   "title-color": "link",
   "title-margin" : 0.5em,
   "title-color-hover" : "link-hover",
-  "left-cap" : true,
+  "left-cap" : false,
   "left-cap-color" : "link",
   "left-cap-color-hover" : "link-hover",
-  "left-cap-width" : 0.5rem
+  "left-cap-width" : 0.5rem,
+  "left-cap-match-radius" : true
 ) !default;
 
 /// Change modules $config
@@ -113,7 +115,7 @@ $config: (
   
   #{ $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;
@@ -138,6 +140,10 @@ $config: (
         left: 0;
         width: get("left-cap-width");
         background-color: color.get(get("left-cap-color"));
+        @if get("left-cap-match-radius") {
+          border-top-left-radius: get("border-radius");
+          border-bottom-left-radius: get("border-radius");
+        }
       }
     }
     &:hover {

package/scss/components/_callout.scss

@@ -99,17 +99,6 @@ $styles: (
   $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();
@@ -137,12 +126,10 @@ $styles: (
     }
     @if get("left-cap") {
       @include -left-cap();
-      &::before {
-        content: "";
-      }
     }
   }
   @each $name, $style in $styles {
+    $left-cap-color: map.get($style, "left-cap-color");
     #{ $prefix }--#{ $name } {
       background-color: color.get(map.get($style, "background-color")); 
       color: color.get(map.get($style, "color")); 
@@ -151,14 +138,26 @@ $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") {
-        @if not get("left-cap") {
-          @include -left-cap();
+      @if $left-cap-color {
+        &::before {
+          background-color: color.get($left-cap-color);
         }
       }
+      @if map.get($style, "left-cap") and not get("left-cap") {
+        // if current style has left cap and the global callout does not. This prevents duplicate styles printing.
+        @include -left-cap();
+      }
     }
   }
+}
+
+@mixin -left-cap() {
+  $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: "";
+  }
 }

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;

package/scss/components/_hero.scss

@@ -11,6 +11,7 @@
 @use "../utils";
 @use "../breakpoint";
 @use "../typography";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -86,11 +87,7 @@ $config: (
     width: 100%;
   }
   #{ $prefix }__graphic-media {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     object-fit: cover;
   }
   
@@ -171,11 +168,7 @@ $config: (
       z-index: 2;
     }
     #{ $prefix }__graphic {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      @include layout.absolute-fill();
     }
     &#{ $prefix }--bottom,
     &#{ $prefix }--bottom #{ $prefix }__content {

package/scss/components/_overlay-section.scss

@@ -9,6 +9,7 @@
 @use "../utils";
 @use "../breakpoint";
 @use "../color";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -81,11 +82,7 @@ $config: (
     }
   }
   .overlay-section__background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include layout.absolute-fill();
     img, 
     video {
       object-fit: cover;

package/scss/components/_popover.scss

@@ -251,14 +251,14 @@ $config: (
     visibility: hidden;
     z-index: 1;
     &,
-    &:before {
+    &::before {
       display: block;
       position: absolute;
       width: $size;
       height: $size;
       background: inherit;
     }
-    &:before {
+    &::before {
       visibility: visible;
       content: '';
       transform: rotate(45deg);
@@ -279,7 +279,7 @@ $config: (
   // Account for footer and change arrow color when positioned next to it
   #{ $prefix }__footer ~ #{ $prefix }__arrow {
     [data-placement^="top"] > & {
-      &:before {
+      &::before {
         background-color: get("footer-background-color");
       }
     }
@@ -311,25 +311,25 @@ $config: (
     visibility: hidden;
     z-index: 1;
     &,
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       display: block;
       position: absolute;
       width: $size;
       height: $size;
       background: inherit;
     }
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       visibility: visible;
       content: '';
     }
-    &:before {
+    &::before {
       box-shadow: get("box-shadow");
       transform: rotate(45deg);
     }
     // Masking shape
-    &:after {
+    &::after {
       top: 50%;
       left: 50%;
       transform: translateX(-50%);
@@ -355,8 +355,8 @@ $config: (
   // Account for footer and change arrow color when positioned next to it
   #{ $prefix }__footer ~ #{ $prefix }__arrow {
     [data-placement^="top"] > & {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         background-color: get("footer-background-color");
       }
     }

package/scss/components/_pull-quote.scss

@@ -83,7 +83,7 @@ $config: (
   #{ $prefix }__body {
     line-height: get("body-line-height");
     @if (get("quote-mark-enabled")) {
-      &:before {
+      &::before {
         display: block;
         position: relative;
         // content: open-quote;

package/scss/components/_ratio-box.scss

@@ -5,6 +5,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -49,11 +50,7 @@ $config: (
     padding: get("size") 0 0 0; 
   }
   .ratio-box__content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include layout.absolute-fill(true);
     border: 0;
   }
   @each $name, $size in get("sizes") {

package/scss/components/_scroll-slider.scss

@@ -124,7 +124,7 @@ $config: (
     @include layout.match-container-margin("scroll-padding-left", get("container"));
     // padding: 1rem;
     // Add space to end of list
-    // &:after {
+    // &::after {
     //   content: "\00a0";
     //   display: block;
     //   width: 1rem;

package/scss/components/_spoke-spinner.scss

@@ -96,7 +96,7 @@ $styles: () !default;
     transform-origin: $sizeHalf $sizeHalf;
     animation: UluFadeOut get("duration") linear infinite;
   }
-  #{ $prefix }__spinner div:after {
+  #{ $prefix }__spinner div::after {
     content: " ";
     display: block;
     position: absolute;
@@ -181,7 +181,7 @@ $styles: () !default;
         transform-origin: $sizeHalf $sizeHalf;
         animation-duration: map.get($merged, "duration");
       }
-      #{ $prefix }__spinner div:after {
+      #{ $prefix }__spinner div::after {
         left: $sizeHalf - $spoke-widthHalf;
         width: $spoke-width;
         height: map.get($merged, "spoke-height");

package/scss/components/_vignette.scss

@@ -8,6 +8,7 @@
 @use "sass:map";
 @use "../utils";
 @use "../selector";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -49,11 +50,7 @@ $config: (
     &::after {
       content: "";
       display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      @include layout.absolute-fill();
       background: linear-gradient(0deg,color.change(get("background-color"), $alpha: 0.8),color.change(get("background-color"), $alpha: 0) 45%);
       pointer-events: none;
     }