Project

General

Profile

1
// Name:            Modal
2
// Description:     Component to create modal dialogs
3
//
4
// Component:       `uk-modal`
5
//
6
// Sub-objects:     `uk-modal-page`
7
//                  `uk-modal-dialog`
8
//                  `uk-modal-header`
9
//                  `uk-modal-body`
10
//                  `uk-modal-footer`
11
//                  `uk-modal-title`
12
//                  `uk-modal-close`
13
//                  `uk-modal-caption`
14
//
15
// Adopted:         `uk-modal-close-default`
16
//                  `uk-modal-close-outside`
17
//                  `uk-modal-close-full`
18
//
19
// Modifiers:       `uk-modal-container`
20
//                  `uk-modal-full`
21
//                  `uk-modal-lightbox`
22
//
23
// States:          `uk-open`
24
//
25
// ========================================================================
26

    
27

    
28
// Variables
29
// ========================================================================
30

    
31
@modal-z-index:                                 @global-z-index + 10;
32
@modal-background:                              rgba(0,0,0,0.6);
33

    
34
@modal-padding-horizontal:                      15px;
35
@modal-padding-horizontal-s:                    @global-gutter;
36
@modal-padding-horizontal-m:                    @global-medium-gutter;
37

    
38
@modal-dialog-margin-vertical:                  50px;
39
@modal-dialog-margin-vertical-xs:               15px;
40
@modal-dialog-margin-horizontal:                @modal-dialog-margin-vertical-xs;
41
@modal-dialog-width:                            600px;
42
@modal-dialog-background:                       @global-background;
43

    
44
@modal-container-width:                         1200px;
45

    
46
@modal-body-padding-horizontal:                 @global-gutter;
47
@modal-body-padding-vertical:                   @global-gutter;
48

    
49
@modal-header-padding-horizontal:               @global-gutter;
50
@modal-header-padding-vertical:                 (@modal-header-padding-horizontal / 2);
51
@modal-header-background:                       @global-muted-background;
52

    
53
@modal-footer-padding-horizontal:               @global-gutter;
54
@modal-footer-padding-vertical:                 (@modal-footer-padding-horizontal / 2);
55
@modal-footer-background:                       @global-muted-background;
56

    
57
@modal-title-font-size:                         @global-xlarge-font-size;
58
@modal-title-line-height:                       1.3;
59

    
60
@modal-close-position:                          @global-small-margin;
61
@modal-close-padding:                           5px;
62

    
63
@modal-close-outside-position:                  0;
64
@modal-close-outside-translate:                 100%;
65
@modal-close-outside-color:                     lighten(@global-inverse-color, 20%);
66
@modal-close-outside-hover-color:               @global-inverse-color;
67

    
68
@modal-caption-margin-top:                      @global-margin;
69
@modal-caption-color:                           #fff;
70

    
71

    
72
/* ========================================================================
73
   Component: Modal
74
 ========================================================================== */
75

    
76
/*
77
 * 1. Hide by default
78
 * 2. Set position
79
 * 3. Allow scrolling for the modal dialog
80
 * 4. Horizontal padding
81
 * 5. Mask the background page
82
 * 6. Fade-in transition
83
 */
84

    
85
.uk-modal {
86
    /* 1 */
87
    display: none;
88
    /* 2 */
89
    position: fixed;
90
    top: 0;
91
    right: 0;
92
    bottom: 0;
93
    left: 0;
94
    z-index: @modal-z-index;
95
    /* 3 */
96
    overflow-y: auto;
97
    -webkit-overflow-scrolling: touch;
98
    /* 4 */
99
    padding-left: @modal-padding-horizontal;
100
    padding-right: @modal-padding-horizontal;
101
    /* 5 */
102
    background: @modal-background;
103
    /* 6 */
104
    opacity: 0;
105
    -webkit-transition: opacity 0.15s linear;
106
    transition: opacity 0.15s linear;
107
    .hook-modal;
108
}
109

    
110
/* Phone landscape and bigger */
111
@media (min-width: @breakpoint-small) {
112

    
113
    .uk-modal {
114
        padding-left: @modal-padding-horizontal-s;
115
        padding-right: @modal-padding-horizontal-s;
116
    }
117

    
118
}
119

    
120
/* Tablet landscape and bigger */
121
@media (min-width: @breakpoint-medium) {
122

    
123
    .uk-modal {
124
        padding-left: @modal-padding-horizontal-m;
125
        padding-right: @modal-padding-horizontal-m;
126
    }
127

    
128
}
129

    
130
/*
131
 * Open
132
 */
