Skip to content

Commit 2b61836

Browse files
authored
refactor(input-group): label position when placeholder is removed (#15937)
1 parent d1c8765 commit 2b61836

File tree

1 file changed

+41
-3
lines changed

1 file changed

+41
-3
lines changed

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -496,12 +496,23 @@
496496
}
497497
}
498498
}
499+
500+
&:not(%form-group-display--focused, %form-group-display--filled) {
501+
&:has(input:not(:placeholder-shown, [type='file'])) {
502+
%form-group-label {
503+
@include type-style('subtitle-1');
504+
transform: translateY(0);
505+
}
506+
}
507+
}
499508
}
500509
}
501510

502511
%form-group-placeholder {
503-
%form-group-label {
504-
transition: none !important;
512+
&:has(input:placeholder-shown, textarea:placeholder-shown) {
513+
%form-group-label {
514+
transition: none !important;
515+
}
505516
}
506517
}
507518

@@ -1004,13 +1015,20 @@
10041015

10051016
%form-group-label--focused-border,
10061017
%form-group-label--filled-border,
1007-
%form-group-label--placeholder-border,
10081018
%form-group-label--file-border {
10091019
%igx-input-group__notch {
10101020
border-block-start-color: transparent !important;
10111021
}
10121022
}
10131023

1024+
%form-group-label--placeholder-border {
1025+
&:has(input:placeholder-shown, textarea:placeholder-shown) {
1026+
%igx-input-group__notch {
1027+
border-block-start-color: transparent !important;
1028+
}
1029+
}
1030+
}
1031+
10141032
%form-group-label--focused-border {
10151033
%form-group-bundle-start {
10161034
border-inline-start-width: rem(2px);
@@ -1098,6 +1116,26 @@
10981116
width: calc(100% - #{rem(2px)});
10991117
}
11001118
}
1119+
1120+
%textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1121+
&:has(textarea:not(:placeholder-shown)) {
1122+
%form-group-textarea-label:not(%textarea-group-label--focused) {
1123+
@include type-style('subtitle-1');
1124+
1125+
top: calc($input-top-padding - #{rem(3px)});
1126+
transform: translateY(0);
1127+
margin-bottom: auto;
1128+
}
1129+
}
1130+
}
1131+
1132+
%textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1133+
&:has(%form-group-display--border, textarea:not(:placeholder-shown)) {
1134+
%igx-input-group__notch {
1135+
border-block-start-width: rem(1px);
1136+
}
1137+
}
1138+
}
11011139
}
11021140

11031141
%form-group-textarea-group-bundle {

0 commit comments

Comments
 (0)