@ulu/frontend 0.0.3

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

@@ -0,0 +1,70 @@
+////
+/// @group all
+////
+/// @todo Finish Documentation
+
+@forward "links" as links-*;
+@forward "button" as button-*;
+@forward "rule" as rule-*;
+@forward "list-lines" as list-lines-*;
+@forward "list-unordered" as list-unordered-*;
+@forward "list-ordered" as list-ordered-*;
+@forward "grid" as grid-*;
+
+@use "sass:map";
+
+@use "../utils";
+@use "links";
+@use "button";
+@use "rule";
+@use "list-lines";
+@use "list-unordered";
+@use "list-ordered";
+@use "grid";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "links" : true,
+  "button" : true,
+  "rule" : true,
+  "list-lines" : true,
+  "list-unordered" : true,
+  "list-ordered" : true,
+  "grid": true
+);
+
+/// Prints all Components styles
+/// @name component-styles
+/// @param {List} $includes A list of changes to module includes
+/// @example scss
+///  @include ulu.component-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("components");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "links")) {
+    @include links.styles;
+  }
+  @if (map.get($-all-includes, "button")) {
+    @include button.styles;
+  }
+  @if (map.get($-all-includes, "rule")) {
+    @include rule.styles;
+  }
+  @if (map.get($-all-includes, "list-lines")) {
+    @include list-lines.styles;
+  }
+  @if (map.get($-all-includes, "list-unordered")) {
+    @include list-unordered.styles;
+  }
+  @if (map.get($-all-includes, "list-ordered")) {
+    @include list-unordered.styles;
+  }
+  @if (map.get($-all-includes, "grid")) {
+    @include grid.styles;
+  }
+}

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

@@ -0,0 +1,35 @@
+////
+/// @group links
+////
+/// @todo Finish Documentation
+
+@use "../element";
+@use "../selector";
+
+/// Link compontent styles (.link)
+/// - Contextual link styling
+/// - Styles all links within as normal text hyperlinks (hover, visited)
+/// @example scss
+///  @include ulu.component-links-styles();
+
+@mixin styles {
+  $selector: selector.class("links");
+  $selectorSingle: selector.class("link");
+  $selectorNot: "#{ $selector }--no-visited";
+  $selectorSingleNot: "#{ $selectorSingle }--no-visited";
+  // Using not to avoid duplicating css
+  // There shouldn't be to many reasons to need to override these styles
+  #{ $selector }:not(#{ $selectorNot }) a,
+  #{ $selectorSingle }:not(#{ $selectorSingleNot }) {
+      @include element.link(true, true);
+    }
+  #{ $selector }--no-visited a,
+  #{ $selectorSingle }--no-visited {
+      @include element.link();
+    }
+  // Chained to match not() specifity
+  #{ $selector }#{ $selector }--no-underline a,
+  #{ $selectorSingle }#{ $selectorSingle }--no-underline {
+    text-decoration: none;
+  }
+}

package/trash/scss-before-cqc-update/components/_list-lines.scss

@@ -0,0 +1,74 @@
+////
+/// @group list-lines
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+
+@use "../element";
+@use "../color";
+@use "../typography";
+@use "../utils";
+
+/// Module Config
+
+$config: (
+  "border-first" : true,
+  "border-last" : true,
+  "margin-top": 0,
+  "margin-bottom": 1em,
+  "padding-between" : 1em
+) !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, "list-lines [config]");
+}
+
+/// Output component styles
+
+@mixin inner-styles {
+  $border: element.get-rule-style("light") !default;
+  list-style: none;
+  margin: get("margin-top") 0 get("margin-bottom") 0;
+  padding: 0;
+  @if (get("border-first")) {
+    border-top: $border;
+  }
+  >li {
+    border-bottom: $border;
+    padding: get("padding-between") 0;
+    >*:last-child {
+      margin-bottom: 0;
+    }
+    @if (not get("border-last")) {
+      &:last-child {
+        border-bottom-width: 0;
+      }
+    }
+  }
+}
+
+@mixin styles {
+  
+  .list-lines {
+    @include inner-styles;
+  }
+  .list-lines--dense {
+    >li {
+      padding: 0.5em 0;
+      line-height: typography.get("line-height-dense");
+    }
+  }
+}