133

    
134
.uk-modal.uk-open { opacity: 1; }
135

    
136

    
137
/* Page
138
 ========================================================================== */
139

    
140
/*
141
 * Prevent scrollbars
142
 */
143

    
144
.uk-modal-page { overflow: hidden; }
145

    
146

    
147
/* Dialog
148
 ========================================================================== */
149

    
150
/*
151
 * 1. Create position context for caption, spinner and close button
152
 * 2. Dimensions
153
 * 3. Style
154
 * 4. Slide-in transition
155
 */
156

    
157
.uk-modal-dialog {
158
    /* 1 */
159
    position: relative;
160
    /* 2 */
161
    box-sizing: border-box;
162
    margin: @modal-dialog-margin-vertical auto;
163
    width: @modal-dialog-width;
164
    max-width: 100%;
165
    /* 3 */
166
    background: @modal-dialog-background;
167
    /* 4 */
168
    opacity: 0;
169
    -webkit-transform: translateY(-100px);
170
    transform: translateY(-100px);
171
    -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
172
    transition: opacity 0.3s linear, transform 0.3s ease-out;
173
    .hook-modal-dialog;
174
}
175

    
176
/* Phone portrait and smaller */
177
@media (max-width: @breakpoint-xsmall-max) {
178

    
179
    .uk-modal-dialog {
180
        margin-top: @modal-dialog-margin-vertical-xs;
181
        margin-bottom: @modal-dialog-margin-vertical-xs;
182
    }
183

    
184
}
185

    
186
/*
187
 * Open
188
 */
189

    
190
.uk-open > .uk-modal-dialog {
191
    opacity: 1;
192
    -webkit-transform: translateY(0);
193
    transform: translateY(0);
194
}
195

    
196

    
197
/* Size modifier
198
 ========================================================================== */
199

    
200
/*
201
 * Container size
202
 * Take the same size as the Container component
203
 */
204

    
205
.uk-modal-container .uk-modal-dialog { width: @modal-container-width; }
206

    
207
/*
208
 * Full size
209
 * 1. Remove padding and background from modal
210
 * 2. Reset all default declarations from modal dialog
211
 */
212

    
213
/* 1 */
214
.uk-modal-full {
215
    padding: 0;
216
    background: none;
217
}
218

    
219
/* 2 */
220
.uk-modal-full .uk-modal-dialog {
221
    margin: 0;
222
    width: 100%;
223
    max-width: 100%;
224
    -webkit-transform: translateY(0);
225
    transform: translateY(0);
226
    .hook-modal-full;
227
}
228

    
229

    
230
/* Lightbox modifier
231
 ========================================================================== */
232

    
233
.uk-modal-lightbox { background: rgba(0,0,0,0.9); }
234

    
235
.uk-modal-lightbox .uk-modal-dialog {
236
    margin-left: @modal-dialog-margin-horizontal;
237
    margin-right: @modal-dialog-margin-horizontal;
238
}
239

    
240

    
241
/* Sections
242
 ========================================================================== */
243

    
244
.uk-modal-body {
245
    padding: @modal-body-padding-vertical @modal-body-padding-horizontal;
246
    .hook-modal-body;
247
}
248

    
249
.uk-modal-header {
250
    padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
251
    background: @modal-header-background;
252
    .hook-modal-header;
253
}
254

    
255
.uk-modal-footer {
256
    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
257
    background: @modal-footer-background;
258
    .hook-modal-footer;
259
}
260

    
261
/*
262
 * Micro clearfix
263
 */
