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