@ulu/frontend 0.1.0-beta.90 → 0.1.0-beta.92

package/scss/base/_index.scss

@@ -29,7 +29,7 @@
 
 $all-includes: (
   "normalize",
-  "root"
+  "root",
   "elements," 
   "print", 
   "elements", 

package/scss/components/_badge-stack.scss

@@ -0,0 +1,84 @@
+////
+/// @group badge-stack
+/// Stacks badges
+////
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "badge";
+
+/// Module Settings
+/// @type Map
+/// @prop {Dimension} width [10rem] Width of the badge stack
+/// @prop {Dimension} overlap [-5px] Right margin for stacked items
+/// @prop {Dimension} border-width [3px] Border width for stacked items
+
+$config: (
+  "width": 10rem,
+  "overlap": -5px,
+  "border-width": 3px,
+  "border-color" : "accent"
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-badge-stack-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-badge-stack-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "badge-stack [config]");
+}
+
+/// Prints component styles
+/// @demo badge-stack
+/// @example scss
+///  @include ulu.component-badge-stack-styles();
+
+@mixin styles {
+  $prefix: selector.class("badge-stack");
+  $prefix-badge: selector.class("badge");
+
+  #{ $prefix } {
+    width: get("width");
+    display: flex;
+  }
+  #{ $prefix }__item {
+    flex: 0 1 min-content;
+    margin-right: get("overlap");
+
+    #{ $prefix-badge }__inner {
+      // box-shadow: ulu.element-get("box-shadow");
+      position: relative;
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -1px;
+        bottom: -1px;
+        left: -1px;
+        right: -1px;
+        border-radius: badge.get("border-radius");
+        border: get("border-width") solid color.get(get("border-color"));
+      }
+    }
+    #{ $prefix-badge } {
+      &:focus,
+      &:hover {
+        #{ $prefix-badge }__inner {
+          z-index: 2;
+        }
+      }
+    }
+  }
+}

package/scss/components/_badge.scss

@@ -26,8 +26,9 @@ $-fallbacks: (
 /// @prop {Number} font-size [1.3rem] Font size (basic ie. 1.3rem) for badge
 /// @prop {Number} font-weight [bold] Font weight
 /// @prop {Number} font-family [true] Specify font family, defaults to typography font-family-sans
-/// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 /// @prop {Number} width [10rem] Width of badge (default size)
+/// @prop {Number} hover-scale [1.2] Scale of badge (if clickable) on hover (enlarges badge)
+/// @prop {List} sizes [Object] List of other sizes (large by default), each size is a map of (width, font-size) 
 
 $config: (
   "background-color":    gray,
@@ -37,6 +38,7 @@ $config: (
   "font-weight":         bold,
   "font-family":         true,
   "width":               7rem,
+  "hover-scale":         1.2,
   "sizes" : (
     "small" : (
       "font-size" : 1.2rem,
@@ -117,11 +119,13 @@ $config: (
       color: color.get(get("color"));
     }
   }
-  #{ $prefix }--clickable {
+  #{ $prefix }--clickable,
+  button#{ $prefix },
+  a#{ $prefix } {
     &:hover,
     &:focus {
       #{ $prefix }__inner {
-        transform: scale(1.2);
+        transform: scale(get("hover-scale"));
       }
     }
   }

package/scss/components/_index.scss

@@ -6,6 +6,7 @@
 @forward "accordion" as accordion-*;
 @forward "adaptive-spacing" as adaptive-spacing-*;
 @forward "badge" as badge-*;
+@forward "badge-stack" as badge-stack-*;
 @forward "basic-hero" as basic-hero-*;
 @forward "button" as button-*;
 @forward "button-group" as button-group-*;
@@ -62,6 +63,7 @@
 @use "adaptive-spacing";
 @use "accordion";
 @use "badge";
+@use "badge-stack";
 @use "basic-hero";
 @use "button";
 @use "button-group";
@@ -119,6 +121,7 @@ $all-includes: (
   "accordion",
   "adaptive-spacing",
   "badge",
+  "badge-stack",
   "basic-hero",
   "button",
   "button-group",
@@ -223,6 +226,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "badge")) {
     @include badge.styles;
   }
+  @if (list.index($includes, "badge-stack")) {
+    @include badge-stack.styles;
+  }
   @if (list.index($includes, "basic-hero")) {
     @include basic-hero.styles;
   }