Skip to content

Commit 98edb1d

Browse files
TeyaVesTeyaVes
committed
feat(floating-labels): add floating-label position
1 parent b1e834e commit 98edb1d

File tree

14 files changed

+808
-86
lines changed

14 files changed

+808
-86
lines changed

‎packages/bootstrap/scss/floating-label/_variables.scss

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,34 @@ $kendo-floating-label-focus-offset-x: 0 !default;
3535
/// @group floating-label
3636
$kendo-floating-label-focus-offset-y: 0 !default;
3737

38+
/// The transformation scale of the Border Floating Label.
39+
/// @group floating-label
40+
$kendo-floating-label-pos-border-scale: 1 !default;
41+
42+
/// The transformation scale of the focused Border Floating Label.
43+
/// @group floating-label
44+
$kendo-floating-label-pos-border-focus-scale: .85 !default;
45+
// The height of the focused Border Floating Label.
46+
/// @group floating-label
47+
$kendo-floating-label-pos-border-focus-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-pos-border-focus-scale} ) !default;
48+
/// The horizontal offset of the focused Border Floating Label.
49+
/// @group floating-label
50+
$kendo-floating-label-pos-border-focus-offset-x: k-spacing(3) !default;
51+
/// The padding of the focused Border Floating Label.
52+
/// @group floating-label
53+
$kendo-floating-label-pos-border-focus-padding: null !default;
54+
55+
/// The transformation scale of the Inside Floating Label.
56+
/// @group floating-label
57+
$kendo-floating-label-pos-inside-scale: 1 !default;
58+
59+
/// The transformation scale of the focused Inside Floating Label.
60+
/// @group floating-label
61+
$kendo-floating-label-pos-inside-focus-scale: .85 !default;
62+
/// The height of the focused Inside Floating Label.
63+
/// @group floating-label
64+
$kendo-floating-label-pos-inside-focus-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-pos-border-focus-scale} ) !default;
65+
3866
/// The transition of the Floating Label.
3967
/// @group floating-label
4068
$kendo-floating-label-transition: .2s ease-out !default;
@@ -44,7 +72,7 @@ $kendo-floating-label-transition: .2s ease-out !default;
4472
$kendo-floating-label-bg: null !default;
4573
/// The text color of the Floating Label.
4674
/// @group floating-label
47-
$kendo-floating-label-text: null !default;
75+
$kendo-floating-label-text: k-color(on-app-surface) !default;
4876

4977
/// The background color of the focused Floating Label.
5078
/// @group floating-label
@@ -53,6 +81,16 @@ $kendo-floating-label-focus-bg: null !default;
5381
/// @group floating-label
5482
$kendo-floating-label-focus-text: null !default;
5583

84+
/// The background color of the focused Border Floating Label.
85+
/// @group floating-label
86+
$kendo-floating-label-pos-border-focus-bg: k-color(surface-alt) !default;
87+
/// The text color of the focused Border Floating Label.
88+
/// @group floating-label
89+
$kendo-floating-label-pos-border-focus-text: k-color(subtle) !default;
90+
91+
/// The text color of the inside Inside Floating Label.
92+
/// @group floating-label
93+
$kendo-floating-label-pos-inside-focus-text: k-color(subtle) !default;
5694

5795
@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
5896
$kendo-floating-label-scale: $kendo-floating-label-scale,
@@ -65,9 +103,20 @@ $kendo-floating-label-focus-text: null !default;
65103
$kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
66104
$kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
67105
$kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
106+
$kendo-floating-label-pos-border-scale: $kendo-floating-label-pos-border-scale,
107+
$kendo-floating-label-pos-border-focus-scale: $kendo-floating-label-pos-border-focus-scale,
108+
$kendo-floating-label-pos-border-focus-height: $kendo-floating-label-pos-border-focus-height,
109+
$kendo-floating-label-pos-border-focus-offset-x: $kendo-floating-label-pos-border-focus-offset-x,
110+
$kendo-floating-label-pos-border-focus-padding: $kendo-floating-label-pos-border-focus-padding,
111+
$kendo-floating-label-pos-inside-scale: $kendo-floating-label-pos-inside-scale,
112+
$kendo-floating-label-pos-inside-focus-scale: $kendo-floating-label-pos-inside-focus-scale,
113+
$kendo-floating-label-pos-inside-focus-height: $kendo-floating-label-pos-inside-focus-height,
68114
$kendo-floating-label-transition: $kendo-floating-label-transition,
69115
$kendo-floating-label-bg: $kendo-floating-label-bg,
70116
$kendo-floating-label-text: $kendo-floating-label-text,
71117
$kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
72-
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text
118+
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text,
119+
$kendo-floating-label-pos-border-focus-bg: $kendo-floating-label-pos-border-focus-bg,
120+
$kendo-floating-label-pos-border-focus-text: $kendo-floating-label-pos-border-focus-text,
121+
$kendo-floating-label-pos-inside-focus-text: $kendo-floating-label-pos-inside-focus-text
73122
);

