assembler source, ASCII text
1
/* Date/Time Menu */
2
$calendar-column-spacing: 8px;
4
$calendar-column-margin: 0 8px;
5
%calendar-item {
7
margin: 0;
8
border: 0;
9
border-radius: $corner-radius;
10
&,
12
&:focus,
13
&:hover,
14
&:active {
15
border-color: transparent;
16
box-shadow: none;
17
background-color: transparent;
18
color: inherit;
19
text-shadow: none;
20
icon-shadow: none;
21
transition-duration: $duration;
22
}
23
&:focus {
25
background-color: overlay("focus", $on-surface);
26
}
27
&:hover {
29
background-color: overlay("hover", $on-surface);
30
}
31
&:active {
33
background-color: overlay("pressed", $on-surface);
34
transition-duration: $duration-ripple;
35
}
36
}
37
.clock-display-box {
39
spacing: 0;
40
.clock {
42
padding-left: $panel-button-hpadding;
43
padding-right: $panel-button-hpadding;
44
}
45
}
46
// overall menu
48
#calendarArea {
49
padding: 8px 16px;
50
}
51
// Calendar menu side column
53
.datemenu-calendar-column {
54
spacing: $calendar-column-spacing;
55
padding: 0;
56
border: 0 solid divider($on-surface);
57
&:ltr {
59
margin-right: 0;
60
border-left-width: 0;
61
}
62
&:rtl {
64
margin-left: 0;
65
border-right-width: 0;
66
}
67
.datemenu-displays-section {
69
padding-bottom: 0;
70
}
71
.datemenu-displays-box {
73
spacing: $calendar-column-spacing;
74
margin: $calendar-column-margin;
75
}
76
}
77
.events-section-title {
79
@extend %calendar-item;
80
min-height: $menuitem-size - 4px * 2;
81
padding: 4px 8px;
82
color: hint($on-surface) !important;
83
font-weight: bold;
84
}
85
/* today button (the date) */
87
.datemenu-today-button {
88
@extend %calendar-item;
89
margin: $calendar-column-margin;
90
min-height: $menuitem-size * 2 - 4px * 2;
91
padding: 4px 8px;
92
// weekday label
94
.day-label {
95
font-weight: normal;
96
font-size: 1em;
97
}
98
// date label
100
.date-label {
101
@include type(headline5);
102
}
103
}
104
/* Calendar */
106
.calendar {
107
@extend %calendar-item;
108
margin: $calendar-column-margin;
109
margin-bottom: 0;
110
padding: 0;
111
// month
113
.calendar-month-label {
114
transition-duration: $duration;
115
height: $menuitem-size - 6px * 2;
116
margin: 2px;
117
padding: 6px 8px;
118
border-radius: $corner-radius;
119
color: inherit;
120
font-weight: bold;
121
text-align: center;
122
&:focus {
124
background-color: overlay("focus", $on-surface);
125
}
126
}
127
// prev/next month icons
129
@if $version >= 3.32 {
130
.calendar-change-month-back StIcon,
131
.calendar-change-month-forward StIcon {
132
icon-size: 16px;
133
}
134
} @else {
135
.calendar-change-month-back {
136
background-image: url("assets/calendar-arrow-left.svg");
137
&:rtl {
139
background-image: url("assets/calendar-arrow-right.svg");
140
}
141
}
142
.calendar-change-month-forward {
144
background-image: url("assets/calendar-arrow-right.svg");
145
&:rtl {
147
background-image: url("assets/calendar-arrow-left.svg");
148
}
149
}
150
}
151
.pager-button {
153
transition-duration: $duration;
154
width: $menuitem-size;
155
height: $menuitem-size;
156
margin: 2px;
157
border-radius: $menuitem-size / 2;
158
background-color: transparent;
159
color: hint($on-surface);
160
&:focus {
162
background-color: overlay("focus", $on-surface);
163
}
164
&:hover {
166
background-color: overlay("hover", $on-surface);
167
}
168
&:active {
170
background-color: overlay("pressed", $on-surface);
171
transition-duration: $duration-ripple;
172
}
173
}
174
.calendar-day-base {
176
transition-duration: $duration;
177
width: $menuitem-size;
178
height: $menuitem-size;
179
margin: 2px;
180
padding: 0;
181
border: 0;
182
border-radius: $menuitem-size / 2;
183
@include type(caption);
184
font-feature-settings: "tnum";
185
text-align: center;
186
&:focus {
188
background-color: overlay("focus", $on-surface);
189
}
190
&:hover {
192
background-color: overlay("hover", $on-surface);
193
}
194
&:active {
196
transition-duration: $duration-ripple;
197
border-color: transparent;
198
background-color: overlay("pressed", $on-surface);
199
color: inherit;
200
}
201
&:selected {
203
border-color: transparent;
204
background-color: $overlay-selected;
205
color: inherit;
206
}
207
// day of week heading
209
&.calendar-day-heading {
210
width: $menuitem-size;
211
height: $menuitem-size - 7px;
212
margin-top: 2px;
213
padding: 7px 0 0;
214
border-radius: $menuitem-size / 2;
215
background-color: transparent;
216
color: disabled($on-surface);
217
@include type(caption);
218
font-weight: bold;
219
text-align: center;
220
&:focus {
222
background-color: overlay("focus", $on-surface);
223
}
224
}
225
}
226
//border collapse hack - see calendar.js
228
.calendar-day {
229
border-width: 0;
230
}
231
.calendar-day-top {
233
border-top-width: 0;
234
}
235
.calendar-day-left {
237
border-left-width: 0;
238
}
239
.calendar-work-day {
241
}
242
.calendar-nonwork-day {
244
color: inherit;
245
}
246
// Today
248
.calendar-today {
249
border: 0;
250
background-color: transparent;
251
color: inherit;
252
font-weight: bold !important;
253
&:focus {
255
background-color: overlay("focus", $on-surface);
256
color: inherit;
257
}
258
&:hover {
260
background-color: overlay("hover", $on-surface);
261
color: inherit;
262
}
263
&:active {
265
&,
266
&:hover,
267
&:focus {
268
background-color: overlay("pressed", $on-surface);
269
color: inherit;
270
}
271
}
272
&:selected {
274
&,
275
&:hover,
276
&:focus {
277
background-color: $overlay-selected;
278
color: inherit;
279
}
280
}
281
}
282
.calendar-day-with-events {
284
background-image: none;
285
color: $primary !important;
286
font-weight: normal;
287
text-decoration: underline;
288
&.calendar-work-day {
290
color: $primary !important;
291
font-weight: normal;
292
}
293
}
294
.calendar-other-month-day {
296
color: disabled-hint($on-surface) !important;
297
}
298
.calendar-week-number {
300
width: $menuitem-size;
301
height: $menuitem-size - 7px;
302
margin: 2px;
303
padding: 7px 0 0;
304
border-radius: $menuitem-size / 2;
305
background-color: transparent;
306
color: disabled($on-surface);
307
font-weight: bold;
308
font-size: 1em;
309
text-align: center;
310
}
311
}
312
@if $version >= 3.38 {
314
/* Events */
315
.events-button {
316
@extend %calendar-item;
317
min-height: $menuitem-size - 4px * 2;
318
padding: 4px 8px;
319
.events-box {
321
spacing: 8px;
322
}
323
.events-list {
325
spacing: 8px;
326
}
327
.events-title {
329
color: hint($on-surface);
330
font-weight: bold;
331
margin-bottom: 8px;
332
}
333
.event-time {
335
color: hint($on-surface);
336
font-size: 1em;
337
font-feature-settings: "tnum";
338
}
339
}
340
}
341
/* World clocks */
343
.world-clocks-button {
344
@extend %calendar-item;
345
min-height: $menuitem-size - 4px * 2;
346
padding: 4px 8px;
347
.world-clocks-grid {
349
spacing-rows: .4em;
350
spacing-columns: .8em;
351
}
352
// title
354
.world-clocks-header {
355
color: hint($on-surface);
356
font-weight: bold;
357
}
358
// city label
360
.world-clocks-city {
361
color: inherit;
362
font-weight: normal;
363
font-size: 1em;
364
}
365
// timezone time
367
.world-clocks-time {
368
color: hint($on-surface);
369
font-weight: normal;
370
font-size: 1em;
371
font-feature-settings: "tnum";
372
text-align: right;
373
&:ltr {
375
text-align: right;
376
}
377
&:rtl {
379
text-align: left;
380
}
381
}
382
// timezone offset label
384
.world-clocks-timezone {
385
color: disabled($on-surface);
386
font-size: 1em;
387
font-feature-settings: "tnum";
388
}
389
}
390
/* Weather */
392
.weather-button {
393
@extend %calendar-item;
394
min-height: $menuitem-size - 4px * 2;
395
padding: 4px 8px;
396
.weather-box {
398
spacing: 0.4em;
399
}
400
.weather-header-box {
402
spacing: 8px;
403
}
404
.weather-header {
406
color: hint($on-surface);
407
font-weight: bold;
408
&.location {
410
font-weight: normal;
411
font-size: 1em;
412
}
413
}
414
.weather-grid {
416
spacing-rows: .4em;
417
spacing-columns: .8em;
418
}
419
.weather-forecast-time {
421
padding-top: 0;
422
padding-bottom: 0;
423
color: hint($on-surface);
424
@include type(caption);
425
font-feature-settings: "tnum";
426
}
427
.weather-forecast-icon {
429
icon-size: 32px;
430
}
431
.weather-forecast-temp {
433
font-weight: bold;
434
}
435
}
436