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 - 8px * 2;
81
padding: 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 - 8px * 2;
91
padding: 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;
302
margin: 2px;
303
border-radius: $menuitem-size / 2;
304
background-color: transparent;
305
color: disabled($on-surface);
306
font-weight: bold;
307
font-size: 1em;
308
text-align: center;
309
@if $version <= 3.36 {
311
height: $menuitem-size - 7px;
312
padding: 7px 0 0;
313
}
314
}
315
}
316
@if $version >= 3.38 {
318
/* Events */
319
.events-button {
320
@extend %calendar-item;
321
min-height: $menuitem-size * 2 - 8px * 2;
322
padding: 8px;
323
.events-box {
325
spacing: 8px;
326
}
327
.events-list {
329
spacing: 8px;
330
}
331
.events-title {
333
color: hint($on-surface);
334
font-weight: bold;
335
margin-bottom: 0;
336
}
337
.event-time {
339
color: hint($on-surface);
340
@include type(caption);
341
font-feature-settings: "tnum";
342
}
343
}
344
}
345
/* World clocks */
347
.world-clocks-button {
348
@extend %calendar-item;
349
min-height: $menuitem-size - 8px * 2;
350
padding: 8px;
351
.world-clocks-grid {
353
spacing-rows: .4em;
354
spacing-columns: .8em;
355
}
356
// title
358
.world-clocks-header {
359
color: hint($on-surface);
360
font-weight: bold;
361
}
362
// city label
364
.world-clocks-city {
365
color: inherit;
366
font-weight: normal;
367
font-size: 1em;
368
}
369
// timezone time
371
.world-clocks-time {
372
color: hint($on-surface);
373
font-weight: normal;
374
font-size: 1em;
375
font-feature-settings: "tnum";
376
text-align: right;
377
&:ltr {
379
text-align: right;
380
}
381
&:rtl {
383
text-align: left;
384
}
385
}
386
// timezone offset label
388
.world-clocks-timezone {
389
color: disabled($on-surface);
390
font-size: 1em;
391
font-feature-settings: "tnum";
392
}
393
}
394
/* Weather */
396
.weather-button {
397
@extend %calendar-item;
398
min-height: $menuitem-size * 2 - 8px * 2;
399
padding: 8px;
400
.weather-box {
402
spacing: 0.4em;
403
}
404
.weather-header-box {
406
spacing: 8px;
407
}
408
.weather-header {
410
color: hint($on-surface);
411
font-weight: bold;
412
&.location {
414
font-weight: normal;
415
font-size: 1em;
416
}
417
}
418
.weather-grid {
420
spacing-rows: .4em;
421
spacing-columns: .8em;
422
}
423
.weather-forecast-time {
425
padding-top: 0;
426
padding-bottom: 0;
427
color: hint($on-surface);
428
@include type(caption);
429
font-feature-settings: "tnum";
430
}
431
.weather-forecast-icon {
433
icon-size: 32px;
434
}
435
.weather-forecast-temp {
437
font-weight: bold;
438
}
439
}
440