@linzjs/lui 15.0.4 → 15.0.7

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

@@ -57,24 +57,6 @@ $border-size: 2px;
   z-index: -1;
 }
 
-// say hello to the fake input
-.LuiCheckboxInput-label::after {
-  // Plug in your icon here
-  // font-size: 18px;
-  // line-height: 10px;
-  // content: ' ';
-  // display: block;
-  // text-align: center;
-  // color: transparent;
-  // width: $checkbox-size;
-  // height: $checkbox-size;
-  // // border: 3px solid white;
-  // box-shadow: 0 0 0 2px #053d52;
-  // margin-right: 12px;
-  // margin-top: 3px;
-  // border-radius: 2px;
-}
-
 .LuiCheckboxInput-label::before {
   // Plug in your icon here
   font-size: 18px;
@@ -128,18 +110,23 @@ $border-size: 2px;
   border-color: luiColors.$error;
 }
 
-.LuiCheckboxInput-input:disabled + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isDisabled .LuiCheckboxInput-label::before {
-  background-color: luiColors.$disabled-color;
-  border-color: luiColors.$disabled-color;
+.LuiCheckboxInput--isDisabled:checked + .LuiCheckboxInput-label, 
+.LuiCheckboxInput-input:checked:disabled + .LuiCheckboxInput-label {
+  cursor: not-allowed;
+  &::before {
+    color: white;
+    background-color: luiColors.$disabled-color;
+    border-color: luiColors.$disabled-color;
+  }
 }
 
-.LuiCheckboxInput-input:checked:disabled + .LuiCheckboxInput-label::before,
-.LuiCheckboxInput--isChecked.LuiCheckboxInput--isDisabled
-  .LuiCheckboxInput-label::before {
-  color: white;
-  background-color: luiColors.$disabled-color;
-  border-color: luiColors.$disabled-color;
+.LuiCheckboxInput--isDisabled + .LuiCheckboxInput-label,
+.LuiCheckboxInput-input:disabled + .LuiCheckboxInput-label {
+  cursor: not-allowed;
+  &::before {
+    background-color: luiColors.$disabled-bg-color;
+    border-color: luiColors.$disabled-color-dark;
+  }
 }
 
 // ============

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

@@ -57,11 +57,15 @@
   }
 
   &--isDisabled {
-    color: luiColors.$gray;
+    color: luiColors.$disabled-color;
+    cursor: not-allowed;
 
     &:before {
-      background-color: luiColors.$lily;
-      border-color: luiColors.$gray;
+      background-color: luiColors.$disabled-bg-color;
+      border-color: luiColors.$disabled-color-dark;
+    }
+    &:after {
+      background-color: luiColors.$disabled-color-dark;
     }
   }
 }

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

@@ -90,13 +90,13 @@ button {
 
   &:disabled {
     color: colors.$disabled-color;
-    background: colors.$lily;
-    border-color: colors.$lily;
+    background: colors.$disabled-bg-color;
+    border-color: colors.$disabled-color-dark;
 
     i,
     svg * {
-      color: colors.$disabled-color;
-      fill: colors.$disabled-color;
+      color: colors.$disabled-color-dark;
+      fill: colors.$disabled-color-dark;
     }
 
     &:hover {
@@ -277,7 +277,7 @@ a.lui-button {
     }
 
     &:disabled {
-      color: colors.$gray;
+      color: colors.$disabled-color;
       background: none;
       border: 0;
       text-decoration: none;
@@ -307,15 +307,15 @@ a.lui-button {
     font-weight: inherit;
 
     &:disabled {
-      color: colors.$gray;
+      color: colors.$disabled-color;
       background: none;
       border: 0;
       text-decoration: none;
 
       i,
       svg * {
-        color: colors.$gray;
-        fill: colors.$gray;
+        color: colors.$disabled-color;
+        fill: colors.$disabled-color;
       }
     }
   }
@@ -462,7 +462,7 @@ a.lui-button {
   }
 
   &-text-sizing {
-    // display: block; //remove flexbox so they can just be inline buttons. Flexbox wasn't allowing the buttons to be sized by their content (flex shrink made a mess of things)
+    //remove flexbox so they can just be inline buttons. Flexbox wasn't allowing the buttons to be sized by their content (flex shrink made a mess of things)
     display: inline-block;
     font-size: 0;
 
@@ -496,6 +496,11 @@ a.lui-button {
       box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
       color: colors.$white;
       text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
+      //style selected button when disabled
+      &:disabled {
+        background-color: colors.$disabled-color;
+        color: colors.$white;
+      }
     }
 
     &:hover {
@@ -509,6 +514,12 @@ a.lui-button {
       // make sure the button sits above the others so the outline is not cut off on focus
       position: relative;
     }
+    &:disabled {
+      background-color: colors.$disabled-bg-color;
+      border: 1px solid colors.$disabled-color-dark;
+      color: colors.$disabled-color;
+      cursor: not-allowed;
+    }
   }
 
   &--radio {

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

@@ -30,7 +30,7 @@
         border: forms.$input-border-width solid colors.$gray;
         background-color: colors.$lily;
         + label {
-          color: colors.$gray;
+          color: colors.$disabled-color;
         }
       }
     }
@@ -87,7 +87,6 @@
           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;

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

@@ -126,7 +126,8 @@ $input-text: $charcoal;
 $input-placeholder: $fuscous;
 $input-placeholder-when-disabled: $gray;
 $base-icon-color: $sea;
-$disabled-color: $gray;
+$disabled-color: $fuscous;
+$disabled-bg-color: $lily;
 $disabled-color-dark: $gray;
 $input-focus: $teal;
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "15.0.4",
+  "version": "15.0.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -114,7 +114,7 @@
     "html-loader": "^1.1.0",
     "husky": "^4.3.0",
     "jest-axe": "^3.5.0",
-    "jest-canvas-mock": "2.2.0",
+    "jest-canvas-mock": "2.3.1",
     "msw": "^0.22.2",
     "npm-run-all": "^4.1.5",
     "pretty-quick": "^3.1.1",
@@ -134,7 +134,7 @@
     "size-limit": "^7.0.8",
     "style-loader": "^1.3.0",
     "stylelint-config-standard": "^25.0.0",
-    "stylelint-scss": "^3.20.1",
+    "stylelint-scss": "^4.1.0",
     "stylelint-suitcss": "^5.0.0",
     "typescript": "^3.9.7",
     "whatwg-fetch": "^3.4.1",