forked from javascript-tutorial/server
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmodal.styl
More file actions
executable file
·66 lines (55 loc) · 1.22 KB
/
modal.styl
File metadata and controls
executable file
·66 lines (55 loc) · 1.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// extract from
// Pure CSS Components - http://www.felipefialho.com/css-components/
// Author: Luiz Felipe Tartarotti Fialho
// hi@felipefialho.com
// http://www.felipefialho.com/
// NB
// please place modal.styl before other files
// modal-overlay implies position: relative
// other styles may want to override this
.modal
&:before
content ""
display block
background rgba(0, 0, 0, 0.6)
position fixed
top 0
left 0
right 0
bottom 0
z-index 1001
transform translate3d( 0, 0, 0)
&__dialog
position fixed
top 50%
left 50%
transform translate(-50%, -50%)
z-index 9999
button&__close
position absolute
top -15px
right -15px
display none
a&__close,
a&__close:visited
color link_color
&__has-close &__close
display block
// usage: .modal-overlay_dark for translucent black background or
// .modal-overlay_light for translucent white background
$modal-overlay-after
content " "
position absolute
left 0
right 0
top 0
bottom 0
z-index 100000
.modal-overlay_light:after
@extend $modal-overlay-after
background white
opacity 0.35
.modal-overlay_dark:after
@extend $modal-overlay-after
background black
opacity 0.2