Skip to content

Commit c8a2238

Browse files
mrholekmrholek
committed
refactor(TimePicker): improve styles
1 parent bf2da84 commit c8a2238

File tree

3 files changed

+51
-56
lines changed

3 files changed

+51
-56
lines changed

‎scss/_time-picker.scss

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@
2222
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y};
2323
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x};
2424
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};
25-
--#{$prefix}time-picker-indicator-icon-bg-size: #{$time-picker-indicator-icon-bg-size};
25+
--#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};
26+
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};
2627
--#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};
27-
--#{$prefix}time-picker-cleaner-icon-hover: #{escape-svg($time-picker-cleaner-icon-hover)};
28-
--#{$prefix}time-picker-cleaner-icon-bg-size: #{$time-picker-cleaner-icon-bg-size};
28+
--#{$prefix}time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};
29+
--#{$prefix}time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};
30+
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};
2931
--#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};
3032
--#{$prefix}time-picker-footer-border-width: #{$time-picker-footer-border-width};
3133
--#{$prefix}time-picker-footer-border-color: #{$time-picker-footer-border-color};
@@ -46,12 +48,14 @@
4648
// scss-docs-end time-picker-css-vars
4749

4850
&.is-invalid {
49-
--#{$prefix}time-picker-border-color: #{$form-feedback-invalid-color} !important; // stylelint-disable-line declaration-no-important
51+
--#{$prefix}time-picker-border-color: #{$time-picker-invalid-border-color} !important; // stylelint-disable-line declaration-no-important
52+
--#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-invalid-icon-color} !important; // stylelint-disable-line declaration-no-important
5053
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-invalid-icon)} !important; // stylelint-disable-line declaration-no-important
5154
}
5255

5356
&.is-valid {
54-
--#{$prefix}time-picker-border-color: #{$form-feedback-valid-color} !important; // stylelint-disable-line declaration-no-important
57+
--#{$prefix}time-picker-border-color: #{$time-picker-valid-border-color} !important; // stylelint-disable-line declaration-no-important
58+
--#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-valid-icon-color} !important; // stylelint-disable-line declaration-no-important
5559
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-valid-icon)} !important; // stylelint-disable-line declaration-no-important
5660
}
5761
}
@@ -139,24 +143,37 @@
139143

140144
.time-picker-cleaner,
141145
.time-picker-indicator {
146+
position: relative;
142147
width: 2.5rem;
143148
background-repeat: no-repeat;
144149
background-position: center;
150+
151+
&::before {
152+
position: absolute;
153+
top: 0;
154+
left: 0;
155+
width: 100%;
156+
height: 100%;
157+
content: "";
158+
}
145159
}
146160

147161
.time-picker-cleaner {
148162
display: none;
149-
background-image: var(--#{$prefix}time-picker-cleaner-icon);
150-
background-size: var(--#{$prefix}time-picker-cleaner-icon-bg-size);
151163

152-
&:hover {
153-
background-image: var(--#{$prefix}time-picker-cleaner-icon-hover);
164+
&::before {
165+
background-color: var(--#{$prefix}time-picker-cleaner-icon-color);
166+
mask: var(--#{$prefix}time-picker-cleaner-icon) center / var(--#{$prefix}time-picker-cleaner-icon-size) no-repeat;
167+
}
168+
169+
&:hover::before {
170+
background-color: var(--#{$prefix}time-picker-cleaner-icon-hover-color);
154171
}
155172
}
156173

157174
.time-picker-indicator {
158-
background-image: var(--#{$prefix}time-picker-indicator-icon);
159-
background-size: var(--#{$prefix}time-picker-indicator-icon-bg-size);
175+
background-color: var(--#{$prefix}time-picker-indicator-icon-color);
176+
mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;
160177
}
161178

162179
.time-picker-dropdown {
@@ -271,26 +288,14 @@
271288
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-sm};
272289
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-sm};
273290
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-sm};
274-
--#{$prefix}time-picker-cleaner-icon-bg-size: #{$time-picker-cleaner-icon-bg-size-sm};
275-
--#{$prefix}time-picker-indicator-icon-bg-size: #{$time-picker-indicator-icon-bg-size-sm};
291+
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-sm};
292+
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-sm};
276293
}
277294

278295
.time-picker-lg {
279296
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-lg};
280297
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-lg};
281298
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-lg};
282-
--#{$prefix}time-picker-cleaner-icon-bg-size: #{$time-picker-cleaner-icon-bg-size-lg};
283-
--#{$prefix}time-picker-indicator-icon-bg-size: #{$time-picker-indicator-icon-bg-size-lg};
284-
}
285-
286-
@if $enable-dark-mode {
287-
@include color-mode(dark) {
288-
.time-picker {
289-
--#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon-dark)};
290-
--#{$prefix}time-picker-cleaner-icon-hover: #{escape-svg($time-picker-cleaner-icon-hover-dark)};
291-
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon-dark)};
292-
--#{$prefix}time-picker-indicator-invalid-icon: #{escape-svg($time-picker-indicator-invalid-icon-dark)};
293-
--#{$prefix}time-picker-indicator-valid-icon: #{escape-svg($time-picker-indicator-valid-icon-dark)};
294-
}
295-
}
299+
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-lg};
300+
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-lg};
296301
}

