_drawing.scss
ASCII text
1
// Drawing mixins
2
3
// generic drawing of more complex things
4
5
// provide font size in rem, with px fallback
6
@mixin fontsize($size: 24, $base: 16) {
7
font-size: round($size) + pt;
8
//font-size: ($size / $base) * 1rem;
9
}
10
11
// shadows
12
@mixin shadow($level) {
13
@if $level==1 {
14
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
15
}
16
@if $level==2 {
17
box-shadow: 0 3px 6px rgba(0,0,0,0.16*1.5), 0 3px 6px rgba(0,0,0,0.23*1.5);
18
}
19
@if $level==3 {
20
box-shadow: 0 10px 20px rgba(0,0,0,0.19*1.5), 0 6px 6px rgba(0,0,0,0.23*1.5);
21
}
22
@if $level==4 {
23
box-shadow: 0 14px 28px rgba(0,0,0,0.25*1.5), 0 10px 10px rgba(0,0,0,0.22*1.5);
24
}
25
@if $level==5 {
26
box-shadow: 0 19px 38px rgba(0,0,0,0.30*1.5), 0 15px 12px rgba(0,0,0,0.22*1.5);
27
}
28
}
29
30
// entries
31
32
@mixin entry($t, $fc:$selected_bg_color) {
33
//
34
// Entries drawing function
35
//
36
// $t: entry type
37
// $fc: focus color
38
//
39
// possible $t values:
40
// normal, focus, insensitive
41
//
42
@if $t==normal {
43
background-color: rgba(0, 0, 0, 0.01);
44
border-color: transparent;
45
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $fill_color);
46
47
}
48
@if $t==focus {
49
border-color: transparent;
50
box-shadow: inset 0 -2px if($fc!=$selected_bg_color, $fc, $selected_bg_color);
51
}
52
@if $t==hover { }
53
@if $t==insensitive {
54
color: $insensitive_fg_color;
55
border-color: transparent;
56
box-shadow: inset 0 -1px if($fc!=$selected_bg_color, $fc, $insensitive_fill_color);
57
}
58
}
59
60
// buttons
61
62
@mixin button($t, $c:$bg_color, $tc:$fg_color) {
63
//
64
// Button drawing function
65
//
66
// $t: button type,
67
// $c: base button color for colored* types
68
// $tc: optional text color for colored* types
69
//
70
// possible $t values:
71
// normal, hover, active, insensitive, undecorated
72
//
73
@if $t==normal {
74
//
75
// normal button
76
//
77
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
78
background-color: $c;
79
border-color: transparent;
80
@include shadow(1);
81
text-shadow: none;
82
icon-shadow: none;
83
}
84
@if $t==focus {
85
//
86
// focused button
87
//
88
color: $tc;
89
text-shadow: none;
90
icon-shadow: none;
91
border-color: transparent;
92
box-shadow: 0 0 transparent;
93
// box-shadow: inset 0px 0px 0px 2px $fill_color;
94
}
95
96
@else if $t==hover {
97
//
98
// hovered button
99
//
100
color: if($tc!=$fg_color, $tc, $fg_color);
101
background-color: $c;
102
border-color: transparent;
103
@include shadow(2);
104
text-shadow: none;
105
icon-shadow: none;
106
107
}
108
@else if $t==active {
109
//
110
// pushed button
111
//
112
color: if($tc!=$fg_color, $tc, $fg_color);
113
background-color: mix($tc, $c, 20%);
114
border-color: transparent;
115
@include shadow(2);
116
text-shadow: none;
117
icon-shadow: none;
118
}
119
@else if $t==insensitive {
120
//
121
// insensitive button
122
//
123
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
124
background-color: if($c!=$bg_color, $c, $insensitive_fill_color);
125
border-color: transparent;
126
box-shadow: 0 0 transparent;
127
text-shadow: none;
128
icon-shadow: none;
129
}
130
@if $t==flat-normal {
131
//
132
// normal flat button
133
//
134
color: if($tc!=$fg_color, $tc, $secondary_fg_color);
135
background-color: transparent;
136
border-color: transparent;
137
box-shadow: 0 0 transparent;
138
text-shadow: none;
139
icon-shadow: none;
140
}
141
@if $t==flat-focus {
142
//
143
// focused flat button
144
//
145
color: $tc;
146
text-shadow: none;
147
icon-shadow: none;
148
box-shadow: 0 0 transparent;
149
// box-shadow: inset 0px 0px 0px 2px $fill_color;
150
}
151
152
@else if $t==flat-hover {
153
//
154
// hovered flat button
155
//
156
color: if($tc!=$fg_color, $tc, $fg_color);
157
background-color: if($c!=$bg_color, $c, $semi_fill_color);
158
border-color: transparent;
159
box-shadow: 0 0 transparent;
160
text-shadow: none;
161
icon-shadow: none;
162
163
}
164
@else if $t==flat-active {
165
//
166
// pushed flat button
167
//
168
color: if($tc!=$fg_color, $tc, $fg_color);
169
background-color: if($c!=$bg_color, $c, $fill_color);
170
border-color: transparent;
171
box-shadow: 0 0 transparent;
172
text-shadow: none;
173
icon-shadow: none;
174
}
175
@else if $t==flat-insensitive {
176
//
177
// insensitive flat button
178
//
179
color: if($tc!=$fg_color, $tc, $insensitive_secondary_fg_color);
180
background-color: transparent;
181
border-color: transparent;
182
box-shadow: 0 0 transparent;
183
text-shadow: none;
184
icon-shadow: none;
185
}
186
@else if $t==undecorated {
187
//
188
// reset
189
//
190
color: inherit;
191
background-color: transparent;
192
border-color: transparent;
193
box-shadow: 0 0 transparent;
194
text-shadow: none;
195
icon-shadow: none;
196
}
197
}
198
199