_overshoot.scss (3782B)
1 @mixin overshoot($position, $type: normal, $color: $selected_bg_color) { 2 $_small_gradient_length: 5%; 3 $_big_gradient_length: 100%; 4 5 $_position: center top; 6 $_small_gradient_size: 100% $_small_gradient_length; 7 $_big_gradient_size: 100% $_big_gradient_length; 8 9 @if $position == bottom { 10 $_position: center bottom; 11 $_linear_gradient_direction: to top; 12 } @else if $position == right { 13 $_position: right center; 14 $_small_gradient_size: $_small_gradient_length 100%; 15 $_big_gradient_size: $_big_gradient_length 100%; 16 } @else if $position == left { 17 $_position: left center; 18 $_small_gradient_size: $_small_gradient_length 100%; 19 $_big_gradient_size: $_big_gradient_length 100%; 20 } 21 22 $_small_gradient_color: $color; 23 $_big_gradient_color: $color; 24 25 $_small_gradient: -gtk-gradient(radial, 26 $_position, 0, 27 $_position, .5, 28 to(alpha($_small_gradient_color, .35)), 29 to(alpha($_small_gradient_color, .25))); 30 31 $_big_gradient: -gtk-gradient(radial, 32 $_position, 0, 33 $_position, .6, 34 from(alpha($_big_gradient_color, .2)), 35 to(alpha($_big_gradient_color, 0))); 36 37 @if $type == normal { 38 background-image: $_small_gradient, $_big_gradient; 39 background-size: $_small_gradient_size, $_big_gradient_size; 40 } @else if $type == backdrop { 41 background-image: $_small_gradient; 42 background-size: $_small_gradient_size; 43 } 44 45 background-repeat: no-repeat; 46 background-position: $_position; 47 48 background-color: transparent; // reset some properties to be sure to not inherit them somehow 49 border: 0; 50 box-shadow: none; 51 } 52 53 @mixin undershoot($position) { 54 $_undershoot_color_dark: alpha($black, .2); 55 $_undershoot_color_light: alpha($white, .2); 56 57 $_gradient_dir: left; 58 $_dash_bg_size: 10px 1px; 59 $_gradient_repeat: repeat-x; 60 $_bg_pos: center $position; 61 62 background-color: transparent; // shouldn't be needed, but better to be sure; 63 64 @if ($position == left) or ($position == right) { 65 $_gradient_dir: top; 66 $_dash_bg_size: 1px 10px; 67 $_gradient_repeat: repeat-y; 68 $_bg_pos: $position center; 69 } 70 71 background-image: linear-gradient(to $_gradient_dir, // this is the dashed line 72 $_undershoot_color_light 50%, 73 $_undershoot_color_dark 50%); 74 75 padding-#{$position}: 1px; 76 background-size: $_dash_bg_size; 77 background-repeat: $_gradient_repeat; 78 background-origin: content-box; 79 background-position: $_bg_pos; 80 } 81 82 // This is used by GtkScrolledWindow, when content is touch-dragged past boundaries. 83 // This draws a box on top of the content, the size changes programmatically. 84 .overshoot { 85 &.top { 86 @include overshoot(top); 87 88 &:backdrop { @include overshoot(top, backdrop); } 89 } 90 91 &.bottom { 92 @include overshoot(bottom); 93 94 &:backdrop { @include overshoot(bottom, backdrop); } 95 } 96 97 &.left { 98 @include overshoot(left); 99 100 &:backdrop { @include overshoot(left, backdrop); } 101 } 102 103 &.right { 104 @include overshoot(right); 105 106 &:backdrop { @include overshoot(right, backdrop); } 107 } 108 } 109 110 // Overflow indication, works similarly to the overshoot, the size if fixed tho. 111 .undershoot { 112 &.top { @include undershoot(top); } 113 114 &.bottom { @include undershoot(bottom); } 115 116 &.left { @include undershoot(left); } 117 118 &.right { @include undershoot(right); } 119 }