feat: add disabled state variables for input and picker high-level co…

…mponents
telerik · Jan 25, 2022 · d85b305 · d85b305
1 parent 798d6d0
commit d85b305
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 1 deletion.
diff --git a/packages/bootstrap/scss/datetimepicker/_variables.scss b/packages/bootstrap/scss/datetimepicker/_variables.scss
@@ -1,2 +1,3 @@
 // DateTime
 $datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
+
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -71,6 +71,12 @@ $kendo-input-focus-text: $input-focus-color !default;
 $kendo-input-focus-border: $input-focus-border-color !default;
 $kendo-input-focus-shadow: $input-focus-box-shadow !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,6 +95,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
+
 $kendo-input-placeholder-text: $input-placeholder-color !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: rgba(0, 0, 0, .1) !default;
 $kendo-input-focus-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,6 +95,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -37,6 +37,19 @@
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -100,6 +113,19 @@
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,6 +95,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

diff --git a/packages/material/scss/input/_layout.scss b/packages/material/scss/input/_layout.scss
@@ -32,6 +32,24 @@
     }
 
 
+    // Disabled
+    .k-input,
+    .k-picker {
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            opacity: 1;
+            filter: none;
+        }
+
+        .k-input-button,
+        .k-input-spinner .k-spinner-increase,
+        .k-input-spinner .k-spinner-decrease {
+            color: inherit;
+        }
+    }
+
+
     // Input ripple
     .k-floating-label-container {
         @include input-ripple();

diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $primary !default;
 $kendo-input-focus-shadow: null !default;
 
+$kendo-input-disabled-bg: try-shade( $component-bg, .25 ) !default;
+$kendo-input-disabled-text: $disabled-text !default;
+$kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border ) / 2) ) !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-input-bg !default;
 $kendo-picker-text: $kendo-input-text !default;
 $kendo-picker-border: $kendo-input-border !default;
@@ -89,7 +95,11 @@ $kendo-picker-focus-border: $kendo-input-focus-border !default;
 $kendo-picker-focus-gradient: null !default;
 $kendo-picker-focus-shadow: $kendo-input-focus-shadow !default;
 
-$kendo-input-disabled-bg: rgb(189, 189, 189) !default;
+$kendo-picker-disabled-bg: $kendo-input-disabled-bg !default;
+$kendo-picker-disabled-text: $kendo-input-disabled-text !default;
+$kendo-picker-disabled-border: $kendo-input-disabled-border !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
 
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;