@linzjs/lui 16.2.1 → 16.2.4

package/dist/scss/Components/LuiBadge/LuiBadge.scss

@@ -1,4 +1,4 @@
-@use '../../Foundation/Variables/FormVars' as luiForms;
+@use '../../Foundation/Variables/FormVars' as forms;
 @use "../../Foundation/Variables/MiscVars.scss" as misc;
 @use "../../Foundation/Variables/ColorVars.scss" as colors;
 @use '../../Foundation/Variables/FontVars.scss' as fonts;

package/dist/scss/Components/LuiError/LuiError.scss

@@ -1,14 +1,14 @@
-@use '../../Foundation/Variables/FormVars' as luiForms;
-@use '../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../Foundation/Variables/FormVars' as forms;
+@use '../../Foundation/Variables/SpacingVars' as spacing;
 
 .LuiError {
-  @include luiForms.formLabel();
+  @include forms.formLabel();
 
   &-errorIcon {
     vertical-align: middle;
     display: inline-block;
   }
   &-errorText {
-    margin-left: luiSpacing.$unit-xs;
+    margin-left: spacing.$unit-xs;
   }
-}
+}

package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss

@@ -1,5 +1,7 @@
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../../Foundation/Variables/ColorVars' as colors;
+@use '../../../Foundation/Variables/SpacingVars' as spacing;
+@use '../../../Foundation/Variables/FontVars' as fonts;
+@use '../../../Foundation/Variables/FormVars' as forms;
 @use '../../../Foundation/Variables/MiscVars' as misc;
 // Usage:
 // <label class="Checkbox" for="male">
@@ -18,6 +20,7 @@ $border-size: 2px;
 .LuiCheckboxInput {
   margin-bottom: 24px;
   box-sizing: border-box;
+  position: relative;
 }
 
 .LuiCheckboxInput-group {
@@ -37,6 +40,7 @@ $border-size: 2px;
 
   .LuiCheckboxInput--isDisabled & {
     cursor: not-allowed;
+    color: colors.$disabled-color;
   }
 }
 
@@ -56,22 +60,34 @@ $border-size: 2px;
 }
 
 .LuiCheckboxInput-errorText {
-  color: luiColors.$error;
+  color: colors.$error;
 }
 
 .LuiCheckboxInput-errorIcon {
-  margin-left: luiSpacing.$unit-lg;
+  margin-left: spacing.$unit-lg;
+}
+
+.LuiCheckboxInput-mandatory {
+  position: absolute;
+  left: -12px;
+  top: -4px;
+  @include fonts.font-semibold();
+  font-size: forms.$label-font-size;
+  color: colors.$error;
 }
 
 .LuiCheckboxInput-labelCheck {
   // position: relative;
-  fill: rgba(luiColors.$snow, 0); // tick in checkbox default fill colour - make it transparent
-  background-color: luiColors.$snow; // checkbox default bg colour
-  border: $border-size solid luiColors.$sea;
+  fill: rgba(
+    colors.$snow,
+    0
+  ); // tick in checkbox default fill colour - make it transparent
+  background-color: colors.$snow; // checkbox default bg colour
+  border: $border-size solid colors.$sea;
   border-radius: misc.$borderRadius;
   transition: background-color 0.3s ease-in-out;
   order: -1;
-  margin-right: luiSpacing.$unit-xs;
+  margin-right: spacing.$unit-xs;
   svg {
     // with the borders on the span, we need to offset the SVG by Xpx to compensate and make it visually centred
     position: relative;
@@ -81,8 +97,8 @@ $border-size: 2px;
 
   .LuiCheckboxInput-input:checked &,
   .LuiCheckboxInput--isChecked & {
-    background-color: luiColors.$sea;
-    fill: rgba(luiColors.$snow, 1); // tick in checkbox now visible when checked
+    background-color: colors.$sea;
+    fill: rgba(colors.$snow, 1); // tick in checkbox now visible when checked
   }
 }
 
@@ -92,33 +108,33 @@ $border-size: 2px;
 
 // Error, unchecked
 .LuiCheckboxInput--hasError .LuiCheckboxInput-labelCheck {
-  border-color: luiColors.$error;
+  border-color: colors.$error;
 }
 
 // Error, checked
 .LuiCheckboxInput--isChecked.LuiCheckboxInput--hasError
-.LuiCheckboxInput-labelCheck {
-  background-color: luiColors.$error;
-  border-color: luiColors.$error;
+  .LuiCheckboxInput-labelCheck {
+  background-color: colors.$error;
+  border-color: colors.$error;
 }
 
 // Disabled, unchecked
 .LuiCheckboxInput-input:disabled
-+ .LuiCheckboxInput-label
-.LuiCheckboxInput-labelCheck,
+  + .LuiCheckboxInput-label
+  .LuiCheckboxInput-labelCheck,
 .LuiCheckboxInput--isDisabled .LuiCheckboxInput-labelCheck {
-  border-color: luiColors.$disabled-color;
-  background-color: luiColors.$disabled-bg-color;
+  border-color: colors.$disabled-color;
+  background-color: colors.$disabled-bg-color;
 }
 
 // Disabled, checked
 .LuiCheckboxInput-input:checked:disabled
-+ .LuiCheckboxInput-label
-.LuiCheckboxInput-labelCheck,
+  + .LuiCheckboxInput-label
+  .LuiCheckboxInput-labelCheck,
 .LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled
-.LuiCheckboxInput-labelCheck {
-  background-color: luiColors.$disabled-color;
-  border-color: luiColors.$disabled-color;
+  .LuiCheckboxInput-labelCheck {
+  background-color: colors.$disabled-color;
+  border-color: colors.$disabled-color;
 }
 
 // ============
@@ -131,4 +147,4 @@ $border-size: 2px;
     margin-bottom: 0;
     margin-right: 24px;
   }
-}
+}

