/sass/bootstrap/_carousel.scss
Sass | 116 lines | 83 code | 18 blank | 15 comment | 0 complexity | 8def2e8f919475daa2d92b62dfe1bede MD5 | raw file
1// CAROUSEL
2// --------
3
4.carousel {
5 position: relative;
6 margin-bottom: $baseLineHeight;
7 line-height: 1;
8}
9
10.carousel-inner {
11 overflow: hidden;
12 width: 100%;
13 position: relative;
14}
15
16.carousel {
17
18 .item {
19 display: none;
20 position: relative;
21 @include transition(.6s ease-in-out left);
22 }
23
24 // Account for jankitude on images
25 .item > img {
26 display: block;
27 line-height: 1;
28 }
29
30 .active, .next, .prev { display: block; }
31
32 .active {
33 left: 0;
34 }
35
36 .next, .prev {
37 position: absolute;
38 top: 0;
39 width: 100%;
40 }
41
42 .next {
43 left: 100%;
44 }
45 .prev {
46 left: -100%;
47 }
48 .next.left, .prev.right {
49 left: 0;
50 }
51
52 .active.left {
53 left: -100%;
54 }
55 .active.right {
56 left: 100%;
57 }
58
59}
60
61// Left/right controls for nav
62// ---------------------------
63
64.carousel-control {
65 position: absolute;
66 top: 40%;
67 left: 15px;
68 width: 40px;
69 height: 40px;
70 margin-top: -20px;
71 font-size: 60px;
72 font-weight: 100;
73 line-height: 30px;
74 color: $white;
75 text-align: center;
76 background: $grayDarker;
77 border: 3px solid $white;
78 @include border-radius(23px);
79 @include opacity(0.5);
80
81 // we can't have this transition here
82 // because webkit cancels the carousel
83 // animation if you trip this while
84 // in the middle of another animation
85 // ;_;
86 // @include transition(opacity .2s linear);
87
88 // Reposition the right one
89 &.right {
90 left: auto;
91 right: 15px;
92 }
93
94 // Hover state
95 &:hover {
96 color: $white;
97 text-decoration: none;
98 @include opacity(0.9);
99 }
100}
101
102// Caption for text below images
103// -----------------------------
104
105.carousel-caption {
106 position: absolute;
107 left: 0;
108 right: 0;
109 bottom: 0;
110 padding: 10px 15px 5px;
111 background: $grayDark;
112 background: rgba(0,0,0,.75);
113}
114.carousel-caption h4, .carousel-caption p {
115 color: $white;
116}