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