@ulu/frontend 0.0.3 → 0.0.5

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

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

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

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

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