‎packages/classic/scss/floating-label/_variables.scss

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "../core/_index.scss" as *;
12
@use "../input/_variables.scss" as *;
23

34
// Floating label
@@ -34,6 +35,34 @@ $kendo-floating-label-focus-offset-x: 0 !default;
3435
/// @group floating-label
3536
$kendo-floating-label-focus-offset-y: 0 !default;
3637

38+
/// The transformation scale of the Border Floating Label.
39+
/// @group floating-label
40+
$kendo-floating-label-pos-border-scale: 1 !default;
41+
42+
/// The transformation scale of the focused Border Floating Label.
43+
/// @group floating-label
44+
$kendo-floating-label-pos-border-focus-scale: .85 !default;
45+
// The height of the focused Border Floating Label.
46+
/// @group floating-label
47+
$kendo-floating-label-pos-border-focus-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-pos-border-focus-scale} ) !default;
48+
/// The horizontal offset of the focused Border Floating Label.
49+
/// @group floating-label
50+
$kendo-floating-label-pos-border-focus-offset-x: k-spacing(3) !default;
51+
/// The padding of the focused Border Floating Label.
52+
/// @group floating-label
53+
$kendo-floating-label-pos-border-focus-padding: null !default;
54+
55+
/// The transformation scale of the Inside Floating Label.
56+
/// @group floating-label
57+
$kendo-floating-label-pos-inside-scale: 1 !default;
58+
59+
/// The transformation scale of the focused Inside Floating Label.
60+
/// @group floating-label
61+
$kendo-floating-label-pos-inside-focus-scale: .85 !default;
62+
/// The height of the focused Inside Floating Label.
63+
/// @group floating-label
64+
$kendo-floating-label-pos-inside-focus-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-pos-border-focus-scale} ) !default;
65+
3766
/// The transition of the Floating Label.
3867
/// @group floating-label
3968
$kendo-floating-label-transition: .2s ease-out !default;
@@ -52,6 +81,16 @@ $kendo-floating-label-focus-bg: null !default;
5281
/// @group floating-label
5382
$kendo-floating-label-focus-text: null !default;
5483

84+
/// The background color of the focused Border Floating Label.
85+
/// @group floating-label
86+
$kendo-floating-label-pos-border-focus-bg: k-color(surface-alt) !default;
87+
/// The text color of the focused Border Floating Label.
88+
/// @group floating-label
89+
$kendo-floating-label-pos-border-focus-text: null !default;
90+
91+
/// The text color of the inside Inside Floating Label.
92+
/// @group floating-label
93+
$kendo-floating-label-pos-inside-focus-text: null !default;
5594

5695
@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
5796
$kendo-floating-label-scale: $kendo-floating-label-scale,
@@ -64,9 +103,20 @@ $kendo-floating-label-focus-text: null !default;
64103
$kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
65104
$kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
66105
$kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
106+
$kendo-floating-label-pos-border-scale: $kendo-floating-label-pos-border-scale,
107+
$kendo-floating-label-pos-border-focus-scale: $kendo-floating-label-pos-border-focus-scale,
108+
$kendo-floating-label-pos-border-focus-height: $kendo-floating-label-pos-border-focus-height,
109+
$kendo-floating-label-pos-border-focus-offset-x: $kendo-floating-label-pos-border-focus-offset-x,
110+
$kendo-floating-label-pos-border-focus-padding: $kendo-floating-label-pos-border-focus-padding,
111+
$kendo-floating-label-pos-inside-scale: $kendo-floating-label-pos-inside-scale,
112+
$kendo-floating-label-pos-inside-focus-scale: $kendo-floating-label-pos-inside-focus-scale,
113+
$kendo-floating-label-pos-inside-focus-height: $kendo-floating-label-pos-inside-focus-height,
67114
$kendo-floating-label-transition: $kendo-floating-label-transition,
68115
$kendo-floating-label-bg: $kendo-floating-label-bg,
69116
$kendo-floating-label-text: $kendo-floating-label-text,
70117
$kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
71-
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text
118+
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text,
119+
$kendo-floating-label-pos-border-focus-bg: $kendo-floating-label-pos-border-focus-bg,
120+
$kendo-floating-label-pos-border-focus-text: $kendo-floating-label-pos-border-focus-text,
121+
$kendo-floating-label-pos-inside-focus-text: $kendo-floating-label-pos-inside-focus-text
72122
);

