@ulu/frontend 0.0.3 → 0.0.5

package/trash/scss-before-cqc-update/components/_grid.scss

@@ -1,671 +0,0 @@
-////
-/// @group grid
-////
-/// Layout grid that uses attributes instead of classes
-/// - See the core layout module for changing defaults
-
-/// @version: 1.0.7
-
-/// HTML Attribute to use for selecting
-/// @example markup
-///     <!-- instead it styles like: -->
-///     <div data-grid="columns: 12, gutters: true">
-///       <div data-grid-item="width: 4, width-medium: 6, offset-medium: 3">
-///       </div>
-///     </div>
-///
-///     <!-- or if using container -->
-///     <div data-grid-container>
-///       <div data-grid="columns: 12, gutters: true">
-///         <div data-grid-item="width: 4, width-medium: 6, offset-medium: 3">
-///         </div>
-///       </div>
-///     </div>
-/// 
-
-@use "sass:map";
-@use "sass:math";
-@use "../breakpoint";
-@use "../color";
-@use "../layout";
-@use "../utils";
-
-/// Module Settings
-/// @type Map
-/// @prop {String} attribute ["data-grid"] Default attribute to use for grid mixin
-/// @prop {String} attributeContainer ["data-grid-container"] Default container attribute to use for grid mixin
-/// @prop {String} position-class-column-first ["position-column-first"] Classname for position system (JS) grid uses to display rules (layout can flow, script will update classes)
-/// @prop {String} position-class-column-last ["position-column-last"] See definition above
-/// @prop {String} position-class-row-first ["position-row-first"] See definition above
-/// @prop {String} position-class-row-last ["position-row-last"] See definition above
-
-$config: (
-  "attribute"                  : "data-grid",
-  "attribute-container"        : "data-grid-container",
-  "position-class-column-first": "position-column-first",
-  "position-class-column-last" : "position-column-last",
-  "position-class-row-first"   : "position-row-first",
-  "position-class-row-last"    : "position-row-last"
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss
-///   @include module-name.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 module-name.get("property");
-
-@function get($name) {
-  @return utils.require-map-get($config, $name, "attribute-grid [config]");
-}
-
-/// Prints the default grid
-/// - User can choose not to output this and use `attribute-grid.create()` instead
-
-@mixin styles {
-  @include create();
-}
-
-
-/// Creates grid css (variation of original data-grid)
-/// @param {Number} $columns Columns in grid
-/// @param {Number} $breakpoint Breakpoint key for starting the grid
-/// @param {Map} $extra-breakpoints Map with other breakpoints to add (map of breakpoint and gutter see config.extra-breakpoints for an example (smalles to largest)
-/// @param {Number} $gutter Size in pixels for the gutters
-/// @param {Boolean} $include-rules Print styles for including rules
-/// @param {Number} $rule-size Size of the rule (border/seperator)
-/// @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 {Boolean} $include-container [false] Whether to include container styles, container adds matching grid gutter to left/right side of grid. can be used for edge situations where negative margins are causing overflow
-/// @param {String} $container-attribute [defaults to config] Attribute to use for selecting grid container
-/// @param {Boolean} $container-gutter-scales [true] Print container styles for all gutter scales passed (reduce output)
-
-@mixin create(
-  $columns: 12,
-  $breakpoint: layout.get-default-breakpoint(),
-  $extra-breakpoints: if(breakpoint.exists("large"), layout.get("extra-breakpoints"), false),
-  $gutter: layout.get("gutter"),
-  $include-rules: false,
-  $rule-size: 1px,
-  $rule-color: color.get("rule"),
-  $extra-rule-styles: null,
-  $extra-gutter-scales: null,
-  $attribute: get("attribute"),
-  $include-container: false,
-  $container-attribute: get("attribute-container"),
-  $container-gutter-scales: true
-) {
-  $attribute-item: "#{ $attribute }-item";
-  $select-grid: '[#{ $attribute }*="columns: #{ $columns }"]';
-  $select-item: '[#{ $attribute-item }]';
-  $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");
-  $position-class-column-last: get("position-class-column-last");
-  $position-class-row-first: get("position-class-row-first");
-  $position-class-row-last: get("position-class-row-last");
-
-  #{ $select-grid } {
-    @include layout.clearfix(); // For legacy browsers
-
-    // Ensure empty elements still take up space in layout
-    > #{ $select-item } {
-      min-height: 1px; 
-      width: 100%;
-    }
-    // This is for value of true and also covers all options below
-    &#{'[#{ $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;
-            }
-          }
-        }
-      }
-    }
-    &#{'[#{ $attribute }*="gutters-row: top"]'} { 
-      > #{ $select-item } {
-        &.#{ $position-class-row-last } {
-          padding-bottom: 0;
-        }
-      }
-    }
-    &#{'[#{ $attribute }*="gutters-row: bottom"]'} { 
-      > #{ $select-item } {
-        &.#{ $position-class-row-first } {
-          padding-top: 0;
-        }
-      }
-    }
-    &#{'[#{ $attribute }*="gutters-row: fit"]'} { 
-      margin-top: -$gutter;
-      margin-bottom: -$gutter;
-      @if $extra-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
-            margin-top: -($gutter * $amount);
-            margin-bottom: -($gutter * $amount);
-          }
-        }
-      }
-    }
-    // Rules: Row
-    &#{'[#{ $attribute }*="rules-row:"]'} { 
-      > #{ $select-item } {
-        &#{ $select-rule-row } {
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: $rule-size;
-          background: color.get($rule-color);
-        }
-      }
-    }
-    // Rules: Applies to both column and row
-    &#{'[#{ $attribute }*="rules"]'} { 
-      > #{ $select-item } {
-        position: relative;
-      }
-    }
-    // Rules: Column
-    &#{'[#{ $attribute }*="rules-column:"]'} { 
-      > #{ $select-item } {
-        &#{ $select-rule-col } {
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          width: $rule-size;
-          background: color.get($rule-color);
-        }
-      }
-    }
-    // Options for the left or right
-    @include -create-rule-col-position(
-      $position: "left", 
-      $size: $rule-size, 
-      $attribute: $attribute, 
-      $select-item: $select-item, 
-      $select-rule-col: $select-rule-col, 
-      $end-class: $position-class-column-first
-    );
-    @include -create-rule-col-position(
-      $position: "right", 
-      $size: $rule-size, 
-      $attribute: $attribute, 
-      $select-item: $select-item, 
-      $select-rule-col: $select-rule-col, 
-      $end-class: $position-class-column-last
-    );
-    &#{'[#{ $attribute }*="rules-column-align: gutter"]'} {
-      > #{ $select-item } {
-        &#{ $select-rule-col } {
-          top: $gutter;
-          bottom: $gutter;
-        }
-      }
-      @if $extra-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
-            > #{ $select-item } {
-              &#{ $select-rule-col } {
-                top: $gutter * $amount;
-                bottom: $gutter * $amount;
-              }
-            }
-          }
-        }
-      }
-    }
-    // Options for the left or right
-    @include -create-rule-row-position(
-      $position: "top", 
-      $size: $rule-size, 
-      $attribute: $attribute, 
-      $select-item: $select-item, 
-      $select-rule-row: $select-rule-row, 
-      $between: false
-    );
-    @include -create-rule-row-position(
-      $position: "bottom", 
-      $size: $rule-size, 
-      $attribute: $attribute, 
-      $select-item: $select-item, 
-      $select-rule-row: $select-rule-row, 
-      $between: false
-    );
-
-    &#{'[#{ $attribute }*="rules-row: between"]'} {
-      > #{ $select-item } {
-        &#{ $select-rule-row } {
-          bottom: math.floor(math.div($rule-size, 2)) * -1;
-        }
-        // For removing the rule per row (via equal heights for now)
-        &.#{ $position-class-row-last } {
-          &#{ $select-rule-row } {
-            content: none;
-          }
-        }
-      }
-    }
-    &#{'[#{ $attribute }*="rules-row-align: gutter"]'} {
-      > #{ $select-item } {
-        &#{ $select-rule-row } {
-          @include breakpoint.min($breakpoint) {
-            left: $gutter;
-            right: $gutter;
-          }
-        }
-      }
-      @if $extra-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
-            > #{ $select-item } {
-              &#{ $select-rule-row } {
-                @include breakpoint.min($breakpoint) {
-                  left: $gutter * $amount;
-                  right: $gutter * $amount;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    &#{'[#{ $attribute }*="rules-row-persist: true"]'},
-    &#{'[#{ $attribute }*="rules-row-stacked-only: true"]'} {
-      > #{ $select-item } {
-        &#{ $select-rule-row } {
-          content: '';
-        }
-      }
-    }
-    // IE for mobile/small (non grid / stacked)
-    &#{'[#{ $attribute }*="rules-row-stacked-only: true"]'} {
-      > #{ $select-item } {
-        &#{ $select-rule-row } {
-          @include breakpoint.min($breakpoint) {
-            content: none !important;
-          }
-        }
-      }
-    }
-  }
-
-  @include breakpoint.min($breakpoint) {
-
-    $select-gutter-false: '[#{ $attribute }*="gutters: false"]';
-    $select-gutter-false-child: '#{ $select-container }:has(>#{ $select-gutter-false })';
-
-    @if $include-container {
-      #{ $select-container } {
-        padding-left: $gutter;
-        padding-right: $gutter;
-      }
-      #{ $select-gutter-false-child } {
-        padding-left: 0;
-        padding-right: 0;
-      }
-      @if $extra-gutter-scales and $container-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          #{'#{ $select-container }:has(>[#{ $attribute }*="gutter-scale: #{ $scale }"])'} { 
-            padding-left: ($gutter * $amount);
-            padding-right: ($gutter * $amount);
-          }
-        }
-      }
-    }
-    // Select the attribute with matching column count
-    #{ $select-grid } {
-      // Defaults for grid an item
-      display: flex;
-      flex-flow: row wrap;
-      align-items: stretch;
-      margin-left: -$gutter;
-      margin-right: -$gutter;
-
-      > #{ $select-item } {
-        float: left; // Fallback
-        padding-left: $gutter;
-        padding-right: $gutter;
-      }
-
-      @if $extra-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
-            margin-left: -($gutter * $amount);
-            margin-right: -($gutter * $amount);
-
-            > #{ $select-item } {
-              padding-left: $gutter * $amount;
-              padding-right: $gutter * $amount;
-            }
-          }
-        }
-      }
-      
-      // Alignment options
-      &#{'[#{ $attribute }*="justify: center"]'} { 
-        justify-content: center;  
-      }
-      &#{'[#{ $attribute }*="justify: end"]'} { 
-        justify-content: flex-end;  
-      }
-      &#{'[#{ $attribute }*="align: center"]'} { 
-        align-items: center;  
-      }
-      &#{'[#{ $attribute }*="align: end"]'} { 
-        align-items: flex-end;
-      }
-      &#{'[#{ $attribute }*="align: start"]'} { 
-        align-items: flex-start; 
-      }
-      // Alignment of the children when using stretch
-      // - There is no stetch-start (that's defualt);
-      // - There is no stetch-middle (that's covered by stretch-);
-      &#{'[#{ $attribute }*="align: stretch-"]'} { 
-        // set the child to display as a single flex item
-        > #{ $select-item } {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-      }
-      &#{'[#{ $attribute }*="align: stretch-end"]'} { 
-        > #{ $select-item } {
-          justify-content: flex-end;
-        }
-      }
-      // Other options
-      &#{ $select-gutter-false } { 
-        margin-left: 0;
-        margin-right: 0;
-        > #{ $select-item } {
-          padding-left: 0;
-          padding-right: 0;
-        }
-      }
-      // Activate Rules
-      &#{'[#{ $attribute }*="rules-column:"]'} {
-        > #{ $select-item } {
-          &#{ $select-rule-col } {
-            content: '';
-          }
-        }
-      }
-      &#{'[#{ $attribute }*="rules-row:"]'} {
-        > #{ $select-item } {
-          &#{ $select-rule-row } {
-            content: '';
-          }
-        }
-      }
-      // Override first or last column removing the rule using matching specificity
-      &#{'[#{ $attribute }*="rules-column:"][#{ $attribute }*="rules-column-ends: true"]'} {
-        > #{ $select-item } {
-          &#{ $select-rule-col } {
-            content: '';
-          }
-        }
-      }
-      // Generated props for item
-      @include -create-column-widths(
-        $columns: $columns,
-        $attribute-item: $attribute-item,
-        $suffix: ''
-      );
-      @include -create-column-offsets(
-        $columns: $columns,
-        $attribute-item: $attribute-item,
-        $suffix: ''
-      );
-    }
-  }
-  @if $extra-breakpoints {
-    @each $name, $options in $extra-breakpoints {
-      $g: map.get($options, "gutter");
-      @include -create-extra-breakpoint(
-        $name: $name, 
-        $breakpoint: map.get($options, "breakpoint"),
-        $gutter: if($g, $g, $gutter),
-        $columns: $columns,
-        $attribute: $attribute,
-        $attribute-item: $attribute-item,
-        $select-grid: $select-grid,
-        $select-item: $select-item,
-        $extra-gutter-scales: $extra-gutter-scales,
-        $include-container: $include-container,
-        $select-container: $select-container,
-        $container-gutter-scales: $container-gutter-scales
-      );
-    }
-  }
-  @if $extra-rule-styles {
-    @each $name, $options in $extra-rule-styles {
-      $color: utils.require-map-get($options, "color", "grid [extra rule style]");
-      $size: utils.require-map-get($options, "size", "grid [extra rule style]");
-      #{ $select-grid } {
-
-        &#{'[#{ $attribute }*="rules-column-style: #{ $name }"]'} {
-          > #{ $select-item } {
-            &#{ $select-rule-col } {
-              background-color: color.get($color);
-              width: $size;
-            }
-          }
-          @include -create-rule-col-position(
-            $position: "left", 
-            $size: $size, 
-            $attribute: $attribute, 
-            $select-item: $select-item, 
-            $select-rule-col: $select-rule-col, 
-            $end-class: false
-          );
-          @include -create-rule-col-position(
-            $position: "right", 
-            $size: $size, 
-            $attribute: $attribute, 
-            $select-item: $select-item, 
-            $select-rule-col: $select-rule-col, 
-            $end-class: false
-          );
-        }
-        &#{'[#{ $attribute }*="rules-row-style: #{ $name }"]'} {
-          > #{ $select-item } {
-            &#{ $select-rule-row } {
-              background-color: $color;
-              height: $size;
-            }
-          }
-          @include -create-rule-row-position(
-            $position: "top", 
-            $size: $size, 
-            $attribute: $attribute, 
-            $select-item: $select-item, 
-            $select-rule-row: $select-rule-row, 
-            $between: false
-          );
-          @include -create-rule-row-position(
-            $position: "bottom", 
-            $size: $size, 
-            $attribute: $attribute, 
-            $select-item: $select-item, 
-            $select-rule-row: $select-rule-row, 
-            $between: false
-          );
-          @include -create-rule-row-position(
-            $position: "bottom", 
-            $size: $size, 
-            $attribute: $attribute, 
-            $select-item: $select-item, 
-            $select-rule-row: $select-rule-row, 
-            $between: true
-          );
-        }
-      }
-    }
-  }
-}
-
-@mixin -create-extra-breakpoint(
-  $name, 
-  $breakpoint,
-  $gutter,
-  $columns,
-  $attribute,
-  $attribute-item,
-  $select-grid,
-  $select-item,
-  $extra-gutter-scales,
-  $include-container,
-  $select-container,
-  $container-gutter-scales
-) {
-  @include breakpoint.min($breakpoint) {
-
-    @if $include-container {
-      #{ $select-container } {
-        padding-left: $gutter;
-        padding-right: $gutter;
-      }
-      @if $extra-gutter-scales and $container-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          #{'#{ $select-container }:has(>[#{ $attribute }*="gutter-scale: #{ $scale }"])'} { 
-            padding-left: ($gutter * $amount);
-            padding-right: ($gutter * $amount);
-          }
-        }
-      }
-    }
-
-    #{ $select-grid } {
-      margin-left: -$gutter;
-      margin-right: -$gutter;
-
-      > #{ $select-item } {
-        padding-left: $gutter;
-        padding-right: $gutter;
-      }
-      
-      @if $extra-gutter-scales {
-        @each $scale, $amount in $extra-gutter-scales {
-          &#{'[#{ $attribute }*="gutter-scale: #{ $scale }"]'} { 
-            margin-left: -($gutter * $amount);
-            margin-right: -($gutter * $amount);
-            > #{ $select-item } {
-              padding-left: $gutter * $amount;
-              padding-right: $gutter * $amount;
-            }
-          }
-        }
-      }
-
-      @include -create-column-widths(
-        $columns: $columns,
-        $attribute-item: $attribute-item,
-        $suffix: "-#{ $name }"
-      );
-      @include -create-column-offsets(
-        $columns: $columns,
-        $attribute-item: $attribute-item,
-        $suffix: "-#{ $name }"
-      );
-    }
-  }
-}
-
-@mixin -create-column-widths(
-  $columns,
-  $attribute-item,
-  $suffix: ''
-) {
-  $column-width: math.div(100%, $columns);
-
-  @for $i from 1 through $columns {
-    $width: $column-width * $i;
-    & > #{'[#{ $attribute-item }*="width#{ $suffix }: #{ $i }"]'} {
-      width: $width;
-      flex-basis: $width;
-      max-width: $width;
-    }
-  }
-}  
-
-@mixin -create-column-offsets(
-  $columns,
-  $attribute-item,
-  $suffix: ''
-) {
-  $column-width: math.div(100%, $columns);
-
-  @for $i from 1 through $columns {
-    & > #{'[#{ $attribute-item }*="offset#{ $suffix }: #{ $i }"]'} {
-      margin-left: $column-width * $i;
-    }
-  }
-  // For Zero (in case using breakpoints to remove)
-  & > #{'[#{ $attribute-item }*="offset#{ $suffix }: 0"]'} {
-    margin-left: 0;
-  }
-}
-
-@mixin -create-rule-col-position(
-  $position, 
-  $size, 
-  $attribute, 
-  $select-item, 
-  $select-rule-col, 
-  $end-class: false
-) {
-  &#{'[#{ $attribute }*="rules-column: #{ $position }"]'} {
-    > #{ $select-item } {
-      &#{ $select-rule-col } {
-        #{$position}: math.floor(math.div($size, 2)) * -1;
-      }
-      // For removing the rule per row (via equal heights for now)
-      @if $end-class {
-        &.#{ $end-class } {
-          &#{ $select-rule-col } {
-            content: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin -create-rule-row-position(
-  $position, 
-  $size, 
-  $attribute, 
-  $select-item, 
-  $select-rule-row, 
-  $between: false
-) {
-  $key: if($between, 'between', $position);
-
-  &#{'[#{ $attribute }*="rules-row: #{ $key }"]'} {
-    > #{ $select-item } {
-      &#{ $select-rule-row } {
-        content: $size;
-        #{ $position }: math.floor(math.div($size, 2)) * -1;
-      }
-    }
-  }
-}