Skip to content

Commit d7a54ef

Browse files
desig9steindesig9stein
committed
fix(calendar): refine bootstrap theme date styles
- Adjust border styles to use `border-block` for better alignment. - Add border radius updates for range, special, and current date combinations. - Improve hover, focus, range, and preview state styles for consistency and clarity. - Refactor selected and special date styles to enhance maintainability.
1 parent e39ae8e commit d7a54ef

File tree

1 file changed

+93
-50
lines changed

1 file changed

+93
-50
lines changed

‎src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss‎

Lines changed: 93 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,15 @@ $border-size: rem(1px);
7979
&[part~='range'],
8080
&[part~='range'][part~='preview'] {
8181
background: var-get($theme, 'date-selected-range-background');
82-
border-top-style: solid;
83-
border-bottom-style: solid;
84-
border-top-color: var-get($theme, 'date-range-preview-border-color');
85-
border-bottom-color: var-get($theme, 'date-range-preview-border-color');
82+
border-block-style: solid;
83+
}
84+
85+
&[part~='range'] {
86+
border-block-color: var-get($theme, 'date-range-border-color');
87+
}
88+
89+
&[part~='range'][part~='preview'] {
90+
border-block-color: var-get($theme, 'date-range-preview-border-color');
8691
}
8792

8893
&[part~='range'][part~='selected'][part~='first'],
@@ -91,7 +96,13 @@ $border-size: rem(1px);
9196
&[part~='range'][part~='preview'][part~='last'] {
9297
&::after {
9398
background: var-get($theme, 'date-selected-range-background');
94-
border-color: transparent;
99+
}
100+
}
101+
102+
&[part~='range'][part~='selected'][part~='first'],
103+
&[part~='range'][part~='selected'][part~='last'] {
104+
&::after {
105+
border-block-color: var-get($theme, 'date-range-border-color');
95106
}
96107
}
97108

@@ -117,15 +128,19 @@ $border-size: rem(1px);
117128

118129
&[part~='range'][part~='first'][part~='special'],
119130
&[part~='range'][part~='last'][part~='special'] {
131+
border-radius: var-get($theme, 'date-range-border-radius');
132+
120133
&::before {
121134
border-radius: var-get($theme, 'date-special-border-radius');
122135
}
123136
}
124137

125138
&[part~='range'][part~='first'][part~='current'],
126139
&[part~='range'][part~='last'][part~='current'] {
140+
border-radius: var-get($theme, 'date-range-border-radius');
141+
127142
&::before {
128-
border-radius: var-get($theme, 'date-current-border-radius');
143+
border-radius: var-get($theme, 'date-range-border-radius');
129144
}
130145
}
131146

@@ -134,26 +149,27 @@ $border-size: rem(1px);
134149
background: transparent;
135150
border-top-color: transparent;
136151
border-bottom-color: transparent;
152+
153+
&::after {
154+
border-block-color: var-get($theme, 'date-range-preview-border-color');
155+
}
137156
}
138157
}
139158

