feat(form): add "is-disabled" class with form

Author: markcytian

scss/form/checkboxes.scss

@@ -103,4 +103,32 @@
       color: $color-white;
     }
   }
+  &.is-disabled {
+    $color: map-get($disabled-colors, "normal");
+    $colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+
+    + span {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    + span::before {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:checked + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+
+    &:checked:focus + span::before {
+      @include pixelize(2px, $checkbox-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+  }
 }

scss/form/inputs.scss

@@ -28,6 +28,12 @@
   &.is-error {
     @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
   }
+  &.is-disabled {
+    @include border-style(map-get($disabled-colors, "normal"), map-get($disabled-colors, "shadow"));
+
+    color: map-get($disabled-colors, "normal");
+    cursor: not-allowed;
+  }
 }
 
 .nes-field {

scss/form/radios.scss

@@ -73,4 +73,39 @@
       color: $color-white;
     }
   }
+  &.is-disabled {
+    $color: map-get($disabled-colors, "normal");
+    $colors-radio-disabled: ($color, map-get($disabled-colors, "shadow"));
+
+    + span {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    + span::before {
+      color: $color;
+      cursor: not-allowed;
+    }
+
+    &:checked:hover,
+    &:checked:focus {
+      & + span::before {
+        animation: unset;
+      }
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    &:checked + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+
+    &:checked:focus + span::before {
+      @include pixelize(2px, $radio-checked-focus, $colors-radio-disabled);
+
+      color: $color;
+    }
+  }
 }

scss/form/selects.scss

@@ -50,7 +50,8 @@
     "dark" map-get($default-colors, "normal") map-get($default-colors, "hover"),
     "success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
     "warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
-    "error" map-get($error-colors, "normal") map-get($error-colors, "hover");
+    "error" map-get($error-colors, "normal") map-get($error-colors, "hover"),
+    "disable" map-get($disabled-colors, "normal") map-get($disabled-colors, "shadow");
   @each $type in $types {
     &.is-#{nth($type, 1)} {
       $color: nth($type, 2);
@@ -66,4 +67,11 @@
       }
     }
   }
+  &.is-disabled {
+    @extend .is-disable;
+    select {
+      color: map-get($disabled-colors, "normal");
+      cursor: not-allowed;
+    }
+  }
 }