Daniel_Moliari_Barbosa/challenge-vtex-io-daniel-moliari-barbosa
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(flex-layout): Implementa SASS do block flex-layout

Browse Source
This commit is contained in:
danielmoliaribarbosa 2023-02-10 15:47:14 -03:00
parent e782358050
commit 04ea65fc6e
1 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,115 @@
:global(.vtex-breadcrumb-1-x-container) {
padding: 0 40px;
}
:global(.vtex-store-components-3-x-container) {
padding-left: 0px;
padding-right: 0px;
:global(.vtex-flex-layout-0-x-flexRowContent) {
:global(.vtex-flex-layout-0-x-stretchChildrenWidth) {
padding-right: 0 !important;
overflow: hidden;
}
}
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px 40px;
gap: 32px;
margin-top: 16px;
margin-bottom: 16px;
@media (max-width: 1024px) {
flex-direction: column;
}
:global(.vtex-flex-layout-0-x-flexRow) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
display: block;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
.addButton {
width: 100%;
}
.flexRow--buyButton {
width: 100%;
.flexRowContent--buyButton {
margin: 0;
:global(.vtex-button) {
background-color: black;
height: 49px;
border: none;
border-radius: unset;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
font-size: 0;
&::after {
content: "ADICIONAR À SACOLA";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}
}
}
@media screen and (max-width: 1024px) {
:global(.vtex-flex-layout-0-x-flexRowContent) {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.flexColChild {
width: 100%;
}
}
@media screen and (max-width: 376px) {
:global(.vtex-add-to-cart-button-0-x-buttonText) {
max-width: 168px;
}
.flexRow--buyButton {
.flexRowContent--buyButton {
:global(.vtex-button) {
height: 74px !important;
}
}
}
}
@media screen and (min-width: 2500px) {
:global(.vtex-flex-layout-0-x-flexRow) {
:global(.vtex-store-components-3-x-container) {
max-width: 100%;
margin: 0 320px;
}
}
:global(.vtex-flex-layout-0-x-flexRow) {
:global(.vtex-telemarketing-2-x-wrapper) {
:global(.vtex-telemarketing-2-x-container) {
max-width: 100%;
margin: 0 !important;
}
}
}
}