package/trash/scss-before-cqc-update/components/_list-ordered.scss

@@ -0,0 +1,17 @@
+////
+/// @group list-ordered
+////
+/// @todo Finish Documentation
+
+@use "../element";
+@use "../color";
+@use "../selector";
+
+/// Output styles
+
+@mixin styles {
+  $prefix: selector.class("list-ordered");
+  #{ $prefix } {
+    @include element.styles-ordered-list();
+  }
+}

package/trash/scss-before-cqc-update/components/_list-unordered.scss

@@ -0,0 +1,22 @@
+////
+/// @group list-unordered
+////
+/// @todo Finish Documentation
+
+@use "../element";
+@use "../color";
+@use "../selector";
+
+/// Output styles
+
+@mixin styles {
+  $prefix: selector.class("list-unordered");
+  #{ $prefix } {
+    @include element.styles-unordered-list();
+    li {
+      &::marker {
+        color: color.get("bullet");
+      }
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+////
+/// @group rule
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "../utils";
+@use "../element";
+@use "../color";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.short-width Short rule width (like an inline rule, normally used above headings), Setting this to false will disable output
+/// @prop {Number} $config.short-border-width Short rule width of border
+
+$config: (
+  "short-width" : 2.75rem,
+  "short-border-width" : 4px,
+  "short-modifiers" : false
+) !default;
+
+/// 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, "rule [config]");
+}
+
+/// Output styles
+
+@mixin styles {
+
+  $class: selector.class("rule");
+  
+  #{ $class } {
+    @include element.rule();
+  }
+  #{ $class }--content-on-top {
+    position: relative;
+    > * {
+      background-color: white; // User woud need to specific per context needed or something
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-width: 100%;
+      padding: 0.5em;
+      margin: 0;
+    }
+  }
+
+  // Output user's styles presets
+  @each $name, $value in element.$rule-styles {
+    #{ $class }--#{ $name } {
+      @include element.rule-style($name);
+    }
+  }
+  // Output user's margin presets
+  @each $name, $value in element.$rule-margins {
+    #{ $class }--margin-#{ $name } {
+      @include element.rule-margin($name);
+    }
+  }
+
+  // Meant to be user by tself without content
+  $short-width: get("short-width");
+  @if ($short-width) {
+    #{ $class }--short {
+      width: $short-width;
+      max-width: 100%;
+      border-bottom-width: get("short-border-width");
+    }
+    @if get("short-modifiers") {
+      @each $mod, $opts in get("short-modifiers") {
+        #{ $class }--short {
+          width: map.get($opts, "width");
+          border-bottom-width: map.get($opts, "border-width");
+        }
+      }
+    }
+  }
+}

package/trash/scss-before-cqc-update/helpers/_color.scss

@@ -0,0 +1,15 @@
+////
+/// @group color
+////
+/// @todo Finish Documentation
+
+@use "../utils";
+@use "../color";
+
+/// Prints color-context and color-[name] styles as helper classes (bottom of stylesheet)
+
+@mixin styles {
+  @include utils.file-header('helpers', 'color');
+  @include color.all-context-styles("helper-class");
+  @include color.all-color-class-styles();
+}

package/trash/scss-before-cqc-update/helpers/_display.scss

