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

package/scss/components/_css-icon.scss

@@ -30,6 +30,7 @@
 /// @prop {Dimension} size [1.1em] The width, height and font size of the css-icon.
 /// @prop {Dimension} stroke-border-radius [1px] The rounding of the strokes for css-icon.
 /// @prop {Dimension} stroke-width [0.15em] The stroke width of the css-icon.
+/// @prop {Dimension} drag-gap-multiplier [0.75] Multiplier used to adjust the space between drag-x/drag-y icons (used for all stroke sizes)
 /// @prop {Dimension} text-offset [0.05em] When using an icon with text, adds a margin to match the text height.
 /// @prop {Dimension} text-size [1em] font-size of the icon when using text.
 /// @prop {Dimension} vertical-align [-0.2em] Vertical-align for css-icon 
@@ -45,6 +46,7 @@ $config: (
   "size" : 1.15em,
   "stroke-border-radius" : null,
   "stroke-width" : 3px,
+  "drag-gap-multiplier" : 0.75,
   "text-offset" : 0.05em,
   "text-size" : 1em,
   "vertical-align" : -0.25em,
@@ -122,8 +124,8 @@ $config: (
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     // Icons that share pseudos for strokes
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       // content: "";
       display: block;
       position: absolute;
@@ -186,7 +188,7 @@ $config: (
   
   .css-icon--circle-info,
   .css-icon--circle-question {
-    &:before {
+    &::before {
       content: "i";
       text-align: center;
       font-size: get("text-size");
@@ -206,7 +208,7 @@ $config: (
     }
   }
   .css-icon--circle-question { 
-    &:before {
+    &::before {
       content: "?";
     }
   }
@@ -227,13 +229,13 @@ $config: (
     clip-path: polygon(10% 10%, 90% 50%, 10% 90%);
   }
   [class*="css-icon--arrow"] {
-    &:before {
+    &::before {
       content: "";
       width: 70%;
       left: 0;
     }
     // Note triangle clip-path is defined above with the solid triangle
-    &:after {
+    &::after {
       content: "";
       border-radius: 0;
       height: 100%;
@@ -244,8 +246,8 @@ $config: (
   }
   [class*="css-icon--angle"] {
     transform: rotate(135deg);
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       content: "";
       top: 30%;
       left: 30%;
@@ -253,14 +255,14 @@ $config: (
       transform: none;
       margin-top: 0;
     }
-    &:after {
+    &::after {
       width: $stroke-width;
       height: 70%;
     }
   }
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
     &[class*="css-icon--angle"] {
-      &:after {
+      &::after {
         width: $alt-width;
       }
     }
@@ -283,26 +285,26 @@ $config: (
 
   .css-icon--plus,
   .css-icon--plus-to-minus {
-    &:before {
+    &::before {
       transform: translateX(-50%) rotate(90deg);
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--minus {
-    &:before {
+    &::before {
       content: none;
     }
-    &:after {
+    &::after {
       transform: translateX(-50%);
     }
   }
   .css-icon--close {
-    &:before {
+    &::before {
       transform: translate(-50%) rotate(45deg);
     }
-    &:after {
+    &::after {
       transform: translate(-50%) rotate(-45deg);
     }
   }
@@ -310,21 +312,23 @@ $config: (
     &::before {
       content: "";
       // Make up for margin-top by default
-      margin-top: -($stroke-width + $stroke-width);
+      margin-top: -(($stroke-width + $stroke-width) * get("drag-gap-multiplier"));
     }
     &::after {
       content: "";
-      margin-top: $stroke-width;
+      margin-top: $stroke-width * get("drag-gap-multiplier");
     }
   }
 
   @include for-each-stroke() using ($alt-width, $alt-border-radius) {
+    // $drag-gap-multiplier: map.get($props, "drag-gap-multiplier");
+    // $drag-gap-multiplier: if($drag-gap-multiplier, $drag-gap-multiplier, 0);
     &[class*="css-icon--drag"] {
       &::before {
-        margin-top: -($alt-width + $alt-width);
+        margin-top: -(($alt-width + $alt-width) * get("drag-gap-multiplier"));
       }
       &::after {
-        margin-top: $alt-width;
+        margin-top: $alt-width * get("drag-gap-multiplier");
       }
     }
   }
@@ -425,7 +429,7 @@ $config: (
         transition: none;
         transform: translate(-50%) rotate(-45deg);
       }
-      &:before {
+      &::before {
         box-shadow: none;
         transform: translate(-50%) rotate(45deg);
       }

package/scss/components/_data-grid.scss

@@ -38,6 +38,7 @@
 $config: (
   "attribute":           "data-grid",
   "attribute-container": "data-grid-container",
+  "attribute-init":      "data-grid-init",
   "breakpoint":          false,                   // Fallback to default
   "columns":             12,
   "gutter":              14px,
@@ -49,6 +50,7 @@ $config: (
   "sticky-top":                  var(--ulu-sticky-top-offset, 0),
   "rule-color" : "rule",
   "rule-size" : 1px,
+  "rule-fade-duration" : 400ms,
   "extra-breakpoints":   (
     "medium" : (
       "breakpoint": "medium",
@@ -134,6 +136,7 @@ $config: (
 /// @param {Map} $extra-rule-styles Map of other rule styles to add (map of maps of size, and color), key is the styles name ("name": ("size" : 4px, "color" : "color name" || color))
 /// @param {String} $extra-gutter-scales A map of gutter scales used like `data-grid="gutter-scale: large`, configuration map property becomes scale name and value is the amount (multiplier) to apply to the grid's gutter ie `( "large" : 2.25 )`
 /// @param {Map} $attribute Attribute to use for selecting grid and children. Children attribute get's "-item" as a suffix ("ie. data-grid, data-grid-item")
+/// @param {CssDuration} $rule-fade-duration The amount of time for rules to fade in (after init, script positioning), set to falsey value to disable rule fade in (rules will always be shown)
 
 @mixin create(
   $columns: get("columns"),
@@ -146,17 +149,20 @@ $config: (
   $extra-rule-styles: get("extra-rule-styles"),
   $extra-gutter-scales: get("extra-gutter-scales"),
   $attribute: get("attribute"),
+  $attribute-init: get("attribute-init"),
   $include-container: true,
   $container-attribute: get("attribute-container"),
   $container-gutter-scales: true,
   $sticky-top: get("sticky-top"),
-  $sticky-bottom: get("sticky-bottom")
+  $sticky-bottom: get("sticky-bottom"),
+  $rule-fade-duration: get("rule-fade-duration")
 ) {
   $attribute-item: "#{ $attribute }-item";
   $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
+  $select-grid-not-init: '[#{ $attribute }]:not([#{ $attribute-init }])';
   $select-item: '[#{ $attribute-item }]';
-  $select-rule-col: ":before";
-  $select-rule-row: ":after";
+  $select-rule-col: "::before";
+  $select-rule-row: "::after";
   $select-container: "[#{ $container-attribute }]";
   // These through off syntax highlighting when inside interpolation
   $position-class-column-first: get("position-class-column-first");
@@ -215,6 +221,20 @@ $config: (
         }
       }
     }
+    // Rules: Applies to both column and row
+    &#{'[#{ $attribute }*="rules"]'} { 
+      > #{ $select-item } {
+        position: relative;
+        @if ($rule-fade-duration) {
+          &#{ $select-rule-col },
+          &#{ $select-rule-row } {
+            // For when grid init fades them in
+            opacity: 1;
+            transition: opacity $rule-fade-duration ease-in; 
+          }
+        }
+      }
+    }
     // Rules: Row
     &#{'[#{ $attribute }*="rules-row:"]'} { 
       > #{ $select-item } {
@@ -227,12 +247,6 @@ $config: (
         }
       }
     }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
     // Rules: Column
     &#{'[#{ $attribute }*="rules-column:"]'} { 
       > #{ $select-item } {
@@ -580,6 +594,21 @@ $config: (
       }
     }
   }
+
+  // Disable grid rules until init attribute it present (from positioning script)
+  // - In order to keep the rules for this compact it will only hide them if the init
+  //   is not present
+  
+  @if ($rule-fade-duration) {
+    #{ $select-grid-not-init } {
+      > #{ $select-item } {
+        &#{ $select-rule-col },
+        &#{ $select-rule-row } {
+          opacity: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 @mixin -create-extra-breakpoint(
@@ -635,6 +664,23 @@ $config: (
         }
       }
 
+      &#{'[#{ $attribute }*="gutters-row:"]'} { 
+        > #{ $select-item } {
+          padding-top:  $gutter;
+          padding-bottom: $gutter;
+        }
+        @if $extra-gutter-scales {
+          @each $scale, $amount in $extra-gutter-scales {
+            &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
+              > #{ $select-item } {
+                padding-top:  $gutter * $amount;
+                padding-bottom: $gutter * $amount;
+              }
+            }
+          }
+        }
+      }
+
       @include -create-column-widths(
         $columns: $columns,
         $attribute-item: $attribute-item,

package/scss/components/_data-table.scss

@@ -24,16 +24,47 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
+/// @prop {Dimension} cell-padding [(0.5em,)] Padding of the th and td elements.
+/// @prop {CssValue} text-align [left] Text align of the table.
+/// @prop {String} type-size ["small"] Font size of the table.
+/// @prop {Color} background-color [white] Background color of table container.
+/// @prop {Color} header-background-color [#f5f4f4] Background color of the the table header.
+/// @prop {Color} body-background-color [white] Background color of table body.
+/// @prop {Color} footer-background-color [#f3f3f3] Background color of table footer.
+/// @prop {Color} color ["type-secondary"] Font color of the table.
+/// @prop {Color} header-color ["headline"] Font color for the table header.
+/// @prop {Color} footer-color [null] Font color for the table footer.
+/// @prop {Number} line-height [true] Line height for the table.
+/// @prop {Dimension} column-min-width [6em] Min-width of the th element.
+/// @prop {Dimension} first-column-large-min-width [15em] When using "--large-first" style, the min width of the first th element.
+/// @prop {Dimension} border-width [1px] Border width of the table.
+/// @prop {Color} border-color [#dddddd] Border color for the table.
+/// @prop {Color} striped-row-background-color [#eeeeee] Background color for even rows if using "--striped" styling.
+/// @prop {Color} muted-row-background-color [#ccc] Background color for odd rows if using "--striped" styling.
+/// @prop {Color} muted-row-border-color [null] Border color for odd rows if using "--striped" styling.
+/// @prop {Color} highlighted-row-background-color [#ccc] Background color row if using "__row-highlighted" styling.
+/// @prop {Color} highlighted-row-border-color [null]  Border color row if using "__row-highlighted" styling.
+/// @prop {Dimension} large-header-cell-padding-y [1em]  Vertical padding of header if using "--large-header" styling.
+/// @prop {String} caption-type-size ["large"] Type size of table caption.
+/// @prop {Color} caption-background-color [null] Background color of table caption.
+/// @prop {CssValue} caption-font-weight [bold] Font weight of caption.
+/// @prop {CssBalue} caption-border-bottom [null] Bottom border of the caption.
+/// @prop {Dimension} caption-margin [(0,)] Margin of the caption.
+/// @prop {Dimension} caption-padding [(0.65em 0)] Padding of the caption.
+/// @prop {CssValue} caption-text-align [left] Text align of the caption.
+/// @prop {String} extra-selector [".wysiwyg table"] Additional selectors to include table styling.
 
 $config: (
   "cell-padding" : (0.5em,),
   "text-align" : left,
   "type-size" : "small",
   "background-color" : white,
-  "header-background-color" : #eeeeee,
+  "header-background-color" : #f5f4f4,
   "body-background-color" : white,
   "footer-background-color" : #f3f3f3,
   "color" : "type-secondary",
+  "header-color" : "headline",
+  "footer-color" : null,
   "line-height" : true,
   "column-min-width" : 6em,
   "first-column-large-min-width" : 15em,
@@ -48,8 +79,9 @@ $config: (
   "caption-type-size" : "large",
   "caption-background-color" : null,
   "caption-font-weight" : bold,
+  "caption-border-bottom" : null,
   "caption-margin" : (0,),
-  "caption-padding" : (0.5em,),
+  "caption-padding" : (0.65em 0),
   "caption-text-align" : left,
   "extra-selector" : ".wysiwyg table"
 ) !default;
@@ -113,7 +145,7 @@ $config: (
       margin: get("caption-margin");
       padding: get("caption-padding");
       background-color: get("caption-background-color");
-      border-bottom: $border;
+      border-bottom: get("caption-border-bottom");
     }
     th,
     tr,
@@ -137,11 +169,15 @@ $config: (
     thead tr {
       background-color: color.get(get("header-background-color"));
     }
+    thead th {
+      color: color.get(get("header-color"));
+    }
     tbody tr {
       background-color: color.get(get("body-background-color"));
     }
     tfoot tr {
       background-color: color.get(get("footer-background-color"));
+      color: color.get(get("footer-color"));
     }
     th,
     td {

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");
 
@@ -193,7 +198,7 @@ $config: (
       color: color.get(get("title-color-image"));
       @if(get("bottom-shadow")) {
         // bottom position includes padding so that the shadow 
-        &:after {
+        &::after {
           content: '';
           display: block;
           position: absolute;