@linzjs/lui 10.2.2 → 10.3.2

package/dist/scss/Elements/Forms/FormComponents/FormSpacing.scss

@@ -2,19 +2,19 @@
 
 @mixin form-spacing(
   // top margin for labels that aren't for checkboxes or radio
-    $my-label-top-margin,
+  $my-label-top-margin,
   // top offset for radio and checkbox inputs
-    $my-checkbox-input-top-offset,
+  $my-checkbox-input-top-offset,
   // top margin for radio and checkboxes
-    $my-checkbox-margin-top,
+  $my-checkbox-margin-top,
   // top margin for the container of radio or checkbox group
-    $my-input-wrapper-spacing,
+  $my-input-wrapper-spacing,
   // Error message top margin
-    $my-error-msg-top-margin,
+  $my-error-msg-top-margin,
   // Top margin on error text that appears next to inputs
-    $my-lui-error-text-top-margin,
+  $my-lui-error-text-top-margin,
   // mobile option for top margin for labels that aren't for checkboxes or radio
-    $my-label-top-margin-mob: $my-label-top-margin
+  $my-label-top-margin-mob: $my-label-top-margin
 ) {
   // All the margin declarations
   // ------------------------------------------------------------------------------------------------

package/dist/scss/Elements/Forms/FormComponents/Inputs.scss

@@ -26,7 +26,6 @@
     border-radius: misc.$borderRadius;
     line-height: $my-input-height;
     width: 100%;
-    max-width: 750px;
     margin: 0;
     transition: border 0.3s ease(in-out-expo);
     box-sizing: border-box;
@@ -154,10 +153,6 @@
     max-width: 750px;
     position: relative;
 
-    input {
-      max-width: none;
-    }
-
     .lui-bearing-display {
       position: absolute;
       right: 14px;

package/dist/scss/Elements/Forms/FormComponents/RadiosCheckboxes.scss

@@ -5,123 +5,112 @@
 @use "../../../Foundation/Variables/FormVars.scss" as forms;
 @use "../../../Foundation/Utilities/" as *;
 
-@mixin radios-and-checkboxes(
-  $my-font-size,
-  $my-line-height,
-  $my-input-width,
-  $my-checkbox-icon-font-size,
-  $my-checkbox-icon-line-height,
-  $my-lui-form-error-icon-size,
-  $my-imput-group-error-icon-left-pos,
-  $my-checkbox-top-adjustment
-) {
-  .lui-checkbox-container,
-  .lui-radio-container {
-    display: flex;
-    position: relative;
+.lui-checkbox-container,
+.lui-radio-container {
+  display: flex;
+  position: relative;
 
-    input {
-      height: $my-input-width;
-      // min width was added as the checkbox width was being influenced by the width of the container and a cropping effect occurred
-      min-width: $my-input-width;
-      width: $my-input-width;
-      @include appearance(none);
-      border: forms.$input-border-width-thick solid
-        forms.$checkbox-border-colour;
-      background-color:  colors.$white;
-      position: relative;
-      margin: 0;
-      &:disabled {
-        border: forms.$input-border-width solid colors.$grey-30;
-        background-color: colors.$grey-10;
-        + label {
-          color: colors.$grey-30;
-        }
+  input {
+    height: forms.$input-width;
+    // min width was added as the checkbox width was being influenced by the width of the container and a cropping effect occurred
+    min-width: forms.$input-width;
+    width: forms.$input-width;
+    @include appearance(none);
+    border: forms.$input-border-width-thick solid forms.$checkbox-border-colour;
+    background-color: colors.$white;
+    position: relative;
+    margin: 0;
+    &:disabled {
+      border: forms.$input-border-width solid colors.$grey-30;
+      background-color: colors.$grey-10;
+      + label {
+        color: colors.$grey-30;
       }
     }
-    label {
-      @include fonts.font-light;
-      font-size: $my-font-size;
-    }
   }
 
-  .lui-radio-container {
-    input {
-      border-radius: 50%;
-      &:checked {
-        &:before {
-          display: block;
-          position: absolute;
-          left: 50%;
-          content: '';
-          top: 50%;
-          transform: translate(-50%, -50%);
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-          background: colors.$brand-primary;
-        }
-        &:disabled:before {
-          background: colors.$disabled-color-dark;
-        }
+  label {
+    @include fonts.font-light();
+    font-size: fonts.$base-font-size;
+  }
+}
+
+.lui-radio-container {
+  input {
+    border-radius: 50%;
+    &:checked {
+      &:before {
+        display: block;
+        position: absolute;
+        left: 50%;
+        content: '';
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: colors.$brand-primary;
+      }
+      &:disabled:before {
+        background: colors.$disabled-color-dark;
       }
     }
   }
+}
 
-  .lui-checkbox-container {
-    input[type='checkbox'] {
-      box-sizing: border-box;
-      border-radius: misc.$borderRadius;
-      position: relative;
-      &:checked {
-        border: forms.$input-border-width-thick solid colors.$brand-primary;
-        background-color: colors.$brand-primary;
-        &:before {
-          display: block;
-          position: absolute;
-          width: $my-input-width -
-            (forms.$input-border-width-thick + forms.$input-border-width-thick);
-          height: $my-input-width -
-            (forms.$input-border-width-thick + forms.$input-border-width-thick);
-          font-family: 'Material Icons Round';
-          left: 0;
-          top: -1px;
-          content: '\e876';
-          text-align: center;
-          color: #fff;
-          font-size: $my-checkbox-icon-font-size;
-          line-height: $my-checkbox-icon-line-height;
-          vertical-align: middle;
-        }
-        &:disabled {
-          background: colors.$disabled-color-dark;
-          border-color: colors.$disabled-color-dark;
-        }
+.lui-checkbox-container {
+  input[type='checkbox'] {
+    box-sizing: border-box;
+    border-radius: misc.$borderRadius;
+    position: relative;
+    &:checked {
+      border: forms.$input-border-width-thick solid colors.$brand-primary;
+      background-color: colors.$brand-primary;
+      &:before {
+        display: block;
+        position: absolute;
+        width: forms.$input-width -
+          (forms.$input-border-width-thick + forms.$input-border-width-thick);
+        height: forms.$input-width -
+          (forms.$input-border-width-thick + forms.$input-border-width-thick);
+        font-family: 'Material Icons Round';
+        left: 0;
+        top: -1px;
+        content: '\e876';
+        text-align: center;
+        color: #fff;
+        font-size: forms.$checkbox-icon-font-size;
+        line-height: forms.$checkbox-icon-line-height;
+        vertical-align: middle;
+      }
+      &:disabled {
+        background: colors.$disabled-color-dark;
+        border-color: colors.$disabled-color-dark;
       }
     }
   }
+}
 
-  .lui-input-error {
-    // Checkboxes and radio groups are styled differently in error states. The error styling wraps around the whole group
-    .lui-input-group-wrapper,
-    &.lui-button-group {
-      // Button groups are styled the same as checkbox/radio groups, except for the padding
-      position: relative;
-      border: forms.$input-border-width solid colors.$error;
-      border-left: $my-line-height solid colors.$error;
-      padding: spacing.$unit-xxs spacing.$unit-xs spacing.$unit-xs;
-      margin-top: spacing.$px;
-      @include box-shadow;
-      .lui-form-status-icon {
-        left: $my-imput-group-error-icon-left-pos;
-        font-size: $my-lui-form-error-icon-size;
-      }
+.lui-input-error {
+  // Checkboxes and radio groups are styled differently in error states. The error styling wraps around the whole group
+  .lui-input-group-wrapper,
+  &.lui-button-group {
+    // Button groups are styled the same as checkbox/radio groups, except for the padding
+    position: relative;
+    border: forms.$input-border-width solid colors.$error;
+    border-left: 48px solid colors.$error;
+    padding: spacing.$unit-xxs spacing.$unit-xs spacing.$unit-xs;
+    margin-top: spacing.$unit-md;
+    @include box-shadow;
+    .lui-form-status-icon {
+      left: spacing.$base-unit * -5;
+      font-size: forms.$form-error-icon-size;
     }
-    &.lui-button-group {
-      padding: 0;
-      .lui-button-wrapper button {
-        border: forms.$input-border-width solid colors.$error;
-      }
+  }
+  &.lui-button-group {
+    padding: 0;
+    .lui-button-wrapper button {
+      border: forms.$input-border-width solid colors.$error;
     }
   }
 }

package/dist/scss/Elements/Forms/forms.scss

@@ -13,52 +13,34 @@
 
 @include Inputs.inputs(
   // The font size
-    fonts.$base-font-size,
+  fonts.$base-font-size,
   // The line height
-    48px,
+  48px,
   // The size of the font for the label
-    rem(14px),
+  rem(14px),
   // The padding on the input
-    spacing.$unit-xs,
+  spacing.$unit-xs,
   // The size of the icon for the warning/error (may change if we have a compressed version of forms)
-    forms.$form-error-icon-size,
+  forms.$form-error-icon-size,
   // The offset positioning of the error icon
-    spacing.$base-unit,
+  spacing.$base-unit,
   // the input height
-    48px
-);
-@include RadiosCheckboxes.radios-and-checkboxes(
-  // The font size
-    fonts.$base-font-size,
-  // The line height
-    48px,
-  // The width of the checkbox/radio input
-    forms.$input-width,
-  // Set the size of the icon font that is superimposed over the input
-    forms.$checkbox-icon-font-size,
-  // Set the Line height of the icon font that is superimposed over the input
-    forms.$checkbox-icon-line-height,
-  // The size of the icon for the warning/error (may change if we have a compressed version of forms)
-    forms.$form-error-icon-size,
-  // Left position of the group error icon
-    spacing.$base-unit * -5,
-  // Top position of the checkbox/radio input to align with label
-    0
+  48px
 );
 
 @include FormSpacing.form-spacing(
   // top margin for labels that aren't for checkboxes or radio
-    forms.$label-spacing,
+  forms.$label-spacing,
   // top offset for radio and checkbox inputs
-    forms.$input-spacing,
+  forms.$input-spacing,
   // top margin for radio and checkboxes
-    forms.$input-spacing,
+  forms.$input-spacing,
   // top margin for the container of radio or checkbox group
-    forms.$input-spacing,
+  forms.$input-spacing,
   // Error message top margin
-    0.5rem,
+  0.5rem,
   // Top margin on error text that appears next to inputs
-    5px,
+  5px,
   // mobile option for top margin for labels that aren't for checkboxes or radio
-    forms.$label-spacing
+  forms.$label-spacing
 );

package/dist/scss/Elements/Tables/tables.scss

@@ -15,7 +15,7 @@ th {
 table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: spacing.$unit-md;
+  margin-top: spacing.$unit-lg;
   caption {
     padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 0;
     text-align: left;

package/dist/scss/Foundation/Utilities/AspectRatio.scss

@@ -10,7 +10,7 @@
 
   &::before {
     display: block;
-    content: "";
+    content: '';
     width: 100%;
     padding-top: math.div($height, $width) * 100%;
   }

package/dist/scss/Foundation/Utilities/Borders.scss

@@ -12,7 +12,7 @@
 @mixin border(
   $width: 1px,
   $style: solid,
-  $color: $black-10,
+  $color: $grey-20,
   $borderRadius: null
 ) {
   @if ($borderRadius != null) {

package/dist/scss/Foundation/Utilities/Breakpoint.scss

@@ -2,16 +2,28 @@
 
 @mixin breakpoint($breakpoint) {
   @if ($breakpoint == sm) {
-    @media screen and (min-width: #{$breakpoint1}) { @content; }
+    @media screen and (min-width: #{$breakpoint1}) {
+      @content;
+    }
   } @else if ($breakpoint == md) {
-    @media screen and (min-width: #{$breakpoint2}) { @content; }
+    @media screen and (min-width: #{$breakpoint2}) {
+      @content;
+    }
   } @else if ($breakpoint == lg) {
-    @media screen and (min-width: #{$breakpoint3}) { @content; }
+    @media screen and (min-width: #{$breakpoint3}) {
+      @content;
+    }
   } @else if ($breakpoint == xl) {
-    @media screen and (min-width: #{$breakpoint4}) { @content; }
+    @media screen and (min-width: #{$breakpoint4}) {
+      @content;
+    }
   } @else if ($breakpoint == xxl) {
-    @media screen and (min-width: #{$breakpoint5}) { @content; }
-  }@else {
-    @media screen and (min-width: #{$breakpoint}) { @content; }
+    @media screen and (min-width: #{$breakpoint5}) {
+      @content;
+    }
+  } @else {
+    @media screen and (min-width: #{$breakpoint}) {
+      @content;
+    }
   }
 }

package/dist/scss/Foundation/Utilities/DLColumns.scss

@@ -11,7 +11,12 @@
 // 1. Remove browser default margins
 // 2. Excludes top and bottom item spacing by default
 
-@mixin dl--columns($dt-width, $dt-width-desktop, $dl-gutter-width: $v * 2, $dl-row-height: $v) {
+@mixin dl--columns(
+  $dt-width,
+  $dt-width-desktop,
+  $dl-gutter-width: $v * 2,
+  $dl-row-height: $v
+) {
   margin-top: 0; // 1
   margin-bottom: 0; // 1
   display: flex;
@@ -20,18 +25,28 @@
 
   dt {
     width: $dt-width;
-    @media #{$desktop} { width: $dt-width-desktop; }
+    @media #{$desktop} {
+      width: $dt-width-desktop;
+    }
   }
 
   dd {
     margin-left: 0;
     padding-left: $dl-gutter-width;
     width: calc(100% - #{$dt-width});
-    @media #{$desktop} { width: calc(100% - #{$dt-width-desktop}); }
+    @media #{$desktop} {
+      width: calc(100% - #{$dt-width-desktop});
+    }
   }
 
-  dt,	dd { // 2
-    &:not(:first-of-type) { padding-top: #{$dl-row-height * 0.5}; }
-    &:not(:last-of-type) { padding-bottom: #{$dl-row-height * 0.5}; }
+  dt,
+  dd {
+    // 2
+    &:not(:first-of-type) {
+      padding-top: #{$dl-row-height * 0.5};
+    }
+    &:not(:last-of-type) {
+      padding-bottom: #{$dl-row-height * 0.5};
+    }
   }
 }

package/dist/scss/Foundation/Utilities/Ease.scss

@@ -9,34 +9,27 @@ $ease: (
   in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19),
   out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1),
   in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1),
-
   in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335),
   out-circ: cubic-bezier(0.075, 0.82, 0.165, 1),
   in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86),
-
   in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035),
   out-expo: cubic-bezier(0.19, 1, 0.22, 1),
   in-out-expo: cubic-bezier(1, 0, 0, 1),
-
   in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53),
   out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94),
   in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955),
-
   in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22),
   out-quart: cubic-bezier(0.165, 0.84, 0.44, 1),
   in-out-quart: cubic-bezier(0.77, 0, 0.175, 1),
-
   in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06),
   out-quint: cubic-bezier(0.23, 1, 0.32, 1),
   in-out-quint: cubic-bezier(0.86, 0, 0.07, 1),
-
   in-sine: cubic-bezier(0.47, 0, 0.745, 0.715),
   out-sine: cubic-bezier(0.39, 0.575, 0.565, 1),
   in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95),
-
   in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045),
   out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275),
-  in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55)
+  in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55),
 );
 
 @function ease($key) {