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;
26
}
27
&:hover {
29
background-color: $overlay-hover;
30
}
31
&:active {
33
background-color: $overlay-active;
34
transition-duration: $duration-ripple;
35
}
36
}
37
.clock-display-box {
39
spacing: 4px;
40
}
41
// overall menu
43
#calendarArea {
44
padding: 8px 16px;
45
}
46
// Calendar menu side column
48
.datemenu-calendar-column {
49
spacing: $calendar-column-spacing;
50
padding: 0;
51
border: 0 solid $divider;
52
&:ltr {
54
margin-right: 0;
55
border-left-width: 0;
56
}
57
&:rtl {
59
margin-left: 0;
60
border-right-width: 0;
61
}
62
.datemenu-displays-section {
64
padding-bottom: 0;
65
}
66
.datemenu-displays-box {
68
spacing: $calendar-column-spacing;
69
margin: $calendar-column-margin;
70
}
71
}
72
.events-section-title {
74
@extend %calendar-item;
75
min-height: $menuitem-size - 4px * 2;
76
padding: 4px 8px;
77
color: $text2 !important;
78
font-weight: bold;
79
}
80
/* today button (the date) */
82
.datemenu-today-button {
83
@extend %calendar-item;
84
margin: $calendar-column-margin;
85
min-height: $menuitem-size * 2 - 4px * 2;
86
padding: 4px 8px;
87
// weekday label
89
.day-label {
90
font-weight: normal;
91
font-size: 1em;
92
}
93
// date label
95
.date-label {
96
@include type(headline5);
97
}
98
}
99
/* Calendar */
101
.calendar {
102
@extend %calendar-item;
103
margin: $calendar-column-margin;
104
margin-bottom: 0;
105
padding: 0;
106
// month
108
.calendar-month-label {
109
transition-duration: $duration;
110
height: $menuitem-size - 6px * 2;
111
margin: 2px;
112
padding: 6px 8px;
113
border-radius: $corner-radius;
114
color: inherit;
115
font-weight: bold;
116
text-align: center;
117
&:focus {
119
background-color: $overlay-focus;
120
}
121
}
122
// prev/next month icons
124
@if $version >= 3.32 {
125
.calendar-change-month-back StIcon,
126
.calendar-change-month-forward StIcon {
127
icon-size: 16px;
128
}
129
} @else {
130
.calendar-change-month-back {
131
background-image: url("assets/calendar-arrow-left.svg");
132
&:rtl {
134
background-image: url("assets/calendar-arrow-right.svg");
135
}
136
}
137
.calendar-change-month-forward {
139
background-image: url("assets/calendar-arrow-right.svg");
140
&:rtl {
142
background-image: url("assets/calendar-arrow-left.svg");
143
}
144
}
145
}
146
.pager-button {
148
transition-duration: $duration;
149
width: $menuitem-size;
150
height: $menuitem-size;
151
margin: 2px;
152
border-radius: $menuitem-size / 2;
153
background-color: transparent;
154
color: $text2;
155
&:focus {
157
background-color: $overlay-focus;
158
}
159
&:hover {
161
background-color: $overlay-hover;
162
}
163
&:active {
165
background-color: $overlay-active;
166
transition-duration: $duration-ripple;
167
}
168
}
169
.calendar-day-base {
171
transition-duration: $duration;
172
width: $menuitem-size;
173
height: $menuitem-size;
174
margin: 2px;
175
padding: 0;
176
border: 0;
177
border-radius: $menuitem-size / 2;
178
@include type(caption);
179
font-feature-settings: "tnum";
180
text-align: center;
181
&:focus {
183
background-color: $overlay-focus;
184
}
185
&:hover {
187
background-color: $overlay-hover;
188
}
189
&:active {
191
transition-duration: $duration-ripple;
192
border-color: transparent;
193
background-color: $overlay-active;
194
color: inherit;
195
}
196
&:selected {
198
border-color: transparent;
199
background-color: $overlay-selected;
200
color: inherit;
201
}
202
// day of week heading
204
&.calendar-day-heading {
205
width: $menuitem-size;
206
height: $menuitem-size - 7px;
207
margin-top: 2px;
208
padding: 7px 0 0;
209
border-radius: $menuitem-size / 2;
210
background-color: transparent;
211
color: $text-disabled;
212
@include type(caption);
213
font-weight: bold;
214
text-align: center;
215
&:focus {
217
background-color: $overlay-focus;
218
}
219
}
220
}
221
//border collapse hack - see calendar.js
223
.calendar-day {
224
border-width: 0;
225
}
226
.calendar-day-top {
228
border-top-width: 0;
229
}
230
.calendar-day-left {
232
border-left-width: 0;
233
}
234
.calendar-work-day {
236
}
237
.calendar-nonwork-day {
239
color: inherit;
240
}
241
// Today
243
.calendar-today {
244
border: 0;
245
background-color: transparent;
246
color: inherit;
247
font-weight: bold !important;
248
&:focus {
250
background-color: $overlay-focus;
251
color: inherit;
252
}
253
&:hover {
255
background-color: $overlay-hover;
256
color: inherit;
257
}
258
&:active {
260
&,
261
&:hover,
262
&:focus {
263
background-color: $overlay-active;
264
color: inherit;
265
}
266
}
267
&:selected {
269
&,
270
&:hover,
271
&:focus {
272
background-color: $overlay-selected;
273
color: inherit;
274
}
275
}
276
}
277
.calendar-day-with-events {
279
background-image: none;
280
color: $primary !important;
281
font-weight: normal;
282
text-decoration: underline;
283
}
284
.calendar-other-month-day {
286
color: $text2-disabled !important;
287
}
288
.calendar-week-number {
290
width: $menuitem-size;
291
height: $menuitem-size - 7px;
292
margin: 2px;
293
padding: 7px 0 0;
294
border-radius: $menuitem-size / 2;
295
background-color: transparent;
296
color: $text-disabled;
297
font-weight: bold;
298
font-size: 1em;
299
text-align: center;
300
}
301
}
302
/* World clocks */
304
.world-clocks-button {
305
@extend %calendar-item;
306
min-height: $menuitem-size - 4px * 2;
307
padding: 4px 8px;
308
.world-clocks-grid {
310
spacing-rows: .4em;
311
spacing-columns: .8em;
312
}
313
// title
315
.world-clocks-header {
316
color: $text2;
317
font-weight: bold;
318
}
319
// city label
321
.world-clocks-city {
322
color: inherit;
323
font-weight: normal;
324
font-size: 1em;
325
}
326
// timezone time
328
.world-clocks-time {
329
color: $text2;
330
font-weight: normal;
331
font-size: 1em;
332
font-feature-settings: "tnum";
333
text-align: right;
334
}
335
// timezone offset label
337
.world-clocks-timezone {
338
color: $text-disabled;
339
font-size: 1em;
340
font-feature-settings: "tnum";
341
}
342
}
343
/* Weather */
345
.weather-button {
346
@extend %calendar-item;
347
min-height: $menuitem-size - 4px * 2;
348
padding: 4px 8px;
349
.weather-box {
351
spacing: 0.4em;
352
}
353
.weather-header-box {
355
spacing: 8px;
356
}
357
.weather-header {
359
color: $text2;
360
font-weight: bold;
361
&.location {
363
font-weight: normal;
364
font-size: 1em;
365
}
366
}
367
.weather-grid {
369
spacing-rows: .4em;
370
spacing-columns: .8em;
371
}
372
.weather-forecast-time {
374
padding-top: 0;
375
padding-bottom: 0;
376
color: $text2;
377
@include type(caption);
378
font-feature-settings: "tnum";
379
}
380
.weather-forecast-icon {
382
icon-size: 32px;
383
}
384
.weather-forecast-temp {
386
font-weight: bold;
387
}
388
}
389