-
Notifications
You must be signed in to change notification settings - Fork 2k
/
_long-content-fade.scss
75 lines (68 loc) · 1.61 KB
/
_long-content-fade.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// ==========================================================================
// Long content fade mixin
//
// Creates a fading overlay to signify that the content is longer
// than the space allows.
//
// Note: To support CSS custom properties, any color that is passed in to
// the mixin needs to be escaped with the hex-to-rgb() function.
//
// Usage:
// @include long-content-fade();
// @include long-content-fade( $color: var( --color-sidebar-background-rgb ) );
// ==========================================================================
@mixin long-content-fade(
$direction: right,
$size: 20%,
$color: var( --color-surface-rgb ),
$edge: 0,
$z-index: false
) {
content: "";
display: block;
position: absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
@if $z-index {
z-index: $z-index;
}
@if $direction == "bottom" {
background: overflow-gradient($color, 90%, to top);
left: $edge;
right: $edge;
top: $edge;
bottom: calc(100% - $size);
width: auto;
}
@if $direction == "top" {
background: overflow-gradient($color, 90%, to bottom);
top: calc(100% - $size);
left: $edge;
right: $edge;
bottom: $edge;
width: auto;
}
@if $direction == "left" {
background: overflow-gradient($color, 90%, to left);
top: $edge;
left: $edge;
bottom: $edge;
right: auto;
width: $size;
height: auto;
}
@if $direction == "right" {
background: overflow-gradient($color);
top: $edge;
bottom: $edge;
right: $edge;
left: auto;
width: $size;
height: auto;
}
}