@@ -0,0 +1,73 @@
+////
+/// @group display
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+
+@use "../utils";
+@use "../utility";
+@use "../layout";
+@use "../element";
+@use "../breakpoint";
+@use "../selector";
+
+/// Print utilities helper styles
+/// @example scss
+///  @include ulu.helper-display-styles();
+
+@mixin styles {
+
+  @include utils.file-header('helpers', 'display');
+
+  $hiddenVisuallyPrefix: selector.class("hidden-visually");
+
+  #{ $hiddenVisuallyPrefix } {
+    @include element.hidden-visually();
+  }
+  #{ $hiddenVisuallyPrefix }-focusable {
+    &:not(:active):not(:focus) {
+      @include element.hidden-visually();
+    }
+  }
+  // Consider removing
+  .clearfix,
+  .cf { 
+    @include layout.clearfix();
+  }
+  .display-block {
+    display: block;
+  }
+  .display-flex {
+    display: flex;
+  }
+  .display-inline-flex {
+    display: inline-flex;
+  }
+  .display-inline {
+    display: inline;
+  }
+  .display-inline-all * {
+    display: inline;
+  }
+  .display-inline-block {
+    display: inline-block;
+  }
+  .hidden {
+    display: none;
+  }
+
+  // Display none per breakpoint
+  @each $name in map.keys(breakpoint.$sizes) {
+    @include breakpoint.min($name) {
+      .hidden-min-#{ $name } {
+        display: none;
+      }
+    }
+    @include breakpoint.max($name) {
+      .hidden-max-#{ $name } {
+        display: none;
+      }
+    }
+  }
+}

package/trash/scss-before-cqc-update/helpers/_index.scss

@@ -0,0 +1,68 @@
+////
+/// @group all
+////
+/// @todo Finish Documentation
+
+@forward "typography" as typography-*;
+@forward "display"  as display-*;
+@forward "utilities"  as utilities-*;
+@forward "print"  as print-*;
+@forward "units"  as units-*;
+@forward "color"  as color-*;
+
+@use "sass:map";
+@use "../utils";
+@use "typography";
+@use "display";
+@use "utilities";
+@use "units";
+@use "print";
+@use "color";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "typography" : true, 
+  "units" : true,
+  "display" : true,
+  "utilities" : true, 
+  "print" : true,
+  "color" : true
+);
+
+/// Prints all Helper styles
+/// @name helper-styles
+/// @param {List} $includes AA list of changes to this module's includes
+/// @example scss
+///  @include ulu.helper-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("helpers");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "typography")) {
+    @include typography.styles;
+  }
+  @if (map.get($-all-includes, "units")) {
+    @include units.styles;
+  }
+  @if (map.get($-all-includes, "display")) {
+    @include display.styles;
+  }
+  @if (map.get($-all-includes, "utilities")) {
+    @include utilities.styles;
+  }
+  @if (map.get($-all-includes, "print")) {
+    @include print.styles;
+  }
+  @if (map.get($-all-includes, "color")) {
+    @include color.styles;
+  }
+}
+
+
+
+
+

package/trash/scss-before-cqc-update/helpers/_print.scss

@@ -0,0 +1,59 @@
+////
+/// @group print
+////
+/// @todo Finish Documentation
+
+/// Printed Media Styles 
+/// @example scss
+///  @include ulu.helper-print-styles();
+
+@mixin styles {
+  // Note: this is an old framework stylesheet (may be outdated)
+  @media (print) {
+    .no-print { 
+      display: none; 
+    }
+    * {
+      background: transparent !important;
+      color: black !important;
+      box-shadow: none !important;
+      text-shadow: none !important;
+      filter: none !important;
+    }
+  
+    /* Black prints faster: h5bp.com/s */
+    a, 
+    a:visited {
+      text-decoration: underline;
+    }
+  
+    /* Don't show links for images, or javascript/internal links */
+    pre, 
+    blockquote {
+      border: 1px solid #999;
+      page-break-inside: avoid;
+    }
+  
+    /*thead {
+      display: table-header-group;
+    }*/
+  
+    /* h5bp.com/t */
+    tr, img {
+      page-break-inside: avoid;
+    }
+    img {
+      max-width: 100% !important;
+    }
+    p, 
+    h2, 
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+    h2, 
+    h3 {
+      page-break-after: avoid;
+    }
+  }
+}

package/trash/scss-before-cqc-update/helpers/_typography.scss

