source: spip-zone/_plugins_/bootstrap/trunk/bootstrap/css/carousel.less @ 90741

Last change on this file since 90741 was 90741, checked in by cedric@…, 6 years ago

BS 3.3.5 dans la place, work in progress
le plugin passe en v3 dev
On s'occupera de la couche de compat BSv2 dans un second temps

File size: 5.3 KB
Line 
1//
2// Carousel
3// --------------------------------------------------
4
5
6// Wrapper for the slide container and indicators
7.carousel {
8  position: relative;
9}
10
11.carousel-inner {
12  position: relative;
13  overflow: hidden;
14  width: 100%;
15
16  > .item {
17    display: none;
18    position: relative;
19    .transition(.6s ease-in-out left);
20
21    // Account for jankitude on images
22    > img,
23    > a > img {
24      &:extend(.img-responsive);
25      line-height: 1;
26    }
27
28    // WebKit CSS3 transforms for supported devices
29    @media all and (transform-3d), (-webkit-transform-3d) {
30      .transition-transform(~'0.6s ease-in-out');
31      .backface-visibility(~'hidden');
32      .perspective(1000px);
33
34      &.next,
35      &.active.right {
36        .translate3d(100%, 0, 0);
37        left: 0;
38      }
39      &.prev,
40      &.active.left {
41        .translate3d(-100%, 0, 0);
42        left: 0;
43      }
44      &.next.left,
45      &.prev.right,
46      &.active {
47        .translate3d(0, 0, 0);
48        left: 0;
49      }
50    }
51  }
52
53  > .active,
54  > .next,
55  > .prev {
56    display: block;
57  }
58
59  > .active {
60    left: 0;
61  }
62
63  > .next,
64  > .prev {
65    position: absolute;
66    top: 0;
67    width: 100%;
68  }
69
70  > .next {
71    left: 100%;
72  }
73  > .prev {
74    left: -100%;
75  }
76  > .next.left,
77  > .prev.right {
78    left: 0;
79  }
80
81  > .active.left {
82    left: -100%;
83  }
84  > .active.right {
85    left: 100%;
86  }
87
88}
89
90// Left/right controls for nav
91// ---------------------------
92
93.carousel-control {
94  position: absolute;
95  top: 0;
96  left: 0;
97  bottom: 0;
98  width: @carousel-control-width;
99  .opacity(@carousel-control-opacity);
100  font-size: @carousel-control-font-size;
101  color: @carousel-control-color;
102  text-align: center;
103  text-shadow: @carousel-text-shadow;
104  // We can't have this transition here because WebKit cancels the carousel
105  // animation if you trip this while in the middle of another animation.
106
107  // Set gradients for backgrounds
108  &.left {
109    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
110  }
111  &.right {
112    left: auto;
113    right: 0;
114    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
115  }
116
117  // Hover/focus state
118  &:hover,
119  &:focus {
120    outline: 0;
121    color: @carousel-control-color;
122    text-decoration: none;
123    .opacity(.9);
124  }
125
126  // Toggles
127  .icon-prev,
128  .icon-next,
129  .glyphicon-chevron-left,
130  .glyphicon-chevron-right {
131    position: absolute;
132    top: 50%;
133    margin-top: -10px;
134    z-index: 5;
135    display: inline-block;
136  }
137  .icon-prev,
138  .glyphicon-chevron-left {
139    left: 50%;
140    margin-left: -10px;
141  }
142  .icon-next,
143  .glyphicon-chevron-right {
144    right: 50%;
145    margin-right: -10px;
146  }
147  .icon-prev,
148  .icon-next {
149    width:  20px;
150    height: 20px;
151    line-height: 1;
152    font-family: serif;
153  }
154
155
156  .icon-prev {
157    &:before {
158      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
159    }
160  }
161  .icon-next {
162    &:before {
163      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
164    }
165  }
166}
167
168// Optional indicator pips
169//
170// Add an unordered list with the following class and add a list item for each
171// slide your carousel holds.
172
173.carousel-indicators {
174  position: absolute;
175  bottom: 10px;
176  left: 50%;
177  z-index: 15;
178  width: 60%;
179  margin-left: -30%;
180  padding-left: 0;
181  list-style: none;
182  text-align: center;
183
184  li {
185    display: inline-block;
186    width:  10px;
187    height: 10px;
188    margin: 1px;
189    text-indent: -999px;
190    border: 1px solid @carousel-indicator-border-color;
191    border-radius: 10px;
192    cursor: pointer;
193
194    // IE8-9 hack for event handling
195    //
196    // Internet Explorer 8-9 does not support clicks on elements without a set
197    // `background-color`. We cannot use `filter` since that's not viewed as a
198    // background color by the browser. Thus, a hack is needed.
199    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
200    //
201    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
202    // set alpha transparency for the best results possible.
203    background-color: #000 \9; // IE8
204    background-color: rgba(0,0,0,0); // IE9
205  }
206  .active {
207    margin: 0;
208    width:  12px;
209    height: 12px;
210    background-color: @carousel-indicator-active-bg;
211  }
212}
213
214// Optional captions
215// -----------------------------
216// Hidden by default for smaller viewports
217.carousel-caption {
218  position: absolute;
219  left: 15%;
220  right: 15%;
221  bottom: 20px;
222  z-index: 10;
223  padding-top: 20px;
224  padding-bottom: 20px;
225  color: @carousel-caption-color;
226  text-align: center;
227  text-shadow: @carousel-text-shadow;
228  & .btn {
229    text-shadow: none; // No shadow for button elements in carousel-caption
230  }
231}
232
233
234// Scale up controls for tablets and up
235@media screen and (min-width: @screen-sm-min) {
236
237  // Scale up the controls a smidge
238  .carousel-control {
239    .glyphicon-chevron-left,
240    .glyphicon-chevron-right,
241    .icon-prev,
242    .icon-next {
243      width: 30px;
244      height: 30px;
245      margin-top: -15px;
246      font-size: 30px;
247    }
248    .glyphicon-chevron-left,
249    .icon-prev {
250      margin-left: -15px;
251    }
252    .glyphicon-chevron-right,
253    .icon-next {
254      margin-right: -15px;
255    }
256  }
257
258  // Show and left align the captions
259  .carousel-caption {
260    left: 20%;
261    right: 20%;
262    padding-bottom: 30px;
263  }
264
265  // Move up the indicators
266  .carousel-indicators {
267    bottom: 20px;
268  }
269}
Note: See TracBrowser for help on using the repository browser.