Skip to content

Commit 61fffdf

Browse files
desig9steindesig9stein
committed
fix(calendar): theme styles
1 parent 40d9dfc commit 61fffdf

File tree

2 files changed

+60
-63
lines changed

2 files changed

+60
-63
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -551,8 +551,8 @@ $border-size: rem(1px);
551551
}
552552

553553
&:focus {
554-
color: var-get($theme, 'date-special-range-hover-foreground');
555-
background: var-get($theme, 'date-special-range-hover-background');
554+
color: var-get($theme, 'date-special-range-focus-foreground');
555+
background: var-get($theme, 'date-special-range-focus-background');
556556
}
557557
}
558558

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

Lines changed: 58 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
160160
border-radius: var-get($theme, 'date-special-border-radius');
161161

162162
&::after {
163-
border-radius: var-get($theme, 'date-special-border-radius');
163+
border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-width);
164164
}
165165
}
166166

@@ -268,26 +268,38 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
268268
}
269269
}
270270

271+
&[part~='selected'][part~='special']:not([part~='current']) {
272+
border-color: var-get($theme, 'date-selected-border-color');
273+
274+
&:hover {
275+
border-color: var-get($theme, 'date-selected-hover-border-color');
276+
}
277+
278+
&:focus {
279+
border-color: var-get($theme, 'date-selected-focus-border-color');
280+
}
281+
}
282+
271283
&[part~='selected'][part~='current'][part~='range'] {
272284
color: var-get($theme, 'date-selected-current-range-foreground');
273285
background: var-get($theme, 'date-selected-current-range-background');
274-
border-color: var-get($theme, 'date-current-border-color');
286+
border-color: var-get($theme, 'date-selected-current-border-color');
275287

276288
&:hover {
277289
color: var-get($theme, 'date-selected-current-range-hover-foreground');
278290
background: var-get($theme, 'date-selected-current-range-hover-background');
279-
border-color: var-get($theme, 'date-current-hover-border-color');
291+
border-color: var-get($theme, 'date-selected-current-hover-border-color');
280292
}
281293

282294
&:focus {
283295
color: var-get($theme, 'date-selected-current-range-focus-foreground');
284296
background: var-get($theme, 'date-selected-current-range-focus-background');
285-
border-color: var-get($theme, 'date-current-focus-border-color');
297+
border-color: var-get($theme, 'date-selected-current-focus-border-color');
286298
}
287299
}
288300

