Skip to content

Commit 385262f

Browse files
TeyaVesTeyaVes
committed
feat(floating-labels): add floating-label position
1 parent fd4a6ed commit 385262f

File tree

13 files changed

+672
-66
lines changed

13 files changed

+672
-66
lines changed

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

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,26 @@ $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-border-scale: .85 !default;
41+
// The height of the Border Floating Label.
42+
/// @group floating-label
43+
$kendo-floating-label-border-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-border-scale} ) !default;
44+
/// The horizontal offset of the Border Floating Label.
45+
/// @group floating-label
46+
$kendo-floating-label-border-offset-x: k-spacing(3) !default;
47+
/// The padding of the Border Floating Label.
48+
/// @group floating-label
49+
$kendo-floating-label-border-padding: null !default;
50+
51+
/// The transformation scale of the Inside Floating Label.
52+
/// @group floating-label
53+
$kendo-floating-label-inside-scale: .85 !default;
54+
/// The height of the Inside Floating Label.
55+
/// @group floating-label
56+
$kendo-floating-label-inside-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-border-scale} ) !default;
57+
3858
/// The transition of the Floating Label.
3959
/// @group floating-label
4060
$kendo-floating-label-transition: .2s ease-out !default;
@@ -53,6 +73,9 @@ $kendo-floating-label-focus-bg: null !default;
5373
/// @group floating-label
5474
$kendo-floating-label-focus-text: null !default;
5575

76+
/// The background color of the Border Floating Label.
77+
/// @group floating-label
78+
$kendo-floating-label-border-bg: k-color( surface-alt ) !default;
5679

5780
@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
5881
$kendo-floating-label-scale: $kendo-floating-label-scale,
@@ -65,9 +88,16 @@ $kendo-floating-label-focus-text: null !default;
6588
$kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
6689
$kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
6790
$kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
91+
$kendo-floating-label-border-scale: $kendo-floating-label-border-scale,
92+
$kendo-floating-label-border-height: $kendo-floating-label-border-height,
93+
$kendo-floating-label-border-offset-x: $kendo-floating-label-border-offset-x,
94+
$kendo-floating-label-border-padding: $kendo-floating-label-border-padding,
95+
$kendo-floating-label-inside-scale: $kendo-floating-label-inside-scale,
96+
$kendo-floating-label-inside-height: $kendo-floating-label-inside-height,
6897
$kendo-floating-label-transition: $kendo-floating-label-transition,
6998
$kendo-floating-label-bg: $kendo-floating-label-bg,
7099
$kendo-floating-label-text: $kendo-floating-label-text,
71100
$kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
72-
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text
101+
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text,
102+
$kendo-floating-label-border-bg: $kendo-floating-label-border-bg
73103
);

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

Lines changed: 32 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,26 @@ $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-border-scale: .85 !default;
41+
// The height of the Border Floating Label.
42+
/// @group floating-label
43+
$kendo-floating-label-border-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-border-scale} ) !default;
44+
/// The horizontal offset of the Border Floating Label.
45+
/// @group floating-label
46+
$kendo-floating-label-border-offset-x: k-spacing(3) !default;
47+
/// The padding of the Border Floating Label.
48+
/// @group floating-label
49+
$kendo-floating-label-border-padding: null !default;
50+
51+
/// The transformation scale of the Inside Floating Label.
52+
/// @group floating-label
53+
$kendo-floating-label-inside-scale: .85 !default;
54+
/// The height of the Inside Floating Label.
55+
/// @group floating-label
56+
$kendo-floating-label-inside-height: calc( #{$kendo-floating-label-height} * #{$kendo-floating-label-border-scale} ) !default;
57+
3758
/// The transition of the Floating Label.
3859
/// @group floating-label
3960
$kendo-floating-label-transition: .2s ease-out !default;
@@ -52,6 +73,9 @@ $kendo-floating-label-focus-bg: null !default;
5273
/// @group floating-label
5374
$kendo-floating-label-focus-text: null !default;
5475

76+
/// The background color of the Border Floating Label.
77+
/// @group floating-label
78+
$kendo-floating-label-border-bg: k-color( surface-alt ) !default;
5579

5680
@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
5781
$kendo-floating-label-scale: $kendo-floating-label-scale,
@@ -64,9 +88,16 @@ $kendo-floating-label-focus-text: null !default;
6488
$kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
6589
$kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
6690
$kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
91+
$kendo-floating-label-border-scale: $kendo-floating-label-border-scale,
92+
$kendo-floating-label-border-height: $kendo-floating-label-border-height,
93+
$kendo-floating-label-border-offset-x: $kendo-floating-label-border-offset-x,
94+
$kendo-floating-label-border-padding: $kendo-floating-label-border-padding,
95+
$kendo-floating-label-inside-scale: $kendo-floating-label-inside-scale,
96+
$kendo-floating-label-inside-height: $kendo-floating-label-inside-height,
6797
$kendo-floating-label-transition: $kendo-floating-label-transition,
6898
$kendo-floating-label-bg: $kendo-floating-label-bg,
6999
$kendo-floating-label-text: $kendo-floating-label-text,
70100
$kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
71-
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text
101+
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text,
102+
$kendo-floating-label-border-bg: $kendo-floating-label-border-bg
72103
);

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

Lines changed: 98 additions & 35 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,64 +28,125 @@
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

