This repository has been archived by the owner on Sep 26, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
/
carousel.styl
120 lines (87 loc) · 1.63 KB
/
carousel.styl
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// CAROUSEL
// --------
.carousel
position: relative
margin-bottom: $baseLineHeight
line-height: 1
.carousel-inner
overflow: hidden
width: 100%
position: relative
.carousel
.item
display: none
position: relative
transition(.6s ease-in-out left)
// Account for jankitude on images
.item > img
display: block
line-height: 1
.active,
.next,
.prev
display: block
.active
left: 0
.next,
.prev
position: absolute
top: 0
width: 100%
.next
left: 100%
.prev
left: -100%
.next.left,
.prev.right
left: 0
.active.left
left: -100%
.active.right
left: 100%
// Left/right controls for nav
// ---------------------------
.carousel-control
position: absolute
top: 40%
left: 15px
width: 40px
height: 40px
margin-top: -20px
font-size: 60px
font-weight: 100
line-height: 30px
color: $white
text-align: center
background: $grayDarker
border: 3px solid $white
border-radius(23px)
opacity(.50)
// we can't have this transition here
// because webkit cancels the carousel
// animation if you trip this while
// in the middle of another animation
// _
// transition(opacity .2s linear)
// Reposition the right one
&.right
left: auto
right: 15px
// Hover state
&:hover
color: $white
text-decoration: none
opacity(.90)
// Caption for text below images
// -----------------------------
.carousel-caption
position: absolute
left: 0
right: 0
bottom: 0
padding: 10px 15px 5px
background: $grayDark
background: rgba(0,0,0,.75)
.carousel-caption h4,
.carousel-caption p
color: $white