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 | color: $carousel-control-color;
|
99 | text-align: center;
|
100 | opacity: $carousel-control-opacity;
|
101 | @include transition($carousel-control-transition);
|
102 |
|
103 |
|
104 | @include hover-focus() {
|
105 | color: $carousel-control-color;
|
106 | text-decoration: none;
|
107 | outline: 0;
|
108 | opacity: $carousel-control-hover-opacity;
|
109 | }
|
110 | }
|
111 | .carousel-control-prev {
|
112 | left: 0;
|
113 | @if $enable-gradients {
|
114 | background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
115 | }
|
116 | }
|
117 | .carousel-control-next {
|
118 | right: 0;
|
119 | @if $enable-gradients {
|
120 | background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
121 | }
|
122 | }
|
123 |
|
124 |
|
125 | .carousel-control-prev-icon,
|
126 | .carousel-control-next-icon {
|
127 | display: inline-block;
|
128 | width: $carousel-control-icon-width;
|
129 | height: $carousel-control-icon-width;
|
130 | background: no-repeat 50% / 100% 100%;
|
131 | }
|
132 | .carousel-control-prev-icon {
|
133 | background-image: escape-svg($carousel-control-prev-icon-bg);
|
134 | }
|
135 | .carousel-control-next-icon {
|
136 | background-image: escape-svg($carousel-control-next-icon-bg);
|
137 | }
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 | .carousel-indicators {
|
146 | position: absolute;
|
147 | right: 0;
|
148 | bottom: 0;
|
149 | left: 0;
|
150 | z-index: 15;
|
151 | display: flex;
|
152 | justify-content: center;
|
153 | padding-left: 0;
|
154 |
|
155 | margin-right: $carousel-control-width;
|
156 | margin-left: $carousel-control-width;
|
157 | list-style: none;
|
158 |
|
159 | li {
|
160 | box-sizing: content-box;
|
161 | flex: 0 1 auto;
|
162 | width: $carousel-indicator-width;
|
163 | height: $carousel-indicator-height;
|
164 | margin-right: $carousel-indicator-spacer;
|
165 | margin-left: $carousel-indicator-spacer;
|
166 | text-indent: -999px;
|
167 | cursor: pointer;
|
168 | background-color: $carousel-indicator-active-bg;
|
169 | background-clip: padding-box;
|
170 |
|
171 | border-top: $carousel-indicator-hit-area-height solid transparent;
|
172 | border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
173 | opacity: .5;
|
174 | @include transition($carousel-indicator-transition);
|
175 | }
|
176 |
|
177 | .active {
|
178 | opacity: 1;
|
179 | }
|
180 | }
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 | .carousel-caption {
|
188 | position: absolute;
|
189 | right: (100% - $carousel-caption-width) / 2;
|
190 | bottom: 20px;
|
191 | left: (100% - $carousel-caption-width) / 2;
|
192 | z-index: 10;
|
193 | padding-top: 20px;
|
194 | padding-bottom: 20px;
|
195 | color: $carousel-caption-color;
|
196 | text-align: center;
|
197 | }
|