@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.81

package/scss/components/_popover.scss

@@ -29,38 +29,41 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} arrow-size [16px]
-/// @prop {Color} background-color [white]
-/// @prop {Dimension} border-radius [6px]
-/// @prop {Color} color [inherit]
-/// @prop {Dimension} max-width [90vw]
-/// @prop {Dimension} max-height [25rem]
-/// @prop {Dimension} padding [1rem]
-/// @prop {Dimension} padding-large [2rem]
-/// @prop {Dimension} type-size [null]
-/// @prop {Number} z-index [true]
-/// @prop {CssValue} box-shadow [true]
-/// @prop {CssValue} box-shadow-footer [0 0 4px]
-/// @prop {String} box-shadow-footer-color ["box-shadow"]
-/// @prop {Color} header-background-color [#ccc]
-/// @prop {Color} header-color [null]
-/// @prop {Color} header-media-background-color [black]
-/// @prop {Dimension} header-padding-y [0.25rem]
-/// @prop {Color} footer-background-color [#ccc]
-/// @prop {Color} footer-color [null]
-/// @prop {Dimension} footer-padding-y [0.25rem]
-/// @prop {Dimension} footer-padding-y-large [0.5rem]
-/// @prop {Color} tooltip-background-color [white]
-/// @prop {Color} tooltip-color [null]
-/// @prop {Dimension} tooltip-max-width [20rem]
-/// @prop {Dimension} tooltip-padding [0.5rem]
-/// @prop {Dimension} tooltip-width [auto]
-/// @prop {Dimension} width [15rem]
-/// @prop {Dimension} width-large [30rem]
-/// @prop {Dimension} width-large-x [50rem]
+/// @prop {Dimension} arrow-size [16px] Size of the dropdown arrow.
+/// @prop {Boolean} arrow-box-shadow [true] When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)
+/// @prop {Number} arrow-box-shadow-extent [null] If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)
+/// @prop {Color} background-color [white] Background color of the popover.
+/// @prop {Dimension} border-radius [6px] Border radius of the popover.
+/// @prop {Color} color [inherit] Text color of the popover.
+/// @prop {Dimension} max-width [90vw] Max width of the popover.
+/// @prop {Dimension} max-height [25rem] Max height of the popover.
+/// @prop {Dimension} padding [1rem] Padding of the popover.
+/// @prop {Dimension} padding-large [2rem] Padding of the popover if using "--large" or "--large-x" styling.
+/// @prop {Dimension} type-size [null] Font size of the popover.
+/// @prop {Number} z-index [true] z-index of the popover.
+/// @prop {CssValue} box-shadow [true] Box shadow of the popover.
+/// @prop {Color} header-background-color [#ccc] Background color of the popover header
+/// @prop {Color} header-color [null] Text color for the header.
+/// @prop {Color} header-media-background-color [black] background color for header media.
+/// @prop {Dimension} header-padding-y [0.25rem] Vertical padding of the header.
+/// @prop {Color} footer-background-color [#ccc] Background color of the footer.
+/// @prop {Color} footer-border-top [1px solid #dfdfdf] Optional border used to separate the content from footer
+/// @prop {Color} footer-color [null] Text color of the footer.
+/// @prop {Dimension} footer-padding-y [0.25rem] Vertical padding of the footer.
+/// @prop {Dimension} footer-padding-y-large [0.5rem] Vertical padding of the footer if using "--large" or "--large-x" styling.
+/// @prop {Color} tooltip-background-color [white] Background color of the tooltip.
+/// @prop {Color} tooltip-color [null] Font color of the tooltip.
+/// @prop {Dimension} tooltip-max-width [20rem] Max width of the tooltip.
+/// @prop {Dimension} tooltip-padding [0.5rem] Padding of the tooltip.
+/// @prop {Dimension} tooltip-width [auto] Width of the tooltip.
+/// @prop {Dimension} width [15rem] Width of the popover.
+/// @prop {Dimension} width-large [30rem] Width of the popover if using "--large".
+/// @prop {Dimension} width-large-x [50rem] Width of the popover if using "--large-x".
 
 $config: (
   "arrow-size"                   : 16px,
+  "arrow-box-shadow"             : true,
+  "arrow-box-shadow-extent"      : null,
   "background-color"             : white,
   "border-radius"                : 6px,
   "color"                        : inherit,
@@ -70,14 +73,12 @@ $config: (
   "padding-large"                : 2rem,
   "type-size"                    : null,
   "z-index"                      : true,
-  
   "box-shadow"                   : true,
-  "box-shadow-footer"            : 0 0 4px,
-  "box-shadow-footer-color"      : "box-shadow",
   "header-background-color"      : #ccc,
   "header-color"                 : null,
   "header-media-background-color": black,
   "header-padding-y"             : 0.25rem,
+  "footer-border-top"            : 1px solid #dfdfdf,  
   "footer-background-color"      : #ccc,
   "footer-color"                 : null,
   "footer-padding-y"             : 0.25rem,
@@ -117,39 +118,9 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("popover");
-  $arrow-size-half: math.div(get("arrow-size"), 2);
 
   @if (get("arrow-size")) {
-    #{ $prefix }__arrow {
-      display: block;
-      visibility: hidden;
-      z-index: 1;
-      &,
-      &:before {
-        position: absolute;
-        width: get("arrow-size");
-        height: get("arrow-size");
-        background: inherit;
-      }
-      &:before {
-        visibility: visible;
-        content: '';
-        transform: rotate(45deg);
-        // box-shadow: $box-shadow;
-      }
-      [data-placement^='top'] > & {
-        bottom: -($arrow-size-half);
-      }
-      [data-placement^='bottom'] > & {
-        top: -($arrow-size-half);
-      }
-      [data-placement^='left'] > & {
-        right: -($arrow-size-half);
-      }
-      [data-placement^='right'] > & {
-        left: -($arrow-size-half);
-      }
-    }
+    @include -arrow-styles();
   }
   // Default position is on the right of the container (Popper handles positioning)
   #{ $prefix } {
@@ -197,7 +168,7 @@ $config: (
     background-color: color.get(get("header-media-background-color"));
   }
   #{ $prefix }__footer {
-    box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
+    border-top: get("footer-border-top");
     padding: get("footer-padding-y") get("padding");
     color: color.get(get("footer-color"));
     background-color: color.get(get("footer-background-color"));
@@ -260,4 +231,134 @@ $config: (
       }
     }
   }
