generator-white-label 3.0.0 → 5.0.0

package/app/assets/style/base/elements/_inputs.scss

@@ -1,3 +1,7 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %input-base-1 {
 
     @extend %text-1;
@@ -6,3 +10,69 @@
     padding: 0;
 
 }
+
+// ## input checkboxes
+
+%input-checkbox-1 {
+    @extend %input-base-1;
+}
+
+// ## input errors
+
+%input-error-1 {
+
+    @extend %input-base-1;
+
+    background-color: colors.$red-1;
+    color: colors.$white-1;
+    font-weight: 700;
+    margin-top: rem-calc(5);
+    padding: rem-calc(10);
+
+    strong {
+        font-weight: 700;
+    }
+
+}
+
+// ## input radio buttons
+
+%input-radio-1 {
+    @extend %input-base-1;
+}
+
+// ## input text boxes
+
+%input-text-1 {
+
+    @extend %input-base-1;
+
+    display: block;
+    min-height: rem-calc(45);
+    padding: 0 rem-calc(5);
+    width: 100%;
+
+}
+
+// ## textareas
+
+%textarea-1 {
+
+    @extend %input-base-1;
+
+    display: block;
+    min-height: rem-calc(45);
+    padding: rem-calc(5);
+    width: 100%;
+
+}
+
+// ## select menus
+
+%select-1 {
+
+    @extend %input-base-1;
+
+    height: rem-calc(45);
+
+}

package/app/assets/style/base/elements/_labels.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %label-base-1 {
 
     @extend %text-1;
@@ -6,3 +8,9 @@
     padding: 0;
 
 }
+
+%label-1 {
+
+    @extend %label-base-1;
+
+}

package/app/assets/style/base/elements/_landmarks.scss

@@ -0,0 +1,3 @@
+%footer-1 {
+    text-align: center;
+}

package/app/assets/style/base/elements/_legends.scss

@@ -0,0 +1,11 @@
+@use '../type/headings' as *;
+
+// ## labels
+
+%legend-1 {
+
+    @extend %heading-1;
+
+    margin: 0;
+
+}

package/app/assets/style/base/elements/_lists.scss

@@ -1,8 +1,15 @@
+@use '../type/text' as *;
+
 %list-base-1 {
 
     @extend %text-1;
 
     margin: 0;
-    padding: 0;
+
+}
+
+%list-1 {
+
+    @extend %list-base-1;
 
 }

package/app/assets/style/base/elements/_tables.scss

@@ -1,8 +1,39 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %table-base-1 {
 
     @extend %text-1;
 
-    margin: 0;
+    margin: 0 auto;
     padding: 0;
 
 }
+
+// ## tables
+
+%table-1 {
+
+    @extend %table-base-1;
+
+    border: rem-calc(1) solid colors.$black-1;
+    width: 80%;
+
+    thead {
+        background-color: colors.$black-1;
+        color: colors.$white-1;
+    }
+
+    tfoot {
+        background-color: colors.$grey-5;
+        color: colors.$black-1;
+    }
+
+    td,
+    th {
+        border: rem-calc(1) solid colors.$black-1;
+        padding: rem-calc(10);
+    }
+
+}

package/app/assets/style/base/layouts/_staggered-1.scss

@@ -0,0 +1,29 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+
+%staggered-1 {
+
+    > div {
+
+        column-count: 1;
+        column-gap: 0;
+
+        > div {
+            border: rem-calc(2) solid colors.$black-1;
+            break-inside: avoid;
+            display: inline-block;
+            padding: rem-calc(10);
+            width: 100%;
+        }
+
+        @include breakpoint(medium up) {
+            column-count: 3;
+        }
+
+        @include breakpoint(large up) {
+            column-count: 4;
+        }
+
+    }
+
+}

package/app/assets/style/base/type/_fonts.scss

@@ -1,11 +1,49 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+
 %font-base-1 {
-    color: $black-1;
+    color: colors.$black-1;
     font-size: rem-calc(16);
+    // sass-lint:disable no-misspelled-properties
     font-smoothing: antialiased;
+    // sass-lint:enable no-misspelled-properties
     font-style: normal;
     text-rendering: optimizeLegibility;
 }
 
