@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/scss/components/_modal.scss

@@ -0,0 +1,495 @@
+////
+/// @group modal
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../color";
+@use "../element";
+@use "../layout";
+@use "../typography";
+@use "../selector";
+@use "../utils";
+
+// Used for function fallback
+$-fallbacks: (
+  "backdrop-color" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "backdrop-color"
+  ),
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow-above",
+  ),
+  "border-radius" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "border-radius-large",
+  )
+);
+
+// todo [joe-check] for config options should items like 'dark-background-color' be 'background-color-dark' instead? Line 94
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue} backdrop-blur [4px] Determines the blur of the backdrop.
+/// @prop {Color} backdrop-color [true] The unblurred background color outside the modal. If set to true, will use the element.scss property for backdrop-color.
+/// @prop {Color} background-color [white] The background color of the modal.
+/// @prop {Dimension} body-padding [1rem] The padding of the body content.
+/// @prop {CssValue} border-radius [true] The border radius of the modal. If set to true, will use the element.scss property for border-radius-large.
+/// @prop {CssValue} box-shadow [true] Determines the box-shadow of the modal. If set to true, will use the element.scss property for backdrop-color.
+/// @prop {Dimension} height [340px] The min-height of the modal.
+/// @prop {Dimension} height-no-header [100px] The min-height of the modal.
+/// @prop {Dimension} width [60rem] The width of the Modal
+/// @prop {Time} animation-duration [300ms] Animation duration for the modal opening.
+/// @prop {Time} animation-duration-exit [150ms] Animation duration for the modal closing.
+/// @prop {CssValue} animation-timing-function [cubic-bezier(0, 0, .2, 1)] The animation timing menu of the modal.
+/// @prop {Color} close-background-color [white] Background color for the modal close icon.
+/// @prop {Close} close-background-color-hover [blue] Background color for the modal close icon when hovered or focused.
+/// @prop {Color} close-color [black] Type color for the modal close icon.
+/// @prop {Color} close-color-hover [black] Type color for the modal close icon when hovered or focused.
+/// @prop {Dimension} close-font-size [1.2rem] Font-siz of of the modal close icon font size.
+/// @prop {Dimension} close-margin [0.5rem] The margin for the modal close icon.
+/// @prop {Dimension} close-size [2.5rem] Size of the modal close icon.
+/// @prop {} dark-background-color [false] @joe-check unused
+/// @prop {} dark-color [white] @joe-check unused
+/// @prop {} dark-header-background-color [false] @joe-check unused
+/// @prop {} dark-header-border-bottom [false] @joe-check unused
+/// @prop {} dark-header-color [false] @joe-check unused
+/// @prop {Color} header-background-color [black] Background color for the header.
+/// @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 {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
+/// @prop {Color} resizer-background-color-hover [rgb(66, 66, 66)] The background color of the resizer when hovered or focused.
+/// @prop {Color} resizer-color [black] 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 {Color} title-color [white] Type color of the title.
+/// @prop {CssValue} title-font-weight [bold] Font weight of the title.
+/// @prop {Dimension} title-icon-margin [0.5em] The margin of the title icon
+/// @prop {String} title-size [large] The font-size of the title. This uses typography.scss, so the value of this options should be a variable from typography.scss.
+/// @prop {CssValue} title-text-transform [null] Transform option for the title.
+/// @prop {Map} sizes [Map] Size options to enable unique stylings.
+
+$config: (
+  "backdrop-color" :                true,
+  "backdrop-blur" :                 4px,
+  "background-color":              white,
+  "body-padding":                   1rem,
+  "border-radius" :                 true,
+  "box-shadow" :                    true,         
+  "height":                         340px,
+  "height-no-header":               100px,
+  "width":                          60rem,
+  
+  "animation-duration" :            300ms,
+  "animation-duration-exit" :       150ms,
+  "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
+  "close-background-color":         white,
+  "close-background-color-hover":   blue,
+  "close-color":                    black,
+  "close-color-hover":              black,
+  "close-font-size":                1.2rem,
+  "close-margin":                   0.5rem,
+  "close-size":                     2.5rem,
+  "dark-background-color" :         false,
+  "dark-color" :                   white,
+  "dark-header-border-bottom" :     false,
+  "dark-header-background-color" :  false,
+  "dark-header-color" :             false,
+  "header-background-color":        black,
+  "header-border-bottom":           none,
+  "header-color":                   white,
+  "header-padding":                 1rem,
+  "resizer-background-color":       rgb(221, 221, 221),
+  "resizer-background-color-hover": rgb(66, 66, 66),
+  "resizer-color":                  black,
+  "resizer-color-hover":            black,
+  "resizer-width":                  1rem,
+  "title-color":                    white,
+  "title-font-weight":              bold,
+  "title-icon-margin" :             0.5em,
+  "title-size" :                    "large",
+  "title-text-transform" :          null,
+  "sizes" : (
+    "small" : 30rem,
+    "large" : 80rem
+  ),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss 
+/// @example
+///   @include ulu.component-modal-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-modal-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "component-modal [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints modal component styles
+/// @example scss
+///  @include ulu.component-modal-styles();
+
+@mixin styles {
+  $prefix: selector.class("modal");
+
+  // // Before it's moved
+  [data-ulu-modal-builder] {
+    display: none;
+  }
+  
+  #{ $prefix } {
+    // Required for click outside
+    position: fixed;
+    // 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
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: layout.get("z-index-fixed") + 1;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    width: get("width");
+    min-width: 200px; // For resizing minimum width
+    min-height: get("height");
+    max-height: 100vh;
+    max-width: 100%;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    box-shadow: get("box-shadow");
+    border-radius: get("border-radius");
+    background-color: get("background-color");
+    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;
+    }
+    &::backdrop {
+      background: get("backdrop-color");
+      backdrop-filter: blur(get("backdrop-blur"));
+      animation: uluModalBackdropIn get("animation-duration") get("animation-timing-function");
+    }
+  }
+  #{ $prefix }__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 0;
+    padding: get("header-padding");
+    border-bottom: get("header-border-bottom");
+    background-color: get("header-background-color");
+    color: get("header-color");
+  }
+  #{ $prefix }__body {
+    flex: 1;
+    overflow: auto;
+    padding: get("body-padding");
+  }
+  #{ $prefix }__title {
+    display: flex;
+    align-items: baseline;
+    margin: 0;
+    color: color.get(get("title-color"));
+    font-weight: get("title-font-weight");
+    text-transform: get("title-text-transform");
+    @if (get("title-size")) {
+      @include typography.size(get("title-size"), $only-font-size: true);
+    }
+  }
+  #{ $prefix }__title-icon {
+    margin-right: get("title-icon-margin");
+  }
+  #{ $prefix }__close {
+    margin: 0 0 0 get("close-margin");
+    flex: 0 0 auto;
+    font-size: get("close-font-size");
+    width: get("close-size");
+    height: get("close-size");
+    background-color: get("close-background-color");
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: get("close-color");
+    &:hover {
+      background-color: get("close-background-color-hover");
+      color: get("close-color-hover");
+    }
+  }
+  #{ $prefix }__resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: get("resizer-width");
+    display: block;
+    cursor: col-resize;
+    background-color: get("resizer-background-color");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition-property: background-color, color;
+    transition-duration: 300ms;
+    transition-delay: 100ms; 
+    color: get("resizer-color");
+    &:hover {
+      color: get("resizer-color-hover");
+      background-color: get("resizer-background-color-hover");
+    }
+    #{ $prefix }--left & {
+      left: auto;
+      right: 0;
+    }
+  }
+  #{ $prefix }__content {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    line-height: 1.5;
+    color: rgba(0,0,0,.8);
+  }
+
+  // Modifiers
+  @each $name, $size-width in get("sizes") {
+    #{ $prefix }--#{ $name } {
+      width: $size-width;
+    }
+  }
+  #{ $prefix }--right,
+  #{ $prefix }--left {
+    border-radius: 0;
+    height: 100vh;
+    top: 0;
+    bottom: 0;
+    transform: none;
+  }
+  #{ $prefix }--top {
+    top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    transform: translateX(-50%);
+    animation: uluModalTopOut get("animation-duration-exit") get("animation-timing-function");
+    &[open] {
+      animation: uluModalTopIn get("animation-duration") get("animation-timing-function");
+    }
+  }
+  #{ $prefix }--bottom {
+    top: auto;
+    bottom: 0;
+    transform: translateX(-50%);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    animation: uluModalBottomOut get("animation-duration-exit") get("animation-timing-function");
+    &[open] {
+      animation: uluModalBottomIn get("animation-duration") get("animation-timing-function");
+    }
+  }
+  #{ $prefix }--right {
+    right: 0;
+    left: auto;
+    animation: uluModalRightOut get("animation-duration-exit") get("animation-timing-function");
+    &[open] {
+      animation: uluModalRightIn get("animation-duration") get("animation-timing-function");
+    }
+  }
+  #{ $prefix }--left {
+    left: 0;
+    animation: uluModalLeftOut get("animation-duration-exit") get("animation-timing-function");
+    &[open] {
+      animation: uluModalLeftIn get("animation-duration") get("animation-timing-function");
+    }
+  }
+  #{ $prefix }--no-header {
+    min-height: get("height-no-header");
+  }
+  #{ $prefix }--no-backdrop {
+    &::backdrop {
+      display: none;
+    }
+  }
+  #{ $prefix }--resize {
+    &#{ $prefix }--center  {
+      resize: both;  
+    }
+    &#{ $prefix }--right  {
+      padding-left: get("resizer-width");  
+    }
+    &#{ $prefix }--left  {
+      padding-right: get("resizer-width");  
+    }
+  }
+  #{ $prefix }--body-fills {
+    #{ $prefix }__header {
+      border-bottom: none;
+    }
+    #{ $prefix }__body {
+      padding: 0;
+    }
+  }
+
+  #{ $prefix }--no-min-height {
+    min-height: 0;
+  }
+  // Will display as content when printing
+  // NOTE: This will not work with native dialog
+  // Printing works with modal printer by cloning mechanism
+  // .modal--print {
+  //   @media screen {
+  //     display: block !important;
+  //     position: static;
+  //     top: auto;
+  //     left: auto;
+  //     right: auto;
+  //     bottom: auto;
+  //     width: auto;
+  //     max-width: none;
+  //   }
+  // }
+
+  @keyframes uluModalBackdropIn {
+    0% {
+      background-color: rgba(0, 0, 0, 0);
+      backdrop-filter: blur(0);
+    }
+    100% {
+      background-color: get("backdrop-color");
+      backdrop-filter: blur(get("backdrop-blur"));
+    }
+  }
+  @keyframes uluModalCenterIn {
+    from { 
+      opacity: 0; 
+      transform: translate(-50%, -40%);
+      display: none;
+    }
+    to { 
+      opacity: 1; 
+      transform: translate(-50%, -50%);
+      display: block;
+    }
+  }
+  @keyframes uluModalCenterOut {
+    from { 
+      opacity: 1; 
+      display: block;
+      transform: translate(-50%, -50%);
+    }
+    to { 
+      opacity: 0; 
+      display: none;
+      transform: translate(-50%, 40%);
+    }
+  }
+  @keyframes uluModalTopIn {
+    from { 
+      opacity: 0; 
+      transform: translate(-50%, -15%);
+      display: none;
+    }
+    to { 
+      opacity: 1; 
+      transform: translate(-50%, 0);
+      display: block;
+    }
+  }
+  @keyframes uluModalTopOut {
+    from { 
+      opacity: 1; 
+      display: block;
+      transform: translate(-50%, 0);
+    }
+    to { 
+      opacity: 0; 
+      display: none;
+      transform: translate(-50%, -15%);
+    }
+  }
+  @keyframes uluModalBottomIn {
+    from { 
+      opacity: 0; 
+      transform: translate(-50%, 15%);
+      display: none;
+    }
+    to { 
+      opacity: 1; 
+      transform: translate(-50%, 0);
+      display: block;
+    }
+  }
+  @keyframes uluModalBottomOut {
+    from { 
+      opacity: 1; 
+      display: block;
+      transform: translate(-50%, 0);
+    }
+    to { 
+      opacity: 0; 
+      display: none;
+      transform: translate(-50%, 15%);
+    }
+  }
+  @keyframes uluModalLeftIn {
+    from { 
+      opacity: 0; 
+      transform: translateX(-15%);
+      display: none;
+    }
+    to { 
+      opacity: 1; 
+      transform: translateX(0);
+      display: block;
+    }
+  }
+  @keyframes uluModalLeftOut {
+    from { 
+      opacity: 1; 
+      display: block;
+      transform: translateX(0);
+    }
+    to { 
+      opacity: 0; 
+      display: none;
+      transform: translateX(-15%);
+    }
+  }
+  @keyframes uluModalRightIn {
+    from { 
+      opacity: 0; 
+      transform: translateX(15%);
+      display: none;
+    }
+    to { 
+      opacity: 1; 
+      transform: translateX(0);
+      display: block;
+    }
+  }
+  @keyframes uluModalRightOut {
+    from { 
+      opacity: 1; 
+      display: block;
+      transform: translateX(0);
+    }
+    to { 
+      opacity: 0; 
+      display: none;
+      transform: translateX(15%);
+    }
+  }
+}
+

