@ulu/frontend 0.1.0-beta.84 → 0.1.0-beta.86

package/scss/components/_table-sticky.scss

@@ -0,0 +1,185 @@
+////
+/// @group table-sticky
+/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "../selector";
+@use "../utils";
+@use "../color";
+@use "../element";
+
+
+// Used for function fallback
+$-fallbacks: (
+  "box-shadow" : (
+    "function" : meta.get-function("get", false, "element"),
+    "property" : "box-shadow"
+  ),
+);
+
+/// Module Settings
+/// @type Map
+/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow
+
+$config: (
+  "box-shadow": true,
+  "ui-color-disabled": #6490af,
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss
+///   @include ulu.component-table-sticky-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-table-sticky-get("property");
+
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "table-sticky [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+/// Prints component styles
+/// @demo table-sticky
+/// @example scss
+///  @include ulu.component-table-sticky-styles();
+
+@mixin styles {
+  $prefix: selector.class("table-sticky");
+
+  #{ $prefix } {
+    position: relative; // For controls
+    width: 100%;
+    * {
+      box-sizing: border-box;
+    }
+  }
+  #{ $prefix }__display {
+    overflow-x: auto;
+    overflow-y: hidden;
+    // scroll-behavior: smooth;
+  }
+  #{ $prefix }__table {
+    // border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  #{ $prefix }__sticky-wrap {
+    position: sticky;
+    top: -1px;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+    margin-bottom: 200px; // Distance from bottom of table to disable
+    margin-top: -200px; // Distance from bottom of table to disable
+  }
+  #{ $prefix }__sticky-wrap--first-column-header {
+    z-index: 4;
+  }
+  #{ $prefix }__sticky-wrap--controls {
+    margin-top: -52vh;
+    margin-bottom: 52vh;
+  }
+  #{ $prefix }__header-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+  }
+  #{ $prefix }__table--first-column-header,
+  #{ $prefix }__table--first-column {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: auto !important;
+  }
+  #{ $prefix }__table--first-column {
+    z-index: 3;
+  }
+  #{ $prefix }__table--header {
+    will-change: transform;
+  }
+  #{ $prefix }__hidden-visually {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+  // NOTE: The table caption needs to be positioned normally
+  // as display table-cell. Making absolute for hidden-visually 
+  // is causing chrome to add an anonymous cell to the table resulting in a 1px
+  // cell under the header. Which is messing up alignments. The only solution
+  // without removing the <caption> (not good for WCAG) is to position it at the 
+  // of the table so it doesn't affect the header alignments. Then cropping it to 
+  // a pixel and using negative margin to remove it's pixel from the flow beneath 
+  #{ $prefix }__caption {
+    margin-bottom: -1px;
+    height: 1px;
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: hidden;
+    display: none;
+  }
+  // Allow initiating scrolling by dragging first column
+  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
+    #{ $prefix }__table--first-column-header,
+    #{ $prefix }__table--first-column {
+      // pointer-events: none;
+      visibility: hidden;
+      // opacity: 0 !important;
+    }
+  }
+  #{ $prefix }__controls {
+    position: absolute;
+    top: 50vh;
+    right: 20px;
+  }
+  #{ $prefix }__controls-inner {
+    display: flex;
+  }
+  #{ $prefix }__control {
+    box-shadow: get("box-shadow");
+  }
+  #{ $prefix }__sort-button {
+    display: flex;
+    align-items: center;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: inherit;
+  }
+  #{ $prefix }__sort-button--focused {
+    outline: 2px auto Highlight;
+    outline: 2px auto -webkit-focus-ring-color;
+  }
+  #{ $prefix }__sort-icon {
+    margin-left: auto;
+    padding-left: 1em;
+    display: block;
+    opacity: 0.5;
+    .sort-active & {
+      opacity: 1;
+    }
+    .sort-ascending & {
+      #{ $prefix }__sort-icon-inner {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  #{ $prefix }__sort-icon-inner {
+    display: block;
+  }
+}
+
+

package/scss/components/_wysiwyg.scss

@@ -13,13 +13,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} img-excluded-selectors [(".wysiwyg__exclude",)]
-/// @prop {List} ul-excluded-selectors [(".list-lines", ".wysiwyg__exclude")]
-/// @prop {Map} headline-sizes [Map]
+/// @prop {String} exclude-selector [".wysiwyg__exclude"] Applied to all selectors
+/// @prop {List} img-excluded-selectors [()] Extra selectors to prevent <img> styling
+/// @prop {List} ul-excluded-selectors [(".list-lines",)] Extra selectors to prevent <ul> styling
+/// @prop {List} link-excluded-selectors [("[class]",)] Extra selectors to prevent <a> styling
+/// @prop {Map} headline-sizes [Map] Headlines from typography sizes (ElementName : TypographySizeName, ...)
 
 $config: (
-  "img-excluded-selectors" : (".wysiwyg__exclude",),
-  "ul-excluded-selectors" : (".list-lines", ".wysiwyg__exclude"),
+  "exclude-selector" : ".wysiwyg__exclude",
+  "img-excluded-selectors" : (),
+  "ul-excluded-selectors" : (".list-lines",),
+  "link-excluded-selectors" : ("[class]",),
   "headline-sizes" : (
     "h2" : "h2",
     "h3" : "h3",
@@ -66,24 +70,28 @@ $config: (
 
 // Internal mixin
 @mixin _styles() {
-  $ul-excludes: list.join(get("ul-excluded-selectors"), (), $separator: comma);
-  $img-excludes: list.join(get("img-excluded-selectors"), (), $separator: comma);
+  $exclude-selector: get("exclude-selector");
+  $ul-excludes: list.join(get("ul-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $img-excludes: list.join(get("img-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $link-excludes: list.join(get("link-excluded-selectors"), ($exclude-selector), $separator: comma);
 
-  a:not([class]) {
+  a:not(#{ $link-excludes }) {
     @include element.link($visited: true, $active: true);
   }
   ul:not(#{ $ul-excludes }) {
     @include element.styles-unordered-list();
+    margin-bottom: element.get("margin");
   }
-  ol {
+  ol:not(#{ $exclude-selector }) {
     @include element.styles-ordered-list(inherit);
-  }
-  ul,
-  ol {
     margin-bottom: element.get("margin");
   }
+  // ul,
+  // ol {
+  //   margin-bottom: element.get("margin");
+  // }
   @each $element, $size in get("headline-sizes") {
-    #{ $element } {
+    #{ $element }:not(#{ $exclude-selector }) {
       @include typography.size($size);
     }
   }