Mercurial > minori

comparison dep/fmt/doc/bootstrap/carousel.less @ 343:1faa72660932

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
*: transfer back to cmake from autotools autotools just made lots of things more complicated than they should have and many things broke (i.e. translations)
author Paper <paper@paper.us.eu.org>
date Thu, 20 Jun 2024 05:56:06 -0400
parents
children
comparison
equal deleted inserted replaced
342:adb79bdde329 343:1faa72660932
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(1000);
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 z-index: 5;
134 display: inline-block;
135 }
136 .icon-prev,
137 .glyphicon-chevron-left {
138 left: 50%;
139 margin-left: -10px;
140 }
141 .icon-next,
142 .glyphicon-chevron-right {
143 right: 50%;
144 margin-right: -10px;
145 }
146 .icon-prev,
147 .icon-next {
148 width: 20px;
149 height: 20px;
150 margin-top: -10px;
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 }