@ulu/frontend 0.1.0-beta.21 → 0.1.0-beta.23

package/docs-dev/sass/helpers/typography/index.html

@@ -586,6 +586,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -1725,6 +1740,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3012,6 +3042,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/helpers/units/index.html

@@ -586,6 +586,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -1725,6 +1740,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3012,6 +3042,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/helpers/utilities/index.html

@@ -586,6 +586,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -1725,6 +1740,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3012,6 +3042,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/index.html

@@ -586,6 +586,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -1725,6 +1740,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3012,6 +3042,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/tabs/">
@@ -4151,6 +4196,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/sticky-list/">
+          
+    
+    <span class="nav-tree__text">
+      Sticky-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/package.json

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

package/scss/_utils.scss

@@ -20,7 +20,7 @@ $config: (
   "debug-maps": true,
   "file-header-comments": true,
   "responsive-change": 0.5vw,
-  "pixel-em-base" : 16px
+  "pixel-em-base" : 16px,
 ) !default;
 
 /// Change modules $config

package/scss/components/_flipcard.scss

@@ -2,7 +2,7 @@
 ////
 /// @group flipcard
 ////
-/// Creates adaptive (changing at breakpoints)n between items (vertical/horizontal layout)
+/// Flipcard (content revealed on backside of card after click)
 
 @use "sass:map";
 @use "../color";
@@ -32,7 +32,6 @@
 /// @prop {Color} title-color-image-hover [blue] Color of the front page text when using an image and hovered or focused.
 /// @prop {Boolean} bottom-shadow [true] Boolean that enables a bottom shadow to the image flipcard.
 
