fix: floating label misalignment

telerik · Nov 6, 2019 · 944cce7 · 944cce7
1 parent 50e81a5
commit 944cce7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/packages/material/scss/input/_layout.scss b/packages/material/scss/input/_layout.scss
@@ -18,6 +18,13 @@
             left: calc( #{$textarea-padding-x } + #{$input-border-width} );
         }
 
+        &:not(.k-state-empty) {
+            > .k-label {
+                top: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} - 10px );
+                padding: 0 $textarea-floating-label-padding;
+            }
+        }
+
         &::after {
             // disable input ripple
             display: none;
@@ -33,11 +40,4 @@
             }
         }
     }
-
-    .k-textarea-wrapper {
-        &.k-state-focused > .k-label {
-            top: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} - 10px );
-            padding: 0 $textarea-floating-label-padding;
-        }
-    }
 }
diff --git a/packages/material/scss/input/_theme.scss b/packages/material/scss/input/_theme.scss
@@ -3,7 +3,7 @@
     .k-textbox,
     .k-textarea,
     .k-input.k-textbox {
-        @include fill (
+        @include fill(
             $bg: transparent,
             $border: $input-border
         );
@@ -15,18 +15,18 @@
         // Hovered
         &:hover,
         &.k-state-hover {
-            @include fill ( $border: $input-hovered-border );
+            @include fill( $border: $input-hovered-border );
         }
 
         // Focused
         &:focus,
         &.k-state-focus  {
-            @include fill ( $border: $input-focused-border );
+            @include fill( $border: $input-focused-border );
         }
 
         // Selection
         &::selection {
-            @include fill (
+            @include fill(
                 $color: $accent-contrast,
                 $bg: $accent
             );
@@ -37,7 +37,7 @@
         &.k-state-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            @include fill ( $border: $error );
+            @include fill( $border: $error );
         }
 
         &:disabled {
@@ -51,7 +51,7 @@
     // Textarea
     .k-textarea {
         border-width: $input-border-width;
-        @include fill ( $border: $border-color );
+        @include fill( $border: $border-color );
         border-radius: $border-radius;
     }
 
@@ -60,24 +60,31 @@
         vertical-align: baseline;
 
         > .k-label {
-            @include fill ( $color: $floating-label-text );
+            @include fill( $color: $floating-label-text );
         }
 
         &.k-state-focused > .k-label {
-            @include fill (
-                $color: $floating-label-focused-text,
-                $bg: $floating-label-focused-bg
-            );
+            @include fill( $color: $floating-label-focused-text );
         }
 
         .ng-invalid.ng-touched + .k-label,
         .ng-invalid.ng-dirty + .k-label {
-            @include fill ( $color: $error );
+            @include fill( $color: $error );
         }
     }
 
-    .k-textarea-wrapper .k-textarea:focus {
-        @include fill ( $border: $accent );
+    .k-textarea-wrapper {
+        &:not(.k-state-empty) {
+            > .k-label {
+                @include fill( $bg: $floating-label-focused-bg );
+            }
+        }
+
+        .k-textarea {
+            &:focus {
+                @include fill( $border: $accent );
+            }
+        }
     }
 }