264

    
265
.uk-modal-body::before,
266
.uk-modal-body::after,
267
.uk-modal-header::before,
268
.uk-modal-header::after,
269
.uk-modal-footer::before,
270
.uk-modal-footer::after {
271
    content: "";
272
    display: table;
273
}
274

    
275
.uk-modal-body::after,
276
.uk-modal-header::after,
277
.uk-modal-footer::after { clear: both; }
278

    
279
/*
280
 * Remove margin from the last-child
281
 */
282

    
283
.uk-modal-body > :last-child,
284
.uk-modal-header > :last-child,
285
.uk-modal-footer > :last-child { margin-bottom: 0; }
286

    
287

    
288
/* Title
289
 ========================================================================== */
290

    
291
.uk-modal-title {
292
    font-size: @modal-title-font-size;
293
    line-height: @modal-title-line-height;
294
    .hook-modal-title;
295
}
296

    
297

    
298
/* Close
299
 * Adopts `uk-close`
300
 ========================================================================== */
301

    
302
[class*='uk-modal-close-'] {
303
    position: absolute;
304
    z-index: @modal-z-index;
305
    top: @modal-close-position;
306
    right: @modal-close-position;
307
    padding: @modal-close-padding;
308
    .hook-modal-close;
309
}
310

    
311
/*
312
 * Remove margin from adjacent element
313
 */
314

    
315
[class*='uk-modal-close-']:first-child + * { margin-top: 0; }
316

    
317
/*
318
 * Hover
319
 */
320

    
321
[class*='uk-modal-close-']:hover {
322
    .hook-modal-close-hover;
323
}
324

    
325
/*
326
 * Default
327
 */
328

    
329
.uk-modal-close-default {
330
    .hook-modal-close-default;
331
}
332

    
333
.uk-modal-close-default:hover {
334
    .hook-modal-close-default-hover;
335
}
336

    
337
/*
338
 * Outside
339
 */
340

    
341
.uk-modal-close-outside {
342
    top: @modal-close-outside-position;
343
    right: @modal-close-outside-position;
344
    -webkit-transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
345
    transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
346
    color: @modal-close-outside-color;
347
    .hook-modal-close-outside;
348
}
349

    
350
.uk-modal-close-outside:hover {
351
    color: @modal-close-outside-hover-color;
352
    .hook-modal-close-outside-hover;
353
}
354

    
355
/*
356
 * Full
357
 */
358

    
359
.uk-modal-close-full {
360
    .hook-modal-close-full;
361
}
362

    
363
.uk-modal-close-full:hover {
364
    .hook-modal-close-full-hover;
365
}
366

    
367

    
368
/* Caption
369
 ========================================================================== */
370

    
371
.uk-modal-caption {
372
    position: absolute;
373
    left: 0;
374
    right: 0;
375
    top: 100%;
376
    margin-top: @modal-caption-margin-top;
377
    color: @modal-caption-color;
378
    text-align: center;
379
    .hook-modal-caption;
380
}
381

    
382

    
383
// Hooks
384
// ========================================================================
385

    
386
.hook-modal-misc;
387

    
388
.hook-modal() {}
389
.hook-modal-dialog() {}
390
.hook-modal-full() {}
391
.hook-modal-header() {}
392
.hook-modal-body() {}
393
.hook-modal-footer() {}
394
.hook-modal-title() {}
395
.hook-modal-close() {}
396
.hook-modal-close-hover() {}
397
.hook-modal-close-default() {}
398
.hook-modal-close-default-hover() {}
399
.hook-modal-close-outside() {}
400
.hook-modal-close-outside-hover() {}
401
.hook-modal-close-full() {}
402
.hook-modal-close-full-hover() {}
403
.hook-modal-caption() {}
404
.hook-modal-misc() {}
(36-36/66)