289-
&[part~='selected'][part~='first'],
290-
&[part~='selected'][part~='last'] {
301+
&[part~='selected'][part~='first']:not([part~='special'], [part~='current']),
302+
&[part~='selected'][part~='last']:not([part~='special'], [part~='current']) {
291303
color: var-get($theme, 'date-selected-foreground');
292304
background: var-get($theme, 'date-selected-background');
293305

@@ -304,23 +316,23 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
304316

305317
&[part~='selected'][part~='current'][part~='range'][part~='first'],
306318
&[part~='selected'][part~='current'][part~='range'][part~='last'] {
307-
color: var-get($theme, 'date-selected-foreground');
308-
background: var-get($theme, 'date-selected-background');
319+
color: var-get($theme, 'date-selected-current-foreground');
320+
background: var-get($theme, 'date-selected-current-background');
309321
border-color: var-get($theme, 'date-selected-current-border-color');
310322

311323
&::after {
312324
border-color: transparent;
313325
}
314326

315327
&:hover {
316-
color: var-get($theme, 'date-selected-hover-foreground');
317-
background: var-get($theme, 'date-selected-hover-background');
328+
color: var-get($theme, 'date-selected-current-hover-foreground');
329+
background: var-get($theme, 'date-selected-current-hover-background');
318330
border-color: var-get($theme, 'date-selected-current-hover-border-color');
319331
}
320332

321333
&:focus {
322-
color: var-get($theme, 'date-selected-focus-foreground');
323-
background: var-get($theme, 'date-selected-focus-background');
334+
color: var-get($theme, 'date-selected-current-focus-foreground');
335+
background: var-get($theme, 'date-selected-current-focus-background');
324336
border-color: var-get($theme, 'date-selected-current-focus-border-color');
325337
}
326338
}
@@ -349,24 +361,32 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
349361
}
350362

351363
&[part~='selected'][part~='current'][part~='special'] {
364+
color: var-get($theme, 'date-selected-special-foreground');
365+
background: var-get($theme, 'date-selected-current-background');
352366
border-color: var-get($theme, 'date-selected-current-border-color');
353367

354368
&:hover {
369+
color: var-get($theme, 'date-selected-special-hover-foreground');
370+
background: var-get($theme, 'date-selected-current-hover-background');
355371
border-color: var-get($theme, 'date-selected-current-hover-border-color');
356372
}
357373

358374
&:focus {
375+
color: var-get($theme, 'date-selected-special-focus-foreground');
376+
background: var-get($theme, 'date-selected-current-focus-background');
359377
border-color: var-get($theme, 'date-selected-current-focus-border-color');
360378
}
361379
}
362380

363381
&[part~='selected'][part~='current'][part~='special'][part~='range'] {
364382
color: var-get($theme, 'date-special-range-foreground');
365-
border-color: var-get($theme, 'date-current-border-color');
383+
background: var-get($theme, 'date-selected-current-range-background');
384+
border-color: var-get($theme, 'date-selected-current-border-color');
366385

367386
&:hover {
368387
color: var-get($theme, 'date-special-range-hover-foreground');
369-
border-color: var-get($theme, 'date-current-hover-border-color');
388+
background: var-get($theme, 'date-selected-current-range-hover-background');
389+
border-color: var-get($theme, 'date-selected-current-hover-border-color');
370390

371391
/* stylelint-disable max-nesting-depth */
372392
&::after {
@@ -377,7 +397,8 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
377397

378398
&:focus {
379399
color: var-get($theme, 'date-special-range-focus-foreground');
380-
border-color: var-get($theme, 'date-current-focus-border-color');
400+
background: var-get($theme, 'date-selected-current-range-focus-background');
401+
border-color: var-get($theme, 'date-selected-current-focus-border-color');
381402

382403
/* stylelint-disable max-nesting-depth */
383404
&::after {
@@ -393,19 +414,19 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
393414

394415
&[part~='selected'][part~='current'][part~='special'][part~='range'][part~='first'],
395416
&[part~='selected'][part~='current'][part~='special'][part~='range'][part~='last'] {
396-
color: var-get($theme, 'date-selected-foreground');
397-
background: var-get($theme, 'date-selected-background');
417+
color: var-get($theme, 'date-selected-special-foreground');
418+
background: var-get($theme, 'date-selected-current-background');
398419
border-color: var-get($theme, 'date-selected-current-border-color');
399420

400421
&:hover {
401-
color: var-get($theme, 'date-selected-hover-foreground');
402-
background: var-get($theme, 'date-selected-hover-background');
422+
color: var-get($theme, 'date-selected-special-hover-foreground');
423+
background: var-get($theme, 'date-selected-current-hover-background');
403424
border-color: var-get($theme, 'date-selected-current-hover-border-color');
404425
}
405426

406427
&:focus {
407-
color: var-get($theme, 'date-selected-focus-foreground');
408-
background: var-get($theme, 'date-selected-focus-background');
428+
color: var-get($theme, 'date-selected-special-focus-foreground');
429+
background: var-get($theme, 'date-selected-current-focus-background');
409430
border-color: var-get($theme, 'date-selected-current-focus-border-color');
410431
}
411432
}
@@ -434,20 +455,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
434455
}
435456
}
436457

437-
&[part~='selected'][part~='current'][part~='special'][part~='first'],
438-
&[part~='selected'][part~='current'][part~='special'][part~='last'] {
439-
border-color: var-get($theme, 'date-selected-current-border-color');
440-
441-
&:hover {
442-
border-color: var-get($theme, 'date-selected-current-hover-border-color');
443-
444-
}
445-
446-
&:focus {
447-
border-color: var-get($theme, 'date-selected-current-focus-border-color');
448-
}
449-
}
450-
451458

452459
&[part~='selected'][part~='special']:not([part~='range']) {
453460
&::after {
@@ -511,7 +518,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
511518
box-sizing: border-box;
512519
}
513520

514-
&[part~='range']:not([part~='preview'], [part~='current']) {
521+
&[part~='range']:not([part~='preview'], [part~='current'], [part~='first'], [part~='last'], [part~='first'][part~='last']) {
515522
color: var-get($theme, 'date-special-range-foreground');
516523
background: var-get($theme, 'date-special-range-background');
517524
border-color: var-get($theme, 'date-special-range-border-color');
@@ -529,26 +536,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
529536
}
530537
}
531538

532-
&[part~='range'][part~='first']:not([part~='preview']),
533-
&[part~='range'][part~='last']:not([part~='preview']) {
534-
color: var-get($theme, 'date-selected-foreground');
535-
background: var-get($theme, 'date-selected-background');
536-
537-
&:hover {
538-
background: var-get($theme, 'date-selected-hover-background');
539-
}
540-
541-
&:focus {
542-
background: var-get($theme, 'date-selected-focus-background');
543-
}
544-
545-
}
546-
547-
&[part~='range'][part~='first']:not([part~='current']),
548-
&[part~='range'][part~='last']:not([part~='current']) {
549-
border-color: transparent;
550-
}
551-
552539
&[part~='first'][part~='selected'],
553540
&[part~='last'][part~='selected'],
554541
&[part~='selected']:not([part~='range']) {
@@ -577,7 +564,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
577564
}
578565
}
579566

580-
&[part~='current'][part~='special'][part~='first'][part~='last'],
567+
581568
&[part~='current'][part~='special'] {
582569
border-color: var-get($theme, 'date-current-border-color');
583570

@@ -595,6 +582,14 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
595582
}
596583
}
597584

585+
&[part~='current'][part~='special'][part~='first'][part~='last'],
586+
&[part~='current'][part~='special'] {
587+
&::after {
588+
width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
589+
height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
590+
}
591+
}
592+
598593
&[part~='special'][part~='current']:not([part~='selected']) {
599594
color: var-get($theme, 'date-special-foreground');
600595
background: var-get($theme, 'date-current-background');
@@ -625,14 +620,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
625620
}
626621
}
627622

628-
&[part~='special'][part~='range'][part~='preview'][part~='first']:not([part~='current']),
629-
&[part~='special'][part~='range'][part~='preview'][part~='last']:not([part~='current']) {
623+
&[part~='special'][part~='selected'][part~='range'][part~='preview'][part~='first']:not([part~='current']),
624+
&[part~='special'][part~='selected'][part~='range'][part~='preview'][part~='last']:not([part~='current']) {
625+
border-color: var-get($theme, 'date-selected-border-color');
626+
630627
&:hover {
631-
border-color: var-get($theme, 'date-special-hover-border-color')
628+
border-color: var-get($theme, 'date-selected-hover-border-color')
632629
}
633630

634631
&:focus {
635-
border-color: var-get($theme, 'date-special-hover-border-color')
632+
border-color: var-get($theme, 'date-selected-focus-border-color')
636633
}
637634
}
638635

0 commit comments

Comments
 (0)