UNPKG

5.33 kBCSSView Raw
1[data-rsbs-overlay] {
2 border-top-left-radius: 16px;
3 border-top-left-radius: var(--rsbs-overlay-rounded,16px);
4 border-top-right-radius: 16px;
5 border-top-right-radius: var(--rsbs-overlay-rounded,16px);
6 display: flex;
7 background: #fff;
8 background: var(--rsbs-bg,#fff);
9 flex-direction: column;
10 height: 0px;
11 height: var(--rsbs-overlay-h,0px);
12 transform: translate3d(0, 0px, 0);
13 transform: translate3d(0, var(--rsbs-overlay-translate-y,0px), 0);
14 will-change: height;
15}
16
17[data-rsbs-overlay]:focus {
18 outline: none;
19}
20
21[data-rsbs-is-blocking='false'] [data-rsbs-overlay] {
22 box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),
23 0 -1px 0 rgba(38, 89, 115, 0.05);
24}
25
26[data-rsbs-overlay],
27[data-rsbs-root]:after {
28 max-width: auto;
29 max-width: var(--rsbs-max-w,auto);
30 margin-left: env(safe-area-inset-left);
31 margin-left: var(--rsbs-ml,env(safe-area-inset-left));
32 margin-right: env(safe-area-inset-right);
33 margin-right: var(--rsbs-mr,env(safe-area-inset-right));
34}
35
36[data-rsbs-overlay],
37[data-rsbs-backdrop],
38[data-rsbs-root]:after {
39 z-index: 3;
40 -ms-scroll-chaining: none;
41 overscroll-behavior: none;
42 touch-action: none;
43 position: fixed;
44 right: 0;
45 bottom: 0;
46 left: 0;
47 -webkit-user-select: none;
48 -moz-user-select: none;
49 -ms-user-select: none;
50 user-select: none;
51 -webkit-tap-highlight-color: transparent;
52 -webkit-touch-callout: none;
53}
54
55[data-rsbs-backdrop] {
56 top: -60px;
57 bottom: -60px;
58 background-color: rgba(0, 0, 0, 0.6);
59 background-color: var(--rsbs-backdrop-bg,rgba(0, 0, 0, 0.6));
60 will-change: opacity;
61 cursor: pointer;
62 opacity: 1;
63}
64
65[data-rsbs-is-dismissable='false'] [data-rsbs-backdrop] {
66 cursor: ns-resize;
67}
68
69[data-rsbs-root]:after {
70 content: '';
71 pointer-events: none;
72 background: #fff;
73 background: var(--rsbs-bg,#fff);
74 height: 1px;
75 transform-origin: bottom;
76 transform: scale3d(1, 0, 1);
77 transform: scale3d(1, var(--rsbs-antigap-scale-y,0), 1);
78 will-change: transform;
79}
80
81[data-rsbs-footer],
82[data-rsbs-header] {
83 flex-shrink: 0;
84 cursor: ns-resize;
85 padding: 16px;
86}
87
88[data-rsbs-header] {
89 text-align: center;
90 -webkit-user-select: none;
91 -moz-user-select: none;
92 -ms-user-select: none;
93 user-select: none;
94 box-shadow: 0 1px 0
95 rgba(46, 59, 66, calc(1 * 0.125));
96 box-shadow: 0 1px 0
97 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));
98 z-index: 1;
99 padding-top: calc(20px + env(safe-area-inset-top));
100 padding-bottom: 8px;
101}
102
103[data-rsbs-header]:before {
104 position: absolute;
105 content: '';
106 display: block;
107 width: 36px;
108 height: 4px;
109 top: calc(8px + env(safe-area-inset-top));
110 left: 50%;
111 transform: translateX(-50%);
112 border-radius: 2px;
113 background-color: hsla(0, 0%, 0%, 0.14);
114 background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14));
115}
116
117@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
118 [data-rsbs-header]:before {
119 transform: translateX(-50%) scaleY(0.75);
120 }
121}
122
123[data-rsbs-has-header='false'] [data-rsbs-header] {
124 box-shadow: none;
125 padding-top: calc(12px + env(safe-area-inset-top));
126}
127
128[data-rsbs-scroll] {
129 flex-shrink: 1;
130 flex-grow: 1;
131 -webkit-tap-highlight-color: revert;
132 -webkit-touch-callout: revert;
133 -webkit-user-select: auto;
134 -ms-user-select: auto;
135 -moz-user-select: auto;
136 user-select: auto;
137 overflow: auto;
138 -ms-scroll-chaining: none;
139 overscroll-behavior: contain;
140 -webkit-overflow-scrolling: touch;
141}
142
143[data-rsbs-scroll]:focus {
144 outline: none;
145}
146
147[data-rsbs-has-footer='false'] [data-rsbs-content] {
148 padding-bottom: env(safe-area-inset-bottom);
149}
150
151[data-rsbs-content] {
152 /* The overflow hidden is to ensure any margin on child nodes are included when the resize observer is measuring the height */
153 overflow: hidden;
154}
155
156[data-rsbs-footer] {
157 box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(1 * 0.125)),
158 0 2px 0 #fff;
159 box-shadow: 0 -1px 0 rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125)),
160 0 2px 0 var(--rsbs-bg,#fff);
161 overflow: hidden;
162 z-index: 1;
163 padding-bottom: calc(16px + env(safe-area-inset-bottom));
164}
165
166[data-rsbs-is-dismissable='true'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='true'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-header] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-scroll] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-footer] > *, [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-footer] > * {
167 opacity: 1;
168 opacity: var(--rsbs-content-opacity,1);
169 }
170
171[data-rsbs-is-dismissable='true'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='opening'] [data-rsbs-backdrop], [data-rsbs-is-dismissable='false'][data-rsbs-state='closing'] [data-rsbs-backdrop] {
172 opacity: 1;
173 opacity: var(--rsbs-backdrop-opacity,1);
174 }
175
176[data-rsbs-state='closed'],
177[data-rsbs-state='closing'] {
178 /* Allows interactions on the rest of the page before the close transition is finished */
179 pointer-events: none;
180}