Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_carousel.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }