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
}
289
.calendar-other-month-day {
291
color: disabled-hint($on-surface) !important;
292
}
293
.calendar-week-number {
295
width: $menuitem-size;
296
height: $menuitem-size - 7px;
297
margin: 2px;
298
padding: 7px 0 0;
299
border-radius: $menuitem-size / 2;
300
background-color: transparent;
301
color: disabled($on-surface);
302
font-weight: bold;
303
font-size: 1em;
304
text-align: center;
305
}
306
}
307
/* World clocks */
309
.world-clocks-button {
310
@extend %calendar-item;
311
min-height: $menuitem-size - 4px * 2;
312
padding: 4px 8px;
313
.world-clocks-grid {
315
spacing-rows: .4em;
316
spacing-columns: .8em;
317
}
318
// title
320
.world-clocks-header {
321
color: hint($on-surface);
322
font-weight: bold;
323
}
324
// city label
326
.world-clocks-city {
327
color: inherit;
328
font-weight: normal;
329
font-size: 1em;
330
}
331
// timezone time
333
.world-clocks-time {
334
color: hint($on-surface);
335
font-weight: normal;
336
font-size: 1em;
337
font-feature-settings: "tnum";
338
text-align: right;
339
}
340
// timezone offset label
342
.world-clocks-timezone {
343
color: disabled($on-surface);
344
font-size: 1em;
345
font-feature-settings: "tnum";
346
}
347
}
348
/* Weather */
350
.weather-button {
351
@extend %calendar-item;
352
min-height: $menuitem-size - 4px * 2;
353
padding: 4px 8px;
354
.weather-box {
356
spacing: 0.4em;
357
}
358
.weather-header-box {
360
spacing: 8px;
361
}
362
.weather-header {
364
color: hint($on-surface);
365
font-weight: bold;
366
&.location {
368
font-weight: normal;
369
font-size: 1em;
370
}
371
}
372
.weather-grid {
374
spacing-rows: .4em;
375
spacing-columns: .8em;
376
}
377
.weather-forecast-time {
379
padding-top: 0;
380
padding-bottom: 0;
381
color: hint($on-surface);
382
@include type(caption);
383
font-feature-settings: "tnum";
384
}
385
.weather-forecast-icon {
387
icon-size: 32px;
388
}
389
.weather-forecast-temp {
391
font-weight: bold;
392
}
393
}
394