-
 $config: (
   "anim-delay" : 200ms,
   "anim-duration" : 430ms,
@@ -86,6 +85,12 @@ $config: (
   @return utils.require-map-get($config, $name, "flipcard [config]");
 }
 
+/// Prints component styles
+/// @demo flipcard
+/// @example scss
+/// @example
+///   @include ulu.component-flipcard-styles();
+
 @mixin styles {
   $prefix: selector.class("flipcard");
 

package/scss/components/_index.scss

@@ -38,6 +38,7 @@
 @forward "rule" as rule-*;
 @forward "scroll-slider" as scroll-slider-*;
 @forward "skip-link" as skip-link-*;
+@forward "sticky-list" as sticky-list-*;
 @forward "slider" as slider-*;
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
@@ -88,6 +89,7 @@
 @use "rule";
 @use "scroll-slider";
 @use "skip-link";
+@use "sticky-list";
 @use "slider";
 @use "hero";
 @use "tabs";
@@ -137,6 +139,7 @@ $all-includes: (
   "rule",
   "scroll-slider",
   "skip-link",
+  "sticky-list",
   "slider",
   "hero",
   "tabs",
@@ -295,6 +298,9 @@ $current-includes: $all-includes;
   @if (list.index($includes, "skip-link")) {
     @include skip-link.styles;
   }
+  @if (list.index($includes, "sticky-list")) {
+    @include sticky-list.styles;
+  }
   @if (list.index($includes, "slider")) {
     @include slider.styles;
   }

package/scss/components/_sticky-list.scss

@@ -0,0 +1,207 @@
+
+////
+/// @group sticky-list
+////
+/// Sticky first column, sticky elements inside adjacent columns to first. (Sticky list with header)
+
+@use "sass:map";
+@use "sass:meta";
+@use "sass:color" as sassColor;
+
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+@use "../typography";
+@use "../utils";
+@use "../selector";
+
+// Used for function fallback
+$-fallbacks: (
+  "margin" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "margin"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [transparent] Background color for the entire slider section.
+/// @prop {Number} margin [true] Margin on ends of component (defaults to element margin)
+/// @prop {Number} mask-offset-bottom [55vh] The offset for the mask (on bottom)
+/// @prop {Number} mask-offset-top [5rem] The offset for the mask (on top)
+/// @prop {Number} sticky-top [45vh] When to stick
+/// @prop {String} breakpoint ["medium"] The upward breakpoint that this is allowed to be sticky 
+/// @prop {String} type-size ["medium"] The typography size to use for title
+/// @prop {Number} title-width [40%] The width of the title when this is displayed in columns
+/// @prop {Number} title-min-width [8em] The min width for title when displayed in columns
+/// @prop {CssValue} title-text-align [right] Text alignment for title when displayed in columns
+/// @prop {Number} item-padding-x [0] Optional padding on the left/right for items
+/// @prop {Number} gap [2rem] The gap between title and items when displayed in columns
+/// @prop {Color} background-color [white] The background color used for the mask
+/// @prop {List} background-contexts Adjust the background mask color by contextual selectors. Pass List of Maps with ("selector" [parent/contextual selector], "background-color", "item-padding-x" [optional])  
+
+$config: (
+  "margin" : true,
+  "mask-offset-bottom" : 55vh,
+  "mask-offset-top" : 5rem,
+  "sticky-top" : 45vh,
+  "breakpoint" : "medium",
+  "type-size" : "large",
+  "title-width" : 40%,
+  "title-min-width" : 8em,
+  "title-text-align" : right,
+  "item-padding-x" : 0,
+  "gap" : 2rem,
+  "background-color" : white,
+  "background-contexts" : (
+    (
+      "selector" : ".background-dark",
+      "background-color" : black,
+      "item-padding-x" : 1em
+    ),
+  )
+);
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-sticky-list-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Set sizes map
+/// @param {Map} $changes Map of changes
+/// @param {String} $merge-mode Merge mode see utils.map-merge() [null|"deep"|"overwrite"]
+
+@mixin set-sizes($changes, $merge-mode: null) {
+  $sizes: utils.map-merge($sizes, $changes, $merge-mode) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example scss
+///   @include ulu.component-sticky-list-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "sticky-list [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo sticky-list
+/// @example scss
+///   @include ulu.component-sticky-list-styles();
+/// @example html {preview}
+/// <div class="sticky-list">
+///   <strong class="sticky-list__title">Example:</strong>
+///   <ul class="sticky-list__list">
+///     <li class="sticky-list__item">
+///       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec nisl magna
+///     </li>
+///     <li class="sticky-list__item">
+///       Aenean sollicitudin mauris lectus, blandit suscipit lectus fringilla sed
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///     <li class="sticky-list__item">
+///       Suspendisse sollicitudin, justo sed efficitur tempor, risus
+///     </li>
+///   </ul>
+/// </div>
+
+@mixin styles {
+  $prefix: selector.class("sticky-list");
+  $mask-offset-top: get("mask-offset-top");
+  $mask-offset-bottom: get("mask-offset-bottom");
+  $type-size: get("type-size");
+  $sticky-top: get("sticky-top");
+
+  #{ $prefix } {
+    padding: get("margin") 0;
+  }
+  @include breakpoint.min(get("breakpoint")) {
+    #{ $prefix } {
+      display: flex;
+      align-items: flex-start;
+      gap: get("gap");
+      position: relative;
+      @if ($type-size and typography.has-size($type-size)) {
+        @include typography.size($type-size, $only-font-size: true);
+      } @else if ($type-size) {
+        @warn "Unable to find '#{$type-size}' typography size for title";
+      }
+    }
+    #{ $prefix }__title,
+    #{ $prefix } > :not(ul) {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      flex-basis: get("title-width");
+      min-width: get("title-min-width");
+      padding-top: $mask-offset-top;
+      padding-bottom: $mask-offset-bottom;
+      text-align: get("title-text-align");
+    }
+    #{ $prefix }__list,
+    #{ $prefix } > ul {
+      list-style: none;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-self: stretch;
+    }
+    #{ $prefix }__item,
+    #{ $prefix } > ul > li {
+      display: block;
+      position: sticky;
+      top: $sticky-top;
+      margin: 0 !important; // If in editor (to complicated for :not())
+      padding: $mask-offset-top get("item-padding-x") $mask-offset-bottom get("item-padding-x");
+      @include set-background(get("background-color"));
+    }
+    #{ $prefix }__item:first-child,
+    #{ $prefix } > ul > li:first-child {
+      margin-top: 0;
+    }
+    #{ $prefix }__item:last-child,
+    #{ $prefix } > ul > li:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Print out any contextual background styles
+  @each $props in get("background-contexts") {
+    @debug $props;
+    $selector: map.get($props, "selector");
+    $item-padding-x: map.get($props, "item-padding-x");
+    @include breakpoint.min(get("breakpoint")) {
+      #{ $selector } {
+        #{ $prefix }__item,
+        #{ $prefix } > ul > li {
+          @if ($item-padding-x) {
+            padding-left: $item-padding-x;
+            padding-right: $item-padding-x;
+          }
+          @include set-background(map.get($props, "background-color"));
+        }
+      }
+    }
+  }
+}
+
+/// Outputs background color mask CSS (gradient from transparent to original color)
+/// @param {Color} $color The color to create the CSS for
+
+@mixin set-background($color) {
+  $color: color.get($color);
+  $color-transparent: sassColor.change($color, $alpha: 0);
+  background-color: $color;
+  background: linear-gradient(180deg, $color-transparent 0%, $color get("mask-offset-top"));
+}