ASCII text
1
/* OVERVIEW */
2
#overview {
4
spacing: 24px;
5
background-color: transparent;
6
color: $on-dark;
7
StScrollBar {
9
@extend %scrollbar-on-dark;
10
}
11
}
12
.overview-controls {
14
padding-bottom: 32px;
15
}
16
%overview-panel {
18
transition-duration: $duration-panel;
19
border: 0;
20
background-color: fill($on-dark);
21
color: $on-dark;
22
}
23
%overview-status-text {
25
@include type(headline3);
26
color: disabled($on-dark);
27
}
28
%overview-item {
30
@extend %-overview-item;
31
&:focus {
33
@extend %-overview-item-focus;
34
}
35
&:hover,
37
&:selected {
38
@extend %-overview-item-hover;
39
}
40
&:active,
42
&:checked {
43
@extend %-overview-item-active;
44
}
45
}
46
%overview-icon {
48
.overview-icon {
49
@extend %-overview-item;
50
}
51
&:focus {
53
.overview-icon {
54
@extend %-overview-item-focus;
55
}
56
}
57
&:drop,
59
&:hover,
60
&:selected {
61
.overview-icon {
62
@extend %-overview-item-hover;
63
}
64
}
65
&:active,
67
&:checked {
68
.overview-icon {
69
@extend %-overview-item-active;
70
}
71
}
72
}
73
%-overview-item {
75
padding: 6px;
76
border: 0;
77
border-radius: $corner-radius;
78
background-color: transparent;
79
color: inherit;
80
text-align: center;
81
transition-duration: $duration;
82
}
83
%-overview-item-focus {
85
border-image: none;
86
background-image: none;
87
background-color: overlay("focus", $on-dark);
88
color: inherit;
89
transition-duration: 0ms;
90
}
91
%-overview-item-hover {
93
border-image: none;
94
background-image: none;
95
background-color: overlay("hover", $on-dark);
96
color: inherit;
97
transition-duration: 0ms;
98
}
99
%-overview-item-active {
101
box-shadow: none;
102
background-color: overlay("pressed", $on-dark);
103
color: inherit;
104
transition-duration: $duration-ripple;
105
}
106