UNPKG

10.3 kBSCSSView Raw
1#{$calendar-prefix}-fullscreen {
2
3 #{$calendar-prefix} {
4 &-th {
5 text-align: right;
6 color: $calendar-fullscreen-table-head-color;
7 font-size: $calendar-fullscreen-table-head-font-size;
8 font-weight: $calendar-fullscreen-table-head-font-weight;
9 padding-right: $calendar-fullscreen-table-head-padding-r;
10 padding-bottom: $calendar-fullscreen-table-head-padding-b;
11 }
12
13 &-cell {
14 font-size: $calendar-fullscreen-table-cell-font-size;
15
16 &.#{$css-prefix}selected {
17 #{$calendar-prefix}-date,
18 #{$calendar-prefix}-month {
19 font-weight: $calendar-fullscreen-table-cell-select-font-weight;
20
21 @include calendar-cell-state (
22 $calendar-fullscreen-table-cell-select-background,
23 $calendar-fullscreen-table-cell-select-color,
24 $calendar-fullscreen-table-cell-select-border-color
25 );
26 }
27 }
28
29 &.#{$css-prefix}disabled {
30 #{$calendar-prefix}-date,
31 #{$calendar-prefix}-month {
32 cursor: not-allowed;
33 @include calendar-cell-state (
34 $calendar-fullscreen-table-cell-disabled-background,
35 $calendar-fullscreen-table-cell-disabled-color,
36 $calendar-fullscreen-table-cell-disabled-border-color
37 );
38 }
39 }
40 }
41
42 &-date,
43 &-month {
44 text-align: right;
45 white-space: nowrap;
46 overflow: hidden;
47 text-overflow: ellipsis;
48 margin: $calendar-fullscreen-table-cell-margin-tb $calendar-fullscreen-table-cell-margin-lr;
49 padding: $calendar-fullscreen-table-cell-padding-tb $calendar-fullscreen-table-cell-padding-lr;
50 min-height: $calendar-fullscreen-table-cell-min-height;
51 border-top: $calendar-fullscreen-table-cell-boder-top-width $line-solid;
52 transition: background $motion-duration-immediately $motion-linear;
53
54 @include calendar-cell-state (
55 $calendar-fullscreen-table-cell-normal-background,
56 $calendar-fullscreen-table-cell-normal-color,
57 $calendar-fullscreen-table-cell-normal-border-color
58 );
59
60 &:hover {
61 @include calendar-cell-state (
62 $calendar-fullscreen-table-cell-hover-background,
63 $calendar-fullscreen-table-cell-hover-color,
64 $calendar-fullscreen-table-cell-hover-border-color
65 );
66 }
67 }
68
69 &-cell-prev-month,
70 &-cell-next-month {
71 #{$calendar-prefix}-date {
72 @include calendar-cell-state (
73 $calendar-fullscreen-table-cell-other-background,
74 $calendar-fullscreen-table-cell-other-color,
75 $calendar-fullscreen-table-cell-other-border-color
76 );
77 }
78 }
79
80 &-cell-current {
81 #{$calendar-prefix}-date,
82 #{$calendar-prefix}-month {
83 font-weight: $calendar-fullscreen-table-cell-current-font-weight;
84
85 @include calendar-cell-state (
86 $calendar-fullscreen-table-cell-current-background,
87 $calendar-fullscreen-table-cell-current-color,
88 $calendar-fullscreen-table-cell-current-border-color
89 );
90 }
91 }
92 }
93}
94
95#{$calendar-prefix}-card,
96#{$calendar-prefix}-panel,
97#{$calendar-prefix}-range {
98
99 #{$calendar-prefix} {
100 &-th {
101 text-align: center;
102 color: $calendar-card-table-head-color;
103 font-size: $calendar-card-table-head-font-size;
104 font-weight: $calendar-card-table-head-font-weight;
105 }
106
107 &-cell {
108 text-align: center;
109 font-size: $calendar-card-table-cell-font-size;
110
111 &.#{$css-prefix}selected {
112 #{$calendar-prefix}-date,
113 #{$calendar-prefix}-month,
114 #{$calendar-prefix}-year {
115 animation: cellZoomIn .4s cubic-bezier(.23, 1, .32, 1);
116 font-weight: $calendar-card-table-cell-select-font-weight;
117
118 @include calendar-cell-state (
119 $calendar-card-table-cell-select-background,
120 $calendar-card-table-cell-select-color,
121 $calendar-card-table-cell-select-border-color
122 );
123 }
124 }
125
126 &.#{$css-prefix}disabled {
127 #{$calendar-prefix}-date,
128 #{$calendar-prefix}-month,
129 #{$calendar-prefix}-year {
130 cursor: not-allowed;
131
132 @include calendar-cell-state (
133 $calendar-card-table-cell-disabled-background,
134 $calendar-card-table-cell-disabled-color,
135 $calendar-card-table-cell-disabled-border-color
136 );
137 }
138 }
139
140 &.#{$css-prefix}inrange {
141 #{$calendar-prefix}-date {
142 @include calendar-cell-state (
143 $calendar-card-table-cell-inrange-background,
144 $calendar-card-table-cell-inrange-color,
145 $calendar-card-table-cell-inrange-border-color);
146 }
147 }
148 }
149
150 &-date,
151 &-month,
152 &-year {
153 text-align: center;
154 border: $line-1 $line-solid;
155
156 &:hover {
157 cursor: pointer;
158 }
159
160 @include calendar-cell-state (
161 $calendar-card-table-cell-normal-background,
162 $calendar-card-table-cell-normal-color,
163 $calendar-card-table-cell-normal-border-color
164 );
165
166 &:hover {
167 @include calendar-cell-state (
168 $calendar-card-table-cell-hover-background,
169 $calendar-card-table-cell-hover-color,
170 $calendar-card-table-cell-hover-border-color
171 );
172 }
173 }
174
175 &-date {
176 @include calendar-card-cell-size(
177 $calendar-card-table-cell-date-width,
178 $calendar-card-table-cell-date-height,
179 $calendar-card-table-cell-date-border-radius,
180 $s-1
181 );
182 }
183
184 &-month {
185 @include calendar-card-cell-size(
186 $calendar-card-table-cell-month-width,
187 $calendar-card-table-cell-month-height,
188 $calendar-card-table-cell-month-border-radius,
189 $s-2
190 );
191 }
192
193 &-year {
194 @include calendar-card-cell-size(
195 $calendar-card-table-cell-year-width,
196 $calendar-card-table-cell-year-height,
197 $calendar-card-table-cell-year-border-radius,
198 $s-2
199 );
200 }
201
202 &-cell-prev-month {
203 #{$calendar-prefix}-date {
204 @include calendar-cell-state (
205 $calendar-card-table-cell-other-background,
206 $calendar-card-table-cell-other-color,
207 $calendar-card-table-cell-other-border-color
208 );
209 }
210 }
211
212 &-cell-next-month {
213 #{$calendar-prefix}-date {
214 @include calendar-cell-state (
215 $calendar-card-table-cell-other-background,
216 $calendar-card-table-cell-other-color,
217 $calendar-card-table-cell-other-border-color
218 );
219 }
220 }
221
222 &-cell-current {
223 #{$calendar-prefix}-date,
224 #{$calendar-prefix}-month,
225 #{$calendar-prefix}-year {
226 font-weight: $calendar-card-table-cell-current-font-weight;
227
228 @include calendar-cell-state (
229 $calendar-card-table-cell-current-background,
230 $calendar-card-table-cell-current-color,
231 $calendar-card-table-cell-current-border-color
232 );
233 }
234 }
235 }
236}
237
238#{$calendar-prefix}-panel#{$calendar-prefix}-week {
239 #{$calendar-prefix}-tbody {
240 tr {
241 cursor: pointer;
242 }
243 tr:hover {
244 #{$calendar-prefix}-cell #{$calendar-prefix}-date {
245 @include calendar-cell-state (
246 $calendar-card-table-cell-hover-background,
247 $calendar-card-table-cell-hover-color,
248 $calendar-card-table-cell-hover-border-color
249 );
250 }
251 }
252
253 #{$calendar-prefix}-cell.#{$css-prefix}selected {
254 #{$calendar-prefix}-date {
255 font-weight: normal;
256 background: transparent;
257 border-color: transparent;
258 }
259 }
260
261 #{$calendar-prefix}-week-active-date {
262 position: relative;
263 color: $calendar-card-table-cell-inrange-color;
264 &::before {
265 content: '';
266 position: absolute;
267 left: calc(0px - #{$line-1});
268 top: calc(0px - #{$line-1});
269 bottom: calc(0px - #{$line-1});
270 right: calc(0px - #{$line-1});
271 border: $line-1 $line-solid;
272 background: $calendar-card-table-cell-inrange-background;
273 border-color: $calendar-card-table-cell-inrange-border-color;
274 border-radius: $calendar-card-table-cell-date-border-radius;
275 }
276 > span {
277 position: relative;
278 }
279 }
280
281 #{$calendar-prefix}-week-active-start,
282 #{$calendar-prefix}-week-active-end {
283 color: $calendar-card-table-cell-select-color;
284 &::before {
285 background: $calendar-card-table-cell-select-background;
286 border-color: $calendar-card-table-cell-select-border-color;
287 }
288 }
289 }
290}