Skip to content

Commit 61324de

Browse files
authored
refactor(input-group): label position when placeholder is removed (#15933)
1 parent 7858574 commit 61324de

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
@@ -747,12 +747,23 @@
747747
}
748748
}
749749
}
750+
751+
&:not(%form-group-display--focused, %form-group-display--filled) {
752+
&:has(input:not(:placeholder-shown, [type='file'])) {
753+
%form-group-label {
754+
@include type-style('subtitle-1');
755+
transform: translateY(0);
756+
}
757+
}
758+
}
750759
}
751760
}
752761

753762
%form-group-placeholder {
754-
%form-group-label {
755-
transition: none !important;
763+
&:has(input:placeholder-shown, textarea:placeholder-shown) {
764+
%form-group-label {
765+
transition: none !important;
766+
}
756767
}
757768
}
758769

@@ -1255,13 +1266,20 @@
12551266

12561267
%form-group-label--focused-border,
12571268
%form-group-label--filled-border,
1258-
%form-group-label--placeholder-border,
12591269
%form-group-label--file-border {
12601270
%igx-input-group__notch {
12611271
border-block-start-color: transparent !important;
12621272
}
12631273
}
12641274

1275+
%form-group-label--placeholder-border {
1276+
&:has(input:placeholder-shown, textarea:placeholder-shown) {
1277+
%igx-input-group__notch {
1278+
border-block-start-color: transparent !important;
1279+
}
1280+
}
1281+
}
1282+
12651283
%form-group-label--focused-border {
12661284
%form-group-bundle-start {
12671285
border-inline-start-width: rem(2px);
@@ -1349,6 +1367,26 @@
13491367
width: calc(100% - #{rem(2px)});
13501368
}
13511369
}
1370+
1371+
%textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1372+
&:has(textarea:not(:placeholder-shown)) {
1373+
%form-group-textarea-label:not(%textarea-group-label--focused) {
1374+
@include type-style('subtitle-1');
1375+
1376+
top: calc($input-top-padding - #{rem(3px)});
1377+
transform: translateY(0);
1378+
margin-bottom: auto;
1379+
}
1380+
}
1381+
}
1382+
1383+
%textarea-group:not(%form-group-display--focused, %form-group-display--filled) {
1384+
&:has(%form-group-display--border, textarea:not(:placeholder-shown)) {
1385+
%igx-input-group__notch {
1386+
border-block-start-width: rem(1px);
1387+
}
1388+
}
1389+
}
13521390
}
13531391

13541392
%form-group-textarea-group-bundle {

0 commit comments

Comments
 (0)