challenge-vtex-io-josecarlo.../styles/sass/pages/product/vtex.slider-layout.scss

73 lines
1.7 KiB
SCSS

.sliderLayoutContainer--container-slider-related-products-pdp {
margin-bottom: 113px;
.sliderTrack--container-slider-related-products-pdp{
gap: 16px;
}
.sliderLeftArrow--container-slider-related-products-pdp{
left: -36px;
.caretIcon--container-slider-related-products-pdp{
display: none;
}
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftjosecarloslins.svg");
}
}
.sliderRightArrow--container-slider-related-products-pdp{
right: -30px;
.caretIcon--container-slider-related-products-pdp{
display: none;
}
&::after{
content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightjosecarloslins.svg");
}
}
.paginationDotsContainer--container-slider-related-products-pdp{
bottom: -42px;
display: flex;
align-items: center;
.paginationDot--container-slider-related-products-pdp{
background-color: #000000;
}
.paginationDot--container-slider-related-products-pdp--isActive{
width: 17px !important;
height: 17px !important;
background-color: #FFFFFF;
border: 0.5px solid #000000;
}
}
}
@media screen and (max-width: 1024px) {
.sliderLayoutContainer--container-slider-related-products-pdp {
.sliderLeftArrow--container-slider-related-products-pdp{
left: -23px;
}
.sliderRightArrow--container-slider-related-products-pdp{
right: -22px;
}
}
}
@media screen and (max-width: 768px) {
.sliderLayoutContainer--container-slider-related-products-pdp {
.sliderLeftArrow--container-slider-related-products-pdp{
left: -21px;
}
.sliderRightArrow--container-slider-related-products-pdp{
right: -20px;
}
}
}