package/dist/scss/Components/LuiFormElements/LuiFileInputBox.scss

@@ -1,7 +1,7 @@
-@use '../../../scss/Foundation/Variables/LuiColors' as luiColors;
+@use '../../../scss/Foundation/Variables/LuiColors' as colors;
 
 .LuiFileInputBox-upload {
-  outline: 2px dashed luiColors.$lily;
+  outline: 2px dashed colors.$lily;
   color: dimgray;
   cursor: pointer;
   position: relative;
@@ -32,26 +32,26 @@
 }
 
 .LuiFileInputBox-upload-error {
-  outline: 2px dashed luiColors.$error;
+  outline: 2px dashed colors.$error;
 }
 
 .LuiFileInputBox-upload-icon-success {
   width: 120px;
-  fill: luiColors.$success;
+  fill: colors.$success;
   margin-left: auto;
   margin-right: auto;
 }
 
 .LuiFileInputBox-upload-icon-upload {
   width: 120px;
-  fill: luiColors.$sea;
+  fill: colors.$sea;
   margin-left: auto;
   margin-right: auto;
 }
 
 .LuiFileInputBox-upload-icon-error {
   width: 168px;
-  fill: luiColors.$error;
+  fill: colors.$error;
   margin-left: auto;
   margin-right: auto;
 }
@@ -61,7 +61,7 @@
   padding-top: 8px;
 
   span {
-    color: luiColors.$info;
+    color: colors.$info;
     font-weight: 600;
   }
 }

package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss

@@ -1,7 +1,7 @@
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
-@use '../../../Foundation/Utilities/ScreenReadersOnly' as luiScreenReadersOnly;
+@use '../../../Foundation/Variables/FontVars' as fonts;
+@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/SpacingVars' as spacing;
+@use '../../../Foundation/Utilities/ScreenReadersOnly' as screen;
 
 .LuiRadioInput-fieldset {
   border: none;
@@ -9,11 +9,11 @@
 }
 
 .LuiRadioInput-input {
-  @include luiScreenReadersOnly.ScreenReadersOnly();
+  @include screen.ScreenReadersOnly();
 }
 
 .LuiRadioInput-legend {
-  @include luiFonts.font-semibold;
+  @include fonts.font-semibold;
 }
 
 .LuiRadioInput-label {
@@ -22,20 +22,20 @@
   justify-content: flex-start;
   align-items: flex-start;
   cursor: pointer;
-  padding: luiSpacing.$unit-xs 0 luiSpacing.$unit-xs luiSpacing.$unit-lg;
+  padding: spacing.$unit-xs 0 spacing.$unit-xs spacing.$unit-lg;
 
   &:before {
     content: '';
     height: 1.5rem; // 20px
     min-width: 1.5rem; // 20px
     width: 1.5rem; // 20px
-    border: 2px solid luiColors.$sea;
+    border: 2px solid colors.$sea;
     border-radius: 50%;
     background-color: transparent;
     position: absolute;
     left: 0;
     top: 8px;
-    margin-right: luiSpacing.$unit-sm;
+    margin-right: spacing.$unit-sm;
   }
 
   &:after {
@@ -57,33 +57,34 @@
   }
 
   &--isDisabled {
+    color: colors.$disabled-color;
     cursor: not-allowed;
 
     &:before {
-      background-color: luiColors.$disabled-bg-color;
-      border-color: luiColors.$disabled-color;
+      background-color: colors.$disabled-bg-color;
+      border-color: colors.$disabled-color;
     }
     &:after {
-      background-color: luiColors.$disabled-color-dark;
+      background-color: colors.$disabled-color-dark;
     }
   }
 }
 
 .LuiRadioInput--hasError {
   .LuiRadioInput-label:before {
-    border-color: luiColors.$error;
+    border-color: colors.$error;
   }
 }
 
 .LuiRadioInput-errorMsg {
   display: flex;
-  margin-top: luiSpacing.$unit-xs;
+  margin-top: spacing.$unit-xs;
 
   .LuiIcon--error {
-    margin-right: luiSpacing.$unit-xs;
+    margin-right: spacing.$unit-xs;
   }
 
   p {
     margin: 0;
   }
-}
+}

