// Drawing mixins // generic drawing of more complex things @function _widget_edge($c:$borders_edge) { // outer highlight "used" on most widgets @return 0 1px $c; } @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { // // Helper function to stack up to 4 box-shadows; // @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } @else { box-shadow: $shadow1; } } // entries @function entry_focus_border($fc) { @return $fc; } @function entry_focus_glow($fc) { $_focus_glow_color: transparentize($fc,0.85); @return inset 0 0 0 1px $_focus_glow_color; } @function entry_gradient($c) { @return linear-gradient(to bottom, darken($c,3%), $c 90%); } @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { // // Entries drawing function // // $t: entry type // $fc: focus color // $edge:none set to true not to draw the bottom edge hilight // // possible $t values: // normal, focus, insensitive, backdrop, backdrop-insensitive; // background-color: transparent; border-style: solid; border-width: 1px; background-image: linear-gradient(to bottom, darken($base_color,3%), $base_color 90%); $_entry_edge: none; @if $t==normal { border-color: $borders_color; @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), $_entry_edge); } @if $t==focus { border-color: $fc; @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%), inset 0 0 2px 1px mix($fc,$base_color,20%), $_entry_edge); } @if $t==insensitive { color: $insensitive_fg_color; border-color: $borders_color; background-image: linear-gradient(to bottom, $insensitive_bg_color); @include _shadows($_entry_edge); } @if $t==backdrop { color: $backdrop_fg_color; background-image: linear-gradient(to bottom, $backdrop_base_color); box-shadow: 0 1px transparentize(white,1); } @if $t==backdrop-insensitive { color: $insensitive_fg_color; background-image: linear-gradient(to bottom, $backdrop_bg_color); box-shadow: 0 1px transparentize(white,1); } } // buttons @mixin _button_border_color ($c) { border-color: darken($c,25%); } // colored buttons want the border form the base color @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect // // $tc is the optional text color, not the shadow color // // TODO: this functions needs a way to deal with special cases // $_dark: black; $_bright: white; @if lightness($tc) < 50% { text-shadow: 0 1px $_bright; icon-shadow: 0 1px $_bright; } @else { text-shadow: 0 -1px $_dark; icon-shadow: 0 -1px $_dark; } } @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_color) { // // Button drawing function // // $t: button type, // $c: base button color for colored* types // $tc: optional text color for colored* types // $noedge:none set to true not to draw the bottom edge hilight // // possible $t values: // normal, hover, active, insensitive, insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active // border-width: 2px; border-style: solid; $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons @if $t==normal { // // normal button // color: $tc; background-image: none; background-color: $c; @if $c!=$bg_color { @include _button_border_color($c); } @else { border-color: $borders_color; } } @else if $t==hover { // // hovered button // color: $tc; //fg_color background-color: $c; @if $c!=$bg_color { @include _button_border_color($c); } @else { border-color: $borders_color; } background-image: none; } @else if $t==active { // // pushed button // background-image: none; color: invert($tc); background-color: invert($c); @if $c!=$bg_color { @include _button_border_color($c); } @else { border-color: $borders_color; } } @else if $t==insensitive { // // insensitive button // color: $insensitive_fg_color; background-color: $insensitive_bg_color; border-color: $insensitive_borders_color; background-image: none; text-shadow: none; icon-shadow: none; } @else if $t==insensitive-active { // // insensitive pushed button // color: $insensitive_fg_color; border-color: $insensitive_borders_color; background-image: none; background-color: $insensitive_bg_color; } @else if $t==backdrop { // // backdrop button // color: if($c!=$bg_color, $tc, $backdrop_fg_color); background-color: if($c!=$bg_color, $c, $backdrop_bg_color); border-color: if($c!=$bg_color, $c, $backdrop_borders_color); background-image: none; text-shadow: none; icon-shadow: none; } @else if $t==backdrop-active { // // backdrop pushed button // color: invert($backdrop_fg_color); background-color: $backdrop_borders_color; border-color: $backdrop_borders_color; background-image: none; } @else if $t==backdrop-insensitive { // // backdrop insensitive button // color: $insensitive_fg_color; background-color: $insensitive_bg_color; border-color: $backdrop_borders_color; background-image: none; } @else if $t==backdrop-insensitive-active { // // backdrop insensitive pushed button // color: $insensitive_fg_color; border-color: $backdrop_borders_color; background-image: none; background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%); } @else if $t==osd { // // normal osd button // color: $osd_fg_color; background-image: none; background-color: $osd_bg_color; border-color: $osd_borders_color; box-shadow: none; } @else if $t==osd-hover { // // active osd button // color: $osd_fg_color; background-color: lighten($osd_bg_color,30%); border-color: $osd_borders_color; box-shadow: none; } @else if $t==osd-active { // // active osd button // color: $osd_bg_color; background-color: $osd_fg_color; border-color: $osd_borders_color; box-shadow: none; } @else if $t==osd-insensitive { // // insensitive osd button // border-color: $osd_borders_color; color: $insensitive_fg_color; } } @mixin overshoot($p, $t:normal, $c:$fg_color) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 5%; $_big_gradient_length: 100%; $_position: center top; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==bottom { $_position: center bottom; $_linear_gradient_direction: to top; } @else if $p==right { $_position: right center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } @else if $p==left { $_position: left center; $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: $c; @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 50%); $_big_gradient_color: $fg_color; @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } $_small_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.5, to($_small_gradient_color), to(transparentize($_small_gradient_color, 1))); $_big_gradient: -gtk-gradient(radial, $_position, 0, $_position, 0.6, from(transparentize($_big_gradient_color, 0.5)), to(transparentize($_big_gradient_color, 1))); @if $t==normal { background-image: $_small_gradient, $_big_gradient; background-size: $_small_gradient_size, $_big_gradient_size; } @else if $t==backdrop { background-image: $_small_gradient; background-size: $_small_gradient_size; } background-repeat: no-repeat; background-position: $_position; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // } @mixin undershoot($p) { // // undershoot // // $p: position // // possible $p values: // top, bottom, right, left // $_undershoot_color_dark: transparentize(black, 0.8); $_undershoot_color_light: transparentize(white, 0.8); $_gradient_dir: left; $_dash_bg_size: 10px 1px; $_gradient_repeat: repeat-x; $_bg_pos: center $p; background-color: transparent; // shouldn't be needed, but better to be sure; @if ($p == left) or ($p == right) { $_gradient_dir: top; $_dash_bg_size: 1px 10px; $_gradient_repeat: repeat-y; $_bg_pos: $p center; } background-image: linear-gradient(to $_gradient_dir, // this is the dashed line $_undershoot_color_light 50%, $_undershoot_color_dark 50%); padding-#{$p}: 1px; background-size: $_dash_bg_size; background-repeat: $_gradient_repeat; background-origin: content-box; background-position: $_bg_pos; }