anacarolinaduartecavalcante/challenge-vtex-io-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #15

Merged
anacarolinaduartecavalcante merged 9 commits from feature/challenge-vtex-io into develop 2023-02-09 19:44:44 +00:00
Conversation 0 Commits 9 Files Changed 13 +262 -119
13 changed files with 262 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
store/blocks/header/category-menu.json
View File

@ -1,14 +1,86 @@
{
"vtex.menu@2.x:menu#category-menu": {
"props": {
"experimentalOptimizeRendering": true
"experimentalOptimizeRendering": true,
"blockClass": "header-menu"
},
"children": [
"menu-item#novidades",
"menu-item#sapatos",
"menu-item#category-apparel",
"menu-item#category-home",
"menu-item#more"
"menu-item#more",
"menu-item#category-lojas",
"menu-item#category-seja-franqueado"
]
},
"menu-item#novidades": {
"props": {
"id": "menu-item-novidades",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/novidades/",
"noFollow": false,
"tagTitle": "Novidades",
"text": "Novidades"
}
},
"blocks": ["vtex.menu@2.x:submenu#novidades"]
},
"vtex.menu@2.x:submenu#novidades": {
"props": {
"width": "auto"
},
"children": ["vtex.menu@2.x:menu#novidades"]
},
"vtex.menu@2.x:menu#novidades": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#category-apparel-am3academy",
"menu-item#category-apparel-accessories",
"menu-item#category-apparel-eyeglasses"
]
},
"menu-item#sapatos": {
"props": {
"id": "menu-item-sapatos",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/sapatos/",
"noFollow": false,
"tagTitle": "Sapatos",
"text": "Sapatos"
}
},
"blocks": ["vtex.menu@2.x:submenu#sapatos"]
},
"vtex.menu@2.x:submenu#sapatos": {
"props": {
"width": "auto"
},
"children": ["vtex.menu@2.x:menu#sapatos"]
},
"vtex.menu@2.x:menu#sapatos": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#category-apparel-am3academy",
"menu-item#category-apparel-accessories",
"menu-item#category-apparel-eyeglasses"
]
},
"menu-item#category-apparel": {
"props": {
"id": "menu-item-category-apparel",
@ -20,7 +92,7 @@
"href": "/apparel---accessories/",
"noFollow": false,
"tagTitle": "Apparel & Accessories",
"text": "Apparel & Accessories"
"text": "Bolsas"
}
},
"blocks": ["vtex.menu@2.x:submenu#category-apparel"]
@ -41,6 +113,7 @@
"menu-item#category-apparel-eyeglasses"
]
},
"menu-item#category-apparel-am3academy": {
"props": {
"id": "menu-item-category-apparel-am3academy",
@ -86,6 +159,7 @@
}
}
},
"menu-item#category-home": {
"props": {
"id": "menu-item-category-home",
@ -96,11 +170,12 @@
"type": "internal",
"href": "/home---decor/",
"noFollow": false,
"tagTitle": "Home & Decor",
"text": "Home & Decor"
"tagTitle": "Acessorios",
"text": "Acessorios"
}
}
},
"menu-item#more": {
"props": {
"id": "menu-item-custom-trocas-e-devolucoes",
@ -111,8 +186,8 @@
"type": "internal",
"href": "#",
"noFollow": true,
"tagTitle": "More",
"text": "More"
"tagTitle": "Outlet",
"text": "Outlet"
}
},
"blocks": ["vtex.menu@2.x:submenu#more"]
@ -182,5 +257,39 @@
"text": "Contact Us"
}
}
},
"menu-item#category-lojas": {
"props": {
"id": "menu-item-category-lojas",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/lojas/",
"noFollow": false,
"tagTitle": "Lojas",
"text": "Lojas"
}
}
},
"menu-item#category-seja-franqueado": {
"props": {
"id": "menu-item-category-seja-franqueado",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/Seja---Franqueado/",
"noFollow": false,
"tagTitle": "Seja Franqueado",
"text": "Seja Franqueado"
}
}
}
}

