1//
2// Carousel
3// --------------------------------------------------
4
5
6.carousel {
7  position: relative;
8  margin-bottom: @baseLineHeight;
9  line-height: 1;
10}
11
12.carousel-inner {
13  overflow: hidden;
14  width: 100%;
15  position: relative;
16}
17
18.carousel-inner {
19
20  > .item {
21    display: none;
22    position: relative;
23    .transition(.6s ease-in-out left);
24
25    // Account for jankitude on images
26    > img,
27    > a > img {
28      display: block;
29      line-height: 1;
30    }
31  }
32
33  > .active,
34  > .next,
35  > .prev { display: block; }
36
37  > .active {
38    left: 0;
39  }
40
41  > .next,
42  > .prev {
43    position: absolute;
44    top: 0;
45    width: 100%;
46  }
47
48  > .next {
49    left: 100%;
50  }
51  > .prev {
52    left: -100%;
53  }
54  > .next.left,
55  > .prev.right {
56    left: 0;
57  }
58
59  > .active.left {
60    left: -100%;
61  }
62  > .active.right {
63    left: 100%;
64  }
65
66}
67
68// Left/right controls for nav
69// ---------------------------
70
71.carousel-control {
72  position: absolute;
73  top: 40%;
74  left: 15px;
75  width: 40px;
76  height: 40px;
77  margin-top: -20px;
78  font-size: 60px;
79  font-weight: 100;
80  line-height: 30px;
81  color: @white;
82  text-align: center;
83  background: @grayDarker;
84  border: 3px solid @white;
85  .border-radius(23px);
86  .opacity(50);
87
88  // we can't have this transition here
89  // because webkit cancels the carousel
90  // animation if you trip this while
91  // in the middle of another animation
92  // ;_;
93  // .transition(opacity .2s linear);
94
95  // Reposition the right one
96  &.right {
97    left: auto;
98    right: 15px;
99  }
100
101  // Hover/focus state
102  &:hover,
103  &:focus {
104    color: @white;
105    text-decoration: none;
106    .opacity(90);
107  }
108}
109
110// Carousel indicator pips
111// -----------------------------
112.carousel-indicators {
113  position: absolute;
114  top: 15px;
115  right: 15px;
116  z-index: 5;
117  margin: 0;
118  list-style: none;
119
120  li {
121    display: block;
122    float: left;
123    width: 10px;
124    height: 10px;
125    margin-left: 5px;
126    text-indent: -999px;
127    background-color: #ccc;
128    background-color: rgba(255,255,255,.25);
129    border-radius: 5px;
130  }
131  .active {
132    background-color: #fff;
133  }
134}
135
136// Caption for text below images
137// -----------------------------
138
139.carousel-caption {
140  position: absolute;
141  left: 0;
142  right: 0;
143  bottom: 0;
144  padding: 15px;
145  background: @grayDark;
146  background: rgba(0,0,0,.75);
147}
148.carousel-caption h4,
149.carousel-caption p {
150  color: @white;
151  line-height: @baseLineHeight;
152}
153.carousel-caption h4 {
154  margin: 0 0 5px;
155}
156.carousel-caption p {
157  margin-bottom: 0;
158}
159