1// Drawing mixins
2
3// generic drawing of more complex things
4
5@function draw_widget_edge($c:$borders_edge) {
6// outer highlight "used" on most widgets
7  @return 0 1px $c;
8}
9
10// provide font size in rem, with px fallback
11@mixin fontsize($size: 24, $base: 16) {
12  font-size: round($size) + pt;
13  //font-size: ($size / $base) * 1rem;
14}
15
16@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
17//
18// Helper function to stack up to 4 box-shadows;
19//
20  @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
21  @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
22  @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
23  @else { box-shadow: $shadow1; }
24}
25
26// entries
27
28@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
29//
30// Entries drawing function
31//
32// $t: entry type
33// $fc: focus color
34// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
35//
36// possible $t values:
37// normal, focus, insensitive
38//
39
40  @if $t==normal {
41    background-color: $base_color;
42    border-color: $borders_color;
43
44  }
45  @if $t==focus {
46    background-color: $base_color;
47    border-color: $selected_borders_color;
48    box-shadow: none;
49  }
50  @if $t==hover { }
51  @if $t==insensitive {
52    color: $insensitive_fg_color;
53    border-color: $insensitive_bg_color;
54    box-shadow: none;
55  }
56}
57
58// buttons
59
60@function draw_border_color ($c) {
61  //
62  // colored buttons want the border form the base color
63  //
64  @return if($variant == 'light', darken($c, 18%), darken($c, 6%));
65}
66
67@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
68//
69// calculate the color of text shadows
70//
71// $tc is the text color
72// $bg is the background color
73//
74  $lbg: lightness($bg)/100%;
75  @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
76  @else { @return rgba(0,0,0,1-$lbg*0.8); }
77}
78
79@function draw_button_hilight_color($c) {
80//
81// calculate the right top highlight color for buttons
82//
83// $c: base color;
84//
85  @if lightness($c)>90% { @return white; }
86  @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
87  @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
88  @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
89  @else { @return rgba(255,255,255, 0.1); }
90}
91
92@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
93//
94// helper function for the text emboss effect
95//
96// $tc is the optional text color, not the shadow color
97//
98// TODO: this functions needs a way to deal with special cases
99//
100
101  $shadow: draw_text_shadow_color($tc, $bg);
102
103  @if lightness($tc)<50% {
104    text-shadow: 0 1px $shadow;
105    icon-shadow: 0 1px $shadow;
106  }
107  @else {
108    text-shadow: 0 -1px $shadow;
109    icon-shadow: 0 -1px $shadow;
110  }
111}
112
113@mixin button($t, $c:$base_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
114//
115// Button drawing function
116//
117// $t:    button type,
118// $c:    base button color for colored* types
119// $tc:   optional text color for colored* types
120// $edge: set to none to not draw the bottom edge or specify a color to not
121//        use the default one
122// $shadow: set to none to not draw the drop shadow or specify a color to not
123//          use the default one
124//
125// possible $t values:
126// normal, hover, active, insensitive, insensitive-active,
127// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
128// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
129//
130
131  $hilight_color: draw_button_hilight_color($c);
132  $button_edge: if($edge == none, none, draw_widget_edge($edge));
133  $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
134  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
135
136  // normal button
137  @if $t==normal {
138    color: $tc;
139    background-color: $c;
140    border-color: $borders_color;
141    // @include draw_shadows($button_shadow);
142    box-shadow: none;
143    text-shadow: 0 1px $text_shadow_color;
144    icon-shadow: 0 1px $text_shadow_color;
145  }
146
147  // focused button
148  @if $t==focus {
149    color: $tc;
150    text-shadow: 0 1px $text_shadow_color;
151    icon-shadow: 0 1px $text_shadow_color;
152    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
153    //border-color: $selected_bg_color;
154  }
155
156  // hover button
157  @else if $t==hover {
158    color: $tc;
159    background-color: mix($tc, $c, if($variant == 'light', 10%, 6%));
160    border-color: $borders_color;
161    box-shadow: none;
162    text-shadow: 0 1px $text_shadow_color;
163    icon-shadow: 0 1px $text_shadow_color;
164  }
165
166  // active button
167  @else if $t==active {
168    color: $tc;
169    background-color: mix($tc, $c, if($variant == 'light', 15%, 10%));
170    border-color: $borders_color;
171    text-shadow: none;
172    icon-shadow: none;
173    box-shadow: none;
174  }
175
176  // insensitive button
177  @else if $t==insensitive {
178    color: $insensitive_fg_color;
179    border-color: $insensitive_borders_color;
180    background-color: $insensitive_bg_color;
181    box-shadow: none;
182    text-shadow: none;
183    icon-shadow: none;
184  }
185
186  // normal button
187  @if $t==flat {
188    color: $tc;
189    background-color: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.03));
190    border-color: transparent;
191    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
192    text-shadow: 0 1px $text_shadow_color;
193    icon-shadow: 0 1px $text_shadow_color;
194  }
195
196  // focused button
197  @if $t==flat-focus {
198    color: $tc;
199    text-shadow: 0 1px $text_shadow_color;
200    icon-shadow: 0 1px $text_shadow_color;
201    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
202    //border-color: $selected_bg_color;
203  }
204
205  // hover button
206  @else if $t==flat-hover {
207    color: $tc;
208    background-color: rgba($tc, 0.08);
209    border-color: transparent;
210    text-shadow: 0 1px $text_shadow_color;
211    icon-shadow: 0 1px $text_shadow_color;
212  }
213
214  // active button
215  @else if $t==flat-active {
216    color: $tc;
217    background-color: rgba($tc, 0.15);
218    border-color: transparent;
219    text-shadow: none;
220    icon-shadow: none;
221    box-shadow: none;
222  }
223
224  // insensitive button
225  @else if $t==flat-insensitive {
226    color: $insensitive_fg_color;
227    border-color: transparent;
228    background-color: rgba($tc, 0.01);
229    box-shadow: none;
230    text-shadow: none;
231    icon-shadow: none;
232  }
233
234  // reset
235  @else if $t==undecorated {
236    border-color: transparent;
237    background-color: transparent;
238    background-image: none;
239    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
240    text-shadow: none;
241    icon-shadow: none;
242  }
243}
244
245// overview icons
246@mixin overview-icon($color) {
247  .overview-icon {
248    @extend %icon_tile;
249    color: $color;
250  }
251
252  &:hover,
253  &:selected {
254    .overview-icon {
255      background-color: transparentize($color, .9);
256    }
257  }
258
259  &:focus {
260    .overview-icon {
261      background-color: transparentize($color, .7);
262      // border-color: $selected_bg_color;
263    }
264  }
265
266  &:drop {
267    .overview-icon {
268      border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
269      background-color: transparentize($selected_bg_color, .8);
270    }
271  }
272
273  &:active,
274  &:checked {
275    .overview-icon {
276      background-color: transparentize($color, .75);
277    }
278  }
279}
280