@ulu/frontend 0.0.3

package/trash/scss-before-cqc-update/_layout.scss

@@ -0,0 +1,247 @@
+////
+/// @group layout
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
+@use "breakpoint";
+@use "utils";
+@use "calculate";
+@use "breakpoint";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.max-width Common max-width for site
+/// @prop {Number} $config.margin Common margin for site
+/// @prop {Number} $config.z-index-fixed Common z-index, above everything
+/// @prop {Number} $config.z-index-sticky Common z-index for sticky or stuck items
+/// @prop {Number} $config.z-index-above Common z-index, below sticky
+/// @prop {Number} columns [12] Default for grid mixins
+/// @prop {Number} gutter [14px] Default gutter for grid mixin
+/// @prop {Boolean|String} breakpoint [false] Change the default breakpoint, if falsy will get default breakpoint from breakpoint module
+/// @prop {Map} extra-breakpoints [Medium and large breakpint configs] Default extra breakpoints for grid mixins
+$config: (
+  "max-width":         90rem,
+  "margin":            2rem,
+  "z-index-sticky":    100,
+  "z-index-above":     450,
+  "z-index-fixed":     1000,
+  "columns":            12,
+  "gutter":             14px,
+  "breakpoint" :        false, // Fallback to default
+  "extra-breakpoints" : (
+    "medium" : (
+      "breakpoint" : "medium",
+      "gutter" : 15px
+    ),
+    "large" : (
+      "breakpoint" : "large",
+      "gutter" : 20px
+    )
+  ),
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+///   @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
+///   @include module-name.get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "layout [config]");
+}
+
+$containers: (
+  "container" : (
+    "width" : 100%,
+    "max-width" : get("max-width"),
+    "padding" : (get("margin") get("margin")),
+    "breakpoints" : null,
+    "responsive" : false,
+    "responsive-amount" : 3vw
+  )
+) !default;
+
+@mixin set-containers($changes, $deep: false, $overwrite: false) {
+  $containers: utils.map-merge-or-overwrite($containers, $changes, $deep, $overwrite) !global;
+}
+
+@function get-container($name, $breakpoint: false) {
+  $container: utils.require-map-get($containers, $name, "Layout [get-container]");
+  $breakpoints: map.get($container, "breakpoints");
+  @if ($breakpoint) {
+    @return utils.require-map-get($breakpoints, $breakpoint, "[container breakpoint]");
+  } @else {
+    @return $container;
+  }
+}
+/// Returns padding to another property including breakpoints
+/// ie. { top: $containers-padding; }
+@mixin match-container-padding($property, $name: "container", $sides: true) {
+  $container: get-container($name);
+  $breakpoints: map.get($container, "breakpoints");
+  #{ $property }: get-container-padding($name, $sides);
+  @if $breakpoints {
+    @each $breakpoint, $props in $breakpoints {
+      $direction: map.get($props, "direction");
+      @include breakpoint.from($breakpoint, $direction) {
+        #{ $property }: get-container-padding($name, $sides, $breakpoint);
+      }
+    }
+  }
+}
+
+/// For a given property for every breakpoint in a given container
+/// creates a css calc value that will match the containers side margin
+/// The margin is created via empty space when the container hits the max-width
+/// If passing inlude padding it would be the containers
+/// side (x) + the padding. This accounts for the containers max-width to give an absoute value
+@mixin match-container-margin($property, $name: "container", $include-padding: true) {
+  $container: get-container($name);
+  $breakpoints: map.get($container, "breakpoints");
+  $padding: if($include-padding, get-container-padding($name, true), 0);
+  $max: map.get($container, "max-width");
+  #{ $property }: max(((100vw - $max) / 2) + $padding, $padding);
+  @if $breakpoints {
+    @each $breakpoint, $props in $breakpoints {
+      $direction: map.get($props, "direction");
+      @include breakpoint.from($breakpoint, $direction) {
+        $pad: if($include-padding, get-container-padding($name, true, $breakpoint), 0);
+        #{ $property }: max(((100vw - $max) / 2) + $pad, $pad);
+      }
+    }
+  }
+}
+
+@function get-container-padding($name, $sides: true, $specific-breakpoint: false) {
+  $container: get-container($name, $specific-breakpoint);
+  $padding: map.get($container, "padding");
+  $is-list: meta.type-of($padding) == "list"; // Else number
+  @if (not $is-list) {
+    @return $padding;
+  } @else {
+    @return list.nth($padding, if($sides, 2, 1));
+  }
+}
+
+@mixin container-padding($name, $sides: true, $ends: true, $specific-breakpoint: false) {
+  $container: get-container($name, $specific-breakpoint);
+  $responsive: map.get($container, "responsive");
+  $x: get-container-padding-x($name, $specific-breakpoint);
+  $y: get-container-padding-y($name, $specific-breakpoint);
+  $resp-amount: if(meta.type-of($responsive) == number, $responsive, calculate.get("responsive-change"));
+  
+  @if $responsive {
+    @if $sides {
+      @include calculate.responsive-property("padding-left", $x, $resp-amount);
+      @include calculate.responsive-property("padding-right", $x, $resp-amount);
+    }
+    @if $ends {
+      @include calculate.responsive-property("padding-top", $y, $resp-amount);
+      @include calculate.responsive-property("padding-bottom", $y, $resp-amount);
+    }
+  } @else {
+    @if $sides {
+      padding-left: $x;
+      padding-right: $x;
+    }
+    @if $ends {
+      padding-top: $y;
+      padding-bottom: $y;
+    }
+  }
+}
+@function get-container-padding-x($name, $specific-breakpoint: false) {
+  @return get-container-padding($name, true, $specific-breakpoint);
+}
+@function get-container-padding-y($name, $specific-breakpoint: false) {
+  @return get-container-padding($name, false, $specific-breakpoint);
+}
+@mixin container-styles($name: "container", $specific-breakpoint: false) {
+  $container: get-container($name,  $specific-breakpoint);
+  $breakpoints: map.get($container, "breakpoints");
+  
+  $width: map.get($container, "width");
+  // @debug $specific-breakpoint;
+  // @if $specific-breakpoint {
+  //   @debug $container;
+  // }
+  @if ($width == null) {
+    $width: 100%;
+  }
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: $width;
+  max-width: map.get($container, "max-width");
+  @include container-padding($name, $specific-breakpoint: $specific-breakpoint);
+
+  // Recursive print other breakpoints
+  @if $breakpoints and not $specific-breakpoint {
+    @each $breakpoint, $props in $breakpoints {
+      $direction: map.get($props, "direction");
+      @include breakpoint.from($breakpoint, $direction) {
+        @include container-styles($name, $breakpoint);
+      }
+    }
+  }
+}
+
+/// Prints clearfix styles
+
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+    flex-basis: 0; // Flexbox, clear fix for pseudo elements in Safari
+    order: 1;
+  }
+  &:after { 
+    clear: both; 
+  }
+  *zoom: 1;
+}
+
+/// Removes scrollbar with CSS
+@mixin remove-scrollbar() {
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+  }
+}
+
+
+/// Returns gutter size for grid breakpoint map, defaults to the config's values
+/// Pass custom map to get gutter values from it
+/// @param {String} $name The name of the "grid breakpoint" (could be a different name than the actual breakpoint name it maps too)
+/// @param {Map} $custom-map Provide custom map of grid breakpoints to get the gutter from (defaults to the grid module's defaults 'extra-breakpoints')
+
+@function get-gutter($name: null, $custom-map: null) {
+  @if (not $name) {
+    @return get("gutter");
+  } @else {
+    $map: if($custom-map, $custom-map, get("extra-breakpoints"));
+    $settings: utils.require-map-get($map, $name, "grid [get-gutter]");
+    @return map.get($settings, "gutter");
+  }
+}
+
+/// @return Default breakpoint name (from this module or falling back to breakpoint module default)
+
+@function get-default-breakpoint() {
+  $breakpoint: get("breakpoint");
+  @if ($breakpoint) {
+    @return $breakpoint;
+  } @else {
+    @return breakpoint.get("default");
+  }
+}

