Skip to content

Commit 5a3a7a7

Browse files
mskocikmskocik
committed
unify css variables
1 parent 1de17d8 commit 5a3a7a7

3 files changed

Lines changed: 39 additions & 49 deletions

File tree

‎src/lib/components/Calendar.svelte‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -412,12 +412,13 @@
412412
<style>
413413
td,th {
414414
padding: 0;
415+
border-width: 0;
415416
}
416417
.sdt-cal-td {
417418
padding: 0;
418419
font-size: 90%;
419420
text-align: center;
420-
background-color: var(--sdt-bg-main);;
421+
background-color: var(--sdt-bg-main, #fff);
421422
}
422423
.sdt-cal-th {
423424
text-align: center;
@@ -462,7 +463,7 @@
462463
cursor: pointer;
463464
padding: 0.3rem;
464465
box-sizing: border-box;
465-
color: var(--sdt-color);
466+
color: var(--sdt-color, initial);
466467
}
467468
.sdt-btn-day {
468469
max-height: 32px;
@@ -471,6 +472,7 @@
471472
cursor: not-allowed;
472473
opacity: 0.5;
473474
color: var(--sdt-disabled-date, #b22222);
475+
background-color: var(--sdt-disabled-date-bg, var(--sdt-bg-main, #fff));
474476
}
475477
.std-btn-header {
476478
width: auto;
@@ -486,14 +488,14 @@
486488
padding-right: 0.25em;
487489
}
488490
.std-btn:hover {
489-
background-color: var(--sdt-btn-bg-hover);
491+
background-color: var(--sdt-btn-bg-hover, #eee);
490492
}
491493
.is-selected.in-range .std-btn {
492494
border-radius: 4px 0 0 4px
493495
}
494496
.in-range .std-btn,
495497
.in-range-hover:not(.is-selected) .std-btn {
496-
background-color: color-mix(in srgb, transparent 75%, var(--sdt-primary));
498+
background-color: color-mix(in srgb, transparent 75%, var(--sdt-primary, #286090));
497499
border-radius: 0;
498500
}
499501
/* range selection: start */
@@ -506,24 +508,26 @@
506508
border-bottom-left-radius: 0;
507509
}
508510
.in-range:not(.is-selected) .std-btn:hover {
509-
background-color: color-mix(in srgb, var(--sdt-btn-bg-hover) 75%, var(--sdt-primary));
511+
background-color: color-mix(in srgb, var(--sdt-btn-bg-hover, #eee) 75%, var(--sdt-primary, #286090));
510512
}
511513
/* range selection: end */
512514
.in-range + .is-selected .std-btn,
513515
.is-selected + .is-selected .std-btn {
514516
border-top-left-radius: 0;
515517
border-bottom-left-radius: 0;
516-
border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-primary));
518+
}
519+
.is-selected + .is-selected .std-btn {
520+
border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-primary, #286090));
517521
margin-left: -1px;
518522
}
519523
.is-selected .std-btn,
520524
.is-selected.in-range .std-btn {
521-
background-color: var(--sdt-primary);
522-
color: var(--sdt-color-selected, var(--sdt-bg-main));
525+
background-color: var(--sdt-primary, #286090);
526+
color: var(--sdt-color-selected, var(--sdt-bg-main, #fff));
523527
opacity: 0.9;
524528
}
525529
.std-btn-header:hover {
526-
background-color: var(--sdt-btn-header-bg-hover);
530+
background-color: var(--sdt-btn-header-bg-hover, #dfdfdf);
527531
}
528532
.sdt-time-icon {
529533
display: inline-flex;
@@ -535,7 +539,7 @@
535539
stroke: initial !important;
536540
}
537541
.sdt-tbody-lg {
538-
background-color: var(--sdt-bg-main);
542+
background-color: var(--sdt-bg-main, #fff);
539543
}
540544
.sdt-tbody-lg .std-btn {
541545
height: 74px;
@@ -561,21 +565,21 @@
561565
content: '';
562566
margin-left: 4px;
563567
margin-top: 4px;
564-
border-left: 4px solid var(--sdt-shadow);
565-
border-top: 4px solid var(--sdt-shadow);
568+
border-left: 4px solid var(--sdt-today-indicator, #ccc);
569+
border-top: 4px solid var(--sdt-today-indicator, #ccc);
566570
border-bottom: 4px solid transparent;
567571
border-right: 4px solid transparent;
568572
border-radius: 2px;
569573
height: 4px;
570574
z-index: 2;
571575
}
572576
.sdt-svg {
573-
fill: var(--sdt-color);
577+
fill: var(--sdt-color, initial);
574578
}
575579
.sdt-today:hover:before,
576580
.in-range.sdt-today:before {
577-
border-left-color: var(--sdt-primary);
578-
border-top-color: var(--sdt-primary);
581+
border-left-color: var(--sdt-primary, #286090);
582+
border-top-color: var(--sdt-primary, #286090);
579583
}
580584
.is-selected.sdt-today:before
581585
{

‎src/lib/components/SveltyPicker.svelte‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -618,31 +618,17 @@
618618

619619

620620
<style>
621-
.sdt-calendar-colors {
622-
--sdt-primary: #286090;
623-
--sdt-color: #000;
624-
--sdt-bg-main: #fff;
625-
--sdt-bg-today: var(--sdt-primary);
626-
--sdt-bg-clear: #dc3545;
627-
--sdt-today-bg: #1e486d;
628-
--sdt-clear-color: #dc3545;
629-
--sdt-btn-bg-hover: #eee;
630-
--sdt-btn-header-bg-hover: #dfdfdf;
631-
--sdt-clock-bg: #eeeded;
632-
--sdt-shadow: #ccc;
633-
--sdt-disabled-date: #b22222;
634-
}
635621
.std-component-wrap {
636622
position: relative;
637623
display: inline;
638624
}
639625
.std-calendar-wrap {
640626
width: 280px;
641-
background-color: var(--sdt-bg-main);
642-
box-shadow: 0 1px 6px var(--sdt-shadow);
627+
background-color: var(--sdt-bg-main, #fff);
628+
box-shadow: var(--sdt-wrap-shadow, 0 1px 6px var(--sdt-shadow-color, #ccc));
643629
border-radius: 4px;
644630
padding: 0.5em;
645-
color: var(--sdt-color);
631+
color: var(--sdt-color, initial);
646632
}
647633
.std-calendar-wrap.is-range-wrap {
648634
width: 560px;
@@ -662,7 +648,7 @@
662648
}
663649
.std-calendar-wrap.is-popup {
664650
position: absolute;
665-
box-shadow: 0 1px 6px var(--sdt-shadow);
651+
box-shadow: 0 1px 6px var(--sdt-shadow-color, #ccc);
666652
z-index: 100;
667653
}
668654
.sdt-btn-row {
@@ -678,8 +664,8 @@
678664
border-radius: 0.2em;
679665
}
680666
.sdt-today-btn {
681-
background-color: var(--sdt-primary);
682-
color: var(--sdt-today-color, var(--sdt-bg-main));
667+
background-color: var(--sdt-primary, #286090);
668+
color: var(--sdt-today-color, var(--sdt-bg-main, #fff));
683669
padding: 0.25em 0.5em;
684670
font-size: 0.875em;
685671
border-radius: 0.2em;
@@ -695,15 +681,15 @@
695681
background-color: var(--sdt-today-bg);
696682
}
697683
.sdt-clear-btn {
698-
border: 1px solid var(--sdt-clear-color);
699-
background-color: transparent;
700-
color: var(--sdt-clear-color);
684+
border: 1px solid var(--sdt-clear-color, #dc3545);
685+
background-color: var(--sdt-clear-bg, transparent);
686+
color: var(--sdt-clear-color, #dc3545);
701687
}
702688
.sdt-clear-btn:focus,
703689
.sdt-clear-btn:active:not([disabled]),
704690
.sdt-clear-btn:hover:not([disabled]) {
705-
background-color: var(--sdt-clear-color);
706-
color: var(--sdt-clear-hover-color, var(--sdt-bg-main));
691+
background-color: var(--sdt-clear-hover-bg, #dc3545);
692+
color: var(--sdt-clear-hover-color, var(--sdt-bg-main, #fff));
707693
}
708694
.sdt-widget + .sdt-widget:before {
709695
content: '';

‎src/lib/components/Time.svelte‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -398,7 +398,7 @@
398398
position: relative;
399399
width: var(--sdt-clock-size);
400400
height: var(--sdt-clock-size);
401-
background-color: var(--sdt-clock-bg);
401+
background-color: var(--sdt-clock-bg, #eeeded);
402402
border-radius: 50%;
403403
transition: background-color 0.3s;
404404
overflow: hidden;
@@ -411,19 +411,19 @@
411411
cursor: pointer;
412412
height: 38px;
413413
padding: 0 0.375em;
414-
color: var(--sdt-color);
414+
color: var(--sdt-color, initial);
415415
}
416416
.sdt-time-btn > svg {
417417
stroke: initial !important;
418418
}
419419
.sdt-svg {
420-
fill: var(--sdt-color);
420+
fill: var(--sdt-color, initial);
421421
}
422422
.sdt-time-btn:not(.is-active) {
423423
opacity: 0.5;
424424
}
425425
.sdt-time-btn:hover {
426-
background-color: var(--sdt-btn-header-bg-hover);
426+
background-color: var(--sdt-btn-header-bg-hover, #dfdfdf);
427427
}
428428
.sdt-back-btn {
429429
position: absolute;
@@ -449,7 +449,7 @@
449449
height: 6px;
450450
position: absolute;
451451
transform: translate(-50%, -50%);
452-
background-color: var(--sdt-primary);
452+
background-color: var(--sdt-primary, #286090);
453453
border-radius: 50%;
454454
}
455455
.sdt-hand-pointer {
@@ -458,7 +458,7 @@
458458
bottom: 50%;
459459
left: calc(50% - 1px);
460460
position: absolute;
461-
background-color: var(--sdt-primary);
461+
background-color: var(--sdt-primary, #286090);
462462
transform-origin: center bottom 0;
463463
transition: transform 0.3s ease, height 0.15s ease;
464464
}
@@ -469,7 +469,7 @@
469469
width: 4px;
470470
height: 4px;
471471
background-color: transparent;
472-
border: 14px solid var(--sdt-primary);
472+
border: 14px solid var(--sdt-primary, #286090);
473473
border-radius: 50%;
474474
box-sizing: content-box;
475475
}
@@ -502,8 +502,8 @@
502502
background-color: transparent;
503503
}
504504
100% {
505-
background-color: var(--sdt-primary);
506-
color: var(--sdt-color-selected, var(--sdt-bg-main));
505+
background-color: var(--sdt-primary, #286090);
506+
color: var(--sdt-color-selected, var(--sdt-bg-main, #fff));
507507
}
508508
}
509509
</style>

0 commit comments

Comments
 (0)