_extends.scss
ASCII text
1
%button-shared {
2
@include button(normal);
3
@include font(button);
4
5
min-height: $medium_size;
6
padding: 0 16px;
7
border-radius: $material_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
16
min-height: $medium_size;
17
min-width: $medium_size;
18
padding: 6px;
19
border-radius: $material_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_color;
28
-slider-height: 2px;
29
-slider-background-color: $track_color; //background of the trough
30
-slider-border-color: transparent; //trough border color
31
-slider-active-background-color: $primary_color; //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: $border_color;
39
-gradient-end: $border_color;
40
-margin-horizontal: 4px;
41
height: 1.5em;
42
}
43
%dialog-entry-shared {
44
@include entry(normal,$fc:$track_color);
45
46
width: 250px;
47
padding: 4px 8px;
48
border-radius: $material_radius $material_radius 0 0;
49
color: $secondary_fg_color;
50
caret-color: $secondary_fg_color;
51
selection-background-color: $track_color;
52
selected-color: $fg_color;
53
&:focus {
54
@include entry(focus,$fc:$fg_color);
55
56
padding: 4px 8px;
57
border-width: 0;
58
color: $fg_color;
59
}
60
}
61
%desklet-shared {
62
color: $fg_color;
63
border: none;
64
padding: 12px;
65
box-shadow: $shadow_4;
66
}
67
%calendar-shared {
68
width: 16px;
69
height: 16px;
70
border-radius: 999px;
71
transition-duration: $shorter_duration;
72
&:active { background-color: $track_color;}
73
}
74
%menu-shared {
75
background-color: $surface_color;
76
border-radius: $material_radius;
77
color: $fg_color;
78
box-shadow: $shadow_2;
79
}
80
%menu-button-label-shared {
81
&:ltr {
82
padding-left: 4px;
83
}
84
&:rtl {
85
padding-right: 4px;
86
}
87
}
88
%dialogs-subject-shared {
89
font-weight: bold;
90
color: $fg_color;
91
padding-top: 10px;
92
padding-left: 17px;
93
padding-bottom: 6px;
94
}
95
%dialogs-subject-rtl-shared {
96
padding-left: 0;
97
padding-right: 17px;
98
}
99
%dialogs-description-shared {
100
color: $fg_color;
101
padding-left: 17px;
102
width: 28em;
103
}
104
%check-box-shared {
105
width: 24px;
106
height: 24px;
107
padding: ($medium_size - 24px) / 2;
108
border-radius: 100px;
109
background-image: url(assets/checkbox-off.svg);
110
}
111
%radiobutton-shared {
112
width: 20px;
113
height: 20px;
114
padding: ($medium_size - 20px) / 2;
115
border-radius: 100px;
116
background-image: url(assets/radiobutton-off.svg);
117
}
118
%tile-shared {
119
background-color: $alt_panel_bg_color;
120
border: 2px solid $border_color;
121
}
122
%tile-shared-snap {
123
background-color: $alt_panel_bg_color;
124
border: 2px solid $primary_color;
125
}
126
%osd-panel-shared {
127
color: $fg_color;
128
background-color: $surface_color;
129
border: none;
130
border-radius: $material_radius;
131
padding: 12px;
132
box-shadow: $shadow_4;
133
}
134
%osd-info-workspace-shared {
135
@include font(title);
136
@extend %osd-panel-shared;
137
138
text-align: center;
139
padding: 8px 10px;
140
}
141