|
0
|
1 // Wrapper for the slide container and indicators
|
|
|
2 .carousel {
|
|
|
3 position: relative;
|
|
|
4 }
|
|
|
5
|
|
|
6 .carousel-inner {
|
|
|
7 position: relative;
|
|
|
8 width: 100%;
|
|
|
9 overflow: hidden;
|
|
|
10 }
|
|
|
11
|
|
|
12 .carousel-item {
|
|
|
13 position: relative;
|
|
|
14 display: none;
|
|
|
15 align-items: center;
|
|
|
16 width: 100%;
|
|
|
17 @include transition($carousel-transition);
|
|
|
18 backface-visibility: hidden;
|
|
|
19 perspective: 1000px;
|
|
|
20 }
|
|
|
21
|
|
|
22 .carousel-item.active,
|
|
|
23 .carousel-item-next,
|
|
|
24 .carousel-item-prev {
|
|
|
25 display: block;
|
|
|
26 }
|
|
|
27
|
|
|
28 .carousel-item-next,
|
|
|
29 .carousel-item-prev {
|
|
|
30 position: absolute;
|
|
|
31 top: 0;
|
|
|
32 }
|
|
|
33
|
|
|
34 // CSS3 transforms when supported by the browser
|
|
|
35 .carousel-item-next.carousel-item-left,
|
|
|
36 .carousel-item-prev.carousel-item-right {
|
|
|
37 transform: translateX(0);
|
|
|
38
|
|
|
39 @supports (transform-style: preserve-3d) {
|
|
|
40 transform: translate3d(0, 0, 0);
|
|
|
41 }
|
|
|
42 }
|
|
|
43
|
|
|
44 .carousel-item-next,
|
|
|
45 .active.carousel-item-right {
|
|
|
46 transform: translateX(100%);
|
|
|
47
|
|
|
48 @supports (transform-style: preserve-3d) {
|
|
|
49 transform: translate3d(100%, 0, 0);
|
|
|
50 }
|
|
|
51 }
|
|
|
52
|
|
|
53 .carousel-item-prev,
|
|
|
54 .active.carousel-item-left {
|
|
|
55 transform: translateX(-100%);
|
|
|
56
|
|
|
57 @supports (transform-style: preserve-3d) {
|
|
|
58 transform: translate3d(-100%, 0, 0);
|
|
|
59 }
|
|
|
60 }
|
|
|
61
|
|
|
62
|
|
|
63 //
|
|
|
64 // Left/right controls for nav
|
|
|
65 //
|
|
|
66
|
|
|
67 .carousel-control-prev,
|
|
|
68 .carousel-control-next {
|
|
|
69 position: absolute;
|
|
|
70 top: 0;
|
|
|
71 bottom: 0;
|
|
|
72 // Use flex for alignment (1-3)
|
|
|
73 display: flex; // 1. allow flex styles
|
|
|
74 align-items: center; // 2. vertically center contents
|
|
|
75 justify-content: center; // 3. horizontally center contents
|
|
|
76 width: $carousel-control-width;
|
|
|
77 color: $carousel-control-color;
|
|
|
78 text-align: center;
|
|
|
79 opacity: $carousel-control-opacity;
|
|
|
80 // We can't have a transition here because WebKit cancels the carousel
|
|
|
81 // animation if you trip this while in the middle of another animation.
|
|
|
82
|
|
|
83 // Hover/focus state
|
|
|
84 @include hover-focus {
|
|
|
85 color: $carousel-control-color;
|
|
|
86 text-decoration: none;
|
|
|
87 outline: 0;
|
|
|
88 opacity: .9;
|
|
|
89 }
|
|
|
90 }
|
|
|
91 .carousel-control-prev {
|
|
|
92 left: 0;
|
|
|
93 }
|
|
|
94 .carousel-control-next {
|
|
|
95 right: 0;
|
|
|
96 }
|
|
|
97
|
|
|
98 // Icons for within
|
|
|
99 .carousel-control-prev-icon,
|
|
|
100 .carousel-control-next-icon {
|
|
|
101 display: inline-block;
|
|
|
102 width: $carousel-control-icon-width;
|
|
|
103 height: $carousel-control-icon-width;
|
|
|
104 background: transparent no-repeat center center;
|
|
|
105 background-size: 100% 100%;
|
|
|
106 }
|
|
|
107 .carousel-control-prev-icon {
|
|
|
108 background-image: $carousel-control-prev-icon-bg;
|
|
|
109 }
|
|
|
110 .carousel-control-next-icon {
|
|
|
111 background-image: $carousel-control-next-icon-bg;
|
|
|
112 }
|
|
|
113
|
|
|
114
|
|
|
115 // Optional indicator pips
|
|
|
116 //
|
|
|
117 // Add an ordered list with the following class and add a list item for each
|
|
|
118 // slide your carousel holds.
|
|
|
119
|
|
|
120 .carousel-indicators {
|
|
|
121 position: absolute;
|
|
|
122 right: 0;
|
|
|
123 bottom: 10px;
|
|
|
124 left: 0;
|
|
|
125 z-index: 15;
|
|
|
126 display: flex;
|
|
|
127 justify-content: center;
|
|
|
128 padding-left: 0; // override <ol> default
|
|
|
129 // Use the .carousel-control's width as margin so we don't overlay those
|
|
|
130 margin-right: $carousel-control-width;
|
|
|
131 margin-left: $carousel-control-width;
|
|
|
132 list-style: none;
|
|
|
133
|
|
|
134 li {
|
|
|
135 position: relative;
|
|
|
136 flex: 0 1 auto;
|
|
|
137 width: $carousel-indicator-width;
|
|
|
138 height: $carousel-indicator-height;
|
|
|
139 margin-right: $carousel-indicator-spacer;
|
|
|
140 margin-left: $carousel-indicator-spacer;
|
|
|
141 text-indent: -999px;
|
|
|
142 background-color: rgba($carousel-indicator-active-bg, .5);
|
|
|
143
|
|
|
144 // Use pseudo classes to increase the hit area by 10px on top and bottom.
|
|
|
145 &::before {
|
|
|
146 position: absolute;
|
|
|
147 top: -10px;
|
|
|
148 left: 0;
|
|
|
149 display: inline-block;
|
|
|
150 width: 100%;
|
|
|
151 height: 10px;
|
|
|
152 content: "";
|
|
|
153 }
|
|
|
154 &::after {
|
|
|
155 position: absolute;
|
|
|
156 bottom: -10px;
|
|
|
157 left: 0;
|
|
|
158 display: inline-block;
|
|
|
159 width: 100%;
|
|
|
160 height: 10px;
|
|
|
161 content: "";
|
|
|
162 }
|
|
|
163 }
|
|
|
164
|
|
|
165 .active {
|
|
|
166 background-color: $carousel-indicator-active-bg;
|
|
|
167 }
|
|
|
168 }
|
|
|
169
|
|
|
170
|
|
|
171 // Optional captions
|
|
|
172 //
|
|
|
173 //
|
|
|
174
|
|
|
175 .carousel-caption {
|
|
|
176 position: absolute;
|
|
|
177 right: ((100% - $carousel-caption-width) / 2);
|
|
|
178 bottom: 20px;
|
|
|
179 left: ((100% - $carousel-caption-width) / 2);
|
|
|
180 z-index: 10;
|
|
|
181 padding-top: 20px;
|
|
|
182 padding-bottom: 20px;
|
|
|
183 color: $carousel-caption-color;
|
|
|
184 text-align: center;
|
|
|
185 }
|
