Skip to content

Commit bf2da84

Browse files
mrholekmrholek
committed
refactor(CDatePicker, CDateRangePicker): improve styles
1 parent afbee86 commit bf2da84

File tree

4 files changed

+59
-57
lines changed

4 files changed

+59
-57
lines changed

‎docs/layouts/partials/stylesheet.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
<link href="{{ $style.Permalink | relURL }}" rel="stylesheet">
2828

29-
{{- $stylePickers := resources.Get "scss/docs-pickers.scss" | toCSS }}
29+
{{- $stylePickers := resources.Get "scss/docs-pickers.scss" | toCSS | postCSS $postcssOptions }}
3030

3131
<link href="{{ $stylePickers.Permalink | relURL }}" rel="stylesheet">
3232
{{- end }}

‎scss/_date-picker.scss

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,15 @@
2222
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y};
2323
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x};
2424
--#{$prefix}date-picker-indicator-icon: #{escape-svg($date-picker-indicator-icon)};
25-
--#{$prefix}date-picker-indicator-icon-bg-size: #{$date-picker-indicator-icon-bg-size};
25+
--#{$prefix}date-picker-indicator-icon-color: #{$date-picker-indicator-icon-color};
26+
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size};
2627
--#{$prefix}date-picker-cleaner-icon: #{escape-svg($date-picker-cleaner-icon)};
27-
--#{$prefix}date-picker-cleaner-icon-hover: #{escape-svg($date-picker-cleaner-icon-hover)};
28-
--#{$prefix}date-picker-cleaner-icon-bg-size: #{$date-picker-cleaner-icon-bg-size};
28+
--#{$prefix}date-picker-cleaner-icon-color: #{$date-picker-cleaner-icon-color};
29+
--#{$prefix}date-picker-cleaner-icon-hover-color: #{$date-picker-cleaner-icon-hover-color};
30+
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size};
2931
--#{$prefix}date-picker-separator-icon: #{escape-svg($date-picker-separator-icon)};
3032
--#{$prefix}date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl)};
31-
--#{$prefix}date-picker-separator-icon-bg-size: #{$date-picker-separator-icon-bg-size};
33+
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size};
3234
--#{$prefix}date-picker-dropdown-bg: #{$date-picker-dropdown-bg};
3335
--#{$prefix}date-picker-dropdown-border-width: #{$date-picker-dropdown-border-width};
3436
--#{$prefix}date-picker-dropdown-border-color: #{$date-picker-dropdown-border-color};
@@ -140,29 +142,46 @@
140142
.date-picker-cleaner,
141143
.date-picker-separator,
142144
.date-picker-indicator {
145+
position: relative;
143146
width: 2.5rem;
144147
background-repeat: no-repeat;
145148
background-position: center;
149+
150+
&::before {
151+
position: absolute;
152+
top: 0;
153+
left: 0;
154+
width: 100%;
155+
height: 100%;
156+
content: "";
157+
}
146158
}
147159

