@ulu/frontend 0.0.3 → 0.0.6

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

@@ -1,70 +0,0 @@
-////
-/// @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

@@ -1,35 +0,0 @@
-////
-/// @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

@@ -1,74 +0,0 @@
-////
-/// @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

@@ -1,17 +0,0 @@
-////
-/// @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

@@ -1,22 +0,0 @@
-////
-/// @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

@@ -1,94 +0,0 @@
-////
-/// @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

@@ -1,15 +0,0 @@
-////
-/// @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

@@ -1,73 +0,0 @@
-////
-/// @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

@@ -1,68 +0,0 @@
-////
-/// @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

@@ -1,59 +0,0 @@
-////
-/// @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

@@ -1,73 +0,0 @@
-////
-/// @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

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