Skip to content

Commit 048a570

Browse files
ManukMinasyanManukMinasyan
committed
Added dark theme
1 parent 882c1d4 commit 048a570

File tree

6 files changed

+209
-18
lines changed

6 files changed

+209
-18
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ ___
154154
| monthNames | Array | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] | ["Jan.", "Feb.", "Mar", "Apr.", "May", "Jun.", "Jul.", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."] | Month names |
155155
| transition | Boolean | true | false | Calendar animations |
156156
| hiddenElements | Array | [] | ['dayNames', 'navigationArrows', 'leftAndRightDays', 'month'] | Hide calendar elements |
157+
| isDark | Boolean | false | true | Dark theme |
157158
___
158159
159160
### Events

‎src/Demo.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,22 @@
33
<FunctionalCalendar class="demo-calendar"
44
ref="Calendar"
55
:is-date-range="true"
6+
:is-dark="true"
67
:date-format="'dd/mm/yyyy'"
78
:is-multiple="true"
89
:calendars-count="1"
910
:with-time-picker="false"
1011
:change-month-function="true"
12+
:change-year-function="true"
1113
:disabled-dates="['10/10/2019']"
1214
v-slot:default="props"
13-
:is-modal="true"
1415
:is-auto-closeable="true"
16+
:is-modal="true"
1517
>
18+
<span style="text-align: center">
1619
{{ props.day.day }}
17-
<span :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>
20+
<span :class="{'green-point': props.day.day === 5, 'orange-point': props.day.day === 9, 'green-line': props.day.day === 11}"></span>
21+
</span>
1822
</FunctionalCalendar>
1923
<!--<functional-calendar class="demo-calendar"-->
2024
<!--:with-time-picker='true'-->

‎src/assets/scss/calendar.scss

Lines changed: 181 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import './variables.scss';
22

3+
34
html, body {
45
margin: 0;
56
padding: 0;
@@ -14,7 +15,7 @@ input.vfc-single-input, .vfc-multiple-input input {
1415
padding: 7px;
1516
width: 120px;
1617
color: #aaa;
17-
border: 1px solid #eee;
18+
border: 1px solid #eeeeee;
1819
text-align: center;
1920
outline: none;
2021
}
@@ -31,6 +32,19 @@ input.vfc-single-input {
3132
border-radius: 0 10px 10px 0;
3233
}
3334

35+
.vfc-dark {
36+
&.vfc-multiple-input {
37+
input {
38+
border-color: $astronaut;
39+
background-color: $mirage
40+
}
41+
}
42+
.vfc-single-input {
43+
border-color: $astronaut;
44+
background-color: $mirage
45+
}
46+
}
47+
3448
.vfc-main-container {
3549
position: relative;
3650
border-radius: .28571429rem;
@@ -312,8 +326,9 @@ input.vfc-single-input {
312326
.vfc-arrow-left {
313327
width: 12px;
314328
height: 12px;
315-
border-top: 2px solid #0a0c19;
316-
border-left: 2px solid #0a0c19;
329+
border-top: 2px solid;
330+
border-left: 2px solid;
331+
border-color: $ebony;
317332
transform: rotate(-45deg);
318333
}
319334

@@ -331,8 +346,9 @@ input.vfc-single-input {
331346
.vfc-arrow-right {
332347
width: 12px;
333348
height: 12px;
334-
border-top: 2px solid #0a0c19;
335-
border-right: 2px solid #0a0c19;
349+
border-top: 2px solid;
350+
border-right: 2px solid;
351+
border-color: $ebony;
336352
transform: rotate(45deg);
337353
}
338354
}
@@ -396,7 +412,7 @@ input.vfc-single-input {
396412
span {
397413
width: 100%;
398414
margin-right: 5px;
399-
color: #333;
415+
color: $mineShaft;
400416
text-align: center;
401417

402418
&:last-child {
@@ -593,4 +609,162 @@ input.vfc-single-input {
593609
}
594610
}
595611
}
596-
}
612+
613+
&.vfc-dark {
614+
background-color: $mirage;
615+
616+
.vfc-top-date {
617+
color: $white
618+
}
619+
620+
.vfc-navigation-buttons {
621+
div {
622+
.vfc-arrow-right, .vfc-arrow-left {
623+
border-color: $white
624+
}
625+
626+
.vfc-arrow-left:active,
627+
.vfc-arrow-right:active {
628+
border-color: $lightgrey;
629+
}
630+
}
631+
}
632+
633+
.vfc-calendars {
634+
.vfc-calendar {
635+
div {
636+
&.vfc-content {
637+
h2 {
638+
&.vfc-top-date {
639+
&.vfc-underline {
640+
text-decoration: underline $pictionBlue;
641+
}
642+
}
643+
}
644+
645+
.vfc-dayNames {
646+
span {
647+
color: $gainsboro;
648+
}
649+
}
650+
651+
.vfc-week {
652+
div {
653+
&.vfc-day {
654+
655+
.vfc-base-start, .vfc-base-end {
656+
background-color: $astronaut;
657+
}
658+
659+
span.vfc-span-day {
660+
color: $white;
661+
662+
&.vfc-today {
663+
background-color: $keppel;
664+
color: $white;
665+
}
666+
667+
&.vfc-marked {
668+
background-color: $pictionBlue;
669+
670+
&.vfc-borderd, &.vfc-start-marked, &.vfc-end-marked {
671+
color: $white;
672+
}
673+
674+
&:before {
675+
background-color: $astronaut;
676+
}
677+
678+
&:after {
679+
color: $black;
680+
}
681+
682+
&.vfc-hide {
683+
color: $gainsboro;
684+
}
685+
}
686+
687+
&.vfc-hide {
688+
color: $tundora;
689+
}
690+
691+
&.vfc-disabled {
692+
color: rgba(133, 133, 133, 0.2);
693+
}
694+
695+
&:after {
696+
color: $black;
697+
}
698+
699+
&.vfc-hover:hover {
700+
background-color: rgba(76, 76, 76, 0.3);
701+
}
702+
}
703+
}
704+
}
705+
}
706+
}
707+
}
708+
}
709+
}
710+
711+
.vfc-months-container {
712+
.vfc-navigation-buttons {
713+
.vfc-top-date {
714+
&.vfc-underline {
715+
text-decoration: underline dotted #66b3cc;
716+
}
717+
}
718+
}
719+
720+
.vfc-months {
721+
div.vfc-item {
722+
color: $white;
723+
border-top: 1px solid #d4d4d4;
724+
725+
&:hover {
726+
background-color: rgba(113, 113, 113, 0.3);
727+
}
728+
729+
&.vfc-selected {
730+
background-color: $pictionBlue;
731+
color: #fff;
732+
}
733+
}
734+
}
735+
}
736+
737+
.vfc-time-picker-container {
738+
.vfc-time-picker__list {
739+
740+
.vfc-time-picker__item {
741+
color: $white;
742+
}
743+
744+
.vfc-time-picker__item--selected {
745+
color: $pictionBlue;
746+
}
747+
748+
&::-webkit-scrollbar-track {
749+
background: $astronaut;
750+
}
751+
752+
&::-webkit-scrollbar-thumb {
753+
background: $pictionBlue;
754+
}
755+
}
756+
757+
758+
.vfc-close:before, .vfc-close:after {
759+
background-color: $white;
760+
}
761+
762+
.vfc-modal-time-mechanic {
763+
.vfc-modal-time-line {
764+
background-color: $pictionBlue;
765+
color: $white;
766+
}
767+
}
768+
}
769+
}
770+
}

‎src/assets/scss/variables.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
$black: #000000 !default;
2+
$mirage: #1A202C !default;
3+
$ebony: #0A0C19 !default;
4+
$mineShaft: #333333 !default;
5+
$tundora: #464646 !default;
26
$white: #FFFFFF !default;
37
$lightgrey: #d9d9d9 !default;
4-
$lightgreyHover: #dadada !default;;
8+
$lightgreyHover: #dadada !default;
59
$powderblue: #B0E0E6 !default;
610
$lightskyblue: #8fd8ec !default;
711
$royalblue: #66b3cc !default;
812
$steelblue: #4682B4 !default;
13+
$pictionBlue: #4299e1 !default;
14+
$astronaut: #28456C !default;
15+
$keppel: #38B2AC !default;
916
$gainsboro: #bfbfbf !default;
10-
$lightred: #ff8498 !default;
17+
$lightred: #ff8498 !default;

‎src/components/FunctionalCalendar.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div :class="{'vfc-styles-conditional-class': fConfigs.applyStylesheet }">
3-
<div class="vfc-multiple-input" v-if="fConfigs.isModal && fConfigs.isDateRange">
2+
<div :class="{'vfc-styles-conditional-class': fConfigs.applyStylesheet}">
3+
<div class="vfc-multiple-input" :class="{'vfc-dark': fConfigs.isDark}" v-if="fConfigs.isModal && fConfigs.isDateRange">
44
<input type="text" title="Start Date"
55
v-model="input.dateRange.start.date"
66
:placeholder="fConfigs.placeholder"
@@ -14,7 +14,7 @@
1414
:maxlength="fConfigs.dateFormat.length"
1515
@click="showCalendar = !showCalendar">
1616
</div>
17-
<div v-else-if="fConfigs.isModal && fConfigs.isDatePicker">
17+
<div :class="{'vfc-dark': fConfigs.isDark}" v-else-if="fConfigs.isModal && fConfigs.isDatePicker">
1818
<input class="vfc-single-input" type="text" title="Date"
1919
v-model="input.selectedDate"
2020
:placeholder="fConfigs.placeholder"
@@ -23,8 +23,9 @@
2323
@click="showCalendar = !showCalendar">
2424
</div>
2525

26-
<div class="vfc-main-container" v-show="showCalendar" ref="mainContainer"
27-
:class="{'vfc-modal': fConfigs.isModal && (fConfigs.isDatePicker || fConfigs.isDateRange)}">
26+
<div class="vfc-main-container" v-show="showCalendar"
27+
ref="mainContainer"
28+
:class="{'vfc-modal': fConfigs.isModal && (fConfigs.isDatePicker || fConfigs.isDateRange), 'vfc-dark': fConfigs.isDark}">
2829
<template v-if="showMonthPicker">
2930
<div class="vfc-months-container">
3031
<div class="vfc-navigation-buttons" v-if="true">
@@ -647,7 +648,6 @@
647648
) {
648649
this.listCalendars[e].weeks[f].days[i].isMarked = true;
649650
}
650-
651651
}
652652
653653
}
@@ -928,4 +928,4 @@
928928
.vfc-styles-conditional-class {
929929
@import "../assets/scss/calendar.scss";
930930
}
931-
</style>
931+
</style>

‎src/mixins/propsAndData.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ export const propsAndData = {
103103
type: Boolean,
104104
default: false,
105105
},
106+
isDark: {
107+
type: Boolean,
108+
default: false
109+
}
106110
},
107111
data() {
108112
return {
@@ -198,6 +202,7 @@ export const propsAndData = {
198202
transition: true,
199203
hiddenElements: [],
200204
isAutoCloseable: false,
205+
isDark: false
201206
}
202207
}
203208
}

0 commit comments

Comments
 (0)