Skip to content

Commit 9a862aa

Browse files
committed
fix(DatePicker, DateRangePicker, TimePicker): fix the incorrect border radius value when components are inside the input group
1 parent 34f7d51 commit 9a862aa

File tree

2 files changed

+37
-16
lines changed

2 files changed

+37
-16
lines changed

scss/forms/_input-group.scss

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@
2525
}
2626

2727
// Bring the "active" form control to the top of surrounding elements
28-
> .date-picker.show,
29-
> .time-picker.show,
30-
> .form-multi-select.show,
28+
> .date-picker:focus-within,
29+
> .time-picker:focus-within,
30+
> .form-multi-select:focus-within,
3131
> .form-control:focus,
3232
> .form-select:focus,
33-
> .form-floating:focus-within {
33+
> .form-floating:focus-within,
34+
> .form-password:focus-within {
3435
z-index: 5;
3536
}
3637

@@ -107,13 +108,14 @@
107108
// stylelint-disable-next-line no-duplicate-selectors
108109
.input-group {
109110
&:not(.has-validation) {
110-
> .date-picker > .date-picker-input-group,
111-
> .time-picker > .time-picker-input-group,
112-
> .form-multi-select > .form-multi-select-input-group,
111+
> .date-picker:not(:last-child) > .date-picker-input-group,
112+
> .time-picker:not(:last-child) > .time-picker-input-group,
113+
> .form-multi-select:not(:last-child) > .form-multi-select-input-group,
113114
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
114115
> .dropdown-toggle:nth-last-child(n + 3),
115116
> .form-floating:not(:last-child) > .form-control,
116-
> .form-floating:not(:last-child) > .form-select {
117+
> .form-floating:not(:last-child) > .form-select,
118+
> .form-password:not(:last-child) > .form-control {
117119
@include border-end-radius(0);
118120
}
119121
}
@@ -125,7 +127,8 @@
125127
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
126128
> .dropdown-toggle:nth-last-child(n + 4),
127129
> .form-floating:nth-last-child(n + 3) > .form-control,
128-
> .form-floating:nth-last-child(n + 3) > .form-select {
130+
> .form-floating:nth-last-child(n + 3) > .form-select,
131+
> .form-password:nth-last-child(n + 3) > .form-control {
129132
@include border-end-radius(0);
130133
}
131134
}
@@ -140,11 +143,12 @@
140143
@include border-start-radius(0);
141144
}
142145

143-
> .date-picker > .date-picker-input-group,
144-
> .time-picker > .time-picker-input-group,
145-
> .form-multi-select > .form-multi-select-input-group,
146+
> .date-picker:not(:first-child) > .date-picker-input-group,
147+
> .time-picker:not(:first-child) > .time-picker-input-group,
148+
> .form-multi-select:not(:first-child) > .form-multi-select-input-group,
146149
> .form-floating:not(:first-child) > .form-control,
147-
> .form-floating:not(:first-child) > .form-select {
150+
> .form-floating:not(:first-child) > .form-select,
151+
> .form-password:not(:first-child) > .form-control {
148152
@include border-start-radius(0);
149153
}
150154
}

scss/mixins/_forms.scss

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,19 @@
8686
}
8787
}
8888

89+
.form-password .form-control {
90+
@include form-validation-state-selector($state) {
91+
92+
@if $enable-validation-icons {
93+
background-image: none;
94+
}
95+
96+
~ .form-password-action .form-password-action-icon {
97+
background-color: $border-color;
98+
}
99+
}
100+
}
101+
89102
// stylelint-disable-next-line selector-no-qualifying-type
90103
textarea.form-control {
91104
@include form-validation-state-selector($state) {
@@ -154,9 +167,13 @@
154167
}
155168

156169
.input-group {
157-
> .form-control:not(:focus),
158-
> .form-select:not(:focus),
159-
> .form-floating:not(:focus-within) {
170+
> .date-picker:focus-within,
171+
> .time-picker:focus-within,
172+
> .form-multi-select:focus-within,
173+
> .form-control:focus,
174+
> .form-select:focus,
175+
> .form-floating:focus-within,
176+
> .form-password:focus-within {
160177
@include form-validation-state-selector($state) {
161178
@if $state == "valid" {
162179
z-index: 3;

0 commit comments

Comments
 (0)