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 | }
|