+%arial-regular {
+
+    @extend %font-base-1;
+
+    font-family: 'arial';
+
+}
+
+%arial-italic {
+
+    @extend %arial-regular;
+
+    font-style: italic;
+
+}
+
+%arial-bold {
+
+    @extend %arial-regular;
+
+    font-weight: 700;
+
+}
+
+%arial-bold-italic {
+
+    @extend %arial-regular;
+
+    font-style: italic;
+    font-weight: 700;
+
+}
+
 %open-sans-bold {
 
     @extend %font-base-1;

package/app/assets/style/base/type/_headings.scss

@@ -1,7 +1,36 @@
+@use '../utilities/functions' as *;
+@use 'fonts' as *;
+
 %heading-base-1 {
+
     @extend %open-sans-bold;
+
 }
 
 %heading-1 {
     @extend %heading-base-1;
 }
+
+%heading-2 {
+
+    @extend %heading-base-1;
+
+    font-size: rem-calc(14);
+
+}
+
+%heading-3 {
+
+    @extend %heading-base-1;
+
+    font-size: rem-calc(12);
+
+}
+
+%heading-4 {
+
+    @extend %heading-base-1;
+
+    font-size: rem-calc(10);
+
+}

package/app/assets/style/base/type/_text.scss

@@ -1,3 +1,5 @@
+@use 'fonts' as *;
+
 %text-base-1 {
     @extend %open-sans-regular;
 }

package/app/assets/style/base/utilities/_accessibility.scss

@@ -1,3 +1,6 @@
+@use "../colors/colors";
+@use 'functions' as *;
+
 // ## accessibility hidden text
 // hide text off screen for sighted users and leave accessible for screen readers
 
@@ -38,8 +41,8 @@
 
     @extend %accessibility-focus-1;
 
-    background-color: $white-1;
-    color: $black-1;
+    background-color: colors.$white-1;
+    color: colors.$black-1;
     display: block;
     padding: rem-calc(10);
     text-align: center;

package/app/assets/style/base/utilities/_functions.scss

@@ -1,31 +1,84 @@
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
 /// Remove the unit of a length
 /// @param {Number} $number - Number to remove unit from
 /// @return {Number} - Unitless number
 
 $rem-base: 16px;
+$responsive-embed-margin-bottom: 1rem;
+
+/// Contain floated children.
+@mixin clearfix {
+    &::before,
+    &::after {
+        content: ' ';
+        display: table;
+        flex-basis: 0;
+        order: 1;
+    }
+
+    &::after {
+        clear: both;
+    }
+}
+
+/// Create a responsive 4:3 media container.
+@mixin responsive-embed {
+    height: 0;
+    margin-bottom: $responsive-embed-margin-bottom;
+    overflow: hidden;
+    padding-bottom: 75%;
+    position: relative;
+
+    iframe,
+    object,
+    embed,
+    video {
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+}
+
+/// Apply content at the Bootstrap breakpoints used by the project templates.
+/// @param {String} $query - Supported query: small only, medium up, or large up
+@mixin breakpoint($query) {
+    @if $query == (small only) {
+        @media print, screen and (max-width: 47.99875em) { @content; }
+    } @else if $query == (medium up) {
+        @media print, screen and (min-width: 48em) { @content; }
+    } @else if $query == (large up) {
+        @media print, screen and (min-width: 62em) { @content; }
+    } @else {
+        @error 'Unsupported breakpoint: #{$query}';
+    }
+}
 
 @function strip-unit($number) {
-    @if type-of($number) == 'number' and not unitless($number) {
-        @return $number / ($number * 0 + 1);
+    @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
+        @return math.div($number, $number * 0 + 1);
     }
 
     @return $number;
 }
 
 @function convert-to-rem($value, $base-value: $rem-base) {
-    $value: strip-unit($value) / strip-unit($base-value) * 1rem;
+    $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
     //@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
     @return $value;
 }
 
 @function rem-calc($values, $base-value: $rem-base) {
-    $max: length($values);
+    $max: list.length($values);
 
-    @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
+    @if $max == 1 { @return convert-to-rem(list.nth($values, 1), $base-value); }
 
     $rem-values: ();
     @for $i from 1 through $max {
-        $rem-values: append($rem-values, convert-to-rem(nth($values, $i), $base-value));
+        $rem-values: list.append($rem-values, convert-to-rem(list.nth($values, $i), $base-value));
     }
     @return $rem-values;
 }
@@ -33,13 +86,13 @@ $rem-base: 16px;
 @function em-calc($values) {
     $rem-values: rem-calc($values);
 
-    $max: length($rem-values);
+    $max: list.length($rem-values);
 
-    @if $max == 1 { @return strip-unit(nth($rem-values, 1)) * 1em; }
+    @if $max == 1 { @return strip-unit(list.nth($rem-values, 1)) * 1em; }
 
     $em-values: ();
     @for $i from 1 through $max {
-        $em-values: append($em-values, strip-unit(nth($rem-values, $i)) * 1em);
+        $em-values: list.append($em-values, strip-unit(list.nth($rem-values, $i)) * 1em);
     }
     @return $em-values;
 }

package/app/assets/style/global.scss

@@ -1,18 +1,12 @@
 @charset 'UTF-8';
 
-// ## Vendors
+// ## toolkit
+@use 'base/toolkit' as *;
 
-// ## foundation
-@import '../../../node_modules/foundation-sites/scss/foundation';
-@include foundation-global-styles;
-//@include foundation-grid;
-@include foundation-flex-grid;
+// ## Vendors
 
 // ## Define Fonts
-@import '../font/opensans/stylesheet';
-
-// ## toolkit
-@import 'base/toolkit';
+@import '../font/opensans/stylesheet.css';
 
 //STYLES
 
@@ -20,6 +14,110 @@ body {
     @extend %text-1;
 }
 
+.anchor-1 {
+    @extend %anchor-1;
+}
+
+.button-1 {
+    @extend %button-1;
+}
+
+.footer-1 {
+    @extend %footer-1;
+}
+
+.fieldset-1 {
+    @extend %fieldset-1;
+}
+
+.image-1 {
+    @extend %image-1;
+}
+
+.input-checkbox-1 {
+    @extend %input-checkbox-1;
+}
+
+.input-error-1 {
+    @extend %input-error-1;
+}
+
+.input-radio-1 {
+    @extend %input-radio-1;
+}
+
+.input-text-1 {
+    @extend %input-text-1;
+}
+
+.label-1 {
+    @extend %label-1;
+}
+
+.legend-1 {
+    @extend %legend-1;
+}
+
+.list-1 {
+    @extend %list-1;
+}
+
+.picture-1 {
+    @extend %picture-1;
+}
+
+.select-1 {
+    @extend %select-1;
+}
+
+.table-1 {
+    @extend %table-1;
+}
+
+.textarea-1 {
+    @extend %textarea-1;
+}
+
 .heading-1 {
     @extend %heading-1;
 }
+
+.heading-2 {
+    @extend %heading-2;
+}
+
+.heading-3 {
+    @extend %heading-3;
+}
+
+.heading-4 {
+    @extend %heading-4;
+}
+
+.modal-1 {
+    @extend %modal-1;
+}
+
+.modal-1-open {
+    @extend %modal-1-open;
+}
+
+.sticky-1 {
+    @extend %sticky-1;
+}
+
+.tabpanel-1 {
+    @extend %tabpanel-1;
+}
+
+.tabpanel-2 {
+    @extend %tabpanel-2;
+}
+
+.accessibility-skip-to-element-1 {
+    @extend %accessibility-skip-to-element-1;
+}
+
+.staggered-1 {
+    @extend %staggered-1;
+}

package/app/assets/style/print.scss

@@ -1,7 +1,6 @@
 @charset 'UTF-8';
 
-// ## rem-calc
-@import 'base/utilities/functions';
+// ## Vendors
 
 // ## toolkit
-@import 'base/toolkit';
+@use 'base/toolkit' as *;