@@ -0,0 +1,73 @@
+////
+/// @group typography
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "../utils";
+@use "../selector";
+@use "../typography";
+
+/// Prints Typography Helper styles
+/// @example scss
+///  @include ulu.helper-typography-styles();
+/// @example raw Example of type size as helper prefixed
+///  <span class="type-large-xxx">A</span>
+///  <span class="type-large-xx">A</span>
+///  <span class="type-large-x">A</span>
+///  <span class="type-large">A</span>
+///  <span class="type-base">A</span>
+///  <span class="type-small">A</span>
+///  <span class="type-small-x">A</span>
+
+@mixin styles {
+  
+  @include utils.file-header('helpers', 'typography');
+
+  $prefix: selector.class("type");
+
+  @each $size, $values in typography.$sizes {
+    @if (map.get($values, "helper-class")) {
+      @if (map.get($values, "helper-class-prefixed")) {
+        #{ $prefix }-#{$size} {
+          @include typography.size($size);
+        }
+      } @else {
+        .#{$size} {
+          @include typography.size($size);
+        }
+      }
+    }
+  }
+  
+  #{ $prefix }-light    { font-weight: typography.get("font-weight-light"); }
+  #{ $prefix }-normal   { font-weight: typography.get("font-weight-normal"); }
+  #{ $prefix }-semibold { font-weight: typography.get("font-weight-semibold"); }
+  #{ $prefix }-bold     { font-weight: typography.get("font-weight-bold"); }
+  
+  #{ $prefix }-italic   { font-style: italic; }
+
+  #{ $prefix }-center   { text-align: center; }
+  #{ $prefix }-left     { text-align: left; }
+  #{ $prefix }-right    { text-align: right; }
+
+  #{ $prefix }-upper    { 
+    text-transform: uppercase; 
+    letter-spacing: typography.get("letter-spacing-uppercase");
+  }
+  #{ $prefix }-lower    { text-transform: lowercase; }
+  #{ $prefix }-title    { text-transform: capitalize; }
+
+  #{ $prefix }-family { font-family: typography.get("font-family"); }
+  #{ $prefix }-family-sans { font-family: typography.get("font-family-sans"); }
+  #{ $prefix }-family-serif { font-family: typography.get("font-family-serif"); }
+  #{ $prefix }-family-mono { font-family: typography.get("font-family-monospace"); }
+
+  #{ $prefix }-word-break { @include typography.word-break(); }
+  #{ $prefix }-word-break-all { @include typography.word-break(true); }
+
+  #{ $prefix }-max-width { max-width: typography.get("max-width"); }
+  #{ $prefix }-max-width-small { max-width: typography.get("max-width-small"); }
+  #{ selector.class("line-height") }-dense { line-height: typography.get("line-height-dense"); }
+  #{ selector.class("line-height") }-spaced { line-height: typography.get("line-height-spaced"); }
+}

package/trash/scss-before-cqc-update/helpers/_units.scss

@@ -0,0 +1,79 @@
+////
+/// @group units
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "../units";
+@use "../utils";
+@use "../selector";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+
+$config: (
+  "sides": ("top", "bottom", "left", "right")
+) !default;
+
+/// 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, "units [config]");
+}
+
+/// Prints all unit helper classes
+
+@mixin styles {
+  @include utils.file-header('helpers', 'leading');
+  @include create-property-classes("margin", selector.class("margin"), true);
+  @include create-property-classes("padding", selector.class("padding"));
+}
+
+/// Creates the unit classes with all variations (from unit presets)
+/// - This can be used by itself if not outputing .styles() or if you wanted to change the default prefixes
+@mixin create-property-classes($property, $prefix, $isMargin: false) {
+  // On all sides
+  #{ $prefix } {
+    #{ $property } : units.get(1);
+  }
+  @if ($isMargin) {
+    #{ $prefix }-auto {
+      margin: auto;
+    }
+  }
+  
+  @each $name, $value in units.$config {
+    #{ $prefix }-#{ $name } {
+      #{ $property }: units.get($name);
+    }
+  }
+  // Individual sides
+  @each $side in get("sides") {
+    $full-prop: #{ $property }-#{ $side };
+    #{ $prefix }-#{ $side } {
+      #{ $full-prop }: units.get(1);
+    }
+    @if ($isMargin) {
+      #{ $prefix }-#{ $side }-auto {
+        #{ $full-prop }: auto;
+      }
+    }
+    @each $name, $value in units.$config {
+      #{ $prefix }-#{ $side }-#{ $name } {
+        #{ $full-prop }: units.get($name);
+      }
+    }
+  }
+}