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
/* World clocks */
314
.world-clocks-button {
315
@extend %calendar-item;
316
min-height: $menuitem-size - 4px * 2;
317
padding: 4px 8px;
318
.world-clocks-grid {
320
spacing-rows: .4em;
321
spacing-columns: .8em;
322
}
323
// title
325
.world-clocks-header {
326
color: hint($on-surface);
327
font-weight: bold;
328
}
329
// city label
331
.world-clocks-city {
332
color: inherit;
333
font-weight: normal;
334
font-size: 1em;
335
}
336
// timezone time
338
.world-clocks-time {
339
color: hint($on-surface);
340
font-weight: normal;
341
font-size: 1em;
342
font-feature-settings: "tnum";
343
text-align: right;
344
}
345
// timezone offset label
347
.world-clocks-timezone {
348
color: disabled($on-surface);
349
font-size: 1em;
350
font-feature-settings: "tnum";
351
}
352
}
353
/* Weather */
355
.weather-button {
356
@extend %calendar-item;
357
min-height: $menuitem-size - 4px * 2;
358
padding: 4px 8px;
359
.weather-box {
361
spacing: 0.4em;
362
}
363
.weather-header-box {
365
spacing: 8px;
366
}
367
.weather-header {
369
color: hint($on-surface);
370
font-weight: bold;
371
&.location {
373
font-weight: normal;
374
font-size: 1em;
375
}
376
}
377
.weather-grid {
379
spacing-rows: .4em;
380
spacing-columns: .8em;
381
}
382
.weather-forecast-time {
384
padding-top: 0;
385
padding-bottom: 0;
386
color: hint($on-surface);
387
@include type(caption);
388
font-feature-settings: "tnum";
389
}
390
.weather-forecast-icon {
392
icon-size: 32px;
393
}
394
.weather-forecast-temp {
396
font-weight: bold;
397
}
398
}
399