140159
[part~='date-inner'] {
141160
width: var-get($theme, 'size');
142161
height: var-get($theme, 'size');
143-
border: $border-size solid var-get($theme, 'date-border-color');
162+
border: $border-size solid transparent;
144163
border-radius: var-get($theme, 'date-border-radius');
145164

146165
&:hover {
147166
background: var-get($theme, 'date-hover-background');
148-
border-color: var-get($theme, 'date-hover-border-color');
149167
}
150168

151169
&:focus {
152170
background: var-get($theme, 'date-focus-background');
153-
border-color: var-get($theme, 'date-focus-border-color');
154171
}
155172

156-
157173
&[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last']) {
158174
color: var-get($theme, 'inactive-color');
159175

@@ -203,13 +219,17 @@ $border-size: rem(1px);
203219
}
204220

205221
&[part~='special'] {
206-
border-radius: var-get($theme, 'date-special-border-radius');
222+
border-radius: var-get($theme, 'date-border-radius');
207223

208224
&::after {
209225
border-radius: var-get($theme, 'date-special-border-radius');
210226
}
211227
}
212228

229+
&[part~='special'][part~='selected'] {
230+
border-radius: var-get($theme, 'date-border-radius');
231+
}
232+
213233
&[part~='current'] {
214234
border-radius: var-get($theme, 'date-current-border-radius');
215235
}
@@ -221,15 +241,28 @@ $border-size: rem(1px);
221241
border-radius: var-get($theme, 'date-special-border-radius');
222242
}
223243
}
244+
245+
&[part~='current'][part~='first'],
246+
&[part~='current'][part~='last'],
247+
&[part~='current'][part~='special'][part~='first'],
248+
&[part~='current'][part~='special'][part~='last'],
249+
&[part~='special'][part~='first'],
250+
&[part~='special'][part~='last'] {
251+
border-radius: var-get($theme, 'date-range-border-radius');
252+
}
224253
}
225254

226255
[part~='date-inner']:not([part~='inactive']) {
256+
border-color: var-get($theme, 'date-border-color');
257+
227258
&:hover {
228259
color: var-get($theme, 'date-hover-foreground');
260+
border-color: var-get($theme, 'date-hover-border-color');
229261
}
230262

231263
&:focus {
232264
color: var-get($theme, 'date-hover-foreground');
265+
border-color: var-get($theme, 'date-focus-border-color');
233266
}
234267

235268
&[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) {
@@ -304,19 +337,6 @@ $border-size: rem(1px);
304337
border-color: var-get($theme, 'date-current-focus-border-color');
305338
}
306339
}
307-
308-
&[part~='selected'][part~='first'],
309-
&[part~='selected'][part~='last'] {
310-
border-color: var-get($theme, 'date-selected-current-border-color');
311-
312-
&:hover {
313-
border-color: var-get($theme, 'date-selected-current-hover-border-color');
314-
}
315-
316-
&:focus {
317-
border-color: var-get($theme, 'date-selected-current-focus-border-color');
318-
}
319-
}
320340
}
321341

322342
&[part~='special'] {
@@ -356,6 +376,9 @@ $border-size: rem(1px);
356376
&[part~='selected'][part~='first'],
357377
&[part~='selected'][part~='last'],
358378
&[part~='selected'][part~='first'][part~='last'],
379+
&[part~='selected'][part~='first'][part~='range'],
380+
&[part~='selected'][part~='last'][part~='range'],
381+
&[part~='selected'][part~='first'][part~='last'][part~='range'],
359382
&[part~='preview'][part~='first'],
360383
&[part~='preview'][part~='last'] {
361384
color: var-get($theme, 'date-selected-foreground');
@@ -375,6 +398,19 @@ $border-size: rem(1px);
375398
}
376399
}
377400

401+
&[part~='current'][part~='selected'][part~='first'],
402+
&[part~='current'][part~='selected'][part~='last'] {
403+
border-color: var-get($theme, 'date-selected-current-border-color');
404+
405+
&:hover {
406+
border-color: var-get($theme, 'date-selected-current-hover-border-color');
407+
}
408+
409+
&:focus {
410+
border-color: var-get($theme, 'date-selected-current-focus-border-color');
411+
}
412+
}
413+
378414
&[part~='preview'][part~='first'][part~='current'],
379415
&[part~='preview'][part~='last'][part~='current'] {
380416
border-color: var-get($theme, 'date-selected-current-border-color');
@@ -408,45 +444,30 @@ $border-size: rem(1px);
408444
}
409445