5955
&.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
6056
color: transparent;
6157
}
58+
59+
@each $size, $size-props in $kendo-input-sizes {
60+
$_padding-y: map.get( $size-props, padding-y );
61+
$_padding-x: map.get( $size-props, padding-x );
62+
63+
&.k-empty > .k-input-#{$size} {
64+
& + .k-floating-label {
65+
inset-block-start: var(--kendo-floating-label-offset-y, calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$_padding-y} ));
66+
inset-inline-start: var(--kendo-floating-label-offset-x, calc( #{$_padding-x} + #{$kendo-input-border-width} ));
67+
}
68+
}
69+
70+
> .k-input-#{$size} + .k-floating-label,
71+
&.k-focus > .k-input-#{$size} + .k-floating-label,
72+
&:focus-within > .k-input-#{$size} + .k-floating-label {
73+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
74+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
75+
}
76+
}
6277
}
6378

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;
79+
.k-floating-label-border {
80+
padding-block-start: calc( #{$kendo-floating-label-border-height} / 2 );
81+
82+
> .k-floating-label,
83+
&.k-focus > .k-floating-label,
84+
&:focus-within > .k-floating-label {
85+
transform: scale( $kendo-floating-label-border-scale );
86+
padding: $kendo-floating-label-border-padding;
87+
z-index: 2;
7088
}
7189

72-
&.k-empty {
73-
> .k-floating-label {
74-
left: auto;
75-
right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
90+
91+
// Support for input sizes
92+
@each $size, $size-props in $kendo-input-sizes {
93+
$_padding-y: map.get( $size-props, padding-y );
94+
$_padding-x: map.get( $size-props, padding-x );
95+
96+
&.k-empty > .k-input-#{$size} {
97+
& + .k-floating-label {
98+
inset-block-start: var(--kendo-floating-label-offset-y, calc( #{$kendo-floating-label-border-height} / 2 + #{$kendo-input-border-width} + #{$_padding-y}));
99+
inset-inline-start: var(--kendo-floating-label-offset-x, calc( #{$_padding-x} + #{$kendo-input-border-width} ));
100+
}
101+
}
102+
103+
> .k-input-#{$size} + .k-floating-label,
104+
&.k-focus > .k-input-#{$size} + .k-floating-label,
105+
&:focus-within > .k-input-#{$size} + .k-floating-label {
106+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
107+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-border-offset-x});
76108
}
77109
}
110+
}
111+
112+
.k-floating-label-inside {
113+
padding-block-start: 0;
78114

79115
> .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});
83-
}
116+
&.k-focus > .k-floating-label,
84117
&:focus-within > .k-floating-label {
85-
left: auto;
86-
right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
118+
transform: scale( $kendo-floating-label-inside-scale );
119+
}
120+
121+
// Support for input sizes
122+
@each $size, $size-props in $kendo-input-sizes {
123+
$_padding-y: map.get( $size-props, padding-y );
124+
$_padding-x: map.get( $size-props, padding-x );
125+
126+
> .k-input-#{$size} {
127+
.k-input-inner {
128+
padding-block-start: calc( $_padding-y + $kendo-floating-label-inside-height );
129+
}
130+
}
131+
132+
&.k-empty > .k-input-#{$size} + .k-floating-label {
133+
inset-block-start: var(--kendo-floating-label-offset-y, calc( 50% - #{$kendo-floating-label-height} / 2));
134+
}
135+
136+
> .k-input-#{$size} + .k-floating-label,
137+
&.k-focus > .k-input-#{$size} + .k-floating-label,
138+
&:focus-within > .k-input-#{$size} + .k-floating-label {
139+
inset-inline-start: var(--kendo-floating-label-focus-offset-x, #{$_padding-x});
140+
inset-block-start: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
141+
}
142+
}
143+
}
144+
145+
[dir="rtl"] .k-floating-label-container,
146+
.k-rtl .k-floating-label-container,
147+
.k-floating-label-container[dir="rtl"] {
148+
> .k-floating-label {
149+
transform-origin: right center;
87150
}
88151
}
89152

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use "../../mixins/index.import.scss" as *;
22
@use "../../color-system/_swatch-legacy.scss" as *;
3+
@use "../../color-system/_functions.import.scss" as *;
34
@use "./_variables.scss" as *;
45

56
@mixin kendo-floating-label--theme-base() {
@@ -14,6 +15,7 @@
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,14 @@
2830
}
2931
}
3032

33+
.k-floating-label-border {
34+
> .k-floating-label,
35+
&.k-focus > .k-floating-label,
36+
&:focus-within > .k-floating-label {
37+
@include fill ( $bg: $kendo-floating-label-border-bg );
38+
}
39+
}
40+
3141
}
3242

3343

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,20 @@ $kendo-floating-label-focus-scale: null !default;
1212
$kendo-floating-label-focus-offset-x: null !default;
1313
$kendo-floating-label-focus-offset-y: null !default;
1414

15+
$kendo-floating-label-border-scale: null !default;
16+
$kendo-floating-label-border-height: null !default;
17+
$kendo-floating-label-border-offset-x: null !default;
18+
$kendo-floating-label-border-padding: null !default;
19+
20+
$kendo-floating-label-inside-scale: null !default;
21+
$kendo-floating-label-inside-height: null !default;
22+
1523
$kendo-floating-label-transition: null !default;
1624

1725
$kendo-floating-label-bg: null !default;
1826
$kendo-floating-label-text: null !default;
1927

2028
$kendo-floating-label-focus-bg: null !default;
2129
$kendo-floating-label-focus-text: null !default;
30+
31+
$kendo-floating-label-border-bg: k-color( surface-alt ) !default;

0 commit comments

Comments
 (0)