forked from alainyog/JavaScript.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path_video.sass
More file actions
99 lines (83 loc) · 1.71 KB
/
Copy path_video.sass
File metadata and controls
99 lines (83 loc) · 1.71 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// *************************************
//
// Video
// -> Video modal
//
// -------------------------------------
// Template (Haml)
// -------------------------------------
//
// (video-playing)
//
// .video
//
// *************************************
.video
@extend .fauxHide
box-sizing: border-box
left: 50%
max-width: 960px
padding: 0
position: fixed
top: 50%
transform: translate(-50%, -40%)
transition: all 0.3s ease-in-out
width: 100%
z-index: zi('video')
// -------------------------------------
// States
// -------------------------------------
// ----- Playing ----- //
.is-video-playing
overflow: hidden
.video,
.video-close,
.video-overlay
@extend .fauxShow
.video
transform: translate(-50%, -50%)
transition: all 0.3s 0.5s ease-in-out
.video-close
transform: scale(1)
transition: all 0.5s 0.7s ease-in-out
.video-overlay
opacity: 0.9
transition: all 0.5s ease-in-out
// -------------------------------------
// Scaffolding
// -------------------------------------
// ----- Close ----- //
.video-close
@extend .fauxHide
color: $c-text-invert
display: block
font-size: $b-fontSize-h1
position: fixed
right: $b-space-s
top: 0
transform: scale(0.5)
transition: all 0.3s ease-in-out
// ----- Embed ----- //
.video-embed
height: 0
overflow: hidden
padding-bottom: 56.25% // 16:9
iframe, object, embed
left: 0
height: 100%
position: absolute
top: 0
width: 100%
// ----- Overlay ----- //
.video-overlay
@extend .fauxHide
background: $c-highlight
bottom: 0
height: 100%
left: 0
position: absolute
right: 0
top: 0
transition: all 0.3s 0.5s ease-in-out
width: 100%
z-index: zi('video-overlay')