m3-academy-template-vtexio/storefront/styles/sass/general/vtex.slider-layout.scss

80 lines
1.7 KiB
SCSS
Raw Permalink Normal View History

2022-08-11 13:06:07 +00:00
.sliderLeftArrow {
display: block;
background: url(assets/svgs/slide-left-arrow.svg) no-repeat center center !important;
background-size: contain;
}
.sliderRightArrow {
display: block;
background: url(assets/svgs/slide-right-arrow.svg) no-repeat center center !important;
background-size: contain;
}
.caretIcon {
opacity: 0;
}
.paginationDotsContainer {
align-items: center;
}
.paginationDot {
background: $color-gray4;
height: 8px !important;
width: 8px !important;
}
.paginationDot--isActive {
background: transparent;
border: 1px solid $color-gray4;
height: 13px !important;
width: 13px !important;
}
/* M3 DEALS SLIDER */
/* M3 BRANDS SLIDER */
.sliderLayoutContainer--m3-brands-slide {
width: 799px !important;
max-width: 799px;
}
.slide--m3-brands-slide {
background: $color-white;
/* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.14); */
margin: 8px;
}
.imageElement--m3-brands-slide {
max-height: unset !important;
}
.sliderLayoutContainer--inst-nav {
max-width: 1127px;
margin: 23px auto 38px auto;
}
.paginationDotsContainer--inst-nav {
display: none;
}
.slide--inst-nav {
width: fit-content !important;
}
@media only screen and (max-width: 1025px) {
.sliderLayoutContainer--m3-brands-slide {
width: 100% !important;
max-width: 100%;
padding: 0 0px;
}
.slide--m3-brands-slide {
box-shadow: none;
margin: 8px;
}
.slide--m3-brands-slide .slideChildrenContainer--m3-brands-slide {
width: 187px;
height: 149px;
background: $color-white;
/* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.14); */
margin: 0 auto;
}
}