* Overshoot code update. (#382)
parent
9848d0f9a4
commit
f813182196
|
@ -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,11 +84,18 @@
|
||||||
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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 {
|
&.top {
|
||||||
@include overshoot(top);
|
@include overshoot(top);
|
||||||
|
|
||||||
|
@ -105,10 +119,10 @@ overshoot {
|
||||||
|
|
||||||
&:backdrop { @include overshoot(right, backdrop); }
|
&:backdrop { @include overshoot(right, backdrop); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
|
||||||
undershoot {
|
undershoot {
|
||||||
&.top { @include undershoot(top); }
|
&.top { @include undershoot(top); }
|
||||||
|
|
||||||
&.bottom { @include undershoot(bottom); }
|
&.bottom { @include undershoot(bottom); }
|
||||||
|
@ -116,4 +130,20 @@ undershoot {
|
||||||
&.left { @include undershoot(left); }
|
&.left { @include undershoot(left); }
|
||||||
|
|
||||||
&.right { @include undershoot(right); }
|
&.right { @include undershoot(right); }
|
||||||
|
}
|
||||||
|
|
||||||
|
junction { // the small square between two scrollbars
|
||||||
|
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;
|
||||||
|
|
||||||
|
&: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue