@linzjs/lui 16.5.1 → 17.0.0

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

@@ -53,6 +53,7 @@ button {
   border: $myStrokeWeight solid $borderCol;
   color: $btnTxtCol;
   line-height: $myBtnLineHeight;
+  font-weight: 600;
 
   i,
   svg * {
@@ -109,9 +110,9 @@ button {
     cursor: pointer;
     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);
-    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
+    //-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);
+    //box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
 
     i,
     svg * {
@@ -146,10 +147,11 @@ a.lui-button {
   }
 
   &.lui-button-icon {
-    padding: spacing.$unit-xxs spacing.$unit-xs*2 spacing.$unit-xs spacing.$unit-xs; // magic numbers to account for border
+    //padding: spacing.$unit-xxs spacing.$unit-xs*2 spacing.$unit-xs spacing.$unit-xs; // magic numbers to account for border
+    padding: rem(7px) rem(16px) rem(7px) rem(7px);
 
     .LuiIcon {
-      margin: 3px 12px -7px 0; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+      margin: 0 8px -7px 0; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
     }
 
     i {
@@ -197,16 +199,58 @@ a.lui-button {
   }
 
   &-tertiary {
+    @include button-builder(colors.$sea, transparent, transparent, 0px, $btnLine-height - 2px);
+    @include button-states-builder(
+                    colors.$sea,
+                    colors.$tertiary-hover-btn,
+                    #fff,
+                    $reversed-btn-active-txt,
+                    colors.$tertiary-active-btn,
+                    #fff
+    );
+    @include fonts.font-regular();
+
+    border: none;
+    margin: 2px;    //account for the slightly smaller button size;
+
+    &:hover {
+      border: none;
+    }
+
+    &:active:enabled {
+      border: none;
+    }
+
+    &:disabled {
+      color: colors.$disabled-color;
+      background: none;
+      text-decoration: none;
+      border: none;
+
+      &:hover {
+        cursor: not-allowed;
+        border: none;
+      }
+
+      i,
+      svg * {
+        color: colors.$gray;
+        fill: colors.$gray;
+      }
+    }
+  }
+
+  &-success{
     // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
     @include button-builder(#fff, colors.$green-btn, colors.$green-btn);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
-      #fff,
-      colors.$green-hover,
-      colors.$green-hover,
-      $reversed-btn-active-txt,
-      colors.$green-active,
-      colors.$green-active
+                    #fff,
+                    colors.$green-hover,
+                    colors.$green-hover,
+                    $reversed-btn-active-txt,
+                    colors.$green-active,
+                    colors.$green-active
     );
   }
 
@@ -272,21 +316,38 @@ a.lui-button {
       none
     );
     // border bottom mimics what we have for text link styling
-    border-bottom: 1px solid;
+    //border-bottom: 1px solid;
+    text-decoration: underline;
     @include fonts.font-regular();
     // remove the padding and margin off the buttons - used for text only buttons
     padding: 0;
     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: 1px solid;
+    //&:hover {
+    //  border-bottom: 1px solid;
+    //}
+    &:active:enabled {
+      background-color: #fff;
+      cursor: pointer;
+      //color: rgba($btnTxtColActive, 0.9);
+      //border: $strokeWeight solid $borderColActive;
+      -moz-box-shadow: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+
+      i,
+      svg * {
+        color: #fff;
+        fill: #fff;
+      }
     }
 
     &:disabled {
       color: colors.$disabled-color;
       background: none;
-      border: 0;
-      text-decoration: none;
+      //border: 0;
+      text-decoration: underline;
+
 
       &:hover {
         cursor: not-allowed;
@@ -302,7 +363,7 @@ a.lui-button {
 
   &-plain-text {
     // var $btnTxtCol, $btnBgCol, $borderCol
-    @include button-builder(inherit, transparent, #fff);
+    @include button-builder(inherit, transparent, #fff, 0);
     // remove the padding and margin off the buttons - used for text only buttons
     padding: 0;
     margin: 0;
@@ -312,11 +373,20 @@ a.lui-button {
     color: inherit;
     font-weight: inherit;
 
+    i,
+    svg * {
+      color: colors.$gray;
+      fill: colors.$gray;
+    }
+
     &:disabled {
       color: colors.$disabled-color;
       background: none;
       border: 0;
       text-decoration: none;
+      &:hover {
+        cursor: not-allowed;
+      }
 
       i,
       svg * {
@@ -326,7 +396,22 @@ a.lui-button {
     }
   }
 
-  &-icon-only,
+  &-icon-only {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+
+    .LuiIcon {
+      vertical-align: top; //not sure why top makes the icon align in the center
+    }
+
+    i {
+      position: relative;
+      top: 6px;
+      margin: 0 12px 0 0;
+    }
+  }
+
   &-icon-only-rev,
   &-icon-only-link {
     // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
@@ -382,14 +467,37 @@ a.lui-button {
   }
 
   &.lui-button-sm {
-    line-height: 24px;
     padding: rem(3px) spacing.$unit-xs;
 
+    &.lui-button-text {
+      padding: 0;
+    }
+
+    &.lui-button-plain-text {
+      padding: 0;
+    }
+
     &.lui-button-icon {
       padding: rem(2px) rem(8px) rem(2px) spacing.$unit-xxs;
-      
+
+      .LuiIcon {
+        margin: 1px 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-only {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+
       .LuiIcon {
-        margin: 1px rem(4px) -5px 0; // magic numbers to allow the resize to work but to be fixed by future LUI buttons
+        vertical-align: top;
       }
 
       i {
@@ -426,8 +534,32 @@ a.lui-button {
   &.lui-button-lg {
     padding: rem(11px) rem(18px); // magic numbers to account for border
 
+    &.lui-button-text {
+      padding: 0;
+    }
+
+    &.lui-button-plain-text {
+      padding: 0;
+    }
+
     &.lui-button-icon {
-      padding: rem(11px) spacing.$px rem(11px) spacing.$unit-sm; // magic numbers to account for border
+      padding: rem(11px) 16px rem(11px) spacing.$unit-sm; // magic numbers to account for border
+
+      i {
+        position: relative;
+        top: 6px;
+        margin: 0 rem(8px) 0 0;
+      }
+    }
+
+    &.lui-button-icon-only {
+      width: 48px;
+      height: 48px;
+      padding: 0; // magic numbers to account for border
+
+      .LuiIcon {
+        vertical-align: top;
+      }
 
       i {
         position: relative;

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

@@ -116,6 +116,10 @@ $primary-active-btn: $teal;
 $secondary-hover-btn: $polar;
 $secondary-active-btn: $sea;
 
+$tertiary-hover-btn: $polar;
+$tertiary-active-btn: $sea;
+$tertiary-btn: #f0f;
+
 $green-hover: #107c3a;
 $green-active: #094A22;
 $green-btn: $success;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "16.5.1",
+  "version": "17.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",