Skip to content

Commit afbee86

Browse files
mrholekmrholek
committed
refactor(Calendar): improve styles
1 parent 0681e5f commit afbee86

File tree

3 files changed

+75
-121
lines changed

3 files changed

+75
-121
lines changed

‎scss/_calendar.scss

Lines changed: 69 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// stylelint-disable selector-max-class
2+
13
.calendar {
24
// scss-docs-start calendar-css-vars
35
--#{$prefix}calendar-table-margin: #{$calendar-table-margin};
@@ -10,13 +12,11 @@
1012
--#{$prefix}calendar-nav-icon-width: #{$calendar-nav-icon-width};
1113
--#{$prefix}calendar-nav-icon-height: #{$calendar-nav-icon-height};
1214
--#{$prefix}calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next)};
13-
--#{$prefix}calendar-nav-icon-double-next-hover: #{escape-svg($calendar-nav-icon-double-next-hover)};
1415
--#{$prefix}calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev)};
15-
--#{$prefix}calendar-nav-icon-double-prev-hover: #{escape-svg($calendar-nav-icon-double-prev-hover)};
1616
--#{$prefix}calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next)};
17-
--#{$prefix}calendar-nav-icon-next-hover: #{escape-svg($calendar-nav-icon-next-hover)};
1817
--#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev)};
19-
--#{$prefix}calendar-nav-icon-prev-hover: #{escape-svg($calendar-nav-icon-prev-hover)};
18+
--#{$prefix}calendar-nav-icon-color: #{$calendar-nav-icon-color};
19+
--#{$prefix}calendar-nav-icon-hover-color: #{$calendar-nav-icon-hover-color};
2020
--#{$prefix}calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};
2121
--#{$prefix}calendar-cell-week-number-color: #{$calendar-cell-week-number-color};
2222
--#{$prefix}calendar-cell-hover-color: #{$calendar-cell-hover-color};
@@ -50,6 +50,10 @@
5050
}
5151
}
5252

