@linzjs/lui 10.2.2 → 10.3.2

package/dist/scss/Foundation/Utilities/FitMedia.scss

@@ -35,7 +35,8 @@
     transform: translate(-50%, -50%);
   }
 
-  > img { // don't stretch the image
+  > img {
+    // don't stretch the image
     min-width: 100%;
     min-height: 100%;
     // Set up proportionate scaling

package/dist/scss/Foundation/Utilities/FluidType.scss

@@ -20,7 +20,12 @@
   @return math.div($value, $value * 0 + 1);
 }
 
-@mixin fluidType--size($min-size, $max-size, $min-breakpoint: 1px, $max-breakpoint) {
+@mixin fluidType--size(
+  $min-size,
+  $max-size,
+  $min-breakpoint: 1px,
+  $max-breakpoint
+) {
   $u1: unit($min-breakpoint);
   $u2: unit($max-breakpoint);
   $u3: unit($min-size);
@@ -28,10 +33,16 @@
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
     & {
-
       font-size: $min-size;
       @media screen and (min-width: $min-breakpoint) {
-        font-size: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-breakpoint}) / #{strip-unit($max-breakpoint - $min-breakpoint)}));
+        font-size: calc(
+          #{$min-size} + #{strip-unit($max-size - $min-size)} *
+            (
+              (100vw - #{$min-breakpoint}) / #{strip-unit(
+                  $max-breakpoint - $min-breakpoint
+                )}
+            )
+        );
       }
 
       @media screen and (min-width: $max-breakpoint) {
@@ -41,7 +52,12 @@
   }
 }
 
