UNPKG

2.26 kBSCSSView Raw
1@use './variables.scss' as *;
2
3$widget-offset: 2px !default;
4$max-height: 250px;
5$bg: $widget-bg !default;
6$border: $widget-border-color !default;
7$border-radius: $widget-border-radius !default;
8$box-shadow-offset: 1em !default;
9$box-shadow: 0 0.5em 1em rgba(#000, 0.175) !default;
10$box-shadow-up: 0 0.5em 1em rgba(#000, 0.175) !default !default;
11
12$zindex: 1005 !default;
13$zindex-focused: $zindex + 1 !default;
14
15@mixin Popup() {
16 .rw-popup-container {
17 position: absolute;
18 z-index: $zindex;
19 top: 100%;
20 left: -$box-shadow-offset;
21 right: -$box-shadow-offset;
22 padding: 0 $box-shadow-offset;
23
24 &.rw-dropup {
25 top: auto;
26 bottom: 100%;
27 }
28
29 .rw-state-focus & {
30 z-index: $zindex-focused;
31 }
32 }
33
34 .rw-slide-transition {
35 // the offsets allows for drop shadow to not be clipped by the container
36 // width: 100%;
37 margin-bottom: $box-shadow-offset;
38 // margin: 0 $box-shadow-offset;
39
40 .rw-dropup > & {
41 margin-bottom: 0;
42 margin-top: $box-shadow-offset;
43 }
44 }
45
46 .rw-popup {
47 overflow: auto; // this is needed for some reason to clip scrollbar corners
48 -webkit-overflow-scrolling: touch;
49 margin-top: $widget-offset;
50 border-radius: $border-radius;
51 box-shadow: $box-shadow;
52 border: $border 1px solid;
53 background-clip: $widget-background-clip;
54 background: $bg;
55
56 & .rw-list {
57 max-height: $max-height;
58 }
59
60 .rw-dropup & {
61 margin-top: 0;
62 margin-bottom: $widget-offset;
63 box-shadow: $box-shadow-up;
64 }
65 }
66
67 .rw-slide-transition {
68 transition: transform 130ms, opacity 100ms;
69 }
70
71 .rw-slide-transition-entering {
72 overflow: hidden;
73
74 & .rw-slide-transition {
75 transform: translateY(0);
76 opacity: 1;
77 transition-timing-function: ease-out;
78 }
79 }
80
81 .rw-slide-transition-exiting {
82 & .rw-slide-transition {
83 transition-timing-function: ease-in;
84 }
85 }
86
87 .rw-slide-transition-exiting,
88 .rw-slide-transition-exited {
89 overflow: hidden;
90
91 & .rw-slide-transition {
92 opacity: 0;
93 transform: translateY(-10%);
94 }
95
96 &.rw-dropup .rw-slide-transition {
97 opacity: 0;
98 transform: translateY(10%);
99 }
100 }
101
102 .rw-slide-transition-exited {
103 display: none;
104 }
105}