1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | .carousel {
|
15 | position: relative;
|
16 | }
|
17 |
|
18 | .carousel.pointer-event {
|
19 | touch-action: pan-y;
|
20 | }
|
21 |
|
22 | .carousel-inner {
|
23 | position: relative;
|
24 | width: 100%;
|
25 | overflow: hidden;
|
26 | @include clearfix();
|
27 | }
|
28 |
|
29 | .carousel-item {
|
30 | position: relative;
|
31 | display: none;
|
32 | float: left;
|
33 | width: 100%;
|
34 | margin-right: -100%;
|
35 | backface-visibility: hidden;
|
36 | @include transition($carousel-transition);
|
37 | }
|
38 |
|
39 | .carousel-item.active,
|
40 | .carousel-item-next,
|
41 | .carousel-item-prev {
|
42 | display: block;
|
43 | }
|
44 |
|
45 | .carousel-item-next:not(.carousel-item-left),
|
46 | .active.carousel-item-right {
|
47 | transform: translateX(100%);
|
48 | }
|
49 |
|
50 | .carousel-item-prev:not(.carousel-item-right),
|
51 | .active.carousel-item-left {
|
52 | transform: translateX(-100%);
|
53 | }
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 | .carousel-fade {
|
61 | .carousel-item {
|
62 | opacity: 0;
|
63 | transition-property: opacity;
|
64 | transform: none;
|
65 | }
|
66 |
|
67 | .carousel-item.active,
|
68 | .carousel-item-next.carousel-item-left,
|
69 | .carousel-item-prev.carousel-item-right {
|
70 | z-index: 1;
|
71 | opacity: 1;
|
72 | }
|
73 |
|
74 | .active.carousel-item-left,
|
75 | .active.carousel-item-right {
|
76 | z-index: 0;
|
77 | opacity: 0;
|
78 | @include transition(opacity 0s $carousel-transition-duration);
|
79 | }
|
80 | }
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 | .carousel-control-prev,
|
88 | .carousel-control-next {
|
89 | position: absolute;
|
90 | top: 0;
|
91 | bottom: 0;
|
92 | z-index: 1;
|
93 |
|
94 | display: flex;
|
95 | align-items: center;
|
96 | justify-content: center;
|
97 | width: $carousel-control-width;
|
98 | padding: 0;
|
99 | color: $carousel-control-color;
|
100 | text-align: center;
|
101 | background: none;
|
102 | border: 0;
|
103 | opacity: $carousel-control-opacity;
|
104 | @include transition($carousel-control-transition);
|
105 |
|
106 |
|
107 | @include hover-focus() {
|
108 | color: $carousel-control-color;
|
109 | text-decoration: none;
|
110 | outline: 0;
|
111 | opacity: $carousel-control-hover-opacity;
|
112 | }
|
113 | }
|
114 | .carousel-control-prev {
|
115 | left: 0;
|
116 | @if $enable-gradients {
|
117 | background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
118 | }
|
119 | }
|
120 | .carousel-control-next {
|
121 | right: 0;
|
122 | @if $enable-gradients {
|
123 | background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
124 | }
|
125 | }
|
126 |
|
127 |
|
128 | .carousel-control-prev-icon,
|
129 | .carousel-control-next-icon {
|
130 | display: inline-block;
|
131 | width: $carousel-control-icon-width;
|
132 | height: $carousel-control-icon-width;
|
133 | background: 50% / 100% 100% no-repeat;
|
134 | }
|
135 | .carousel-control-prev-icon {
|
136 | background-image: escape-svg($carousel-control-prev-icon-bg);
|
137 | }
|
138 | .carousel-control-next-icon {
|
139 | background-image: escape-svg($carousel-control-next-icon-bg);
|
140 | }
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 | .carousel-indicators {
|
149 | position: absolute;
|
150 | right: 0;
|
151 | bottom: 0;
|
152 | left: 0;
|
153 | z-index: 15;
|
154 | display: flex;
|
155 | justify-content: center;
|
156 | padding-left: 0;
|
157 |
|
158 | margin-right: $carousel-control-width;
|
159 | margin-left: $carousel-control-width;
|
160 | list-style: none;
|
161 |
|
162 | li {
|
163 | box-sizing: content-box;
|
164 | flex: 0 1 auto;
|
165 | width: $carousel-indicator-width;
|
166 | height: $carousel-indicator-height;
|
167 | margin-right: $carousel-indicator-spacer;
|
168 | margin-left: $carousel-indicator-spacer;
|
169 | text-indent: -999px;
|
170 | cursor: pointer;
|
171 | background-color: $carousel-indicator-active-bg;
|
172 | background-clip: padding-box;
|
173 |
|
174 | border-top: $carousel-indicator-hit-area-height solid transparent;
|
175 | border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
176 | opacity: .5;
|
177 | @include transition($carousel-indicator-transition);
|
178 | }
|
179 |
|
180 | .active {
|
181 | opacity: 1;
|
182 | }
|
183 | }
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | .carousel-caption {
|
191 | position: absolute;
|
192 | right: (100% - $carousel-caption-width) * .5;
|
193 | bottom: 20px;
|
194 | left: (100% - $carousel-caption-width) * .5;
|
195 | z-index: 10;
|
196 | padding-top: 20px;
|
197 | padding-bottom: 20px;
|
198 | color: $carousel-caption-color;
|
199 | text-align: center;
|
200 | }
|