‎packages/core/scss/components/floating-label/_layout.scss

Lines changed: 104 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use "sass:map";
12
@use "./_variables.scss" as *;
3+
@use "../input/_variables.scss" as *;
24

35
@mixin kendo-floating-label--layout-base() {
46

57

68
// Floating label
79
.k-floating-label-container {
8-
padding-top: $kendo-floating-label-height;
10+
padding-block-start: $kendo-floating-label-height;
911
box-sizing: border-box;
1012
display: inline-flex;
1113
vertical-align: middle;
@@ -26,33 +28,27 @@
2628
white-space: nowrap;
2729
text-overflow: ellipsis;
2830
position: absolute;
29-
top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
30-
left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
31+
inset-block-start: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
32+
inset-inline-start: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
3133
overflow: hidden;
3234
cursor: text;
33-
transform-origin: left center;
34-
transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
35+
transform-origin: inset-inline-start center;
36+
transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, inset-block-start $kendo-floating-label-transition, inset-inline-start $kendo-floating-label-transition;
3537
}
3638

3739

38-
&.k-empty {
39-
> .k-floating-label {
40-
top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
41-
left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
42-
transform: scale( $kendo-floating-label-scale );
43-
pointer-events: none;
44-
}
40+
&.k-empty > .k-floating-label {
41+
inset-block-start: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
42+
inset-inline-start: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
43+
transform: scale( $kendo-floating-label-scale );
44+
pointer-events: none;
4545
}
4646

4747
> .k-floating-label,
48-
&.k-focus > .k-floating-label {
49-
top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
50-
left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
51-
transform: scale( $kendo-floating-label-focus-scale );
52-
}
48+
&.k-focus > .k-floating-label,
5349
&:focus-within > .k-floating-label {
54-
top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
55-
left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
50+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
51+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
5652
transform: scale( $kendo-floating-label-focus-scale );
5753
}
5854

@@ -61,29 +57,101 @@
6157
}
6258
}
6359

