@linzjs/lui 15.1.14 → 16.1.0

package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss

@@ -92,6 +92,16 @@ $label-line-height: luiSpacing.$unit-md;
   }
 }
 
+.LuiTextInput-iconPosition{
+  position: absolute;
+  right:7px;
+  top:17%;
+
+  svg {
+    fill: luiColors.$fuscous;
+  }
+}
+
 .LuiTextInput-padlock-icon {
   // base64 encoded version of `assets/icons/lock.svg`.  referring to svg via it's path causes downstream import errors.
   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyMiI+PHBhdGggZD0iTTE0IDcuNUgxM1Y1LjVDMTMgMi43NCAxMC43NiAwLjUgOCAwLjVDNS4yNCAwLjUgMyAyLjc0IDMgNS41VjcuNUgyQzAuOSA3LjUgMCA4LjQgMCA5LjVWMTkuNUMwIDIwLjYgMC45IDIxLjUgMiAyMS41SDE0QzE1LjEgMjEuNSAxNiAyMC42IDE2IDE5LjVWOS41QzE2IDguNCAxNS4xIDcuNSAxNCA3LjVaTTggMTYuNUM2LjkgMTYuNSA2IDE1LjYgNiAxNC41QzYgMTMuNCA2LjkgMTIuNSA4IDEyLjVDOS4xIDEyLjUgMTAgMTMuNCAxMCAxNC41QzEwIDE1LjYgOS4xIDE2LjUgOCAxNi41Wk0xMS4xIDcuNUg0LjlWNS41QzQuOSAzLjc5IDYuMjkgMi40IDggMi40QzkuNzEgMi40IDExLjEgMy43OSAxMS4xIDUuNVY3LjVaIiBmaWxsPSIjNkI2OTY2IiAvPjwvc3ZnPg==');

package/dist/scss/Elements/Buttons/buttons.scss

@@ -7,11 +7,11 @@
 @use "../../Foundation/Utilities" as *;
 
 // button variables only used for this file
-$strokeWeight: 2px;
+$strokeWeight: 1px;
 $reversed-btn-active-txt: rgba(255, 255, 255, 0.6);
 $reversed-no-bg-btn-active-txt: rgba(255, 255, 255, 0.8);
 $disabled-reversed-no-bg-btn-txt: rgba(255, 255, 255, 0.4);
-$btnLine-height: 40px;
+$btnLine-height: 24px; 
 
 // reset buttons and base styling for all
 
@@ -20,7 +20,7 @@ $btnLine-height: 40px;
   font-size: 1rem;
   line-height: $btnLine-height;
   margin: 0;
-  padding: 0 spacing.$unit-lg;
+  padding: rem(7px) spacing.$unit-xs *2; //magic number to allow for 1px border to add to height
   border: none;
   border-radius: misc.$borderRadius;
   transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s,
@@ -107,7 +107,7 @@ button {
   &:active:enabled {
     background-color: $btnBgColActive;
     cursor: pointer;
-    color: rgba($btnTxtColActive, 0.6);
+    color: rgba($btnTxtColActive, 0.9);
     border: $strokeWeight solid $borderColActive;
     -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -132,10 +132,13 @@ a.lui-button {
   text-align: center;
 
   &.lui-button-icon-right {
-    padding: 0 14px 0 spacing.$unit-sm;
+    padding: spacing.$unit-xxs spacing.$unit-xs spacing.$unit-xs spacing.$unit-sm; // magic numbers to account for border
 
-    i,
     .LuiIcon {
+      margin: 3px 0 -7px 12px; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+    }
+
+    i {
       position: relative;
       top: 6px;
       margin: 0 0 0 12px;
@@ -143,10 +146,13 @@ a.lui-button {
   }
 
   &.lui-button-icon {
-    padding: 0 spacing.$unit-sm 0 14px;
+    padding: spacing.$unit-xxs spacing.$unit-xs*2 spacing.$unit-xs spacing.$unit-xs; // magic numbers to account for border
 
-    i,
     .LuiIcon {
+      margin: 3px 12px -7px 0; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+    }
+
+    i {
       position: relative;
       top: 6px;
       margin: 0 12px 0 0;
@@ -154,16 +160,16 @@ a.lui-button {
   }
 
   &-primary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
+    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 1px, $myBtnLineHeight : 22px
     @include button-builder(#fff, colors.$sea, colors.$sea);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
       #fff,
-      colors.$brand-primary,
-      colors.$brand-primary,
+      colors.$primary-hover-btn,
+      colors.$primary-hover-btn,
       $reversed-btn-active-txt,
-      colors.$teal,
-      colors.$teal
+      colors.$primary-active-btn,
+      colors.$primary-active-btn
     );
   }
 
@@ -172,12 +178,12 @@ a.lui-button {
     @include button-builder(colors.$sea, #fff, colors.$sea);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
-      #fff,
-      colors.$brand-primary,
-      colors.$brand-primary,
+      colors.$sea,
+      colors.$secondary-hover-btn,
+      colors.$sea,
       $reversed-btn-active-txt,
-      colors.$teal,
-      colors.$teal
+      colors.$secondary-active-btn,
+      colors.$secondary-active-btn
     );
 
     i,
@@ -210,11 +216,11 @@ a.lui-button {
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
       #fff,
-      colors.$error-focus,
-      colors.$error-focus,
+      colors.$error-hover-btn,
+      colors.$error-hover-btn,
       $reversed-btn-active-txt,
-      colors.$error-focus,
-      colors.$error-focus
+      colors.$error-active-btn,
+      colors.$error-active-btn
     );
   }
 
@@ -273,7 +279,7 @@ a.lui-button {
     margin: 0;
     border-radius: 0; // remove border radius so the text underline via border bottom doesn't turn up at the ends
     &:hover {
-      border-bottom: 2px solid;
+      border-bottom: 1px solid;
     }
 
     &:disabled {
@@ -353,7 +359,7 @@ a.lui-button {
     svg * {
       color: #fff;
     }
-    &:disabled {
+    &:disabled, &:disabled:hover {
       color: $disabled-reversed-no-bg-btn-txt;
 
       i,
@@ -362,6 +368,13 @@ a.lui-button {
         fill: $disabled-reversed-no-bg-btn-txt;
       }
     }
+    &:hover {
+      i,
+      svg * {
+        color: colors.$spray;
+        fill: colors.$spray;
+      }
+    }
   }
 
   &-icon-only-link {
@@ -369,34 +382,41 @@ a.lui-button {
   }
 
   &.lui-button-sm {
-    line-height: 30px;
-    padding: 0 spacing.$unit-sm;
-    font-size: rem(14px);
+    line-height: 24px;
+    padding: rem(3px) spacing.$unit-xs;
 
     &.lui-button-icon {
-      padding: 0 spacing.$unit-sm 0 12px;
-
-      i,
+      padding: rem(2px) rem(8px) rem(2px) spacing.$unit-xxs;
+      
       .LuiIcon {
-        margin: 0 spacing.$unit-xs 0 0;
-        font-size: 1.3rem;
+        margin: 1px rem(4px) -5px 0; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+      }
+
+      i {
+        position: relative;
+        top: 6px;
+        margin: 0 12px 0 0;
       }
     }
 
     &.lui-button-icon-right {
-      padding: 0 12px 0 spacing.$unit-sm;
+      padding: rem(2px) spacing.$unit-xxs rem(2px) rem(8px);
 
-      i,
       .LuiIcon {
-        margin: 0 0 0 spacing.$unit-xs;
-        font-size: 1.3rem;
+        margin: 1px 0 -5px rem(4px); // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+      }
+
+      i {
+        position: relative;
+        top: 6px;
+        margin: 0 0 0 12px;
       }
     }
 
     &.lui-button-reversed-no-bg {
       i,
       .LuiIcon {
-        font-size: 1.8rem;
+        // font-size: 1.8rem;
         top: 9px !important;
       }
     }
@@ -404,24 +424,25 @@ a.lui-button {
 
   // medium is not defined as that is the default button size
   &.lui-button-lg {
-    // height: 50px;
-    line-height: 50px;
-    padding: 0 spacing.$unit-lg;
-    font-size: rem(18px);
+    padding: rem(11px) rem(18px); // magic numbers to account for border
 
     &.lui-button-icon {
-      padding: 0 spacing.$unit-lg 0 28px;
+      padding: rem(11px) spacing.$px rem(11px) spacing.$unit-sm; // magic numbers to account for border
 
       i {
-        margin: 0 spacing.$unit-sm 0 0;
+        position: relative;
+        top: 6px;
+        margin: 0 rem(8px) 0 0;
       }
     }
 
     &.lui-button-icon-right {
-      padding: 0 28px 0 spacing.$unit-lg;
+      padding: rem(11px) spacing.$unit-sm rem(11px) spacing.$px; // magic numbers to account for border
 
       i {
-        margin: 0 0 0 spacing.$unit-sm;
+        position: relative;
+        top: 6px;
+        margin: 0 0 0 rem(8px);
       }
     }
   }
@@ -481,7 +502,6 @@ a.lui-button {
   }
 
   .lui-button {
-    padding: 0 spacing.$unit-xs;
     background-color: #fff;
     border-radius: 0;
     border: 1px solid colors.$brand-primary;
@@ -520,6 +540,7 @@ a.lui-button {
       color: colors.$disabled-color;
       cursor: not-allowed;
     }
+ 
   }
 
   &--radio {

package/dist/scss/Foundation/Variables/_LuiColors.scss

@@ -110,11 +110,21 @@ $visited: $teal;
 $selection: lighten($spray, 20%);
 
 // restricted colours for btn hover states
-$green-hover: $salem;
-$green-active: $sacramento;
-$green-btn: $pigment;
+$primary-hover-btn: #005678;
+$primary-active-btn: $teal;
+
+$secondary-hover-btn: $polar;
+$secondary-active-btn: $sea;
+
+$green-hover: #107c3a;
+$green-active: #094A22;
+$green-btn: $success;
+
+$error-hover-btn: #8f0000;
+$error-active-btn: #5a0000;
+
 $txt-link: $electric;
-$primary-hover-btn: $sea;
+
 
 //Restricted colours for spatial maps
 $hot-pink: #f81bef;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "15.1.14",
+  "version": "16.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",