1 |
|
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 | width: 100%;
|
16 |
|
17 | @include if-supports-3d-transforms() {
|
18 | @include transition($carousel-transition);
|
19 | backface-visibility: hidden;
|
20 | perspective: 1000px;
|
21 | }
|
22 | }
|
23 |
|
24 | .carousel-item.active,
|
25 | .carousel-item-next,
|
26 | .carousel-item-prev {
|
27 | display: flex;
|
28 | }
|
29 |
|
30 | .carousel-item-next,
|
31 | .carousel-item-prev {
|
32 | position: absolute;
|
33 | top: 0;
|
34 | }
|
35 |
|
36 |
|
37 | @include if-supports-3d-transforms() {
|
38 | .carousel-item-next.carousel-item-left,
|
39 | .carousel-item-prev.carousel-item-right {
|
40 | transform: translate3d(0, 0, 0);
|
41 | }
|
42 |
|
43 | .carousel-item-next,
|
44 | .active.carousel-item-right {
|
45 | transform: translate3d(100%, 0, 0);
|
46 | }
|
47 |
|
48 | .carousel-item-prev,
|
49 | .active.carousel-item-left {
|
50 | transform: translate3d(-100%, 0, 0);
|
51 | }
|
52 | }
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | .carousel-control-prev,
|
60 | .carousel-control-next {
|
61 | position: absolute;
|
62 | top: 0;
|
63 | bottom: 0;
|
64 |
|
65 | display: flex;
|
66 | align-items: center;
|
67 | justify-content: center;
|
68 | width: $carousel-control-width;
|
69 | color: $carousel-control-color;
|
70 | text-align: center;
|
71 | opacity: $carousel-control-opacity;
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | @include hover-focus {
|
77 | color: $carousel-control-color;
|
78 | text-decoration: none;
|
79 | outline: 0;
|
80 | opacity: .9;
|
81 | }
|
82 | }
|
83 | .carousel-control-prev {
|
84 | left: 0;
|
85 | }
|
86 | .carousel-control-next {
|
87 | right: 0;
|
88 | }
|
89 |
|
90 |
|
91 | .carousel-control-prev-icon,
|
92 | .carousel-control-next-icon {
|
93 | display: inline-block;
|
94 | width: $carousel-control-icon-width;
|
95 | height: $carousel-control-icon-width;
|
96 | background: transparent no-repeat center center;
|
97 | background-size: 100% 100%;
|
98 | }
|
99 | .carousel-control-prev-icon {
|
100 | background-image: $carousel-control-prev-icon-bg;
|
101 | }
|
102 | .carousel-control-next-icon {
|
103 | background-image: $carousel-control-next-icon-bg;
|
104 | }
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | .carousel-indicators {
|
113 | position: absolute;
|
114 | right: 0;
|
115 | bottom: 10px;
|
116 | left: 0;
|
117 | z-index: 15;
|
118 | display: flex;
|
119 | justify-content: center;
|
120 | padding-left: 0;
|
121 |
|
122 | margin-right: $carousel-control-width;
|
123 | margin-left: $carousel-control-width;
|
124 | list-style: none;
|
125 |
|
126 | li {
|
127 | position: relative;
|
128 | flex: 1 0 auto;
|
129 | max-width: $carousel-indicator-width;
|
130 | height: $carousel-indicator-height;
|
131 | margin-right: $carousel-indicator-spacer;
|
132 | margin-left: $carousel-indicator-spacer;
|
133 | text-indent: -999px;
|
134 | cursor: pointer;
|
135 | background-color: rgba($carousel-indicator-active-bg, .5);
|
136 |
|
137 |
|
138 | &::before {
|
139 | position: absolute;
|
140 | top: -10px;
|
141 | left: 0;
|
142 | display: inline-block;
|
143 | width: 100%;
|
144 | height: 10px;
|
145 | content: "";
|
146 | }
|
147 | &::after {
|
148 | position: absolute;
|
149 | bottom: -10px;
|
150 | left: 0;
|
151 | display: inline-block;
|
152 | width: 100%;
|
153 | height: 10px;
|
154 | content: "";
|
155 | }
|
156 | }
|
157 |
|
158 | .active {
|
159 | background-color: $carousel-indicator-active-bg;
|
160 | }
|
161 | }
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | .carousel-caption {
|
169 | position: absolute;
|
170 | right: ((100% - $carousel-caption-width) / 2);
|
171 | bottom: 20px;
|
172 | left: ((100% - $carousel-caption-width) / 2);
|
173 | z-index: 10;
|
174 | padding-top: 20px;
|
175 | padding-bottom: 20px;
|
176 | color: $carousel-caption-color;
|
177 | text-align: center;
|
178 | }
|