_carousel.scss — VK Blocks 0.16.2

vk-blocks / lib / bootstrap / scss / _carousel.scss

vk-blocks / lib / bootstrap / scss Last commit date

_carousel.scss

198 lines

1	// Notes on the classes:
2	//
3	// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
4	// even when their scroll action started on a carousel, but for compatibility (with Firefox)
5	// we're preventing all actions instead
6	// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
7	// the active slide is heading.
8	// 3. .active.carousel-item is the current slide.
9	// 4. .active.carousel-item-left and .active.carousel-item-right is the current
10	// slide in its in-transition state. Only one of these occurs at a time.
11	// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
12	// is the upcoming slide in transition.
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	// Alternate transitions
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(0s $carousel-transition-duration opacity);
79	}
80	}
81
82
83	//
84	// Left/right controls for nav
85	//
86
87	.carousel-control-prev,
88	.carousel-control-next {
89	position: absolute;
90	top: 0;
91	bottom: 0;
92	z-index: 1;
93	// Use flex for alignment (1-3)
94	display: flex; // 1. allow flex styles
95	align-items: center; // 2. vertically center contents
96	justify-content: center; // 3. horizontally center contents
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	// Hover/focus state
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: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
115	}
116	}
117	.carousel-control-next {
118	right: 0;
119	@if $enable-gradients {
120	background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
121	}
122	}
123
124	// Icons for within
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: $carousel-control-prev-icon-bg;
134	}
135	.carousel-control-next-icon {
136	background-image: $carousel-control-next-icon-bg;
137	}
138
139
140	// Optional indicator pips
141	//
142	// Add an ordered list with the following class and add a list item for each
143	// slide your carousel holds.
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; // override <ol> default
154	// Use the .carousel-control's width as margin so we don't overlay those
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	// Use transparent borders to increase the hit area by 10px on top and bottom.
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	// Optional captions
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	}
198