+}
+
+@mixin -arrow-styles() {
+  @if get("arrow-box-shadow") {
+    @include -arrow-styles-with-box-shadow();
+  } @else {
+    @include -arrow-styles-simple();
+  }
+}
+
+// Internal mixin for original arrow styles without box-shadow
+@mixin -arrow-styles-simple() {
+  $prefix: selector.class("popover");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before {
+      visibility: visible;
+      content: '';
+      transform: rotate(45deg);
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
+}
+
+// Internal mixin for arrow styles when using the mask (extra pseudo element)
+@mixin -arrow-styles-with-box-shadow() {
+  $prefix: selector.class("popover");
+  $box-shadow: get("box-shadow");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+  $size-info: utils.number-info($size);
+  $unitless: map.get($size-info, "value");
+  $unit: map.get($size-info, "unit");
+  $hypotenuse: utils.hypotenuse($unitless, $unitless);
+  $hypotenuse-half: math.div($hypotenuse, 2);
+  $manual-extent: get("arrow-box-shadow-extent");
+  $shadow-extent: if(
+    $manual-extent,
+    $manual-extent,
+    if(utils.is-list($box-shadow), utils.box-shadow-extent($box-shadow), 5px)
+  );
+  $overlap: utils.strip-unit($shadow-extent);
+  $mask-height: utils.add-unit($hypotenuse-half + $overlap, $unit);
+  $mask-width: utils.add-unit($hypotenuse + $overlap, $unit);
+  
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before,
+    &::after {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before,
+    &::after {
+      visibility: visible;
+      content: '';
+    }
+    &::before {
+      box-shadow: get("box-shadow");
+      transform: rotate(45deg);
+    }
+    // Masking shape
+    &::after {
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      height: $mask-height;
+      width: $mask-width;
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+      transform: rotate(180deg); // Rotate w. mask
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+      transform: rotate(90deg); // Rotate w. mask
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+      transform: rotate(-90deg); // Rotate w. mask
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before,
+      &::after {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
 }

package/scss/components/_pull-quote.scss

@@ -21,18 +21,18 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {} body-line-height [true]
-/// @prop {} image-margin-bottom [1rem]
-/// @prop {} image-margin-top [2.5rem]
-/// @prop {} name-margin-bottom [1rem]
-/// @prop {} padding-y [2em]
-/// @prop {} title-font-style [italic]
-/// @prop {} quote-mark-character ["\201c"]
-/// @prop {} quote-mark-color [null]
-/// @prop {} quote-mark-font-family ["Georgia"]
-/// @prop {} quote-mark-font-size [3.75em]
-/// @prop {} quote-mark-enabled [true]
-/// @prop {} quote-mark-line-height [0.35]
+/// @prop {Number} body-line-height [true]
+/// @prop {Dimension} image-margin-bottom [1rem]
+/// @prop {Dimension} image-margin-top [2.5rem]
+/// @prop {Dimension} name-margin-bottom [1rem]
+/// @prop {Dimension} padding-y [2em]
+/// @prop {CssValue} title-font-style [italic]
+/// @prop {String} quote-mark-character ["\201c"]
+/// @prop {Color} quote-mark-color [null]
+/// @prop {String} quote-mark-font-family ["Georgia"]
+/// @prop {Dimension} quote-mark-font-size [3.75em]
+/// @prop {Boolean} quote-mark-enabled [true]
+/// @prop {Number} quote-mark-line-height [0.35]
 
 $config: (
   "body-line-height" : true,
@@ -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/_rule.scss

@@ -82,6 +82,7 @@ $config: (
       width: $short-width;
       max-width: 100%;
       border-bottom-width: get("short-border-width");
+      display: inline-block;
     }
     @if get("short-modifiers") {
       @each $mod, $opts in get("short-modifiers") {

package/scss/components/_scroll-slider.scss

@@ -22,8 +22,6 @@
 /// @prop {Dimension} padding-bottom  [0]
 /// @prop {Dimension} padding-top  [0]
 /// @prop {String} prefix ["scroll-slide"]
-/// @prop {Color} button-background-color  [white]
-/// @prop {Color} button-background-color-hover  [white]
 /// @prop {CssValue} button-border  [2px solid white]
 /// @prop {Color} button-border-color-hover  [white]
 /// @prop {Dimension} button-border-radius  [50%]
@@ -46,8 +44,6 @@ $config: (
   "padding-bottom" : 0,
   "padding-top" : 0,
   "prefix": "scroll-slider",
-  "button-background-color" : white,
-  "button-background-color-hover" : white,
   "button-border" : 2px solid white,
   "button-border-color-hover" : white,
   "button-border-radius" : 50%,
@@ -124,7 +120,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/_slider.scss

@@ -12,47 +12,45 @@
 /// Module Settings
 /// @type Map
 /// @prop {Color} background-color [transparent] Background color for the entire slider section.
-/// @prop {Dimension} margin-bottom [3rem] Bottom margin color for the entire slider section.
-/// @prop {Dimension} margin-top [1rem] Top margin color for the entire slider section.
-/// @prop {Dimension} padding-bottom [0] Bottom padding for individual slides.
+/// @prop {Dimension} margin [(1rem 0 3rem 0)] Margin for slider container
 /// @prop {Dimension} padding-top [0] Top padding for individual slides.
-/// @prop {Dimension} button-icon-offset-x [false] Offsets the control icons in from their respective sides.
-/// @prop {Dimension} button-icon-offset-y [false] Offsets the control options down by adding a margin. 
+/// @prop {Dimension} button-offset-x [null] Offsets the control button in from their respective sides.
+/// @prop {Dimension} button-offset-y [null] Offsets the control button y
 /// @prop {Dimension} button-margin [0.75rem] The margin between the controls and the slide content when using .slider__slide-gap-for-controls
-/// @prop {Dimension} button-size [3rem] Size of the button. Likely antiquated and replaced with button-width and button-height
-/// @prop {Color} dot-background-color [transparent] The color of the dot when unselected.
-/// @prop {Color} dot-background-color-hover [color.get("link")] The color of the dot when hovered.
-/// @prop {Color} dot-background-color-selected [color.get("link")] The color of the dot when selected.
-/// @prop {Dimension} dot-border-radius [50%] The border-radius of the dot.
-/// @prop {Color} dot-border-color [color.get("link")] The border color of the dot.
-/// @prop {Color} dot-border-color-hover [color.get("link")] The border color of the dot when hovered.
-/// @prop {Color} dot-border-color-selected [color.get("link")] The border color of the dot when selected.
-/// @prop {Dimension} dot-border-width [2px] The border width of the dot.
-/// @prop {Dimension} dot-size  [1rem] The height and width of the dot.
-/// @prop {Dimension} button-height  [1rem] The height of the button.
+/// @prop {Color} nav-margin [(0.5rem 0)] Margin for nav (dots)
+/// @prop {Color} nav-background-color [transparent] The color of the dot when unselected.
+/// @prop {Color} nav-background-color-hover [color.get("link")] The color of the dot when hovered.
+/// @prop {Color} nav-background-color-selected [color.get("link")] The color of the dot when selected.
+/// @prop {Dimension} nav-border-radius [50%] The border-radius of the dot.
+/// @prop {Color} nav-border-color [color.get("link")] The border color of the dot.
+/// @prop {Color} nav-border-color-hover [color.get("link")] The border color of the dot when hovered.
+/// @prop {Color} nav-border-color-selected [color.get("link")] The border color of the dot when selected.
+/// @prop {Dimension} nav-border-width [2px] The border width of the dot.
+/// @prop {Dimension} nav-size  [1rem] The height and width of the dot.
+/// @prop {Dimension} nav-gap  [0.2rem] Gap between nav items
 /// @prop {Dimension} button-width  [1rem] The width of the button.
 
 $config: (
   "background-color" : transparent,
-  "margin-bottom" : 3rem,
-  "margin-top" : 1rem,
-  "button-icon-offset-x" : 2rem,
-  "button-icon-offset-y" : false,
-  "button-margin" : 2rem,
-  "button-size" : 3rem,
-  "button-height": 2.5rem,
-  "button-width": 2.5rem,
-  "dot-background-color" : transparent,
-  "dot-background-color-hover" : "link",
-  "dot-background-color-selected" : "link",
-  "dot-border-color" : "link",
-  "dot-border-color-hover" : "link",
-  "dot-border-color-selected" : "link",
-  "dot-border-radius" : 50%,
-  "dot-border-width" : 2px,
-  "dot-size" :  1rem,
+  "margin" : (1rem 0 3rem 0),
   "padding-bottom" : 0,
   "padding-top" : 0,
+  "button-offset-x" : null,
+  "button-offset-y" : null,
+  "button-margin" : 2rem,
+  "button-width": 2.5rem,
+  "nav-background-color" : transparent,
+  "nav-background-color-hover" : "link",
+  "nav-background-color-selected" : "link",
+  "nav-border-color" : "link",
+  "nav-border-color-hover" : "link",
+  "nav-border-color-selected" : "link",
+  "nav-border-radius" : 50%,
+  "nav-gap" : 0.2rem,
+  "nav-border-width" : 2px,
+  "nav-size" :  1rem,
+  "nav-margin" : (0.5rem 0),
+  
   ) !default;
   
 /// Change modules $config
@@ -84,7 +82,7 @@ $config: (
   #{ $prefix } {
     position: relative; // for controls
     background-color: color.get(get("background-color"));
-    margin: get("margin-top") 0 get("margin-bottom") 0;
+    margin: get("margin");
   }
   #{ $prefix }__track,
   #{ $prefix-plugin }__controls,
@@ -97,34 +95,30 @@ $config: (
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-  }
-  @if get("button-icon-offset-y") {
-    #{ $prefix-plugin }__control-icon {
-      margin-top: get("button-icon-offset-y");
-    }
+    margin-top: get("button-offset-y");
   }
   #{ $prefix-plugin }__nav {
     display: flex;
     justify-content: center;
-    li {
-      margin: 0.5rem 0.15rem;
-    }
+    margin: get("nav-margin");
+    gap: get("nav-gap");
   }
   #{ $prefix-plugin }__nav-button {
     display: block;
-    width: get("dot-size");
-    height: get("dot-size");
-    background-color: color.get(get("dot-background-color"));
-    border: get("dot-border-width") solid color.get(get("dot-border-color"));
-    border-radius: get("dot-border-radius");
+    width: get("nav-size");
+    height: get("nav-size");
+    background-color: color.get(get("nav-background-color"));
+    border: get("nav-border-width") solid color.get(get("nav-border-color"));
+    border-radius: get("nav-border-radius");
     &:hover {
-      background-color: color.get(get("dot-background-color-hover"));
+      background-color: color.get(get("nav-background-color-hover"));
+      border-color: color.get(get("nav-border-color-hover"));
     }
   }
   #{ $prefix-plugin }__nav-button--active,
   #{ $prefix-plugin }__nav-button--active:hover {
-    background-color: color.get(get("dot-background-color-selected"));
-    border-color: color.get(get("dot-border-color-selected"));
+    background-color: color.get(get("nav-background-color-selected"));
+    border-color: color.get(get("nav-border-color-selected"));
   }
   #{ $prefix-plugin }__control-button,
   #{ $prefix-plugin }__nav-button {
@@ -164,42 +158,25 @@ $config: (
   }
   #{ $prefix-plugin }__control-button--previous {
     left: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-left: get("button-icon-offset-x");
-      }
-    }
+    margin-left: get("button-offset-x");
   }
   #{ $prefix-plugin }__control-button--next {
     right: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-right: get("button-icon-offset-x");
-      }
-    }
+    margin-right: get("button-offset-x");
   }
   #{ $prefix }--inset-controls {
     #{ $prefix }__slide-gap-for-controls {
-      $padding: get("button-width") + get("button-margin") + get("button-icon-offset-x");
+      $padding: get("button-width") + get("button-margin") + get("button-offset-x");
       padding-left: $padding;
       padding-right: $padding;
     }
     #{ $prefix-plugin }__control-button--previous {
       left: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-left: get("button-icon-offset-x");
-          
-        }
-      }
+      margin-left: get("button-offset-x");
     }
     #{ $prefix-plugin }__control-button--next {
       right: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-right: get("button-icon-offset-x");
-        }
-      }
+      margin-right: get("button-offset-x");
     }
   }
 }

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");