package/scss/components/_nav-strip.scss

@@ -0,0 +1,148 @@
+////
+/// @group nav-strip
+////
+/// A horizontal navigation strip or rail that displays a list of links to
+/// different pages or sections of a website. The active link, indicating the 
+/// current page or section, is visually emphasized with an underline.
+
+@use "sass:map";
+
+@use "../utils";
+@use "../color";
+@use "../selector";
+@use "../typography";
+
+/// Module Settings
+/// @type Map
+/// @prop {String} activeSelector [.is-active] Selector that portrays active status.
+/// @prop {Color} color [null] Type color for the nav-strip.
+/// @prop {Color} color-active [null] Type color for the nav-strip when active.
+/// @prop {Color} color-hover [null] Type color for the nav-strip when hovered or focused.
+/// @prop {CssValue} font-weight [null] Font weight of navstrip.
+/// @prop {Dimension} margin-between [2.25em] Margin between nav-strip items.
+/// @prop {Boolean} nowrap [true] Disables the word wrap.
+/// @prop {Dimension} padding-x [0] Horizontal padding for the nav-strip links.
+/// @prop {Dimension} padding-y [0.3em] Vertical padding for the nav-strip links.
+/// @prop {Dimension} padding-y-ruled [null] Vertical padding for the nav-strip links when using nav-strip--rule.
+/// @prop {Color} underline-color [orange] Underline color when link is active.
+/// @prop {Dimension} underline-size [3px] Size of the underline.
+/// @prop {Color} underline-color-hover [gray] Color of the underline when hovered or focused.
+/// @prop {String} rule-color [rule] Rule color. Uses rule.scss so the value of this options should be a variable from rule.scss.
+/// @prop {Dimension} rule-size [3px] Size of the nav-strip rule.
+/// @prop {Dimension} rule-offset [-3px] Offset the rule for the navstrip.
+
+$config: (
+  "activeSelector" : "&.is-active, &.has-active",
+  "color" : null,
+  "color-active" : null,
+  "color-hover" : null,
+  "font-weight" : null,
+  "margin-between" : 2.25em,
+  "padding-x" : 0,
+  "padding-y" : 0.3em,
+  "padding-y-ruled" : null,
+  "nowrap" : true,
+  "rule-color" : "rule",
+  "rule-offset" : -3px,
+  "rule-size" : 3px,
+  "underline-color" : orange,
+  "underline-color-hover" : gray,
+  "underline-size" : 3px,
+) !default;
+
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example
+///   @include ulu.component-nav-strip-set(( "property" : value ));
+
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+/// @example
+///   @include ulu.component-nav-strip-get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "card [config]");
+}
+
+/// Prints component styles
+/// @example
+///   @include ulu.component-nav-strip-styles();
+
+@mixin styles {
+  $prefix: selector.class("nav-strip");
+
+  // Original thought to not limit to direct child
+  // auto is for when we don't have control over markup
+  // The list descendants will be selected that way but the list is
+  // currently selecting any list/list-item
+  #{ $prefix }__list,
+  #{ $prefix }--auto ul {
+    display: flex;
+    line-height: typography.get("line-height-dense");
+  }
+  #{ $prefix }__item,
+  #{ $prefix }--auto li {
+    margin-right: get("margin-between");
+    // layout flex since items inside may not be the same height
+    display: flex;
+    align-items: flex-end;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  
+  #{ $prefix }__link,
+  #{ $prefix }--auto li > a,
+  #{ $prefix }--auto li > button {
+    display: block;
+    color: get("color");
+    padding: get("padding-y") get("padding-x");
+    border-top: get("underline-size") solid transparent;
+    border-bottom: get("underline-size") solid transparent;
+    font-weight: get("font-weight");
+    @if (get("nowrap")) {
+      white-space: nowrap;
+    }
+    &:hover,
+    &:focus {
+      border-bottom-color: get("underline-color-hover");
+      color: get("color-hover");
+    }
+    #{ get("activeSelector") } {
+      border-bottom-color: get("underline-color");
+      color: get("color-active");
+    }
+  }
+  
+  // Modifiers
+  #{ $prefix }--right {
+    #{ $prefix }__list,
+    &#{ $prefix }--auto ul {
+      justify-content: flex-end;
+    }
+  }
+  #{ $prefix }--center {
+    #{ $prefix }__list,
+    &#{ $prefix }--auto ul {
+      justify-content: center;
+    }
+  }
+  #{ $prefix }--rule {
+    #{ $prefix }__list,
+    &#{ $prefix }--auto ul {
+      border-bottom: get("rule-size") solid color.get(get("rule-color"));
+    }
+    #{ $prefix }__link,
+    &#{ $prefix }--auto li > a,
+    &#{ $prefix }--auto li > button {
+      margin-bottom: get("rule-offset");
+      padding-top: get("padding-y-ruled");
+      padding-bottom: get("padding-y-ruled");
+    }
+  }
+}