42
styles/css/vtex.flex-layout.css
View File

@ -19,28 +19,17 @@
justify-content: space-between;
align-items: center;
padding: 32px 40px;
column-gap: 16px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.flexRow--main-header .flexRowContent--main-header {
width: 71.858%;
margin: 0 auto;
padding: 32px 0;
padding: 32px 14.0593%;
}
}
.flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) {
padding-right: 0;
}
.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) {
visibility: hidden;
}
.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile {
display: flex;
@ -74,33 +63,6 @@
width: 27.93px;
height: 21px;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) {
visibility: hidden;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
left: 0;
position: absolute;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) {
margin-left: 308.08px;
}
}
.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.1em;
text-transform: uppercase;
color: #929292;
}
.flexRowContent {
padding: 0;

30
styles/css/vtex.login.css
View File

@ -7,13 +7,31 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
:global(.vtex-login-2-x-container) {
width: 22px;
}
:global(.vtex-login-2-x-container) :global(.vtex-button) {
width: 22px;
border: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
.buttonLink {
position: relative;
:global(.vtex-login-2-x-container) :global(.vtex-button) {
left: 30px;
width: 22px;
}
.buttonLink :global(.vtex-button) {
width: 22px;
}
}
:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) {
visibility: hidden;
padding: 0;
width: 22px;
}
:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-login-2-x-label) {
display: none;
}
:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
}

17
styles/css/vtex.menu.css
View File

@ -7,6 +7,23 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@media (max-width: 2561px) and (min-width: 1920px) {
.menuContainerNav--header-menu .menuContainer--header-menu {
margin-left: 308.08px;
}
}
.menuContainerNav--header-menu .menuContainer--header-menu .menuItem .styledLinkContainer {
margin-right: 15px;
}
.menuContainerNav--header-menu .menuContainer--header-menu .menuItem .styledLinkContainer .styledLink .styledLinkContent {
font-weight: 400 !important;
font-size: 12px !important;
line-height: 16px !important;
letter-spacing: -0.1em;
text-transform: uppercase;
color: #929292 !important;
}
@media (max-width: 1025px) and (min-width: 768px) {
.menuContainerNav .menuContainer {
margin-bottom: 14px;

3
styles/css/vtex.product-price.css
View File

@ -59,12 +59,13 @@
}
.listPrice .listPriceValue {
padding: 0;
text-decoration-thickness: 1px;
color: #bababa;
}
.listPrice .listPriceValue .currencyContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: #bababa;
display: block;
}

6
styles/css/vtex.rich-text.css
View File

@ -44,6 +44,12 @@
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
}
@media (max-width: 768px) and (min-width: 375px) {
.container .wrapper .paragraph {
white-space: unset;
}
}
.container .wrapper .paragraph--footer {
font-weight: 700;

18
styles/css/vtex.store-components.css
View File

@ -13,11 +13,29 @@
}
.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) {
height: 19px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #aeaeae;
border-radius: 0;
display: flex;
flex-direction: row-reverse;
}
.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-size: 12px;
padding-left: 12px;
padding-bottom: 6px;
background: unset;
}
.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
padding: 0 0 8px;
background: unset;
}
.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-suffixWrapper) :global(.vtex-store-components-3-x-searchBarIcon) :global(.vtex-store-components-3-x-searchIcon) {
width: 10px;
height: 10px;
filter: invert(79%) sepia(0%) saturate(1412%) hue-rotate(140deg) brightness(90%) contrast(83%);
}
.container {

60
styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss
View File

@ -11,10 +11,10 @@
justify-content: space-between;
align-items: center;
padding: 32px 40px;
column-gap: 16px;
@media (max-width: 2561px) and (min-width: 1920px) {
width: 71.858%;
margin: 0 auto;
padding: 32px 0;
padding: 32px 14.0593%;
}
:global(.vtex-minicart-2-x-minicartWrapperContainer) {
:global(.vtex-minicart-2-x-minicartContainer) {
@ -23,21 +23,6 @@
}
}
}
:global(.vtex-login-2-x-container) {
:global(.vtex-button) {
:global(.vtex-button__label) {
visibility: hidden;
}
:global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
}
}
}
}
}
@ -71,47 +56,6 @@
width: 27.93px;
height: 21px;
}
:global(.vtex-login-2-x-container) {
:global(.vtex-button) {
:global(.vtex-button__label) {
visibility: hidden;
}
:global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
left: 0;
position: absolute;
}
}
}
}
}
//Menu
.flexColChild {
:global(.vtex-menu-2-x-menuContainerNav) {
:global(.vtex-menu-2-x-menuContainer) {
@media (max-width: 2561px) and (min-width: 1920px) {
margin-left: 308.08px;
}
:global(.vtex-menu-2-x-menuItem) {
:global(.vtex-menu-2-x-styledLink) {
:global(.vtex-menu-2-x-styledLinkContent) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: -0.1em;
text-transform: uppercase;
color: $gray;
}
}
}
}
}
}

