fix(material): apply input ripple on the correct sides

telerik · Jun 1, 2022 · d95a5ee · d95a5ee
1 parent e07ad4d
commit d95a5ee
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 30 deletions.
diff --git a/packages/material/scss/input/_layout.scss b/packages/material/scss/input/_layout.scss
@@ -27,6 +27,7 @@
         }
 
         &:disabled,
+        &[disabled],
         &.k-disabled  {
             border-bottom-style: dashed;
         }
@@ -36,6 +37,7 @@
     // Disabled
     .k-input,
     .k-picker {
+
         &:disabled,
         &[disabled],
         &.k-disabled {
@@ -54,30 +56,57 @@
     // Input ripple
     .k-input-solid,
     .k-input-flat,
+    .k-input-outline,
     .k-picker-solid,
-    .k-picker-flat {
-        $height: 2 * $kendo-input-border-width;
+    .k-picker-flat,
+    .k-picker-outline {
+        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);
 
         &::after {
-            display: block;
-            z-index: 2;
             content: "";
+            border-width: 0 0 $_kendo-input-ripple-border-width 0;
+            border-style: solid;
+            border-color: inherit;
+            border-radius: inherit;
+            display: block;
             position: absolute;
-            bottom: calc( 1px - #{$height} );
-            left: 0;
-            right: 0;
-            height: $height;
-            margin: auto;
+            z-index: 2;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
             opacity: 0;
-            transform: scaleX(.5);
-            transition: transform .3s;
+            transform: scaleX(0);
+            transition: opacity .3s, transform .3s;
+            pointer-events: none;
         }
 
-        &.k-state-focused::after,
-        &.k-focus::after {
+        &.k-focus::after,
+        &.k-state-focused::after {
             opacity: 1;
             transform: scaleX(1);
         }
+        &:focus-within::after {
+            opacity: 1;
+            transform: scaleX(1);
+        }
+    }
+    .k-input-outline,
+    .k-picker-outline {
+        $_kendo-input-ripple-border-width: (2 * $kendo-input-border-width);
+
+        &::after {
+            border-width: $_kendo-input-ripple-border-width;
+            transform: none;
+        }
+
+        &.k-focus::after,
+        &.k-state-focused::after {
+            transform: none;
+        }
+        &:focus-within::after {
+            transform: none;
+        }
     }
 
 }
diff --git a/packages/material/scss/input/_theme.scss b/packages/material/scss/input/_theme.scss
@@ -1,18 +1 @@
 @import "~@progress/kendo-theme-default/scss/input/_theme.scss";
-
-//Input ripple
-.k-input-solid,
-.k-input-flat,
-.k-picker-solid,
-.k-picker-flat {
-
-    &::after {
-        background-color: $primary;
-    }
-
-    &.k-state-invalid::after,
-    &.k-invalid::after {
-        background-color: $error;
-        transition: none;
-    }
-}