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

95 lines
1.7 KiB
SCSS

.flexRow--container-product-main{
padding: 0 40px;
.flexRowContent--container-product-main {
display: grid;
grid-template-columns: 48.824% 1fr;
grid-column-gap: 32px;
padding-bottom: 16px;
.stretchChildrenWidth{
padding-right: 0;
}
}
}
.swiper-wrapper{
.swiper-slide-active{
width: 100%;
}
.swiper-slide{
width: 100%;
}
}
.flexRowContent{
margin: 0;
}
.flexRowContent--container-quantity-and-buy-button{
display: grid;
grid-template-columns: 128px 1fr;
gap: 10px;
margin-bottom: 16px;
:global(.vtex-button){
background-color: #000000;
border: 0;
border-radius: 0;
:global(.vtex-button__label){
padding: 12px 0 !important;
}
}
}
.container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
width: 100%;
}
.flexRowContent--container-related-products-pdp{
flex-direction: column;
padding: 0 61px;
.stretchChildrenWidth{
width: 100% !important;
}
}
@media screen and (max-width: 1024px) {
.flexRow--container-product-main{
.flexRowContent--container-product-main {
display: flex;
flex-direction: column;
padding-top: 16px;
padding-bottom: 0;
}
}
.flexRowContent--container-related-products-pdp{
padding: 0 53px;
}
}
@media screen and (max-width: 768px) {
.flexRowContent--container-quantity-and-buy-button{
display: flex;
flex-direction: column;
:global(.vtex-flex-layout-0-x-stretchChildrenWidth){
justify-content: flex-start;
}
:global(.vtex-button){
:global(.vtex-button__label){
display: inline-block;
width: 56.7567%;
}
}
}
.flexRowContent--container-related-products-pdp{
padding: 0 48px;
}
}