64-
[dir="rtl"] .k-floating-label-container,
65-
.k-rtl .k-floating-label-container,
66-
.k-floating-label-container[dir="rtl"] {
67-
> .k-floating-label {
68-
transform-origin: right center;
69-
transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
70-
}
60+
.k-label-position-border {
61+
padding-block-start: calc( #{$kendo-floating-label-pos-border-focus-height} / 2 );
7162

72-
&.k-empty {
73-
> .k-floating-label {
74-
left: auto;
75-
right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
76-
}
63+
&.k-empty > .k-floating-label {
64+
transform: scale( $kendo-floating-label-pos-border-scale );
7765
}
7866

7967
> .k-floating-label,
80-
&.k-focus > .k-floating-label {
81-
left: auto;
82-
right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
68+
&.k-focus > .k-floating-label,
69+
&:focus-within > .k-floating-label {
70+
transform: scale( $kendo-floating-label-pos-border-focus-scale );
71+
padding: $kendo-floating-label-pos-border-focus-padding;
72+
z-index: 2;
8373
}
74+
}
75+
76+
.k-label-position-inside {
77+
padding-block-start: 0;
78+
79+
&.k-empty > .k-floating-label {
80+
transform: scale( $kendo-floating-label-pos-inside-scale );
81+
}
82+
83+
> .k-floating-label,
84+
&.k-focus > .k-floating-label,
8485
&:focus-within > .k-floating-label {
85-
left: auto;
86-
right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
86+
transform: scale( $kendo-floating-label-pos-inside-focus-scale );
87+
}
88+
}
89+
90+
// Support for input sizes
91+
@each $size, $size-props in $kendo-input-sizes {
92+
$_padding-y: map.get( $size-props, padding-y );
93+
$_padding-x: map.get( $size-props, padding-x );
94+
95+
// Outside floating label
96+
.k-floating-label-container {
97+
&.k-empty > .k-input-#{$size} {
98+
& + .k-floating-label {
99+
inset-block-start: var(--kendo-floating-label-offset-y, calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$_padding-y} ));
100+
inset-inline-start: var(--kendo-floating-label-offset-x, calc( #{$_padding-x} + #{$kendo-input-border-width} ));
101+
}
102+
}
103+
104+
> .k-input-#{$size} + .k-floating-label,
105+
&.k-focus > .k-input-#{$size} + .k-floating-label,
106+
&:focus-within > .k-input-#{$size} + .k-floating-label {
107+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
108+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
109+
}
110+
}
111+
112+
// Border floating label
113+
.k-label-position-border {
114+
&.k-empty > .k-input-#{$size} {
115+
& + .k-floating-label {
116+
inset-block-start: var(--kendo-floating-label-offset-y, calc( #{$kendo-floating-label-pos-border-focus-height} / 2 + #{$kendo-input-border-width} + #{$_padding-y}));
117+
inset-inline-start: var(--kendo-floating-label-offset-x, calc( #{$_padding-x} + #{$kendo-input-border-width} ));
118+
}
119+
}
120+
121+
> .k-input-#{$size} + .k-floating-label,
122+
&.k-focus > .k-input-#{$size} + .k-floating-label,
123+
&:focus-within > .k-input-#{$size} + .k-floating-label {
124+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
125+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-pos-border-focus-offset-x});
126+
}
127+
}
128+
129+
// Inside floating label
130+
.k-label-position-inside {
131+
> .k-input-#{$size} {
132+
.k-input-inner {
133+
padding-block-start: calc( $_padding-y + $kendo-floating-label-pos-inside-focus-height );
134+
}
135+
}
136+
137+
&.k-empty > .k-input-#{$size} + .k-floating-label {
138+
inset-block-start: var(--kendo-floating-label-offset-y, calc( 50% - #{$kendo-floating-label-height} / 2));
139+
}
140+
141+
> .k-input-#{$size} + .k-floating-label,
142+
&.k-focus > .k-input-#{$size} + .k-floating-label,
143+
&:focus-within > .k-input-#{$size} + .k-floating-label {
144+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$_padding-x});
145+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
146+
}
147+
}
148+
}
149+
150+
[dir="rtl"] .k-floating-label-container,
151+
.k-rtl .k-floating-label-container,
152+
.k-floating-label-container[dir="rtl"] {
153+
> .k-floating-label {
154+
transform-origin: right center;
87155
}
88156
}
89157

‎packages/core/scss/components/floating-label/_theme.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@
77
// Floating label
88
.k-floating-label-container {
99

10+
&.k-empty > .k-floating-label,
1011
> .k-floating-label {
1112
@include fill(
1213
$color: $kendo-floating-label-text,
1314
$bg: $kendo-floating-label-bg
1415
);
1516
}
1617

18+
&:focus-within > .k-floating-label,
1719
&.k-focus > .k-floating-label {
1820
@include fill(
1921
$color: $kendo-floating-label-focus-text,
@@ -28,6 +30,27 @@
2830
}
2931
}
3032

33+
.k-label-position-border {
34+
> .k-floating-label,
35+
&.k-focus > .k-floating-label,
36+
&:focus-within > .k-floating-label {
37+
@include fill (
38+
$bg: $kendo-floating-label-pos-border-focus-bg,
39+
$color: $kendo-floating-label-pos-border-focus-text
40+
);
41+
}
42+
}
43+
44+
.k-label-position-inside {
45+
> .k-floating-label,
46+
&.k-focus > .k-floating-label,
47+
&:focus-within > .k-floating-label {
48+
@include fill (
49+
$color: $kendo-floating-label-pos-inside-focus-text
50+
);
51+
}
52+
}
53+
3154
}
3255

3356

0 commit comments

Comments
 (0)