feat(floating-label): update styles to match the universal rendering

telerik · Mar 18, 2024 · 93ae817 · 93ae817
1 parent 8cba101
commit 93ae817
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 61 deletions.
diff --git a/packages/default/scss/floating-label/_layout.scss b/packages/default/scss/floating-label/_layout.scss
@@ -17,7 +17,7 @@
             box-sizing: border-box;
         }
 
-        > .k-label {
+        > .k-floating-label {
             max-width: $kendo-floating-label-max-width;
             font-size: $kendo-floating-label-font-size;
             line-height: $kendo-floating-label-line-height;
@@ -32,27 +32,23 @@
             transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
         }
 
-        > .k-widget {
-            flex: 1 1 auto;
-            width: auto;
-        }
 
         &.k-empty {
-            > .k-label {
+            > .k-floating-label {
                 top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
                 left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 transform: scale( $kendo-floating-label-scale );
                 pointer-events: none;
             }
         }
 
-        > .k-label,
-        &.k-focus > .k-label {
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
-        &:focus-within > .k-label {
+        &:focus-within > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
@@ -66,24 +62,24 @@
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right center;
                 transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
             }
 
             &.k-empty {
-                > .k-label {
+                > .k-floating-label {
                     left: auto;
                     right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 }
             }
 
-            > .k-label,
-            &.k-focus > .k-label {
+            > .k-floating-label,
+            &.k-focus > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
-            &:focus-within > .k-label {
+            &:focus-within > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }

diff --git a/packages/default/scss/floating-label/_theme.scss b/packages/default/scss/floating-label/_theme.scss
@@ -3,23 +3,23 @@
     // Floating label
     .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-text,
                 $bg: $kendo-floating-label-bg
             );
         }
 
-        &.k-focus > .k-label {
+        &.k-focus > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-focus-text,
                 $bg: $kendo-floating-label-focus-bg
             );
         }
 
-        &.k-invalid > .k-label,
-        &.ng-invalid.ng-touched > .k-label,
-        &.ng-invalid.ng-dirty > .k-label {
+        &.k-invalid > .k-floating-label,
+        &.ng-invalid.ng-touched > .k-floating-label,
+        &.ng-invalid.ng-dirty > .k-floating-label {
             @include fill ( $color: $kendo-invalid-text );
         }
     }

diff --git a/packages/default/scss/forms/_layout.scss b/packages/default/scss/forms/_layout.scss
@@ -42,19 +42,6 @@
         }
     }
 
-    .k-input-label {
-        margin-right: $kendo-horizontal-form-label-margin-x;
-        z-index: 1;
-
-        &:dir(rtl),
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            margin-right: 0;
-            margin-left: $kendo-horizontal-form-label-margin-x;
-        }
-    }
 
 
     // Vertical Form

diff --git a/packages/fluent/scss/floating-label/_layout.scss b/packages/fluent/scss/floating-label/_layout.scss
@@ -18,7 +18,7 @@
             box-sizing: border-box;
         }
 
-        > .k-label {
+        > .k-floating-label {
             max-width: var( --kendo-floating-label-max-width, #{$kendo-floating-label-max-width} );
             font-size: var( --kendo-floating-label-font-size, #{$kendo-floating-label-font-size} );
             font-weight: var( --kendo-floating-label-font-weight, #{$kendo-floating-label-font-weight} );
@@ -34,23 +34,19 @@
             transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), left var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
         }
 
-        > .k-widget {
-            flex: 1 1 auto;
-            width: auto;
-        }
 
         &.k-empty {
-            > .k-label {
+            > .k-floating-label {
                 top: var( --kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y} );
                 left: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
                 transform: scale( var( --kendo-floating-label-scale, #{$kendo-floating-label-scale} ) );
                 pointer-events: none;
             }
         }
 
-        > .k-label,
-        &:focus-within > .k-label,
-        &.k-focus > .k-label {
+        > .k-floating-label,
+        &:focus-within > .k-floating-label,
+        &.k-focus > .k-floating-label {
             top: var( --kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y} );
             left: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
             transform: scale( var( --kendo-floating-label-focus-scale, #{$kendo-floating-label-focus-scale} ) );
@@ -65,21 +61,21 @@
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right center;
                 transition: transform var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), color var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), top var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} ), right var( --kendo-floating-label-transition, #{$kendo-floating-label-transition} );
             }
 
             &.k-empty {
-                > .k-label {
+                > .k-floating-label {
                     left: auto;
                     right: var( --kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x} );
                 }
             }
 
-            > .k-label,
-            &:focus-within > .k-label,
-            &.k-focus > .k-label {
+            > .k-floating-label,
+            &:focus-within > .k-floating-label,
+            &.k-focus > .k-floating-label {
                 left: auto;
                 right: var( --kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x} );
             }

diff --git a/packages/fluent/scss/floating-label/_theme.scss b/packages/fluent/scss/floating-label/_theme.scss
@@ -6,23 +6,23 @@
      // Floating label
      .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             @include fill(
                 $color: var( --kendo-floating-label-text, #{$kendo-floating-label-text} ),
                 $bg: var( --kendo-floating-label-bg, #{$kendo-floating-label-bg} )
             );
         }
 
-        &.k-focus > .k-label {
+        &.k-focus > .k-floating-label {
             @include fill(
                 $color: var( --kendo-floating-label-focus-text, #{$kendo-floating-label-focus-text} ),
                 $bg: var( --kendo-floating-label-focus-bg, #{$kendo-floating-label-focus-bg} )
             );
         }
 
-        &.k-invalid > .k-label,
-        &.ng-invalid.ng-touched > .k-label,
-        &.ng-invalid.ng-dirty > .k-label {
+        &.k-invalid > .k-floating-label,
+        &.ng-invalid.ng-touched > .k-floating-label,
+        &.ng-invalid.ng-dirty > .k-floating-label {
             @include fill ( $color: var( --kendo-floating-label-invalid-text, #{$kendo-floating-label-invalid-text} ) );
         }
 

diff --git a/packages/fluent/scss/forms/_layout.scss b/packages/fluent/scss/forms/_layout.scss
@@ -37,10 +37,6 @@
         }
     }
 
-    .k-input-label {
-        margin-inline-end: var( --kendo-horizontal-form-label-margin-x, #{$kendo-horizontal-form-label-margin-x} );
-        z-index: 1;
-    }
 
 
     // Vertical Form

diff --git a/packages/material/scss/floating-label/_layout.scss b/packages/material/scss/floating-label/_layout.scss
@@ -8,15 +8,15 @@
     // Floating label
     .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             transform-origin: left bottom;
         }
 
         [dir="rtl"] &,
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right bottom;
             }
 

diff --git a/packages/material/scss/floating-label/_theme.scss b/packages/material/scss/floating-label/_theme.scss
@@ -8,10 +8,10 @@
     // Floating label
     .k-floating-label-container {
 
-        &.k-invalid + .k-label,
-        .k-invalid + .k-label,
-        .ng-invalid.ng-touched + .k-label,
-        .ng-invalid.ng-dirty + .k-label {
+        &.k-invalid + .k-floating-label,
+        .k-invalid + .k-floating-label,
+        .ng-invalid.ng-touched + .k-floating-label,
+        .ng-invalid.ng-dirty + .k-floating-label {
             @include fill( $color: $kendo-color-error );
         }
     }