source: trip-planner-front/node_modules/bootstrap/less/carousel.less@ eed0bf8

Last change on this file since eed0bf8 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

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