corrade-http-templates – Blame information for rev 62

Subversion Repositories:
Rev:
Rev Author Line No. Line
62 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 }