24
styles/sass/pages/product/vtexLogin/vtex.login.scss
View File

@ -1,10 +1,26 @@
@media (max-width: 768px) and (min-width: 375px) {
.buttonLink {
position: relative;
left: 30px;
:global(.vtex-login-2-x-container) {
width: 22px;
:global(.vtex-button) {
width: 22px;
border: 0;
@media (max-width: 768px) and (min-width: 375px) {
left: 30px;
}
:global(.vtex-button__label) {
visibility: hidden;
padding: 0;
width: 22px;
:global(.vtex-login-2-x-label) {
display: none;
}
}
:global(.vtex-button__label)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
width: 22px;
height: 18px;
padding: 0;
}
}
}

25
styles/sass/pages/product/vtexMenu/vtex.menu.scss
View File

@ -1,3 +1,28 @@
//Header
.menuContainerNav--header-menu {
.menuContainer--header-menu {
@media (max-width: 2561px) and (min-width: 1920px) {
margin-left: 308.08px;
}
.menuItem {
.styledLinkContainer {
margin-right: 15px;
.styledLink{
.styledLinkContent{
font-weight: 400 !important;
font-size: 12px !important;
line-height: 16px !important;
letter-spacing: -0.1em;
text-transform: uppercase;
color: $gray !important;
}
}
}
}
}
}
//Footer
.menuContainerNav {

3
styles/sass/pages/product/vtexProduct/vtex.product-price.scss
View File

@ -51,11 +51,12 @@
}
.listPriceValue {
padding: 0;
text-decoration-thickness: 1px;
color: #bababa;
.currencyContainer {
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-decoration-line: line-through;
color: $BABABA;
display: block;
@media (max-width: 1025px) and (min-width: 768px) {

4
styles/sass/pages/product/vtexRichText/vtex.rich-text.scss
View File

@ -37,6 +37,10 @@
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
@media (max-width: 768px) and (min-width: 375px) {
white-space: unset;
}
}
.paragraph--footer {
font-weight: 700;

22
styles/sass/pages/product/vtexStore/vtex.store-components.scss
View File

@ -10,11 +10,33 @@
&:first-child {
:global(.vtex-input) {
:global(.vtex-input-prefix__group) {
height: 19px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #aeaeae;
border-radius: 0;
display: flex;
flex-direction: row-reverse;
:global(.vtex-styleguide-9-x-input) {
font-size: 12px;
padding-left: 12px;
padding-bottom: 6px;
background: unset;
}
:global(.vtex-input__suffix) {
padding: 0 0 8px;
background: unset;
:global(.vtex-store-components-3-x-suffixWrapper) {
:global(.vtex-store-components-3-x-searchBarIcon) {
:global(.vtex-store-components-3-x-searchIcon) {
width: 10px;
height: 10px;
filter: invert(79%) sepia(0%) saturate(1412%) hue-rotate(140deg) brightness(90%) contrast(83%);
}
}
}
}
}
}
}