57 lines
1.5 KiB
SCSS
57 lines
1.5 KiB
SCSS
@mixin overshoot($p, $t:normal, $c:$warning_color) {
|
|
//
|
|
// overshoot
|
|
//
|
|
// $p: position
|
|
// $t: type
|
|
// $c: base color
|
|
//
|
|
// possible $p values:
|
|
// top, bottom, right, left
|
|
//
|
|
// possible $t values:
|
|
// normal, backdrop
|
|
//
|
|
|
|
$_small_gradient_length: 10%;
|
|
$_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);
|
|
|
|
|
|
|
|
$_small_gradient: radial-gradient( ellipse farthest-side at $p,
|
|
$_small_gradient_color 35%,
|
|
transparentize($_small_gradient_color, 1));
|
|
|
|
$_big_gradient: radial-gradient(ellipse at $p, //closest-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; //
|
|
}
|