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