410446
&[part~='selected'][part~='current'] {
411-
color: var-get($theme, 'date-selected-current-foreground');
412-
background: var-get($theme, 'date-selected-current-background');
413447
border-color: var-get($theme, 'date-selected-current-border-color');
414448

415449
&:hover {
416-
color: var-get($theme, 'date-selected-current-hover-foreground');
417-
background: var-get($theme, 'date-selected-current-hover-background');
418450
border-color: var-get($theme, 'date-selected-current-hover-border-color');
419451
}
420452

421453
&:focus {
422-
color: var-get($theme, 'date-selected-current-focus-foreground');
423-
background: var-get($theme, 'date-selected-current-focus-background');
424454
border-color: var-get($theme, 'date-selected-current-focus-border-color');
425455
}
426456
}
427457

428458
&[part~='selected'][part~='special'] {
429-
color: var-get($theme, 'date-selected-special-foreground');
430-
background: var-get($theme, 'date-selected-special-background');
431-
432459
&::after {
433460
border-color: var-get($theme, 'date-selected-special-border-color');
434461
}
435462

436463
&:hover {
437-
color: var-get($theme, 'date-selected-special-hover-foreground');
438-
background: var-get($theme, 'date-selected-special-hover-background');
439-
440464
/* stylelint-disable-next-line max-nesting-depth */
441465
&::after {
442466
border-color: var-get($theme, 'date-selected-special-hover-border-color');
443467
}
444468
}
445469

446470
&:focus {
447-
color: var-get($theme, 'date-selected-special-focus-foreground');
448-
background: var-get($theme, 'date-selected-special-focus-background');
449-
450471
/* stylelint-disable-next-line max-nesting-depth */
451472
&::after {
452473
border-color: var-get($theme, 'date-selected-special-focus-border-color');
@@ -455,30 +476,52 @@ $border-size: rem(1px);
455476
}
456477
}
457478

479+
&:not([part~='range'], [part~='first'][part~='last']) {
480+
&[part~='selected'][part~='current'] {
481+
color: var-get($theme, 'date-selected-current-foreground');
482+
background: var-get($theme, 'date-selected-current-background');
458483

459-
&[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) {
460-
color: var-get($theme, 'date-special-range-foreground');
461-
background: var-get($theme, 'date-special-range-background');
484+
&:hover {
485+
color: var-get($theme, 'date-selected-current-hover-foreground');
486+
background: var-get($theme, 'date-selected-current-hover-background');
487+
}
488+
489+
&:focus {
490+
color: var-get($theme, 'date-selected-current-focus-foreground');
491+
background: var-get($theme, 'date-selected-current-focus-background');
492+
}
493+
}
494+
495+
&[part~='selected'][part~='special'] {
496+
color: var-get($theme, 'date-selected-special-foreground');
497+
background: var-get($theme, 'date-selected-special-background');
498+
499+
&:hover {
500+
color: var-get($theme, 'date-selected-special-hover-foreground');
501+
background: var-get($theme, 'date-selected-special-hover-background');
502+
}
462503

504+
&:focus {
505+
color: var-get($theme, 'date-selected-special-focus-foreground');
506+
background: var-get($theme, 'date-selected-special-focus-background');
507+
}
508+
}
509+
}
510+
511+
&[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) {
463512
&::after {
464513
border-color: var-get($theme, 'date-special-range-border-color');
465514
}
466515

467516
&:hover {
468-
color: var-get($theme, 'date-special-range-hover-foreground');
469-
background: var-get($theme, 'date-special-range-hover-background');
470-
471517
&::after {
472-
border-color: var-get($theme, 'date-special-hover-border-color');
518+
border-color: var-get($theme, 'date-special-range-hover-border-color');
473519
}
474520
}
475521

476522
&:focus {
477-
color: var-get($theme, 'date-special-range-focus-foreground');
478-
background: var-get($theme, 'date-special-range-focus-background');
479-
480523
&::after {
481-
border-color: var-get($theme, 'date-special-focus-border-color');
524+
border-color: var-get($theme, 'date-special-range-focus-border-color');
482525
}
483526
}
484527
}

0 commit comments

Comments
 (0)