package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss

@@ -1,30 +1,33 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../../Foundation/Variables/FormVars' as forms;
+@use '../../../Foundation/Variables/FontVars' as fonts;
+@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Variables/MiscVars' as MiscVars;
 @use '../../../Foundation/Utilities/REM' as rem;
 
-
-// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component. 
+// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component.
 // Set spacing once you have it in your project
 
+.LuiSelect-label {
+  position: relative;
+}
+
 .LuiSelect-label-text {
-  @include luiForms.formLabel();
+  @include forms.formLabel();
 }
 
 .LuiSelect-select {
-  @include luiFonts.font-regular();
+  @include fonts.font-regular();
   margin-bottom: 0;
-  border: 1px solid luiColors.$silver;
+  border: 1px solid colors.$silver;
   border-radius: MiscVars.$borderRadius;
   display: block;
-  height: luiSpacing.$unit-xl;
-  color: luiColors.$charcoal;
-  caret-color: luiColors.$charcoal;
+  height: spacing.$unit-xl;
+  color: colors.$charcoal;
+  caret-color: colors.$charcoal;
   padding: {
-    right: luiSpacing.$unit-lg;
-    left: luiSpacing.$base-unit * 2; // 16px
+    right: spacing.$unit-lg;
+    left: spacing.$base-unit * 2; // 16px
   }
   width: 100%;
   transition: all 0.15 ease-in-out;
@@ -32,23 +35,23 @@
 
   &:hover,
   &:active {
-    border-color: luiColors.$input-focus;
+    border-color: colors.$input-focus;
     cursor: pointer;
   }
 
   &:focus {
     outline: none;
-    border-color: luiColors.$input-focus;
+    border-color: colors.$input-focus;
   }
 
   .hasError & {
-    border-color: luiColors.$error;
+    border-color: colors.$error;
   }
 
   .isDisabled & {
-    border-color: luiColors.$silver;
-    background-color: luiColors.$lily;
-    color: luiColors.$charcoal;
+    border-color: colors.$silver;
+    background-color: colors.$lily;
+    color: colors.$charcoal;
     cursor: not-allowed;
   }
 
@@ -57,7 +60,7 @@
   }
 
   .hasValue & {
-    color: luiColors.$charcoal;
+    color: colors.$charcoal;
   }
 }
 
@@ -68,11 +71,11 @@
       content: '';
       display: block;
       position: absolute;
-      width: luiSpacing.$unit-sm;
+      width: spacing.$unit-sm;
       top: 0;
       bottom: 0;
       left: -6px;
-      background-color: luiColors.$error;
+      background-color: colors.$error;
       border-radius: MiscVars.$borderRadius 0 0 MiscVars.$borderRadius;
       z-index: -1;
     }
@@ -90,13 +93,13 @@
 .LuiSelect-error {
   position: relative;
   display: flex;
-  @include luiFonts.font-semibold;
-  color: luiColors.$error;
+  @include fonts.font-semibold;
+  color: colors.$error;
   text-align: left;
-  padding-left: luiSpacing.$unit-md;
+  padding-left: spacing.$unit-md;
   font-size: rem.rem(14px);
   line-height: rem.rem(20px);
-  margin-top: luiSpacing.$unit-xxs;
+  margin-top: spacing.$unit-xxs;
 }
 
 .LuiSelect-error-icon {
@@ -106,8 +109,10 @@
 }
 
 .LuiSelect-mandatory {
-  display: inline-block;
-  width: 10px;
-  margin: 0 0 0 -10px;
-  color: luiColors.$error;
-}
+  position: absolute;
+  left: -12px;
+  top: 0;
+  @include fonts.font-semibold();
+  font-size: forms.$label-font-size;
+  color: colors.$error;
+}