-@mixin fluidType--lineHeight($min-size: 1px, $max-size, $min-breakpoint: 1px, $max-breakpoint) {
+@mixin fluidType--lineHeight(
+  $min-size: 1px,
+  $max-size,
+  $min-breakpoint: 1px,
+  $max-breakpoint
+) {
   $u1: unit($min-size);
   $u2: unit($max-size);
   $u3: unit($min-breakpoint);
@@ -49,10 +65,16 @@
 
   @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
     & {
-
       line-height: $min-size;
       @media screen and (min-width: $min-breakpoint) {
-        line-height: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-breakpoint}) / #{strip-unit($max-breakpoint - $min-breakpoint)}));
+        line-height: calc(
+          #{$min-size} + #{strip-unit($max-size - $min-size)} *
+            (
+              (100vw - #{$min-breakpoint}) / #{strip-unit(
+                  $max-breakpoint - $min-breakpoint
+                )}
+            )
+        );
       }
 
       @media screen and (min-width: $max-breakpoint) {

package/dist/scss/Foundation/Utilities/Placeholder.scss

@@ -12,25 +12,32 @@
 //   }
 // }
 
-
 @mixin placeholder($color: null) {
   &::-webkit-input-placeholder {
-    @if $color { color: $color; }
+    @if $color {
+      color: $color;
+    }
     @content;
   }
 
   &::-moz-placeholder {
-    @if $color { color: $color; }
+    @if $color {
+      color: $color;
+    }
     @content;
   }
 
   &:-moz-placeholder {
-    @if $color { color: $color; }
+    @if $color {
+      color: $color;
+    }
     @content;
   }
 
   &:-ms-input-placeholder {
-    @if $color { color: $color; }
+    @if $color {
+      color: $color;
+    }
     @content;
   }
 }

package/dist/scss/Foundation/Variables/FontVars.scss

@@ -7,11 +7,11 @@ $base-font-size: 16px;
 $base-font-weight: 300;
 
 //Adjust these to your font – don't need all of them if you don't need
-$base-font--light: "OpenSans Light";
-$base-font--regular: "OpenSans Regular";
-$base-font--italic: "OpenSans Italic";
-$base-font--bold: "OpenSans Bold";
-$base-font--semibold: "OpenSans SemiBold";
+$base-font--light: 'OpenSans Light';
+$base-font--regular: 'OpenSans Regular';
+$base-font--italic: 'OpenSans Italic';
+$base-font--bold: 'OpenSans Bold';
+$base-font--semibold: 'OpenSans SemiBold';
 $base-font--header: $base-font--light;
 
 // =====================
@@ -67,6 +67,6 @@ $base: 16 * ($base-font-size * 0.01);
 $leading: $base * $base-line-height;
 
 @mixin type-margin-bottom($number) {
-  margin-bottom: #{$number * $leading + "px"};
-  margin-bottom: #{$number * $line-height + "rem"};
+  margin-bottom: #{$number * $leading + 'px'};
+  margin-bottom: #{$number * $line-height + 'rem'};
 }

package/dist/scss/Foundation/Variables/FormVars.scss

@@ -3,16 +3,16 @@
 @use './SpacingVars.scss' as spacing;
 @use './ColorVars.scss' as colors;
 
-$label-spacing: spacing.$px; // 24px
-$input-spacing: math.div(spacing.$px, 3); // 8px
+$label-spacing: spacing.$unit-md; // 24px
+$input-spacing: spacing.$unit-xs; // 8px
 
-$input-width: 24px;
-$input-border-width: 1px;
-$input-border-width-thick: 2px;
+$input-width: spacing.$unit-md;
+$input-border-width: 0.06rem; // 1px
+$input-border-width-thick: 0.13rem; // 2px
 
-$checkbox-icon-font-size: 18px;
-$checkbox-icon-line-height: spacing.$px; //24px
+$checkbox-icon-font-size: 1.13rem; // 18px
+$checkbox-icon-line-height: spacing.$unit-md; // 24px
 $checkbox-label-spacing: $input-spacing;
 $checkbox-border-colour: colors.$blue-75;
 
-$form-error-icon-size: 32px;
+$form-error-icon-size: spacing.$unit-lg;

package/dist/scss/Foundation/Variables/SpacingVars.scss

@@ -2,18 +2,25 @@
 
 @use "sass:math";
 
-$px: 24px;
-$v: $px;
-$h: $v;
-
 // Grid variables and margins
 
-$base-unit: math.div($px, 3); // changes base unit to 8px
+$base-unit: 0.5rem; // changes base unit to 8px
 
 $unit-xxs: $base-unit * 0.5; // 4px
 $unit-xs: $base-unit; // 8px
-$unit-sm: $base-unit * 2; // 16px
-$unit-md: $base-unit * 4; // 32px
-$unit-lg: $base-unit * 6; // 48px
-$unit-xl: $base-unit * 10; // 80px
-$unit-xxl: $base-unit * 20; // 160px
+$unit-sm: $base-unit * 1.5; // 12px
+$unit-md: $base-unit * 3; // 24px
+$unit-lg: $base-unit * 4; // 32px
+$unit-xl: $base-unit * 6; // 48px
+$unit-xxl: $base-unit * 10; // 80px
+
+// Deprecated //
+$px: 24px;
+$v: $px;
+$h: $v;
+
+// $unit-sm: // 16px -> 12px
+// $unit-md: // 32px ->24px
+// $unit-lg: // 48px -> 32px
+// $unit-xl:  // 80px -> 48px
+// $unit-xxl: // 160px -> 80px

package/dist/scss/Global/GenericElements/Lists.scss

@@ -20,9 +20,9 @@ ul {
 // This is used to add generic list styles to ul & li's
 .lui-list-bullet {
   list-style-type: disc;
-  padding-left: lui.$px * 2; // 24px
+  padding-left: lui.$unit-md; // 24px
 
   li {
-    margin-top: lui.$px * 0.5; // 12px
+    margin-top: lui.$unit-sm; // 12px
   }
 }

package/dist/scss/Global/GenericElements/Typography.scss

@@ -125,7 +125,7 @@ h2,
 .h2 {
   @include fonts.font-light();
   font-size: rem(32px);
-  margin-top: spacing.$unit-lg; // 96px
+  margin-top: spacing.$unit-xl; // 96px
 
   & + p {
     margin-top: spacing.$unit-sm; // 32px
@@ -136,7 +136,7 @@ h3,
 .h3 {
   @include fonts.font-regular();
   font-size: rem(26px);
-  margin-top: spacing.$unit-md; // 64px
+  margin-top: spacing.$unit-lg; // 64px
 
   & + p {
     margin-top: spacing.$unit-sm; // 32px
@@ -147,7 +147,7 @@ h4,
 .h4 {
   @include fonts.font-regular();
   font-size: rem(22px);
-  margin-top: spacing.$unit-md; // 64px
+  margin-top: spacing.$unit-lg; // 64px
 
   & + p {
     margin-top: spacing.$unit-sm; // 32px
@@ -174,12 +174,12 @@ p,
 .p {
   @include fonts.font-light();
   font-size: rem(16px);
-  margin-top: spacing.$unit-md; //64px
+  margin-top: spacing.$unit-lg; //64px
 }
 
 p.lui-small {
   @include fonts.font-light();
   font-size: rem(13px);
   line-height: rem(20px);
-  margin-top: spacing.$unit-md; //64px
+  margin-top: spacing.$unit-lg; //64px
 }

package/dist/scss/Global/_index.scss

@@ -1,2 +1,2 @@
 @forward './GenericElements/index';
-@forward './Layout/index';
+@forward './Layout/index';

package/dist/scss/Vendor/_index.scss

@@ -1 +1 @@
-@use "naturalize";
+@use "naturalize";

package/dist/scss/Vendor/naturalize.scss

@@ -6,17 +6,21 @@
 // ============
 // Apply a natural box layout model to all elements, but allowing components to change
 // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
-html { box-sizing: border-box; }
+html {
+  box-sizing: border-box;
+}
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit;
 }
 
-
 // ============
 // Remove iOS Safari's default colour for active elements
-* { -webkit-tap-highlight-color: color.adjust(white, $alpha: -1); }
-
+* {
+  -webkit-tap-highlight-color: color.adjust(white, $alpha: -1);
+}
 
 /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css// ============ */
 
@@ -27,11 +31,11 @@ html {
   -webkit-text-size-adjust: 100%; // 1
 }
 
-
 // ============
 // Remove the margin in all browsers
-body { margin: 0; }
-
+body {
+  margin: 0;
+}
 
 // ============
 // Correct the margin on `h1` elements within `section` and
@@ -41,7 +45,6 @@ h1 {
   margin-bottom: 0.67em;
 }
 
-
 // ============
 // 1. Add the correct box sizing in Firefox.
 // 2. Show the overflow in Edge and IE.
@@ -50,7 +53,6 @@ hr {
   overflow: visible; // 2
 }
 
-
 // ============
 // 1. Remove the gray background on active links in IE 10.
 // 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
@@ -59,7 +61,6 @@ a {
   -webkit-text-decoration-skip: objects; // 2
 }
 
-
 // ============
 // Remove the outline on focused links when they are also active or hovered
 // in all browsers (opinionated).
@@ -68,7 +69,6 @@ a:hover {
   outline-width: 0;
 }
 
-
 // ============
 // 1. Remove the border on images inside links in IE 10-.
 // 2. Don't allow images to overflow their content
@@ -77,11 +77,11 @@ img {
   max-width: 100%; // 2
 }
 
-
 // ============
 // Hide the overflow in IE.
-svg:not(:root) { overflow: hidden; }
-
+svg:not(:root) {
+  overflow: hidden;
+}
 
 // ============
 // Forms
@@ -99,7 +99,6 @@ textarea {
   margin: 0; // 2
 }
 
-
 // ============
 // Show the overflow in IE.
 // 1. Show the overflow in Edge.
@@ -108,7 +107,6 @@ input {
   overflow: visible; // 1
 }
 
-
 // ============
 // Remove the inheritance of text transform in Edge, Firefox, and IE.
 // 1. Remove the inheritance of text transform in Firefox.
@@ -117,7 +115,6 @@ select {
   text-transform: none; // 1
 }
 
-
 // ============
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 //    controls in Android 4.
@@ -132,16 +129,16 @@ html [type="button"], // 1
 // ============
 // Remove the inner border and padding in Firefox.
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 // ============
 // Ensure button hover cursor state
-[role="button"]:not([disabled]),
+[role='button']:not([disabled]),
 button:not([disabled]) {
   cursor: pointer;
 }
@@ -153,53 +150,49 @@ button[disabled] {
 // ============
 // Restore the focus styles unset by the previous rule.
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
-
 // ============
 // Remove the default vertical scrollbar in IE.
-textarea { overflow: auto; }
-
+textarea {
+  overflow: auto;
+}
 
 // ============
 // 1. Add the correct box sizing in IE 10-.
 // 2. Remove the padding in IE 10-.
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; // 1// ============
   padding: 0; // 2// ============
 }
 
-
 // ============
 // Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-
 // ============
 // 1. Correct the odd appearance in Chrome and Safari.
 // 2. Correct the outline style in Safari.
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; // 1// ============
   outline-offset: -2px; // 2// ============
 }
 
-
 // ============
 // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-
 // ============
 // 1. Correct the inability to style clickable types in iOS and Safari.
 // 2. Change font properties to `inherit` in Safari.