@ulu/frontend 0.0.3

package/trash/scss-before-cqc-update/base/_elements.scss

@@ -0,0 +1,189 @@
+////
+/// @group elements
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+
+@use "../utils";
+@use "../color";
+@use "../element";
+@use "../typography";
+@use "../breakpoint";
+@use "../button";
+
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.links-state-styling Just color/defaults vs hover/visited/active
+
+$config: (
+  "link" : true,
+  "link:hover" : true,
+  "link:visited" : 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, "element [config]");
+}
+
+/// Prints elements base styles
+/// @name base-elements-styles
+/// @example scss
+///  @include ulu.base-elements-styles();
+
+@mixin styles {
+
+  @include utils.file-header('base', 'elements');
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
+  }
+  body {
+    color: color.get('type');
+    background-color: color.get("background");
+    font-family: typography.get("font-family");
+    margin: 0;
+    // Note we are using relative units here instead of setting a 
+    // pixel base like we use to on the HTML
+    // This will allow the user preference in font size
+    // Useful for accessibility
+    @include typography.size("base");
+    @include breakpoint.embed-for-scripts();
+  }
+  h1, 
+  h2, 
+  h3, 
+  h4, 
+  h5, 
+  h6, 
+  ul, 
+  ol, 
+  li,
+  pre, 
+  code,
+  p { 
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    border-width: 0;
+    border-style: solid;
+    font-weight: inherit;
+  }
+  p {
+    $margin-top: typography.get("margin-top");
+    margin-top: if($margin-top, $margin-top, 0);
+    margin-bottom: typography.get("margin-bottom"); 
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  small { 
+    @include typography.size("small", ("line-height" : typography.get("line-height-dense"))); 
+  }
+  sub { 
+    bottom: -0.25em; 
+  }
+  sup { 
+    top: -0.5em; 
+  }
+  b, 
+  strong { 
+    font-weight: bold; 
+  }
+  form {
+    width: 100%;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: typography.get("font-family-monospace");
+  }
+  hr {
+    height: 0;
+    border: 0;
+    box-sizing: content-box;
+    overflow: visible;
+    margin: element.get("margin") 0;
+    border-bottom: element.get-rule-style();
+  }
+  iframe {
+    border: 0;
+    outline: 0;
+  }
+  figure {
+    margin: 0;
+  }
+  img {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    border-style: none;
+  }
+  // Not styling ordered lists because they are used in navigation and other UI components
+  ul { 
+    list-style: none; 
+  }
+  // Style ordered lists since we don't use them much in the UI components
+  ol {
+    list-style: none; 
+  }
+  
+  a {
+    // User can disable link styling if they want to add more specific styling
+    // and omit this in element base
+    @if (get("link")) {
+      @include element.link-defaults(
+        $hover: get("link:hover"),
+        $visited: get("link:visited"),
+      );
+    }
+  }
+  // button,
+  // [type="button"],
+  // [type="reset"],
+  // [type="submit"] {
+  //   @include button.reset();
+  // }
+  // For accessible tabs
+  [role="tab"] {
+    cursor: pointer;
+  }
+  dt { 
+    font-weight: bold;
+  }
+  [hidden], 
+  template {
+    display: none;
+  }
+  blockquote {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,63 @@
+////
+/// @group all
+////
+/// @todo Finish Documentation
+
+@forward "normalize" as normalize-*;
+@forward "elements" as elements-*;
+@forward "keyframes" as keyframes-*;
+@forward "typography" as typography-*;
+@forward "layout" as layout-*;
+
+@use "sass:map";
+@use "../utils";
+@use "normalize";
+@use "typography";
+@use "elements";
+@use "color";
+@use "keyframes";
+@use "layout";
+
+// Used to check against user's includes
+
+$-all-includes: (
+  "normalize" : true, 
+  "elements" : true, 
+  "keyframes" : true, 
+  "typography" : true,
+  "color" : true,
+  "layout" : true
+);
+
+/// Prints all Base styles
+/// @name base-styles
+/// @param {List} $includes A list of changes to this module's includes
+/// @example scss
+///  @include ulu.base-styles();
+
+@mixin styles($includes: null) {
+  @include utils.file-header("base");
+  @if $includes {
+    @include utils.require-list-contains($-all-includes, $includes);
+    $-all-includes: map.merge($-all-includes, $includes) !global;
+  }
+  @if (map.get($-all-includes, "normalize")) {
+    @include normalize.styles;
+  }
+  @if (map.get($-all-includes, "elements")) {
+    @include elements.styles;
+  }
+  @if (map.get($-all-includes, "keyframes")) {
+    @include keyframes.styles;
+  }
+  @if (map.get( $-all-includes, "typography")) {
+    @include typography.styles;
+  }
+  @if (map.get($-all-includes, "color")) {
+    @include color.styles;
+  }
+  @if (map.get($-all-includes, "layout")) {
+    @include layout.styles;
+  }
+}
+

package/trash/scss-before-cqc-update/base/_keyframes.scss

@@ -0,0 +1,74 @@
+////
+/// @group keyframes
+////
+/// @todo Finish Documentation
+
+@use "../utils";
+
+/// Prints CSS keyframes
+/// @example scss
+///  @include ulu.base-keyframes-styles();
+
+@mixin styles {
+  @include utils.file-header('base', 'keyframes');
+  @keyframes fadeIn {
+    0% {
+      opacity: 0; 
+    }
+    100% {
+      opacity: 1; 
+    }
+  }
+  @keyframes FadeDownIn {
+    0% {
+      opacity: 0; 
+      transform: translateY(-10px);
+    }
+    100%  {
+      opacity: 1; 
+      transform: translateY(0);
+    }
+  }
+  @keyframes fadeInLeft {
+    0% {
+      opacity: 0; 
+      transform: translatex(-10px);
+    }
+    100% {
+      opacity: 1; 
+      transform: translatex(0);
+    }
+  }
+  @keyframes fadeInZoom {
+    // Delay
+    0% {
+      opacity: 0; 
+      transform: scale(0);
+    }
+    // Start
+    50% {
+      opacity: 0; 
+      transform: scale(0);
+    }
+    100%  {
+      opacity: 1; 
+      transform: scale(1);
+    }
+  }
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100%  {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spin {
+    from {
+      transform:rotate(0deg);
+    }
+    to {
+      transform:rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+////
+/// @group layout
+////
+/// @todo Finish Documentation
+
+@use "sass:map";
+@use "../layout";
+@use "../selector";
+@use "../utils";
+
+/// Module Settings
+/// @type Map
+/// @prop {Number} $config.sides Sides to print for helper classes (ie. reduce output of uneeded sides)
+
+$config: (
+  "containers" : true,
+  "container-nested-no-padding" : false,
+  "layout-flex" : true,
+) !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, "base layout [config]");
+}
+
+/// Output Styles 
+
+@mixin styles {
+
+  @if (get("containers")) {
+    @each $name, $values in layout.$containers {
+      $class: selector.class($name);
+      #{ $class } {
+        @include layout.container-styles($name);
+      }
+    }
+  }
+  @if (get("container-nested-no-padding")) {
+    $prefix: selector.class("container", $name-only: true);
+    [class|="#{ $prefix }"] {
+      [class|="#{ $prefix }"] {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+
+  @if (get("layout-flex")) {
+    $prefix: selector.class("layout-flex");
+
+    #{ $prefix } {
+      display: flex;
+    }
+    #{ $prefix }-justified {
+      display: flex;
+      justify-content: space-between;
+    }
+    #{ $prefix }-center {
+      display: flex;
+      align-items: center;
+    }
+    #{ $prefix }-end {
+      display: flex;
+      align-items: flex-end;
+    }
+    #{ $prefix }-column {
+      display: flex;
+      flex-direction: column;
+    }
+    #{ $prefix }-column-center {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+}