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

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

Mise a jour de BS v3.3.6 : attention le fichier variables.less comprend une variable supplementaire qu'il faut ajouter dans son fichier personalise le cas echeant

File size: 5.5 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  background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
105  // We can't have this transition here because WebKit cancels the carousel
106  // animation if you trip this while in the middle of another animation.
107
108  // Set gradients for backgrounds
109  &.left {
110    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
111  }
112  &.right {
113    left: auto;
114    right: 0;
115    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
116  }
117
118  // Hover/focus state
119  &:hover,
120  &:focus {
121    outline: 0;
122    color: @carousel-control-color;
123    text-decoration: none;
124    .opacity(.9);
125  }
126
127  // Toggles
128  .icon-prev,
129  .icon-next,
130  .glyphicon-chevron-left,
131  .glyphicon-chevron-right {
132    position: absolute;
133    top: 50%;
134    margin-top: -10px;
135    z-index: 5;
136    display: inline-block;
137  }
138  .icon-prev,
139  .glyphicon-chevron-left {
140    left: 50%;
141    margin-left: -10px;
142  }
143  .icon-next,
144  .glyphicon-chevron-right {
145    right: 50%;
146    margin-right: -10px;
147  }
148  .icon-prev,
149  .icon-next {
150    width:  20px;
151    height: 20px;
152    line-height: 1;
153    font-family: serif;
154  }
155
156
157  .icon-prev {
158    &:before {
159      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
160    }
161  }
162  .icon-next {
163    &:before {
164      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
165    }
166  }
167}
168
169// Optional indicator pips
170//
171// Add an unordered list with the following class and add a list item for each
172// slide your carousel holds.
173
174.carousel-indicators {
175  position: absolute;
176  bottom: 10px;
177  left: 50%;
178  z-index: 15;
179  width: 60%;
180  margin-left: -30%;
181  padding-left: 0;
182  list-style: none;
183  text-align: center;
184
185  li {
186    display: inline-block;
187    width:  10px;
188    height: 10px;
189    margin: 1px;
190    text-indent: -999px;
191    border: 1px solid @carousel-indicator-border-color;
192    border-radius: 10px;
193    cursor: pointer;
194
195    // IE8-9 hack for event handling
196    //
197    // Internet Explorer 8-9 does not support clicks on elements without a set
198    // `background-color`. We cannot use `filter` since that's not viewed as a
199    // background color by the browser. Thus, a hack is needed.
200    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
201    //
202    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
203    // set alpha transparency for the best results possible.
204    background-color: #000 \9; // IE8
205    background-color: rgba(0,0,0,0); // IE9
206  }
207  .active {
208    margin: 0;
209    width:  12px;
210    height: 12px;
211    background-color: @carousel-indicator-active-bg;
212  }
213}
214
215// Optional captions
216// -----------------------------
217// Hidden by default for smaller viewports
218.carousel-caption {
219  position: absolute;
220  left: 15%;
221  right: 15%;
222  bottom: 20px;
223  z-index: 10;
224  padding-top: 20px;
225  padding-bottom: 20px;
226  color: @carousel-caption-color;
227  text-align: center;
228  text-shadow: @carousel-text-shadow;
229  & .btn {
230    text-shadow: none; // No shadow for button elements in carousel-caption
231  }
232}
233
234
235// Scale up controls for tablets and up
236@media screen and (min-width: @screen-sm-min) {
237
238  // Scale up the controls a smidge
239  .carousel-control {
240    .glyphicon-chevron-left,
241    .glyphicon-chevron-right,
242    .icon-prev,
243    .icon-next {
244      width: (@carousel-control-font-size * 1.5);
245      height: (@carousel-control-font-size * 1.5);
246      margin-top: (@carousel-control-font-size / -2);
247      font-size: (@carousel-control-font-size * 1.5);
248    }
249    .glyphicon-chevron-left,
250    .icon-prev {
251      margin-left: (@carousel-control-font-size / -2);
252    }
253    .glyphicon-chevron-right,
254    .icon-next {
255      margin-right: (@carousel-control-font-size / -2);
256    }
257  }
258
259  // Show and left align the captions
260  .carousel-caption {
261    left: 20%;
262    right: 20%;
263    padding-bottom: 30px;
264  }
265
266  // Move up the indicators
267  .carousel-indicators {
268    bottom: 20px;
269  }
270}
Note: See TracBrowser for help on using the repository browser.