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: $primary !important;
205
color: $on-primary !important;
206
font-weight: 500 !important;
207
}
208
// day of week heading
210
&.calendar-day-heading {
211
width: $menuitem-size;
212
height: $menuitem-size - 7px;
213
margin-top: 2px;
214
padding: 7px 0 0;
215
border-radius: $menuitem-size / 2;
216
background-color: transparent;
217
color: disabled($on-surface);
218
@include type(caption);
219
font-weight: bold;
220
text-align: center;
221
&:focus {
223
background-color: overlay("focus", $on-surface);
224
}
225
}
226
}
227
//border collapse hack - see calendar.js
229
.calendar-day {
230
border-width: 0;
231
}
232
.calendar-day-top {
234
border-top-width: 0;
235
}
236
.calendar-day-left {
238
border-left-width: 0;
239
}
240
.calendar-work-day {
242
}
243
.calendar-nonwork-day {
245
color: inherit;
246
}
247
// Today
249
.calendar-today {
250
border: 0;
251
box-shadow: inset 0 0 0 1px hint($on-surface);
252
background-color: rgba($surface, .01); // to draw box-shadow
253
color: inherit;
254
font-weight: normal;
255
&:focus {
257
background-color: overlay("focus", $on-surface);
258
color: inherit;
259
}
260
&:hover {
262
background-color: overlay("hover", $on-surface);
263
color: inherit;
264
}
265
&:active {
267
&,
268
&:hover,
269
&:focus {
270
background-color: overlay("pressed", $on-surface);
271
color: inherit;
272
}
273
}
274
&:selected {
276
box-shadow: inset 0 0 0 1px transparent;
277
&,
279
&:hover,
280
&:focus {
281
background-color: $primary;
282
color: $on-primary;
283
}
284
}
285
}
286
.calendar-day-with-events {
288
background-image: url("assets/calendar-event.svg");
289
&,
291
&.calendar-work-day {
292
color: inherit;
293
font-weight: normal;
294
}
295
}
296
.calendar-other-month-day {
298
color: disabled-hint($on-surface) !important;
299
}
300
.calendar-week-number {
302
width: $menuitem-size;
303
height: $menuitem-size;
304
margin: 2px;
305
border-radius: $menuitem-size / 2;
306
background-color: transparent;
307
color: disabled($on-surface);
308
font-weight: bold;
309
font-size: 1em;
310
text-align: center;
311
@if $version <= 3.36 {
313
height: $menuitem-size - 7px;
314
padding: 7px 0 0;
315
}
316
}
317
}
318
@if $version >= 3.38 {
320
/* Events */
321
.events-button {
322
@extend %calendar-item;
323
min-height: $menuitem-size * 2 - 8px * 2;
324
padding: 8px;
325
.events-box {
327
spacing: 8px;
328
}
329
.events-list {
331
spacing: 8px;
332
}
333
.events-title {
335
color: hint($on-surface);
336
font-weight: bold;
337
margin-bottom: 0;
338
}
339
.event-time {
341
color: hint($on-surface);
342
@include type(caption);
343
font-feature-settings: "tnum";
344
}
345
}
346
}
347
/* World clocks */
349
.world-clocks-button {
350
@extend %calendar-item;
351
min-height: $menuitem-size - 8px * 2;
352
padding: 8px;
353
.world-clocks-grid {
355
spacing-rows: .4em;
356
spacing-columns: .8em;
357
}
358
// title
360
.world-clocks-header {
361
color: hint($on-surface);
362
font-weight: bold;
363
}
364
// city label
366
.world-clocks-city {
367
color: inherit;
368
font-weight: normal;
369
font-size: 1em;
370
}
371
// timezone time
373
.world-clocks-time {
374
color: hint($on-surface);
375
font-weight: normal;
376
font-size: 1em;
377
font-feature-settings: "tnum";
378
text-align: right;
379
&:ltr {
381
text-align: right;
382
}
383
&:rtl {
385
text-align: left;
386
}
387
}
388
// timezone offset label
390
.world-clocks-timezone {
391
color: disabled($on-surface);
392
font-size: 1em;
393
font-feature-settings: "tnum";
394
}
395
}
396
/* Weather */
398
.weather-button {
399
@extend %calendar-item;
400
min-height: $menuitem-size * 2 - 8px * 2;
401
padding: 8px;
402
.weather-box {
404
spacing: 0.4em;
405
}
406
.weather-header-box {
408
spacing: 8px;
409
}
410
.weather-header {
412
color: hint($on-surface);
413
font-weight: bold;
414
&.location {
416
font-weight: normal;
417
font-size: 1em;
418
}
419
}
420
.weather-grid {
422
spacing-rows: .4em;
423
spacing-columns: .8em;
424
}
425
.weather-forecast-time {
427
padding-top: 0;
428
padding-bottom: 0;
429
color: hint($on-surface);
430
@include type(caption);
431
font-feature-settings: "tnum";
432
}
433
.weather-forecast-icon {
435
icon-size: 32px;
436
}
437
.weather-forecast-temp {
439
font-weight: bold;
440
}
441
}
442