package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss

@@ -1,17 +1,17 @@
-@use '../../../Foundation/Variables/FormVars' as luiForms;
-@use '../../../Foundation/Variables/FontVars' as luiFonts;
+@use '../../../Foundation/Variables/FormVars' as forms;
+@use '../../../Foundation/Variables/FontVars' as fonts;
 @use '../../../Foundation/Utilities/FluidType' as luiFluidType;
-@use '../../../Foundation/Variables/BreakpointVars' as luiBreakpoints;
-@use '../../../Foundation/Variables/LuiColors' as luiColors;
-@use '../../../Foundation/Variables/MiscVars' as luiMisc;
-@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../../Foundation/Variables/BreakpointVars' as breakpoints;
+@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/MiscVars' as misc;
+@use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Utilities/REM' as rem;
 
 // =============================
 // TextArea
 // =============================
 
-// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component. 
+// No top or bottom margins set on the component at the LUI level as we never know what is coming before or after the component.
 // Set spacing once you have it in your project
 
 .LuiTextAreaInput {
@@ -19,22 +19,22 @@
   position: relative;
 
   textarea {
-    @include luiFonts.font-regular;
+    @include fonts.font-regular;
     @include luiFluidType.fluidType--size(
       14px,
       16px,
       1px,
-      luiBreakpoints.$breakpoint-xl
+      breakpoints.$breakpoint-xl
     );
-    @include luiForms.formPlaceholder;
-    border: solid 1px luiColors.$silver;
-    border-radius: luiMisc.$borderRadius;
-    background: luiColors.$white;
+    @include forms.formPlaceholder;
+    border: solid 1px colors.$silver;
+    border-radius: misc.$borderRadius;
+    background: colors.$white;
     padding: {
-      top: luiSpacing.$unit-sm;
-      right: luiSpacing.$unit-lg;
-      bottom: luiSpacing.$unit-sm;
-      left: luiSpacing.$unit-xs * 2;
+      top: spacing.$unit-sm;
+      right: spacing.$unit-lg;
+      bottom: spacing.$unit-sm;
+      left: spacing.$unit-xs * 2;
     }
     box-sizing: border-box;
     width: 100%;
@@ -44,7 +44,7 @@
 
     &:focus {
       outline: none;
-      border-color: luiColors.$input-focus;
+      border-color: colors.$input-focus;
     }
   }
 
@@ -55,7 +55,7 @@
 
   &.hasError {
     textarea {
-      border: 1px solid luiColors.$error;
+      border: 1px solid colors.$error;
     }
     .LuiTextAreaInput-wrapper {
       position: relative;
@@ -64,39 +64,40 @@
         content: '';
         display: block;
         position: absolute;
-        width: luiSpacing.$unit-sm;
+        width: spacing.$unit-sm;
         top: 0;
         bottom: 0;
         left: -6px;
-        background-color: luiColors.$error;
-        border-radius: luiMisc.$borderRadius 0 0 luiMisc.$borderRadius;
+        background-color: colors.$error;
+        border-radius: misc.$borderRadius 0 0 misc.$borderRadius;
       }
     }
   }
 
   &.isDisabled {
     textarea {
-      border-color: luiColors.$silver;
-      background-color: luiColors.$lily;
+      border-color: colors.$silver;
+      background-color: colors.$lily;
       cursor: not-allowed;
     }
   }
 }
 
 .LuiTextAreaInput-label {
-  @include luiForms.formLabel;
+  @include forms.formLabel;
+  position: relative;
 }
 
 .LuiTextAreaInput-error {
   position: relative;
   display: flex;
-  color: luiColors.$error;
-  @include luiFonts.font-semibold;
+  color: colors.$error;
+  @include fonts.font-semibold;
   text-align: left;
-  padding-left: luiSpacing.$unit-md;
+  padding-left: spacing.$unit-md;
   font-size: rem.rem(14px);
   line-height: rem.rem(20px);
-  margin-top: luiSpacing.$unit-xxs;
+  margin-top: spacing.$unit-xxs;
 }
 
 .LuiTextAreaInput-error-icon {
@@ -106,10 +107,10 @@
 }
 
 .LuiTextAreaInput-mandatory {
-  display: inline-block;
-  @include luiFonts.font-semibold();
-  font-size: luiForms.$label-font-size;
-  width: 10px;
-  margin: 0 0 0 -10px;
-  color: luiColors.$error;
-}
+  position: absolute;
+  left: -12px;
+  top: 0px;
+  @include fonts.font-semibold();
+  font-size: forms.$label-font-size;
+  color: colors.$error;
+}