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

package/scss/components/_table-sticky.scss

@@ -1,185 +0,0 @@
-////
-/// @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;
-  }
-}
-
-