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

style: correção de estilos e adicionando ícones de login e menu hamburger do header

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-31 09:22:34 -03:00
parent d8efee88b0
commit ff72049993
7 changed files with 145 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react/components/Html/styles.css
View File

@ -30,7 +30,7 @@
:global(.agenciamagma-store-theme-5-x-html--product-main-content) {
display: grid;
grid-template-columns: 100%;
padding: 0 40px;
padding: 0 40px 40px;
}
}
@ -39,7 +39,7 @@
:global(.agenciamagma-store-theme-5-x-html--product-main-content) {
display: grid;
grid-template-columns: 100%;
padding: 0 40px;
padding: 0 40px 40px;
}
}
@ -97,6 +97,7 @@
display: grid;
grid-template-columns: 100%;
padding: 0 40px;
margin-bottom: 8px;
}
}
@ -106,5 +107,6 @@
display: grid;
grid-template-columns: 100%;
padding: 0 40px;
margin-bottom: 8px;
}
}

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

@ -33,6 +33,61 @@
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;
justify-content: space-between;
align-items: center;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) {
position: absolute;
top: 16px;
left: 40%;
}
@media (max-width: 768px) and (min-width: 375px) {
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) {
left: 30%;
}
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-components-3-x-logoLink) :global(.vtex-store-components-3-x-sizeMobile) {
padding: 0;
height: 33px;
display: contents;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer) {
visibility: hidden;
display: flex;
padding-left: 40px;
}
.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-store-drawer-0-x-openIconContainer)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
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;
}
.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;

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

@ -459,6 +459,11 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
padding-bottom: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: calc(100% - 49px);
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;

9
styles/css/vtex.tab-layout.css
View File

@ -18,7 +18,8 @@
}
@media (max-width: 768px) and (min-width: 375px) {
.container--description-block {
margin-top: 40px;
margin: 0;
padding: 0 40px;
}
}
.container--description-block .listContainer {
@ -70,7 +71,7 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
width: 114px;
width: 100%;
height: 38px;
border-radius: 0;
}
@ -111,7 +112,7 @@
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid #000000;
width: 114px;
width: 100%;
height: 38px;
border-radius: 0;
}
@ -123,11 +124,11 @@
@media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) {
border-bottom: unset;
width: 82px;
}
}
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
width: 100%;
}
@media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {

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

@ -23,6 +23,69 @@
}
}
}
: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;
}
}
}
}
}
.flexRow--main-header-mobile {
.flexRowContent--main-header-mobile {
display: flex;
justify-content: space-between;
align-items: center;
:global(.vtex-store-components-3-x-logoLink) {
position: absolute;
top: 16px;
left: 40%;
@media (max-width: 768px) and (min-width: 375px) {
left: 30%;
}
:global(.vtex-store-components-3-x-sizeMobile) {
padding: 0;
height: 33px;
display: contents;
}
}
:global(.vtex-store-drawer-0-x-openIconContainer) {
visibility: hidden;
display: flex;
padding-left: 40px;
}
:global(.vtex-store-drawer-0-x-openIconContainer)::before {
content: "";
background: url("https://agenciamagma.vteximg.com.br/arquivos/hamburger-icon-m3academy-anacarolinaduartecavalcante.svg");
visibility: visible;
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;
}
}
}
}
}

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

@ -449,6 +449,9 @@
align-items: flex-end;
:global(.vtex-address-form__postalCode) {
padding-bottom: 0;
@media (max-width: 768px) and (min-width: 375px) {
width: calc(100% - 49px);
}
:global(.vtex-input)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;

9
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -7,7 +7,8 @@
padding: 0;
}
@media (max-width: 768px) and (min-width: 375px) {
margin-top: 40px;
margin: 0;
padding: 0 40px;
}
.listContainer {
justify-content: space-around;
@ -46,7 +47,7 @@
font-size: 18px;
line-height: 38px;
text-transform: capitalize;
width: 114px;
width: 100%;
height: 38px;
border-radius: 0;
:global(.vtex-button__label) {
@ -79,7 +80,7 @@
line-height: 38px;
text-transform: capitalize;
border-bottom: 2px solid #000000;
width: 114px;
width: 100%;
height: 38px;
border-radius: 0;
@media (max-width: 1025px) and (min-width: 768px) {
@ -87,10 +88,10 @@
}
@media (max-width: 768px) and (min-width: 375px) {
border-bottom: unset;
width: 82px;
}
:global(.vtex-button__label) {
padding: 0;
width: 100%;
@media (max-width: 1025px) and (min-width: 768px) {
justify-content: left;
}