UNPKG

5.32 kBCSSView Raw
1/*
2 * Remodal - v1.0.2
3 * Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
4 * http://vodkabears.github.io/remodal/
5 *
6 * Made by Ilya Makarov
7 * Under MIT License
8 */
9
10/* ==========================================================================
11 Remodal's default mobile first theme
12 ========================================================================== */
13
14/* Default theme styles for the background */
15
16.remodal-bg.remodal-is-opening,
17.remodal-bg.remodal-is-opened {
18 -webkit-filter: blur(3px);
19 filter: blur(3px);
20}
21
22/* Default theme styles of the overlay */
23
24.remodal-overlay {
25 background: rgba(43, 46, 56, 0.9);
26}
27
28.remodal-overlay.remodal-is-opening,
29.remodal-overlay.remodal-is-closing {
30 -webkit-animation-fill-mode: forwards;
31 animation-fill-mode: forwards;
32}
33
34.remodal-overlay.remodal-is-opening {
35 -webkit-animation: remodal-overlay-opening-keyframes 0.3s;
36 animation: remodal-overlay-opening-keyframes 0.3s;
37}
38
39.remodal-overlay.remodal-is-closing {
40 -webkit-animation: remodal-overlay-closing-keyframes 0.3s;
41 animation: remodal-overlay-closing-keyframes 0.3s;
42}
43
44/* Default theme styles of the wrapper */
45
46.remodal-wrapper {
47 padding: 10px 10px 0;
48}
49
50/* Default theme styles of the modal dialog */
51
52.remodal {
53 -webkit-box-sizing: border-box;
54 box-sizing: border-box;
55 width: 100%;
56 margin-bottom: 10px;
57 padding: 35px;
58
59 -webkit-transform: translate3d(0, 0, 0);
60 transform: translate3d(0, 0, 0);
61
62 color: #2b2e38;
63 background: #fff;
64}
65
66.remodal.remodal-is-opening,
67.remodal.remodal-is-closing {
68 -webkit-animation-fill-mode: forwards;
69 animation-fill-mode: forwards;
70}
71
72.remodal.remodal-is-opening {
73 -webkit-animation: remodal-opening-keyframes 0.3s;
74 animation: remodal-opening-keyframes 0.3s;
75}
76
77.remodal.remodal-is-closing {
78 -webkit-animation: remodal-closing-keyframes 0.3s;
79 animation: remodal-closing-keyframes 0.3s;
80}
81
82/* Vertical align of the modal dialog */
83
84.remodal,
85.remodal-wrapper:after {
86 vertical-align: middle;
87}
88
89/* Close button */
90
91.remodal-close {
92 position: absolute;
93 top: 0;
94 left: 0;
95
96 display: block;
97 overflow: visible;
98
99 width: 35px;
100 height: 35px;
101 margin: 0;
102 padding: 0;
103
104 cursor: pointer;
105 -webkit-transition: color 0.2s;
106 transition: color 0.2s;
107 text-decoration: none;
108
109 color: #95979c;
110 border: 0;
111 outline: 0;
112 background: transparent;
113}
114
115.remodal-close:hover {
116 color: #2b2e38;
117}
118
119.remodal-close:before {
120 font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
121 font-size: 25px;
122 line-height: 35px;
123
124 position: absolute;
125 top: 0;
126 left: 0;
127
128 display: block;
129
130 width: 35px;
131
132 content: "\00d7";
133 text-align: center;
134}
135
136/* Dialog buttons */
137
138.remodal-confirm,
139.remodal-cancel {
140 font: inherit;
141
142 display: inline-block;
143 overflow: visible;
144
145 min-width: 110px;
146 margin: 0;
147 padding: 12px 0;
148
149 cursor: pointer;
150 -webkit-transition: background 0.2s;
151 transition: background 0.2s;
152 text-align: center;
153 vertical-align: middle;
154 text-decoration: none;
155
156 border: 0;
157 outline: 0;
158}
159
160.remodal-confirm {
161 color: #fff;
162 background: #81c784;
163}
164
165.remodal-confirm:hover {
166 background: #66bb6a;
167}
168
169.remodal-cancel {
170 color: #fff;
171 background: #e57373;
172}
173
174.remodal-cancel:hover {
175 background: #ef5350;
176}
177
178/* Remove inner padding and border in Firefox 4+ for the button tag. */
179
180.remodal-confirm::-moz-focus-inner,
181.remodal-cancel::-moz-focus-inner {
182 padding: 0;
183
184 border: 0;
185}
186
187/* Keyframes
188 ========================================================================== */
189
190@-webkit-keyframes remodal-opening-keyframes {
191 from {
192 -webkit-transform: scale(1.05);
193 transform: scale(1.05);
194
195 opacity: 0;
196 }
197 to {
198 -webkit-transform: none;
199 transform: none;
200
201 opacity: 1;
202 }
203}
204
205@keyframes remodal-opening-keyframes {
206 from {
207 -webkit-transform: scale(1.05);
208 transform: scale(1.05);
209
210 opacity: 0;
211 }
212 to {
213 -webkit-transform: none;
214 transform: none;
215
216 opacity: 1;
217 }
218}
219
220@-webkit-keyframes remodal-closing-keyframes {
221 from {
222 -webkit-transform: scale(1);
223 transform: scale(1);
224
225 opacity: 1;
226 }
227 to {
228 -webkit-transform: scale(0.95);
229 transform: scale(0.95);
230
231 opacity: 0;
232 }
233}
234
235@keyframes remodal-closing-keyframes {
236 from {
237 -webkit-transform: scale(1);
238 transform: scale(1);
239
240 opacity: 1;
241 }
242 to {
243 -webkit-transform: scale(0.95);
244 transform: scale(0.95);
245
246 opacity: 0;
247 }
248}
249
250@-webkit-keyframes remodal-overlay-opening-keyframes {
251 from {
252 opacity: 0;
253 }
254 to {
255 opacity: 1;
256 }
257}
258
259@keyframes remodal-overlay-opening-keyframes {
260 from {
261 opacity: 0;
262 }
263 to {
264 opacity: 1;
265 }
266}
267
268@-webkit-keyframes remodal-overlay-closing-keyframes {
269 from {
270 opacity: 1;
271 }
272 to {
273 opacity: 0;
274 }
275}
276
277@keyframes remodal-overlay-closing-keyframes {
278 from {
279 opacity: 1;
280 }
281 to {
282 opacity: 0;
283 }
284}
285
286/* Media queries
287 ========================================================================== */
288
289@media only screen and (min-width: 641px) {
290 .remodal {
291 max-width: 700px;
292 }
293}
294
295/* IE8
296 ========================================================================== */
297
298.lt-ie9 .remodal-overlay {
299 background: #2b2e38;
300}
301
302.lt-ie9 .remodal {
303 width: 700px;
304}