ASCII text
1
%button-shared {
2
@include button(normal);
3
@include type(button);
4
min-height: $medium-size;
6
padding: 0 16px;
7
border-radius: $corner-radius;
8
&:focus { @include button(focus); }
9
&:hover, &:checked { @include button(hover); }
10
&:active { @include button(active);}
11
&:insensitive { @include button(insensitive);}
12
}
13
%icon-button-shared {
14
@include button(normal);
15
min-height: $medium-size;
17
min-width: $medium-size;
18
padding: 6px;
19
border-radius: $corner-radius;
20
&:focus { @include button(focus); }
21
&:hover, &:checked { @include button(hover); }
22
&:active { @include button(active);}
23
&:insensitive { @include button(insensitive);}
24
}
25
%slider-shared {
26
height: 20px;
27
color: $primary;
28
-slider-height: 2px;
29
-slider-background-color: stroke($on-surface); //background of the trough
30
-slider-border-color: transparent; //trough border color
31
-slider-active-background-color: $primary; //active trough fill
32
-slider-active-border-color: transparent; //active trough border
33
-slider-border-width: 0;
34
-slider-handle-radius: 6px;
35
}
36
%separator-shared {
37
-gradient-height: 1px;
38
-gradient-start: divider($on-surface);
39
-gradient-end: divider($on-surface);
40
-margin-horizontal: 4px;
41
height: 1.5em;
42
}
43
%dialog-entry-shared {
44
@include entry(normal);
45
width: 250px;
47
min-height: $medium-size;
48
padding: 0 8px;
49
border-radius: $corner-radius $corner-radius 0 0;
50
color: $on-surface;
51
caret-color: $on-surface;
52
selection-background-color: $overlay-selected;
53
selected-color: $on-surface;
54
&:focus {
55
@include entry(focus);
56
padding: 0 8px;
58
border-width: 0;
59
color: $on-surface;
60
}
61
}
62
%desklet-shared {
63
color: $on-surface;
64
border: none;
65
padding: 12px;
66
box-shadow: $shadow-z8;
67
}
68
%calendar-shared {
69
width: 16px;
70
height: 16px;
71
border-radius: 999px;
72
transition-duration: $duration;
73
&:active { background-color: stroke($on-surface);}
74
}
75
%menu-shared {
76
background-color: $surface-z8;
77
border-radius: $corner-radius;
78
color: $on-surface;
79
box-shadow: $shadow-z4;
80
}
81
%menu-button-label-shared {
82
&:ltr {
83
padding-left: 4px;
84
}
85
&:rtl {
86
padding-right: 4px;
87
}
88
}
89
%dialogs-subject-shared {
90
font-weight: bold;
91
color: $on-surface;
92
padding-top: 10px;
93
padding-left: 17px;
94
padding-bottom: 6px;
95
}
96
%dialogs-subject-rtl-shared {
97
padding-left: 0;
98
padding-right: 17px;
99
}
100
%dialogs-description-shared {
101
color: $on-surface;
102
padding-left: 17px;
103
width: 28em;
104
}
105
%check-box-shared {
106
width: 24px;
107
height: 24px;
108
padding: ($medium-size - 24px) / 2;
109
border-radius: 100px;
110
background-image: url(assets/checkbox-off.svg);
111
}
112
%radiobutton-shared {
113
width: 20px;
114
height: 20px;
115
padding: ($medium-size - 20px) / 2;
116
border-radius: 100px;
117
background-image: url(assets/radiobutton-off.svg);
118
}
119
%tile-shared {
120
background-color: $scrim-alt;
121
border: 2px solid divider($on-surface);
122
}
123
%tile-shared-snap {
124
background-color: $scrim-alt;
125
border: 2px solid $primary;
126
}
127
%osd-panel-shared {
128
color: $on-surface;
129
background-color: $surface-z8;
130
border: none;
131
border-radius: $corner-radius;
132
padding: 12px;
133
box-shadow: $shadow-z8;
134
}
135
%osd-info-workspace-shared {
136
@include type(headline6);
137
@extend %osd-panel-shared;
138
text-align: center;
140
padding: 8px 10px;
141
}
142