@mixin overshoot($p, $t:normal, $c:$selected_bg_color) { // // overshoot // // $p: position // $t: type // $c: base color // // possible $p values: // top, bottom, right, left // // possible $t values: // normal, backdrop // $_small_gradient_length: 3%; $_big_gradient_length: 50%; $_small_gradient_size: 100% $_small_gradient_length; $_big_gradient_size: 100% $_big_gradient_length; @if $p==right or $p==left { $_small_gradient_size: $_small_gradient_length 100%; $_big_gradient_size: $_big_gradient_length 100%; } $_small_gradient_color: $c; $_big_gradient_color: transparentize($c, 0.93); @if $c==$fg_color { $_small_gradient_color: darken($borders_color, 10%); $_big_gradient_color: transparentize($fg_color, 0.93); @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } } $_small_gradient: radial-gradient(farthest-side at $p, $_small_gradient_color 85%, transparentize($_small_gradient_color, 1)); $_big_gradient: radial-gradient(farthest-side at $p, $_big_gradient_color, 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: $p; background-color: transparent; // reset some properties to be sure to not inherit them somehow border: none; // box-shadow: none; // }