package/trash/scss-before-cqc-update/_path.scss

@@ -0,0 +1,59 @@
+////
+/// @group path
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "sass:string";
+@use "utils";
+
+/// Aliases 
+/// @type Map
+/// - Important: alias could be used for directory or file so omit trailing slash for directories
+/// - All aliases must start with "#"
+
+$aliases: (
+  "#Images" : "/images",
+) !default;
+
+/// Set aliases or change defaults
+/// @param {Map} $changes Map of changes
+
+@mixin set-aliases($changes) {
+  $aliases: map.merge($aliases, $changes) !global;
+}
+
+/// Get an aliase's path
+/// @param {String} Name Name of alias
+
+@function get-alias($name) {
+  @return utils.require-map-get($aliases, $name, '[path alias]');
+}
+
+/// Resolves a Path 
+/// - Checks if path is an alias if so rewrite's it
+/// - Future could include rewrites for easier updating or rearranging of legacy things
+/// - Aliases work by starting with "#", Since it's an illegal uri character, needs to be escaped if used as literal, we felt that it was the safest way to mix aliases in with real URLs (so that a dev of a module using path.resolve can always pass paths through (user input unknown if alias)
+/// @example scss
+///   .img {
+///     background-image: url(path.resolve("#Images/branding/logo"));
+///   }
+///
+
+@function resolve($path) {
+  $is-alias: string.index($path, "#") == 1;
+  $dir-index: string.index($path, "/");
+  $resolved-path: $path;
+  @if $is-alias {
+    // Extract alias
+    @if $dir-index {
+      $alias: string.slice($path, 1, $dir-index - 1);
+      @return "#{ get-alias($alias) }#{ string.slice($path, $dir-index) }";
+    // Must just be only an alias
+    } @else {
+      @return "#{ get-alias($path) }";
+    }
+  } @else {
+    @return $path;
+  }
+}