53+
.show-week-numbers table {
54+
width: calc(var(--#{$prefix}calendar-table-cell-size) * 8); // stylelint-disable-line function-disallowed-list
55+
}
56+
5357
.calendars {
5458
display: flex;
5559
}
@@ -79,35 +83,28 @@
7983
display: block;
8084
width: var(--#{$prefix}calendar-nav-icon-width);
8185
height: var(--#{$prefix}calendar-nav-icon-height);
86+
background-color: var(--#{$prefix}calendar-nav-icon-color);
8287
@include transition(background-image .15s ease-in-out);
83-
}
8488

85-
.calendar-nav-icon-double-next {
86-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-double-next), var(--#{$prefix}calendar-nav-icon-double-prev));
8789
&:hover {
88-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-double-next-hover), var(--#{$prefix}calendar-nav-icon-double-prev-hover));
90+
background-color: var(--#{$prefix}calendar-nav-icon-hover-color);
8991
}
9092
}
9193

94+
.calendar-nav-icon-double-next {
95+
@include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center);
96+
}
97+
9298
.calendar-nav-icon-double-prev {
93-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-double-prev), var(--#{$prefix}calendar-nav-icon-double-next));
94-
&:hover {
95-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-double-prev-hover), var(--#{$prefix}calendar-nav-icon-double-next-hover));
96-
}
99+
@include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-double-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-double-next) no-repeat center);
97100
}
98101

99102
.calendar-nav-icon-next {
100-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-next), var(--#{$prefix}calendar-nav-icon-prev));
101-
&:hover {
102-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-next-hover), var(--#{$prefix}calendar-nav-icon-prev-hover));
103-
}
103+
@include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-next) no-repeat center, var(--#{$prefix}calendar-nav-icon-prev) no-repeat center);
104104
}
105105

106106
.calendar-nav-icon-prev {
107-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-prev), var(--#{$prefix}calendar-nav-icon-next));
108-
&:hover {
109-
@include ltr-rtl-value-only("background-image", var(--#{$prefix}calendar-nav-icon-prev-hover), var(--#{$prefix}calendar-nav-icon-next-hover));
110-
}
107+
@include ltr-rtl-value-only("mask", var(--#{$prefix}calendar-nav-icon-prev) no-repeat center, var(--#{$prefix}calendar-nav-icon-next) no-repeat center);
111108
}
112109

113110
.calendar-header-cell-inner {
@@ -156,6 +153,7 @@
156153

157154
&.range-hover .calendar-cell-inner {
158155
position: relative;
156+
159157
&::before {
160158
position: absolute;
161159
width: 100%;
@@ -167,7 +165,7 @@
167165
}
168166
}
169167

170-
&.selected:not(th):not(.next):not(.previous) .calendar-cell-inner {
168+
&.selected:not(th, .next, .previous) .calendar-cell-inner {
171169
color: var(--#{$prefix}calendar-cell-selected-color);
172170
background-color: var(--#{$prefix}calendar-cell-selected-bg);
173171
}
@@ -180,49 +178,46 @@
180178
.calendar-cell {
181179
padding: 1px 0;
182180

183-
.calendars:not(.select-week) &:not(.disabled):not(.next):not(.previous):hover .calendar-cell-inner,
184-
.calendars:not(.select-week) &.clickable:hover .calendar-cell-inner {
185-
color: var(--#{$prefix}calendar-cell-hover-color);
186-
cursor: pointer;
187-
background-color: var(--#{$prefix}calendar-cell-hover-bg);
188-
@include border-radius($border-radius);
181+
.calendars:not(.select-week) &:not(.disabled, .next, .previous):hover,
182+
.calendars:not(.select-week) &.clickable:hover {
183+
.calendar-cell-inner {
184+
color: var(--#{$prefix}calendar-cell-hover-color);
185+
cursor: pointer;
186+
background-color: var(--#{$prefix}calendar-cell-hover-bg);
187+
@include border-radius($border-radius);
188+
}
189189
}
190190

191-
// stylelint-disable-next-line selector-max-class
192-
.calendars:not(.select-week) &.previous + .current .calendar-cell-inner,
193-
&.current:not(.range) + .selected .calendar-cell-inner,
194-
&:not(.range) + .selected .calendar-cell-inner,
195-
&:first-of-type .calendar-cell-inner {
191+
.calendars:not(.select-week) &.range:not(.range ~ *) .calendar-cell-inner::after {
196192
@include border-start-radius($border-radius);
197-
198-
// stylelint-disable-next-line selector-max-class
199-
&::after {
200-
@include border-start-radius($border-radius);
201-
}
202193
}
203194

204-
.calendars:not(.select-week) &:has(+ .next) .calendar-cell-inner,
205-
&.range + .selected .calendar-cell-inner,
206-
&:last-of-type .calendar-cell-inner {
195+
.calendars:not(.select-week) &.range:not(:has(~ .range)) .calendar-cell-inner::after {
207196
@include border-end-radius($border-radius);
208-
209-
&::after {
210-
@include border-end-radius($border-radius);
211-
}
212197
}
213198

214-
&:not(.range-hover) + .range-hover .calendar-cell-inner,
215-
&.range-hover:first-of-type .calendar-cell-inner {
216-
&::before {
199+
&.range-hover:first-of-type,
200+
&:not(.range-hover) + &.range-hover {
201+
.calendar-cell-inner::before {
217202
border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
218203
@include border-start-radius($border-radius);
219204
}
220205
}
221206

222-
&.range-hover:has(+ .next) .calendar-cell-inner,
223-
&.range-hover:last-of-type .calendar-cell-inner,
224-
&.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner {
225-
&::before {
207+
&.range-hover:not(:has(~ .range-hover)) .calendar-cell-inner::before {
208+
border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
209+
@include border-end-radius($border-radius);
210+
}
211+
212+
@-moz-document url-prefix() {
213+
.calendars:not(.select-week) &:nth-last-child(1 of .range),
214+
.calendars:not(.select-week) &:nth-last-child(1 of .available) {
215+
.calendar-cell-inner::after {
216+
@include border-end-radius($border-radius);
217+
}
218+
}
219+
220+
&:nth-last-child(1 of .range-hover) .calendar-cell-inner::before {
226221
border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
227222
@include border-end-radius($border-radius);
228223
}
@@ -243,50 +238,46 @@
243238
}
244239

245240
.calendar-row {
246-
// stylelint-disable-next-line selector-max-class
247-
.calendars.select-week &:not(.disabled):hover .calendar-cell-inner,
248-
.calendars.select-week &.clickable:hover .calendar-cell-inner {
249-
color: var(--#{$prefix}calendar-cell-hover-color);
250-
cursor: pointer;
251-
background-color: var(--#{$prefix}calendar-cell-hover-bg);
241+
.calendars.select-week &:not(.disabled):hover,
242+
.calendars.select-week &.clickable:hover {
243+
.calendar-cell-inner {
244+
color: var(--#{$prefix}calendar-cell-hover-color);
245+
cursor: pointer;
246+
background-color: var(--#{$prefix}calendar-cell-hover-bg);
247+
}
252248
}
253249

254250
.selected:not(th) .calendar-cell-inner {
255251
@include border-radius($border-radius);
256252
}
257253

258-
&.range-hover .calendar-cell:first-of-type .calendar-cell-inner {
259-
&::before {
260-
border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
254+
.calendar-cell:first-of-type .calendar-cell-inner {
255+
@include border-start-radius($border-radius);
256+
&::before,
257+
&::after {
261258
@include border-start-radius($border-radius);
262259
}
263260
}
264261

265-
&.range-hover .calendar-cell:last-of-type .calendar-cell-inner {
266-
&::before {
267-
border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
262+
.calendar-cell:last-of-type .calendar-cell-inner {
263+
@include border-end-radius($border-radius);
264+
&::before,
265+
&::after {
268266
@include border-end-radius($border-radius);
269267
}
270268
}
271269

270+
&.range-hover .calendar-cell:first-of-type .calendar-cell-inner::before {
271+
border-left: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
272+
}
273+
274+
&.range-hover .calendar-cell:last-of-type .calendar-cell-inner::before {
275+
border-right: 1px dashed var(--#{$prefix}calendar-cell-selected-bg);
276+
}
277+
272278
&:focus-visible {
273279
outline: 0;
274280
box-shadow: var(--#{$prefix}calendar-cell-focus-box-shadow);
275281
@include border-radius($border-radius);
276282
}
277283
}
278-
279-
@if $enable-dark-mode {
280-
@include color-mode(dark) {
281-
.calendar {
282-
--#{$prefix}calendar-nav-icon-double-next: #{escape-svg($calendar-nav-icon-double-next-dark)};
283-
--#{$prefix}calendar-nav-icon-double-next-hover: #{escape-svg($calendar-nav-icon-double-next-hover-dark)};
284-
--#{$prefix}calendar-nav-icon-double-prev: #{escape-svg($calendar-nav-icon-double-prev-dark)};
285-
--#{$prefix}calendar-nav-icon-double-prev-hover: #{escape-svg($calendar-nav-icon-double-prev-hover-dark)};
286-
--#{$prefix}calendar-nav-icon-next: #{escape-svg($calendar-nav-icon-next-dark)};
287-
--#{$prefix}calendar-nav-icon-next-hover: #{escape-svg($calendar-nav-icon-next-hover-dark)};
288-
--#{$prefix}calendar-nav-icon-prev: #{escape-svg($calendar-nav-icon-prev-dark)};
289-
--#{$prefix}calendar-nav-icon-prev-hover: #{escape-svg($calendar-nav-icon-prev-hover-dark)};
290-
}
291-
}
292-
}

‎scss/_variables-dark.scss

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -213,30 +213,6 @@ $button-outline-ghost-variants-dark: (
213213
"info": btn-outline-color-map($info-dark)
214214
) !default;
215215

216-
//
217-
// Calendar
218-
//
219-
220-
$calendar-nav-icon-double-next-color-dark: $body-tertiary-color-dark !default;
221-
$calendar-nav-icon-double-next-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-color-dark}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-color-dark}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
222-
$calendar-nav-icon-double-next-hover-color-dark: $body-color-dark !default;
223-
$calendar-nav-icon-double-next-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-next-hover-color-dark}' points='95.314 447.313 72.686 424.687 245.373 252 72.686 79.313 95.314 56.687 290.627 252 95.314 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-next-hover-color-dark}' points='255.314 447.313 232.686 424.687 405.373 252 232.686 79.313 255.314 56.687 450.627 252 255.314 447.313'></polygon></svg>") !default;
224-
225-
$calendar-nav-icon-double-prev-color-dark: $body-tertiary-color-dark !default;
226-
$calendar-nav-icon-double-prev-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-color-dark}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-color-dark}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
227-
$calendar-nav-icon-double-prev-hover-color-dark: $body-color-dark !default;
228-
$calendar-nav-icon-double-prev-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-double-prev-hover-color-dark}' points='416.686 447.313 221.373 252 416.686 56.687 439.314 79.313 266.627 252 439.314 424.687 416.686 447.313'></polygon><polygon fill='#{$calendar-nav-icon-double-prev-hover-color-dark}' points='256.686 447.313 61.373 252 256.686 56.687 279.314 79.313 106.627 252 279.314 424.687 256.686 447.313'></polygon></svg>") !default;
229-
230-
$calendar-nav-icon-next-color-dark: $body-tertiary-color-dark !default;
231-
$calendar-nav-icon-next-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-color-dark}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
232-
$calendar-nav-icon-next-hover-color-dark: $body-color-dark !default;
233-
$calendar-nav-icon-next-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-next-hover-color-dark}' points='179.313 451.313 156.687 428.687 329.372 256 156.687 83.313 179.313 60.687 374.627 256 179.313 451.313'></polygon></svg>") !default;
234-
235-
$calendar-nav-icon-prev-color-dark: $body-tertiary-color-dark !default;
236-
$calendar-nav-icon-prev-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-color-dark}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
237-
$calendar-nav-icon-prev-hover-color-dark: $body-color-dark !default;
238-
$calendar-nav-icon-prev-hover-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$calendar-nav-icon-prev-hover-color-dark}' points='324.687 451.313 129.373 256 324.687 60.687 347.313 83.313 174.628 256 347.313 428.687 324.687 451.313'></polygon></svg>") !default;
239-
240216
//
241217
// Date Picker
242218
//

0 commit comments

Comments
 (0)