diff options
Diffstat (limited to 'Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss')
| -rw-r--r-- | Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss b/Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss new file mode 100644 index 0000000..a46fc07 --- /dev/null +++ b/Redcore-nighttime/gtk-3.20/scss/widgets/_overshoot.scss @@ -0,0 +1,150 @@ +@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; + } @else if $position == right { + $_position: right center; + $_small_gradient_size: $_small_gradient_length 100%; + $_big_gradient_size: $_big_gradient_length 100%; + } @else if $position == left { + $_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; + + @if $color == $fg_color { + $_small_gradient_color: shade($borders_color, .9); + $_big_gradient_color: $fg_color; + + @if $type == backdrop { $_small_gradient_color: $backdrop_borders_color; } + } + + $_small_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .5, + to(alpha($_small_gradient_color, .35)), + to(alpha($_small_gradient_color, .25))); + + $_big_gradient: -gtk-gradient(radial, + $_position, 0, + $_position, .6, + 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 + border: 0; + box-shadow: none; +} + +@mixin undershoot($position) { + $_undershoot_color_dark: alpha($black, .2); + $_undershoot_color_light: alpha($white, .2); + + $_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; + } + + // Disable + /*background-image: linear-gradient(to $_gradient_dir, // this is the dashed line + $_undershoot_color_light 50%, + $_undershoot_color_dark 50%);*/ + + padding-#{$position}: 1px; + background-size: $_dash_bg_size; + background-repeat: $_gradient_repeat; + background-origin: content-box; + background-position: $_bg_pos; + border: 0; + box-shadow: none; +} + +scrolledwindow { + viewport.frame { // avoid double borders when viewport inside scrolled window + 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 { + @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); } + } + + 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; + } + } +} |