corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 1 | // Notes on the classes: |
2 | // |
||
3 | // 1. The .carousel-item-left and .carousel-item-right is used to indicate where |
||
4 | // the active slide is heading. |
||
5 | // 2. .active.carousel-item is the current slide. |
||
6 | // 3. .active.carousel-item-left and .active.carousel-item-right is the current |
||
7 | // slide in its in-transition state. Only one of these occurs at a time. |
||
8 | // 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right |
||
9 | // is the upcoming slide in transition. |
||
10 | |||
11 | .carousel { |
||
12 | position: relative; |
||
13 | } |
||
14 | |||
15 | .carousel-inner { |
||
16 | position: relative; |
||
17 | width: 100%; |
||
18 | overflow: hidden; |
||
19 | } |
||
20 | |||
21 | .carousel-item { |
||
22 | position: relative; |
||
23 | display: none; |
||
24 | align-items: center; |
||
25 | width: 100%; |
||
26 | backface-visibility: hidden; |
||
27 | perspective: 1000px; |
||
28 | } |
||
29 | |||
30 | .carousel-item.active, |
||
31 | .carousel-item-next, |
||
32 | .carousel-item-prev { |
||
33 | display: block; |
||
34 | @include transition($carousel-transition); |
||
35 | } |
||
36 | |||
37 | .carousel-item-next, |
||
38 | .carousel-item-prev { |
||
39 | position: absolute; |
||
40 | top: 0; |
||
41 | } |
||
42 | |||
43 | .carousel-item-next.carousel-item-left, |
||
44 | .carousel-item-prev.carousel-item-right { |
||
45 | transform: translateX(0); |
||
46 | |||
47 | @supports (transform-style: preserve-3d) { |
||
48 | transform: translate3d(0, 0, 0); |
||
49 | } |
||
50 | } |
||
51 | |||
52 | .carousel-item-next, |
||
53 | .active.carousel-item-right { |
||
54 | transform: translateX(100%); |
||
55 | |||
56 | @supports (transform-style: preserve-3d) { |
||
57 | transform: translate3d(100%, 0, 0); |
||
58 | } |
||
59 | } |
||
60 | |||
61 | .carousel-item-prev, |
||
62 | .active.carousel-item-left { |
||
63 | transform: translateX(-100%); |
||
64 | |||
65 | @supports (transform-style: preserve-3d) { |
||
66 | transform: translate3d(-100%, 0, 0); |
||
67 | } |
||
68 | } |
||
69 | |||
70 | |||
71 | // |
||
72 | // Alternate transitions |
||
73 | // |
||
74 | |||
75 | .carousel-fade { |
||
76 | .carousel-item { |
||
77 | opacity: 0; |
||
78 | transition-duration: .6s; |
||
79 | transition-property: opacity; |
||
80 | } |
||
81 | |||
82 | .carousel-item.active, |
||
83 | .carousel-item-next.carousel-item-left, |
||
84 | .carousel-item-prev.carousel-item-right { |
||
85 | opacity: 1; |
||
86 | } |
||
87 | |||
88 | .active.carousel-item-left, |
||
89 | .active.carousel-item-right { |
||
90 | opacity: 0; |
||
91 | } |
||
92 | |||
93 | .carousel-item-next, |
||
94 | .carousel-item-prev, |
||
95 | .carousel-item.active, |
||
96 | .active.carousel-item-left, |
||
97 | .active.carousel-item-prev { |
||
98 | transform: translateX(0); |
||
99 | |||
100 | @supports (transform-style: preserve-3d) { |
||
101 | transform: translate3d(0, 0, 0); |
||
102 | } |
||
103 | } |
||
104 | } |
||
105 | |||
106 | |||
107 | // |
||
108 | // Left/right controls for nav |
||
109 | // |
||
110 | |||
111 | .carousel-control-prev, |
||
112 | .carousel-control-next { |
||
113 | position: absolute; |
||
114 | top: 0; |
||
115 | bottom: 0; |
||
116 | // Use flex for alignment (1-3) |
||
117 | display: flex; // 1. allow flex styles |
||
118 | align-items: center; // 2. vertically center contents |
||
119 | justify-content: center; // 3. horizontally center contents |
||
120 | width: $carousel-control-width; |
||
121 | color: $carousel-control-color; |
||
122 | text-align: center; |
||
123 | opacity: $carousel-control-opacity; |
||
124 | // We can't have a transition here because WebKit cancels the carousel |
||
125 | // animation if you trip this while in the middle of another animation. |
||
126 | |||
127 | // Hover/focus state |
||
128 | @include hover-focus { |
||
129 | color: $carousel-control-color; |
||
130 | text-decoration: none; |
||
131 | outline: 0; |
||
132 | opacity: .9; |
||
133 | } |
||
134 | } |
||
135 | .carousel-control-prev { |
||
136 | left: 0; |
||
137 | @if $enable-gradients { |
||
138 | background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); |
||
139 | } |
||
140 | } |
||
141 | .carousel-control-next { |
||
142 | right: 0; |
||
143 | @if $enable-gradients { |
||
144 | background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); |
||
145 | } |
||
146 | } |
||
147 | |||
148 | // Icons for within |
||
149 | .carousel-control-prev-icon, |
||
150 | .carousel-control-next-icon { |
||
151 | display: inline-block; |
||
152 | width: $carousel-control-icon-width; |
||
153 | height: $carousel-control-icon-width; |
||
154 | background: transparent no-repeat center center; |
||
155 | background-size: 100% 100%; |
||
156 | } |
||
157 | .carousel-control-prev-icon { |
||
158 | background-image: $carousel-control-prev-icon-bg; |
||
159 | } |
||
160 | .carousel-control-next-icon { |
||
161 | background-image: $carousel-control-next-icon-bg; |
||
162 | } |
||
163 | |||
164 | |||
165 | // Optional indicator pips |
||
166 | // |
||
167 | // Add an ordered list with the following class and add a list item for each |
||
168 | // slide your carousel holds. |
||
169 | |||
170 | .carousel-indicators { |
||
171 | position: absolute; |
||
172 | right: 0; |
||
173 | bottom: 10px; |
||
174 | left: 0; |
||
175 | z-index: 15; |
||
176 | display: flex; |
||
177 | justify-content: center; |
||
178 | padding-left: 0; // override <ol> default |
||
179 | // Use the .carousel-control's width as margin so we don't overlay those |
||
180 | margin-right: $carousel-control-width; |
||
181 | margin-left: $carousel-control-width; |
||
182 | list-style: none; |
||
183 | |||
184 | li { |
||
185 | position: relative; |
||
186 | flex: 0 1 auto; |
||
187 | width: $carousel-indicator-width; |
||
188 | height: $carousel-indicator-height; |
||
189 | margin-right: $carousel-indicator-spacer; |
||
190 | margin-left: $carousel-indicator-spacer; |
||
191 | text-indent: -999px; |
||
192 | cursor: pointer; |
||
193 | background-color: rgba($carousel-indicator-active-bg, .5); |
||
194 | |||
195 | // Use pseudo classes to increase the hit area by 10px on top and bottom. |
||
196 | &::before { |
||
197 | position: absolute; |
||
198 | top: -10px; |
||
199 | left: 0; |
||
200 | display: inline-block; |
||
201 | width: 100%; |
||
202 | height: 10px; |
||
203 | content: ""; |
||
204 | } |
||
205 | &::after { |
||
206 | position: absolute; |
||
207 | bottom: -10px; |
||
208 | left: 0; |
||
209 | display: inline-block; |
||
210 | width: 100%; |
||
211 | height: 10px; |
||
212 | content: ""; |
||
213 | } |
||
214 | } |
||
215 | |||
216 | .active { |
||
217 | background-color: $carousel-indicator-active-bg; |
||
218 | } |
||
219 | } |
||
220 | |||
221 | |||
222 | // Optional captions |
||
223 | // |
||
224 | // |
||
225 | |||
226 | .carousel-caption { |
||
227 | position: absolute; |
||
228 | right: ((100% - $carousel-caption-width) / 2); |
||
229 | bottom: 20px; |
||
230 | left: ((100% - $carousel-caption-width) / 2); |
||
231 | z-index: 10; |
||
232 | padding-top: 20px; |
||
233 | padding-bottom: 20px; |
||
234 | color: $carousel-caption-color; |
||
235 | text-align: center; |
||
236 | } |