* Overshoot code update. (#382)

pull/394/head
Csaba Jakosa 2016-04-28 09:17:28 +02:00 committed by Dustin Falgout
parent 9848d0f9a4
commit f813182196
1 changed files with 57 additions and 27 deletions

View File

@ -22,6 +22,13 @@
$_small_gradient_color: $color; $_small_gradient_color: $color;
$_big_gradient_color: $color; $_big_gradient_color: $color;
@if $color == $fg_color {
$_small_gradient_color: darken($borders_color, 10%);
$_big_gradient_color: $fg_color;
@if $t == backdrop { $_small_gradient_color: $backdrop_borders_color; }
}
$_small_gradient: -gtk-gradient(radial, $_small_gradient: -gtk-gradient(radial,
$_position, 0, $_position, 0,
$_position, .5, $_position, .5,
@ -77,43 +84,66 @@
background-repeat: $_gradient_repeat; background-repeat: $_gradient_repeat;
background-origin: content-box; background-origin: content-box;
background-position: $_bg_pos; background-position: $_bg_pos;
border: 0;
box-shadow: none;
} }
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. scrolledwindow {
// This draws a box on top of the content, the size changes programmatically. viewport.frame { // avoid double borders when viewport inside scrolled window
overshoot { border-style: none;
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
} }
&.bottom { // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
@include overshoot(bottom); // This draws a box on top of the content, the size changes programmatically.
overshoot {
&.top {
@include overshoot(top);
&:backdrop { @include overshoot(bottom, backdrop); } &: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); }
}
} }
&.left { // Overflow indication, works similarly to the overshoot, the size if fixed tho.
@include overshoot(left); undershoot {
&.top { @include undershoot(top); }
&:backdrop { @include overshoot(left, backdrop); } &.bottom { @include undershoot(bottom); }
&.left { @include undershoot(left); }
&.right { @include undershoot(right); }
} }
&.right { junction { // the small square between two scrollbars
@include overshoot(right); border-color: transparent;
// the border image is used to add the missing dot between the borders, details, details, details...
border-image: linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
background-color: $scrollbar_bg_color;
&:backdrop { @include overshoot(right, backdrop); } &:dir(rtl) { border-image-slice: 0 1 0 0; }
&:backdrop {
border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
background-color: $backdrop_scrollbar_bg_color;
transition: 200ms ease-out;
}
} }
} }
// 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); }
}