@ulu/frontend 0.1.0-beta.11 → 0.1.0-beta.111

package/scss/components/_modal.scss

@@ -53,11 +53,16 @@ $-fallbacks: (
 /// @prop {CssValue} header-border-bottom [none] Bottom-border on the modal header.
 /// @prop {Color} header-color [white] Type color of the header.
 /// @prop {Dimension} header-padding [1rem] The padding of the modal header.
+/// @prop {Dimension} footer-padding [(0.5rem 1rem)] The padding of the modal footer.
+/// @prop {Color} footer-background-color [(0.5rem 1rem)] The background color of the footer
+/// @prop {Color} footer-border-top [(0.5rem 1rem)] The border between body and footer
+/// @prop {CssValue} footer-text-align [right] Text alignment for footer
 /// @prop {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
 /// @prop {Color} resizer-background-color-hover [rgb(192, 192, 192)] The background color of the resizer when hovered or focused.
 /// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
 /// @prop {Color} resizer-color-hover [black] The type color of the resizer when hovered or focused.
 /// @prop {Dimension} resizer-width [1rem] The width of the resizer.
+/// @prop {Dimension} resizer-center-size [1.65rem] The width/height of the resizer (in bottom right corner) used when position center with resize enabled
 /// @prop {Color} title-color [white] Type color of the title.
 /// @prop {CssValue} title-font-weight [bold] Font weight of the title.
 /// @prop {CssValue} title-font-family [null] Font family for title
@@ -69,8 +74,8 @@ $-fallbacks: (
 $config: (
   "backdrop-color" :                true,
   "backdrop-blur" :                 4px,
-  "background-color":              white,
-  "body-padding":                   1rem,
+  "background-color" :             white,
+  "body-padding" :                  1rem,
   "border-radius" :                 true,
   "box-shadow" :                    true,         
   "height":                         340px,
@@ -91,11 +96,16 @@ $config: (
   "header-border-bottom":           none,
   "header-color":                   white,
   "header-padding":                 1rem,
+  "footer-padding" :                (0.5rem 1rem),
+  "footer-background-color" :       #f6f6f6,
+  "footer-border-top" :             none,
+  "footer-text-align" :             right,
   "resizer-background-color":       rgb(221, 221, 221),
   "resizer-background-color-hover": rgb(192, 192, 192),
   "resizer-color":                  rgb(99, 99, 99),
   "resizer-color-hover":            black,
   "resizer-width":                  1.25rem,
+  "resizer-center-size" :           1.65rem,
   "title-color":                    white,
   "title-font-weight":              bold,
   "title-font-family" :             null,
@@ -142,6 +152,7 @@ $config: (
   #{ $prefix } {
     // Required for click outside
     position: fixed;
+    flex-direction: column;
     // Important: If you use the margin layout system (ie. auto) on dialogs they 
     // can't animate out correctly (thinking it jumps from dialog display system 
     // to normal block and doesn't work. This ALSO affects the z-index (seems to move from top-layer to normal layer). Z-index is for close
@@ -165,9 +176,8 @@ $config: (
     box-sizing: border-box;
     animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
     &[open] {
-      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
       display: flex;
-      flex-direction: column;
+      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
     }
     &::backdrop {
       background: color.get(get("backdrop-color"));
@@ -190,6 +200,13 @@ $config: (
     overflow: auto;
     padding: get("body-padding");
   }
+  #{ $prefix }__footer {
+    flex: 0;
+    padding: get("footer-padding");
+    background-color: color.get(get("footer-background-color"));
+    border-top: get("footer-border-top");
+    text-align: get("footer-text-align");
+  }
   #{ $prefix }__title {
     display: flex;
     align-items: baseline;
@@ -224,6 +241,7 @@ $config: (
   }
   #{ $prefix }__resizer {
     position: absolute;
+    overflow: hidden;
     top: 0;
     bottom: 0;
     left: 0;
@@ -246,12 +264,16 @@ $config: (
       left: auto;
       right: 0;
     }
-  }
-  #{ $prefix }__content {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    line-height: 1.5;
-    color: rgba(0,0,0,.8);
+    #{ $prefix }--center & {
+      left: auto;
+      right: 0;
+      bottom: 0;
+      top: auto;
+      height: get("resizer-center-size");
+      width: get("resizer-center-size");
+      background-color: transparent;
+      cursor: nwse-resize;
+    }
   }
 
   // Modifiers
@@ -260,6 +282,12 @@ $config: (
       width: $size-width;
     }
   }
+
+  #{ $prefix }--fullscreen {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
   #{ $prefix }--right,
   #{ $prefix }--left {
     border-radius: 0;
@@ -314,15 +342,15 @@ $config: (
     }
   }
   #{ $prefix }--resize {
-    &#{ $prefix }--center  {
-      resize: both;  
-    }
     &#{ $prefix }--right  {
       padding-left: get("resizer-width");  
     }
     &#{ $prefix }--left  {
       padding-right: get("resizer-width");  
     }
