1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
$minicalendar-day-color: $black !default;
$minicalendar-day-color-on-dark-background: $white !default;
$minicalendar-fontsize: 1.2rem !default;
$minicalendar-cell-size: 2em !default;
$minicalendar-bg-color-range-selection: #51555F !default;
.minicalendar {
font-size: $minicalendar-fontsize;
}
.minicalendar-grid--displayWeekNumber {
display: grid;
grid-template-columns: 30px auto;
grid-template-rows: auto;
}
.minicalendar-weekdays,
.minicalendar-weeknumbers,
.minicalendar-day--inactive-month {
opacity: .4;
}
.minicalendar-weekdays {
display: grid;
grid-template-columns: repeat( var(--minicalendar-weekdays-numberOfDaysInWeek, 7), 1fr);
grid-template-rows: 1fr;
}
.minicalendar-days {
display: grid;
grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr);
grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr);
grid-gap: 1px 0px;
}
.minicalendar-day {
color: var(--color-main-area, $minicalendar-day-color);
}
.minicalendar-days {
user-select: none;
}
.minicalendar-weekdays {
border-bottom: 1px dotted $pm-global-border;
}
.minicalendar-weeknumbers > span {
&:first-of-type {
border-bottom: 1px dotted $pm-global-border;
}
&:not(:first-of-type) {
min-height: $minicalendar-cell-size;
}
}
.minicalendar-weeknumbers-heading {
display: inline-block;
transform: scale(.7);
}
.minicalendar-day {
position: relative;
min-width: #{$minicalendar-cell-size + 0.35em};
min-height: #{$minicalendar-cell-size + 0.35em};
border-radius: 50%;
&:focus,
&:hover {
background: rgba($minicalendar-bg-color-range-selection, .25);
}
}
.minicalendar-grid--displayWeekNumber .minicalendar-day {
min-width: $minicalendar-cell-size;
min-height: $minicalendar-cell-size;
}
.minicalendar-day[aria-current="date"]::before {
content: attr(data-current-day);
speak: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-weight: bold;
line-height: 2.3; // check modifier below when no week displayed
color: $white;
background: $calendar-today-color;
border-radius: 50%;
}
.minicalendar-day[aria-current="date"][aria-pressed=true]::before {
background: $calendar-selected-day-color;
}
// fix in case of range selection in responsive view
$mini-calendar-currentDay-size: 2.5em !default;
.minicalendar-day--range.minicalendar-day[aria-current="date"]::before {
left: calc(50% - #{$mini-calendar-currentDay-size/2});
max-width: $mini-calendar-currentDay-size;
}
.minicalendar-grid--displayWeekNumber .minicalendar-day {
&[aria-current="date"]::before {
line-height: 2;
}
}
.minicalendar--onDarkBackground {
.minicalendar-day {
color: $minicalendar-day-color-on-dark-background;
&:focus,
&:hover {
background: rgba($minicalendar-bg-color-range-selection, .8);
}
}
}
.minicalendar-day[aria-pressed=true] {
color: $white;
background: $calendar-selected-day-color;
border-radius: 50%;
}
$minicalendar-day-marker-size: 3px !default;
.minicalendar-day--marker {
position: absolute;
bottom: 1px;
left: calc(50% - #{$minicalendar-day-marker-size/2});
height: $minicalendar-day-marker-size;
width: $minicalendar-day-marker-size;
background-color: $pm-primary;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
.minicalendar-day[aria-pressed=true],
.minicalendar-day[aria-pressed=date] {
.minicalendar-day--marker {
background-color: $white;
}
}
.minicalendar-day--range {
width: 100%;
}
.minicalendar-day--range-bound {
background: $pm-primary;
}
.minicalendar-day--range[aria-pressed=true],
.minicalendar-day--range[aria-pressed=true]:hover,
.minicalendar-day--range[aria-pressed=true]:focus {
background: $minicalendar-bg-color-range-selection;
border-radius: 0;
}
// ranges
.minicalendar {
.minicalendar-day--range-bound-begin,
.minicalendar-day--range-bound-begin:hover,
.minicalendar-day--range-bound-begin:focus {
border-top-left-radius: 40%;
border-bottom-left-radius: 40%;
}
.minicalendar-day--range-bound-end,
.minicalendar-day--range-bound-end:hover,
.minicalendar-day--range-bound-end:focus {
border-top-right-radius: 40%;
border-bottom-right-radius: 40%;
}
.minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end {
border-radius: 50%;
}
}
|
