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

267 lines
5.9 KiB
SCSS
Raw Normal View History

.flexRow--container-product-main{
padding: 0 40px;
.flexRowContent--container-product-main {
display: grid;
grid-template-columns: 48.824% 1fr;
grid-column-gap: 32px;
padding: 16px 0;
.stretchChildrenWidth{
padding-right: 0;
}
}
}
2023-01-25 21:45:51 +00:00
.flexRow--container-product-availability{
padding: 0 40px;
.flexRowContent--container-product-availability{
display: grid;
grid-template-columns: 48.824% 1fr;
grid-column-gap: 32px;
padding-top: 16px;
2023-01-25 21:45:51 +00:00
padding-bottom: 16px;
.stretchChildrenWidth{
padding-right: 0;
}
.flexRowContent--message-availability{
:global(.vtex-store-components-3-x-subscriberContainer){
:global(.vtex-store-components-3-x-title){
font-size: 0;
&::after{
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #868686;
}
}
:global(.vtex-store-components-3-x-subscribeLabel){
font-size: 0;
&::after{
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #868686;
}
}
:global(.vtex-store-components-3-x-form){
margin-bottom: 16px;
:global(.vtex-store-components-3-x-content){
display: grid;
grid-template-areas: "name email"
"button button";
grid-template-columns: 1fr 1fr;
column-gap: 8px;
row-gap: 15px;
max-width: 100%;
:global(.vtex-store-components-3-x-inputName){
grid-area: name;
margin: 0;
margin-right: 8px;
:global(.vtex-styleguide-9-x-input){
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
:global(.vtex-store-components-3-x-inputEmail){
grid-area: email;
margin: 0;
:global(.vtex-styleguide-9-x-input){
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
}
:global(.vtex-store-components-3-x-submit){
grid-area: button;
margin: 0;
:global(.vtex-button){
width: 100%;
border: 0;
background-color: #000000;
color: #ffffff;
border-radius: 0;
min-height: auto;
vertical-align: auto;
:global(.vtex-button__label){
font-size: 0;
padding: 12px 0 !important;
&::after{
content: "avise-me";
font-weight: 600;
font-size: 18px;
line-height: 25px;
text-transform: uppercase;
}
}
}
}
}
}
}
}
}
}
.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;
2023-01-25 12:52:39 +00:00
:global(.vtex-button__label){
padding: 12px 0 !important;
}
}
2023-01-25 21:45:51 +00:00
.stretchChildrenWidth{
width: 100% !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;
}
}
2023-01-25 02:11:24 +00:00
2023-01-25 21:45:51 +00:00
.flexRow--message-availability{
width: 60.0903%;
}
.flexRow--container-description-section-product-pdp{
padding: 0 32px;
2023-01-25 21:45:51 +00:00
.flexRowContent--container-description-section-product-pdp{
display: grid;
gap: 32px;
grid-template-columns: 1fr 1fr;
.stretchChildrenWidth{
width: 100% !important;
}
}
}
@media screen and (min-width: 1920px) {
.flexRow--container-product-main{
padding: 0 360px;
.flexRowContent--container-product-main {
grid-template-columns: 49.1305% 1fr;
}
}
.flexRow--container-product-availability{
padding: 0 360px;
.flexRowContent--container-product-availability{
grid-template-columns: 49.1305% 1fr;
}
}
.flexRowContent--container-related-products-pdp{
padding: 0 381px;
}
}
2023-01-25 02:11:24 +00:00
@media screen and (max-width: 1024px) {
.flexRow--container-product-main{
.flexRowContent--container-product-main {
display: flex;
flex-direction: column;
padding-top: 16px;
2023-01-25 12:52:39 +00:00
padding-bottom: 0;
2023-01-25 02:11:24 +00:00
}
}
2023-01-25 12:52:39 +00:00
.flexRowContent--container-related-products-pdp{
padding: 0 53px;
}
2023-01-25 21:45:51 +00:00
.flexRow--container-description-section-product-pdp{
padding: 0;
.flexRowContent--container-description-section-product-pdp{
display: flex;
flex-direction: column;
margin-left: 0;
gap: 16px;
padding: 0;
border-bottom: 1px solid #BFBFBF;
}
}
.flexRow--container-product-availability{
.flexRowContent--container-product-availability{
display: flex;
flex-direction: column;
}
}
.flexRow--message-availability{
width: 100%;
}
2023-01-25 12:52:39 +00:00
}
@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;
}
2023-01-25 02:11:24 +00:00
}