numix-gtk-theme/gtk-3.0/scss/widgets/_overshoot.scss

120 lines
3.7 KiB
SCSS
Raw Normal View History

2015-05-31 16:20:35 +00:00
@mixin overshoot($position, $type: normal, $color: $selected_bg_color) {
$_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 $position == bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
2015-08-06 23:10:35 +00:00
} @else if $position == right {
2015-05-31 16:20:35 +00:00
$_position: right center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
2015-08-06 23:10:35 +00:00
} @else if $position == left {
2015-05-31 16:20:35 +00:00
$_position: left center;
$_small_gradient_size: $_small_gradient_length 100%;
$_big_gradient_size: $_big_gradient_length 100%;
}
$_small_gradient_color: $color;
$_big_gradient_color: $color;
$_small_gradient: -gtk-gradient(radial,
$_position, 0,
2015-08-06 23:10:35 +00:00
$_position, .5,
2015-05-31 16:20:35 +00:00
to(alpha($_small_gradient_color, .35)),
to(alpha($_small_gradient_color, .25)));
$_big_gradient: -gtk-gradient(radial,
$_position, 0,
2015-08-06 23:10:35 +00:00
$_position, .6,
2015-05-31 16:20:35 +00:00
from(alpha($_big_gradient_color, .2)),
to(alpha($_big_gradient_color, 0)));
@if $type == normal {
background-image: $_small_gradient, $_big_gradient;
background-size: $_small_gradient_size, $_big_gradient_size;
} @else if $type == 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
2015-08-06 23:10:35 +00:00
border: 0;
2015-05-31 16:20:35 +00:00
box-shadow: none;
}
@mixin undershoot($position) {
2015-08-06 23:10:35 +00:00
$_undershoot_color_dark: alpha($black, .2);
$_undershoot_color_light: alpha($white, .2);
2015-05-31 16:20:35 +00:00
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;
$_gradient_repeat: repeat-x;
$_bg_pos: center $position;
background-color: transparent; // shouldn't be needed, but better to be sure;
@if ($position == left) or ($position == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_gradient_repeat: repeat-y;
$_bg_pos: $position center;
}
/*background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
2015-05-31 16:20:35 +00:00
$_undershoot_color_light 50%,
$_undershoot_color_dark 50%);*/
2015-05-31 16:20:35 +00:00
padding-#{$position}: 1px;
background-size: $_dash_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
}
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
// This draws a box on top of the content, the size changes programmatically.
.overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
.undershoot {
&.top { @include undershoot(top); }
&.bottom { @include undershoot(bottom); }
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
}