148160
.date-picker-cleaner {
149161
display: none;
150-
background-image: var(--#{$prefix}date-picker-cleaner-icon);
151-
background-size: var(--#{$prefix}date-picker-cleaner-icon-bg-size);
152162

153-
&:hover {
154-
background-image: var(--#{$prefix}date-picker-cleaner-icon-hover);
163+
&::before {
164+
background-color: var(--#{$prefix}date-picker-cleaner-icon-color);
165+
mask: var(--#{$prefix}date-picker-cleaner-icon) center / var(--#{$prefix}date-picker-cleaner-icon-size) no-repeat;
166+
}
167+
168+
&:hover::before {
169+
background-color: var(--#{$prefix}date-picker-cleaner-icon-hover-color);
155170
}
156171
}
157172

158-
.date-picker-indicator {
159-
background-image: var(--#{$prefix}date-picker-indicator-icon);
160-
background-size: var(--#{$prefix}date-picker-indicator-icon-bg-size);
173+
.date-picker-indicator::before {
174+
background-color: var(--#{$prefix}date-picker-indicator-icon-color);
175+
mask: var(--#{$prefix}date-picker-indicator-icon) center / var(--#{$prefix}date-picker-indicator-icon-size) no-repeat;
161176
}
162177

163-
.date-picker-separator {
164-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}date-picker-separator-icon), var(--#{$prefix}date-picker-separator-icon-rtl));
165-
background-size: var(--#{$prefix}date-picker-separator-icon-bg-size);
178+
.date-picker-separator::before {
179+
background-color: $date-picker-separator-icon-color;
180+
@include ltr-rtl-value-only(
181+
"mask",
182+
var(--#{$prefix}date-picker-separator-icon) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat,
183+
var(--#{$prefix}date-picker-separator-icon-rtl) center / var(--#{$prefix}date-picker-separator-icon-size) no-repeat
184+
);
166185
}
167186

168187
.date-picker-dropdown {
@@ -254,30 +273,25 @@
254273
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y-sm};
255274
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-sm};
256275
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-sm};
257-
--#{$prefix}date-picker-cleaner-icon-bg-size: #{$date-picker-cleaner-icon-bg-size-sm};
258-
--#{$prefix}date-picker-indicator-icon-bg-size: #{$date-picker-indicator-icon-bg-size-sm};
259-
--#{$prefix}date-picker-separator-icon-bg-size: #{$date-picker-separator-icon-bg-size-sm};
276+
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size-sm};
277+
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size-sm};
278+
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size-sm};
260279
}
261280

262281
.date-picker-lg {
263282
--#{$prefix}date-picker-border-radius: #{$date-picker-border-radius-lg};
264283
--#{$prefix}date-picker-padding-y: #{$date-picker-padding-y-lg};
265284
--#{$prefix}date-picker-padding-x: #{$date-picker-padding-x-lg};
266-
--#{$prefix}date-picker-cleaner-icon-bg-size: #{$date-picker-cleaner-icon-bg-size-lg};
267-
--#{$prefix}date-picker-indicator-icon-bg-size: #{$date-picker-indicator-icon-bg-size-lg};
268-
--#{$prefix}date-picker-separator-icon-bg-size: #{$date-picker-separator-icon-bg-size-lg};
285+
--#{$prefix}date-picker-cleaner-icon-size: #{$date-picker-cleaner-icon-size-lg};
286+
--#{$prefix}date-picker-indicator-icon-size: #{$date-picker-indicator-icon-size-lg};
287+
--#{$prefix}date-picker-separator-icon-size: #{$date-picker-separator-icon-size-lg};
269288
}
270289

271290
@if $enable-dark-mode {
272291
@include color-mode(dark) {
273292
.date-picker {
274-
--#{$prefix}date-picker-cleaner-icon: #{escape-svg($date-picker-cleaner-icon-dark)};
275-
--#{$prefix}date-picker-cleaner-icon-hover: #{escape-svg($date-picker-cleaner-icon-hover-dark)};
276-
--#{$prefix}date-picker-indicator-icon: #{escape-svg($date-picker-indicator-icon-dark)};
277293
--#{$prefix}date-picker-indicator-invalid-icon: #{escape-svg($date-picker-indicator-invalid-icon-dark)};
278294
--#{$prefix}date-picker-indicator-valid-icon: #{escape-svg($date-picker-indicator-valid-icon-dark)};
279-
--#{$prefix}date-picker-separator-icon: #{escape-svg($date-picker-separator-icon-dark)};
280-
--#{$prefix}date-picker-separator-icon-rtl: #{escape-svg($date-picker-separator-icon-rtl-dark)};
281295
}
282296
}
283297
}

‎scss/_variables-dark.scss

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -217,20 +217,9 @@ $button-outline-ghost-variants-dark: (
217217
// Date Picker
218218
//
219219

220-
$date-picker-cleaner-icon-color-dark: $body-tertiary-color-dark !default;
221-
$date-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='#{$date-picker-cleaner-icon-color-dark}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color-dark}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
222-
$date-picker-cleaner-icon-hover-color-dark: $body-color-dark !default;
223-
$date-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='#{$date-picker-cleaner-icon-hover-color-dark}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-hover-color-dark}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>") !default;
224-
225-
$date-picker-indicator-icon-color-dark: $body-tertiary-color-dark !default;
226-
$date-picker-indicator-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-indicator-icon-color-dark}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-indicator-icon-color-dark}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-indicator-icon-color-dark}'></rect></svg>") !default;
227220
$date-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'><path fill='#{$form-invalid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-invalid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-invalid-color}'></rect></svg>") !default;
228221
$date-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'><path fill='#{$form-valid-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$form-valid-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$form-valid-color}'></rect></svg>") !default;
229222

230-
$date-picker-separator-icon-color-dark: $body-tertiary-color-dark !default;
231-
$date-picker-separator-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color-dark}' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>") !default;
232-
$date-picker-separator-icon-rtl-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color-dark}' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>") !default;
233-
234223
//
235224
// Multi Select
236225
//

0 commit comments

Comments
 (0)