‎scss/_variables-dark.scss

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -244,18 +244,4 @@ $form-multi-select-indicator-hover-color-dark: $body-color-dark !default;
244244
$form-multi-select-indicator-hover-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-hover-color-dark}'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
245245
$form-multi-select-indicator-focus-color-dark: $body-color-dark !default;
246246
$form-multi-select-indicator-focus-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#{$form-multi-select-indicator-focus-color-dark}'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>") !default;
247-
248-
//
249-
// Time Picker
250-
//
251-
252-
$time-picker-cleaner-icon-color-dark: $body-tertiary-color-dark !default;
253-
$time-picker-cleaner-icon-dark: url("data:image/svg+ xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-color-dark}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#{$time-picker-cleaner-icon-color-dark}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
254-
$time-picker-cleaner-icon-hover-color-dark: $body-color-dark !default;
255-
$time-picker-cleaner-icon-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-hover-color-dark} ts='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#{$time-picker-cleaner-icon-hover-color-dark} 425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
256-
257-
$time-picker-indicator-icon-color-dark: $body-tertiary-color-dark !default;
258-
$time-picker-indicator-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-indicator-icon-color-dark}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$time-picker-indicator-icon-color-dark}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
259-
$time-picker-indicator-invalid-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-invalid-color-dark}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$form-invalid-color-dark}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
260-
$time-picker-indicator-valid-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-valid-color-dark}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$form-valid-color-dark}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
261247
// scss-docs-end sass-dark-mode-vars

‎scss/_variables.scss

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2357,6 +2357,9 @@ $time-picker-border-radius: $input-border-radius !default;
23572357
$time-picker-border-radius-sm: $input-border-radius-sm !default;
23582358
$time-picker-border-radius-lg: $input-border-radius-lg !default;
23592359

2360+
$time-picker-invalid-border-color: var(--#{$prefix}form-invalid-border-color) !default;
2361+
$time-picker-valid-border-color: var(--#{$prefix}form-valid-border-color) !default;
2362+
23602363
$time-picker-disabled-color: $input-disabled-color !default;
23612364
$time-picker-disabled-bg: $input-disabled-bg !default;
23622365
$time-picker-disabled-border-color: $input-disabled-border-color !default;
@@ -2375,21 +2378,22 @@ $time-picker-padding-x-sm: $input-padding-x-sm !default;
23752378
$time-picker-padding-y-lg: $input-padding-y-lg !default;
23762379
$time-picker-padding-x-lg: $input-padding-x-lg !default;
23772380

2378-
$time-picker-cleaner-icon-color: $body-tertiary-color !default;
2379-
$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#{$time-picker-cleaner-icon-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
2380-
$time-picker-cleaner-icon-hover-color: $body-color !default;
2381-
$time-picker-cleaner-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-hover-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#{$time-picker-cleaner-icon-hover-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
2382-
$time-picker-cleaner-icon-bg-size: 1rem !default;
2383-
$time-picker-cleaner-icon-bg-size-sm: .875rem !default;
2384-
$time-picker-cleaner-icon-bg-size-lg: 1.25rem !default;
2385-
2386-
$time-picker-indicator-icon-color: $body-tertiary-color !default;
2387-
$time-picker-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-indicator-icon-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$time-picker-indicator-icon-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
2388-
$time-picker-indicator-invalid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-invalid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$form-feedback-invalid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
2389-
$time-picker-indicator-valid-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#{$form-feedback-valid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
2390-
$time-picker-indicator-icon-bg-size: 1rem !default;
2391-
$time-picker-indicator-icon-bg-size-sm: .875rem !default;
2392-
$time-picker-indicator-icon-bg-size-lg: 1.25rem !default;
2381+
$time-picker-cleaner-icon-color: var(--#{$prefix}tertiary-color) !default;
2382+
$time-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302'></polygon><path fill='#000' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z'></path></svg>") !default;
2383+
$time-picker-cleaner-icon-hover-color: var(--#{$prefix}body-color) !default;
2384+
$time-picker-cleaner-icon-size: 1rem !default;
2385+
$time-picker-cleaner-icon-size-sm: .875rem !default;
2386+
$time-picker-cleaner-icon-size-lg: 1.25rem !default;
2387+
2388+
$time-picker-indicator-icon-color: var(--#{$prefix}tertiary-color) !default;
2389+
$time-picker-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5'></polygon><path fill='#000' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z'></path></svg>") !default;
2390+
$time-picker-indicator-invalid-icon-color: var(--#{$prefix}form-invalid-color) !default;
2391+
$time-picker-indicator-invalid-icon: $time-picker-indicator-icon !default;
2392+
$time-picker-indicator-valid-icon-color: var(--#{$prefix}form-valid-color) !default;
2393+
$time-picker-indicator-valid-icon: $time-picker-indicator-icon !default;
2394+
$time-picker-indicator-icon-size: 1rem !default;
2395+
$time-picker-indicator-icon-size-sm: .875rem !default;
2396+
$time-picker-indicator-icon-size-lg: 1.25rem !default;
23932397

23942398
$time-picker-dropdown-bg: var(--#{$prefix}body-bg) !default;
23952399
$time-picker-dropdown-border-color: var(--#{$prefix}border-color) !default;

0 commit comments

Comments
 (0)