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 |
|
36 |
|
37 | margin-bottom: $box-shadow-offset;
|
38 |
|
39 |
|
40 | .rw-dropup > & {
|
41 | margin-bottom: 0;
|
42 | margin-top: $box-shadow-offset;
|
43 | }
|
44 | }
|
45 |
|
46 | .rw-popup {
|
47 | overflow: auto;
|
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 | }
|