+    // &#{ $prefix }--center  {
+    //   resize: both;  
+    // }
   }
   #{ $prefix }--body-fills {
     #{ $prefix }__header {
@@ -371,13 +399,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, -50%);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalCenterOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, -50%);
     }
     to { 
@@ -395,13 +423,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalTopOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -419,13 +447,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalBottomOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -443,13 +471,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalLeftOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 
@@ -467,13 +495,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalRightOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 

package/scss/components/_nav-strip.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../color";
 @use "../selector";
+@use "../layout";
 @use "../typography";
 
 /// Module Settings
@@ -88,6 +89,7 @@ $config: (
     overflow-x: auto;
     line-height: typography.get("line-height-dense");
     gap: get("margin-between");
+    @include layout.remove-scrollbar();
   }
   #{ $prefix }__item,
   #{ $prefix }--auto li {

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/_panel.scss

@@ -0,0 +1,246 @@
+////
+/// @group panel
+/// A structured container for content with distinct header, body, and footer sections that can bleed to the edges.
+////
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+
+@use "../utils";
+@use "../selector";
+@use "../color";
+@use "../element";
+@use "../breakpoint";
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {Color} background-color [rgb(255, 255, 255)] The background color of the panel
+/// @prop {Color} border [null] Set border to panel
+/// @prop {Dimension} border-radius [element.$config.border-radius] The border radius of the panel
+/// @prop {CssValue} box-shadow [element.$config.box-shadow] The box-shadow of the panel
+/// @prop {Dimension} margin-bottom [1.5rem] The bottom margin of the panel
+/// @prop {CssValue} overflow [null] Value for overflow, not included by default as it interferes with position sticky, but could be useful for cropping if that's needed (can be set on rows too)
+
+$config: (
+  "background-color" : rgb(255, 255, 255),
+  "border" : null,
+  "border-radius" : true,
+  "box-shadow" : true,
+  "margin-bottom" : 1.5em,
+  "overflow" : null,
+) !default;
+
+/// Styles Map (for unique variations/modifiers)
+/// - Use this map to define distinct visual styles for the panel
+/// - This map is two levels the first level is the name of the modifier (see default below). 
+///   This will become the modifier for the pane; so ("transparent" : (...)) = .panel--transparent.
+///   The second level is that modifier row modifiers (ie. panel__row--header) (see row options below)
+/// - Keyword "default" means without modifier for both parent and row configs
+///   - For example "default" as panel container modifier name will mean
+///     styles for this without any modifiers
+///   - In a panels row config (second level) "default" will refer to the non-modified row (ie .panel__row)
+/// - Order matters, default should be first
+/// - Row Options
+///   - Each row can have the following options:
+///       overflow: Set overflow property if needed,
+///       aspect-ratio,
+///       height,
+///       min-height,
+///       padding,
+///       margin: Can be used to create gap between container and row
+///       background-color,
+///       font-weight,
+///       font-family,
+///       color,
+///       box-shadow,
+///       grow: Default the panel will grow to fill the containers height, passing false disables this
+///       border-top: If a string is passed it will resolved as an element rule style
+///       border-bottom: If a string is passed it will resolved as an element rule style
+/// @type Map
+
+$styles: (
+  "default" : (
+    "default" : (
+      "padding": 1em,
+    ),
+    "header" : (
+      "padding" : (0.75em 1em),
+      "background-color" : #e7e7e7,
+      "border-bottom" : "default",
+      "font-weight" : bold,
+      "grow" : false,
+      "breakpoints" : (
+        "small" : (
+          "direction" : "max",
+          "padding" : (0.25em 0.5em)
+        )
+      )
+    ),
+    "footer" : (
+      "padding" : (0.5em 1em),
+      "background-color" : #f4f4f4,
+      "border-top" : "default",
+      "grow" : false
+    ),
+    "separator-top" : (
+      "border-top" : "light",
+    ),
+    "separator-bottom" : (
+      "border-bottom" : "light",
+    )
+  ),
+  "transparent" : (
+    "default" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+    ),
+    "header" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    ),
+    "footer" : (
+      "padding" : (1em 0),
+      "margin" : (0 1em),
+      "background-color" : transparent,
+      "grow" : false
+    )
+  ),
+  "compact" : (
+    "default" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "header" : (
+      "padding" : (0.25em 0.5em)
+    ),
+    "body" : (
+      "padding" : (0.5em 1em)
+    )
+  )
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-panel-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-panel-get("property");
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "panel [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Set style variations
+/// - See $styles for more information on map properties/structure
+/// @param {Map} $changes Map of changes (options for style include all config properties)
+/// @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;
+}
+
+/// Output component styles
+/// @example scss
+///  @include ulu.component-panel-styles();
+@mixin styles {
+  $prefix: selector.class("panel");
+
+  #{ $prefix } {
+    display: flex;
+    flex-direction: column;
+    overflow: get("overflow");
+    background-color: get("background-color");
+    box-shadow: get("box-shadow");
+    border: get("border");
+    border-radius: get("border-radius");
+  }
+  #{ $prefix }__row {
+    &:first-child {
+      border-top-left-radius: get("border-radius");
+      border-top-right-radius: get("border-radius");
+    }
+    &:last-child {
+      border-bottom-left-radius: get("border-radius");
+      border-bottom-right-radius: get("border-radius");
+    }
+  }
+
+  @each $modifier, $rows in $styles {
+    @if ($modifier == "default") {
+      @each $row-name, $props in $rows {
+        @if ($row-name == "default") {
+          #{ $prefix }__row {
+            @include create-row-style($props);
+          }
+        } @else {
+          #{ $prefix }__row--#{ $row-name } {
+            @include create-row-style($props);
+          }
+        }
+      }
+    } @else {
+      #{ $prefix }--#{ $modifier } {
+        @each $row-name, $props in $rows {
+          @if ($row-name == "default") {
+            #{ $prefix }__row {
+              @include create-row-style($props);
+            }
+          } @else {
+            #{ $prefix }__row--#{ $row-name } {
+              @include create-row-style($props);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Create row styles
+/// @param {Map} $props - Row Options
+@mixin create-row-style($props) {
+  overflow: map.get($props, "overflow");
+  aspect-ratio: map.get($props, "aspect-ratio");
+  height: map.get($props, "height");
+  min-height: map.get($props, "min-height");
+  padding: map.get($props, "padding");
+  margin: map.get($props, "margin");
+  background-color: color.get(map.get($props, "background-color"));
+  font-weight: map.get($props, "font-weight");
+  font-family: map.get($props, "font-family");
+  color: color.get(map.get($props, "color"));
+  box-shadow: map.get($props, "box-shadow");
+  flex-grow: if(map.get($props, "grow") == false, 0, 1); // Default is grow
+  border-top: element.get-optional-rule-style(map.get($props, "border-top"));
+  border-bottom: element.get-optional-rule-style(map.get($props, "border-bottom"));
+  
+
+  // Allow passing breakpoint maps
+  $breakpoints: map.get($props, "breakpoints");
+  $b-options: ( "directionRequired" : true );
+
+  @if ($breakpoints and list.length($breakpoints)) {
+    @include breakpoint.from-each($breakpoints, $b-options) using ($b-props) {
+      @include create-row-style($b-props);
+    }
+  }
+}