← All changes | assets/css/carousel.css +12 -20 1.6 → 2.3.2 View file →

		@@ -6,13 +6,11 @@
6	6	--mrc-carousel-nav-icon-color: #FFF;
7	7	--mrc-carousel-nav-color: #212121;
8	8	--mrc-carousel-nav-color-hover: #757575;
9	9	}
10		-
11	10	.merchant-carousel .merchant-carousel-wrapper {
12	11	position: relative;
13	12	}
14		-
15	13	.merchant-carousel .merchant-carousel-wrapper .products,
16	14	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage {
17	15	display: block !important;
18	16	margin: 0;
		@@ -20,20 +18,17 @@
20	18	visibility: hidden;
21	19	-webkit-transition: ease opacity 300ms 300ms;
22	20	transition: ease opacity 300ms 300ms;
23	21	}
24		-
25	22	.merchant-carousel .merchant-carousel-wrapper .products.row:not(.products),
26	23	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage.row:not(.products) {
27	24	display: block;
28	25	}
29		-
30	26	.merchant-carousel .merchant-carousel-wrapper .products.show,
31	27	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage.show {
32	28	opacity: 1;
33	29	visibility: visible;
34	30	}
35		-
36	31	.merchant-carousel .merchant-carousel-wrapper .products > div,
37	32	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage > div {
38	33	display: -webkit-box;
39	34	display: -ms-flexbox;
		@@ -38,19 +33,26 @@
38	33	display: -webkit-box;
39	34	display: -ms-flexbox;
40	35	display: flex;
41	36	}
42		-
43	37	.merchant-carousel .merchant-carousel-wrapper .products > div > div > .product,
44		-.merchant-carousel .merchant-carousel-wrapper .products > div > div > div[class*="col-"],
	38	+.merchant-carousel .merchant-carousel-wrapper .products > div > div > div[class*=col-],
45	39	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage > div > div > .product,
46		-.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage > div > div > div[class*="col-"] {
	40	+.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-stage > div > div > div[class*=col-] {
47	41	width: 100% !important;
48	42	max-width: none !important;
49	43	margin: 0 !important;
50	44	padding: 0 !important;
51	45	}
52		-
	46	+.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-nav:hover {
	47	+ opacity: 0.7;
	48	+}
	49	+.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-nav:focus, .merchant-carousel .merchant-carousel-wrapper .merchant-carousel-nav:active {
	50	+ border: none;
	51	+ -webkit-box-shadow: none;
	52	+ box-shadow: none;
	53	+ outline: none;
	54	+}
53	55	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-nav-next {
54	56	position: absolute;
55	57	top: -40px;
56	58	right: 0;
		@@ -58,9 +60,8 @@
58	60	height: 21px;
59	61	border-radius: 100%;
60	62	z-index: 1;
61	63	}
62		-
63	64	.merchant-carousel .merchant-carousel-wrapper .merchant-carousel-nav-prev {
64	65	position: absolute;
65	66	top: -40px;
66	67	right: 30px;
		@@ -68,9 +69,8 @@
68	69	height: 21px;
69	70	border-radius: 100%;
70	71	z-index: 1;
71	72	}
72		-
73	73	.merchant-carousel.no-nav .merchant-carousel-stage {
74	74	display: -webkit-box !important;
75	75	display: -ms-flexbox !important;
76	76	display: flex !important;
		@@ -81,13 +81,11 @@
81	81	-webkit-column-gap: 0 !important;
82	82	-moz-column-gap: 0 !important;
83	83	column-gap: 0 !important;
84	84	}
85		-
86	85	.merchant-carousel.no-nav .merchant-carousel-stage > li.product {
87	86	margin: var(--merchant-rvp-columns-gap, 15px) 0 0 var(--merchant-rvp-columns-gap, 15px) !important;
88	87	}
89		-
90	88	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-next,
91	89	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-prev {
92	90	display: -webkit-box;
93	91	display: -ms-flexbox;
		@@ -109,25 +107,21 @@
109	107	transform: translate3d(20px, -210%, 0);
110	108	-webkit-transition: ease transform 300ms, ease opacity 300ms;
111	109	transition: ease transform 300ms, ease opacity 300ms;
112	110	}
113		-
114	111	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-next svg,
115	112	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-prev svg {
116	113	width: 14px;
117	114	height: 14px;
118	115	}
119		-
120	116	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-next svg path,
121	117	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-prev svg path {
122	118	stroke: var(--mrc-carousel-nav-icon-color);
123	119	}
124		-
125	120	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-next:hover,
126	121	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-prev:hover {
127	122	background: var(--mrc-carousel-nav-color-hover);
128	123	}
129		-
130	124	.merchant-carousel.merchant-carousel-nav2 .merchant-carousel-nav-prev {
131	125	right: auto;
132	126	left: 15px;
133	127	-webkit-transform: translate3d(-20px, -210%, 0);
		@@ -132,9 +126,8 @@
132	126	left: 15px;
133	127	-webkit-transform: translate3d(-20px, -210%, 0);
134	128	transform: translate3d(-20px, -210%, 0);
135	129	}
136		-
137	130	.merchant-carousel.merchant-carousel-nav2:hover .merchant-carousel-nav-next,
138	131	.merchant-carousel.merchant-carousel-nav2:hover .merchant-carousel-nav-prev, .merchant-carousel.merchant-carousel-nav2.merchant-carousel-nav2-always-show .merchant-carousel-nav-next,
139	132	.merchant-carousel.merchant-carousel-nav2.merchant-carousel-nav2-always-show .merchant-carousel-nav-prev {
140	133	opacity: 1;
		@@ -151,9 +144,8 @@
151	144	-webkit-transform: translate3d(0, -210%, 0);
152	145	transform: translate3d(0, -210%, 0);
153	146	}
154	147	}
155		-
156	148	@media (max-width: 575px) {
157	149	.merchant-carousel {
158	150	padding-left: 15px;
159	151	padding-right: 15px;
		@@ -171,5 +163,5 @@
171	163	right: 55%;
172	164	-webkit-transform: translate3d(50%, 0, 0);
173	165	transform: translate3d(50%, 0, 0);
174	166	}
175		-}
	167	+}