package/trash/scss-before-cqc-update/_selector.scss

@@ -0,0 +1,82 @@
+////
+/// @group selector
+////
+/// @todo Finish Documentation
+
+@use "sass:string";
+@use "sass:map";
+@use "utils";
+
+/// Module Settings
+/// - This module can be used for dynamic classnames (used in base and some components). Some components selectors are too complex or coupled for dynamic classnames. 
+/// @todo See about documenting when a component doesn't run through the selecotr module to get it's base classname
+/// @type Map
+/// @prop {String} $config.prefix Global prefix for selectors (would be used for classname prefix for example)
+
+$config: (
+  "prefix" : ""
+) !default;
+
+// Map to store class overrides ("button" : "site-button") for example
+$-class-overrides: ();
+$-class-wildcards: ();
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+/// @example scss - General example, replace module-name with module's name
+///   @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 - General example, replace module-name with module's name
+///   @include module-name.get("property");
+
+@function get($name) {
+  @return utils.require-map-get($config, $name, "selector [config]");
+}
+
+/// Set the class selector overrides
+/// @param {Map} $changes Changes to merge
+
+@mixin set-class-overrides($changes) {
+  @each $key, $prop in $changes {
+    $index: string.index($key, "*");
+    @if ($index) {
+      $wild-key: string.slice($key, 1, $index - 1);
+      $-class-wildcards: map.set($-class-wildcards, $wild-key, $prop) !global;
+      $changes: map.remove($changes, $key);
+    }
+  }
+  $-class-overrides: map.merge($-class-overrides, $changes) !global;
+}
+
+/// Used to allow global prefixing of classes, and also the ability to 
+/// Change a class used in the system (ie. like a component for example)
+/// @param {String} $class The classname to set
+
+@function class($class, $name-only: false) {
+  // Check if it's a wildcard
+  $wildcard: get-class-wildcard($class);
+  $override: map.get($-class-overrides, $class);
+  $updated: if($override, $override, if($wildcard, $wildcard, $class));
+  $name: "#{ get("prefix") }#{ $updated }";
+  @if $name-only {
+    @return $name;
+  } @else {
+    @return ".#{ $name }";
+  }
+}
+
+@function get-class-wildcard($class) {
+  $change: $class;
+  @each $key, $prop in $-class-wildcards {
+    $index: string.index($class, $key);
+    @if ($index) {
+      $change: utils.string-replace($class, $key, $prop);
+    }
+  }
+  @return $change;
+}