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    border-color: if($fc==$selected_bg_color,
47              $selected_borders_color,
48              darken($fc,35%));
49    box-shadow: inset 0 0 0 2px $fc;
50  }
51  @if $t==hover { }
52  @if $t==insensitive {
53    color: $insensitive_fg_color;
54    border-color: $insensitive_bg_color;
55    box-shadow: none;
56  }
57}
58
59// buttons
60
61@function draw_border_color ($c) {
62  //
63  // colored buttons want the border form the base color
64  //
65  @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
66}
67
68@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
69//
70// calculate the color of text shadows
71//
72// $tc is the text color
73// $bg is the background color
74//
75  $lbg: lightness($bg)/100%;
76  @if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
77  @else { @return rgba(0,0,0,1-$lbg*0.8); }
78}
79
80@function draw_button_hilight_color($c) {
81//
82// calculate the right top highlight color for buttons
83//
84// $c: base color;
85//
86  @if lightness($c)>90% { @return white; }
87  @else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
88  @else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
89  @else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
90  @else { @return rgba(255,255,255, 0.1); }
91}
92
93@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
94//
95// helper function for the text emboss effect
96//
97// $tc is the optional text color, not the shadow color
98//
99// TODO: this functions needs a way to deal with special cases
100//
101
102  $shadow: draw_text_shadow_color($tc, $bg);
103
104  @if lightness($tc)<50% {
105    text-shadow: 0 1px $shadow;
106    icon-shadow: 0 1px $shadow;
107  }
108  @else {
109    text-shadow: 0 -1px $shadow;
110    icon-shadow: 0 -1px $shadow;
111  }
112}
113
114@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
115//
116// Button drawing function
117//
118// $t:    button type,
119// $c:    base button color for colored* types
120// $tc:   optional text color for colored* types
121// $edge: set to none to not draw the bottom edge or specify a color to not
122//        use the default one
123// $shadow: set to none to not draw the drop shadow or specify a color to not
124//          use the default one
125//
126// possible $t values:
127// normal, hover, active, insensitive, insensitive-active,
128// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
129// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
130//
131
132  $hilight_color: draw_button_hilight_color($c);
133  $button_edge: if($edge == none, none, draw_widget_edge($edge));
134  $blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1)));
135  $button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow);
136
137  // normal button
138  @if $t==normal {
139    color: $tc;
140    background-color: lighten($c, 3%);
141    border-color: draw_border_color($c);
142    @include draw_shadows($button_shadow);
143    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
144    text-shadow: 0 1px $text_shadow_color;
145    icon-shadow: 0 1px $text_shadow_color;
146  }
147
148  // focused button
149  @if $t==focus {
150    color: $tc;
151    text-shadow: 0 1px $text_shadow_color;
152    icon-shadow: 0 1px $text_shadow_color;
153    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
154    //border-color: $selected_bg_color;
155  }
156
157  // hover button
158  @else if $t==hover {
159    color: $tc;
160    background-color: lighten($c, if($variant == 'light', 8%, 5%));
161    border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
162    @include draw_shadows($button_shadow);
163    text-shadow: 0 1px $text_shadow_color;
164    icon-shadow: 0 1px $text_shadow_color;
165  }
166
167  // active button
168  @else if $t==active {
169    color: $tc;
170    background-color: darken($c,3%);
171    border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
172    text-shadow: none;
173    icon-shadow: none;
174    box-shadow: none;
175  }
176
177  // insensitive button
178  @else if $t==insensitive {
179    color: $insensitive_fg_color;
180    border-color: $insensitive_borders_color;
181    background-color: $insensitive_bg_color;
182    box-shadow: none;
183    text-shadow: none;
184    icon-shadow: none;
185  }
186
187  // reset
188  @else if $t==undecorated {
189    border-color: transparent;
190    background-color: transparent;
191    background-image: none;
192    @include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge);
193    text-shadow: none;
194    icon-shadow: none;
195  }
196}
197
198// overview icons
199@mixin overview-icon($color) {
200  .overview-icon {
201    @extend %icon_tile;
202    color: $color;
203  }
204
205  &:hover,
206  &:selected {
207    .overview-icon {
208      background-color: transparentize($color, .9);
209    }
210  }
211
212  &:focus {
213    .overview-icon {
214      background-color: transparentize($color, .7);
215      // border-color: $selected_bg_color;
216    }
217  }
218
219  &:drop {
220    .overview-icon {
221      border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
222      background-color: transparentize($selected_bg_color, .8);
223    }
224  }
225
226  &:active,
227  &:checked {
228    .overview-icon {
229      background-color: transparentize(darken($osd_bg_color, 10%), .5);
230    }
231  }
232}
233