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

142 lines
2.8 KiB
SCSS

.stretchChildrenWidth {
width: 100% !important;
padding: 0;
@media (max-width: 1024px) {
padding-right: 0px;
}
}
.flexRowContent--divDescription {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
}
}
.flexRowContent {
padding: 0;
margin: 0;
}
.flexRowContent--divProductIndisponivel {
gap: 32px;
@media (max-width: 1024px) {
flex-direction: column;
}
}
.flexColChild--info-availability {
.flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
margin-bottom: 8px ;
@media (max-width: 1024px) {
text-align: left;
}
}
:global(.vtex-product-identifier-0-x-product-identifier) {
display: flex;
justify-content: flex-end;
align-items: end;
margin: 0;
margin-top: 8px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
margin-bottom: 24px
}
@media (max-width: 1024px) {
:global(.vtex-product-identifier-0-x-product-identifier) {
display: block;
}
};
.flexCol--message-availability{
width: 100%;
.flexColChild--message-availability{
width: 100%;
}
}
}
.flexRowContent--divProduct {
gap: 32px;
margin: 0;
margin-top: 16px !important;
padding: 0px !important;
padding-left: 40px !important;
margin-bottom: 16px !important;
padding-right: 40px !important;
max-width: 100%;
@media (max-width: 1024px) {
flex-direction: column;
}
.stretchChildrenWidth {
width: 100% !important;
}
}
.flexCol--divInfoProduct {
.flexRow--divNomeProduct {
text-align: end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
margin-bottom: 8px;
@media (max-width: 1024px) {
text-align: left;
}
}
.flexRow--divNomeProductModelo {
text-align: end;
@media (max-width: 1024px) {
text-align: left;
}
:global(.vtex-product-identifier-0-x-product-identifier){
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
}
}
.flexCol--divImgDescription {
margin-right: 22px;
@media (max-width: 1024px) {
margin-right: 0px;
}
}
.flexRow--divButtonBuy {
text-align: center;
width: 100%;
height: 49px;
@media (max-width: 377px) {
height: 74px;
}
:global(.vtex-button) {
background-color: black;
border: 0;
border-radius: 0;
height: 49px;
@media (max-width: 377px) {
height: 74px;
:global(.vtex-button__label){
padding: 0;
width: 130px ;
margin: auto;
}
}
}
}