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

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

@ -1,6 +1,6 @@
/* Header Telemarketing */ /* Header Telemarketing */
:global(.vtex-telemarketing-2-x-wrapper){ :global(.vtex-telemarketing-2-x-wrapper) {
background-color: #000000; background-color: #000000;
height: 34px; height: 34px;
} }
@ -30,7 +30,7 @@
:global(.agenciamagma-store-theme-5-x-html--product-main-content) { :global(.agenciamagma-store-theme-5-x-html--product-main-content) {
display: grid; display: grid;
grid-template-columns: 100%; 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) { :global(.agenciamagma-store-theme-5-x-html--product-main-content) {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0 40px; padding: 0 40px 40px;
} }
} }
@ -73,7 +73,7 @@
/* Product Availability */ /* Product Availability */
@media (max-width: 2561px) and (min-width: 1920px) { @media (max-width: 2561px) and (min-width: 1920px) {
:global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { :global(.agenciamagma-store-theme-5-x-html--product-availability-block) {
display: grid; display: grid;
grid-template-columns: 49.131% 49.131%; grid-template-columns: 49.131% 49.131%;
column-gap: 32px; column-gap: 32px;
@ -83,7 +83,7 @@
} }
@media (max-width: 1920px) and (min-width: 1024px) { @media (max-width: 1920px) and (min-width: 1024px) {
:global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { :global(.agenciamagma-store-theme-5-x-html--product-availability-block) {
display: grid; display: grid;
grid-template-columns: 48.819% 48.819%; grid-template-columns: 48.819% 48.819%;
padding: 0 40px; padding: 0 40px;
@ -93,18 +93,20 @@
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
:global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { :global(.agenciamagma-store-theme-5-x-html--product-availability-block) {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0 40px; padding: 0 40px;
margin-bottom: 8px;
} }
} }
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
:global(.agenciamagma-store-theme-5-x-html--product-availability-block ) { :global(.agenciamagma-store-theme-5-x-html--product-availability-block) {
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
padding: 0 40px; padding: 0 40px;
margin-bottom: 8px;
} }
} }

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

@ -33,6 +33,61 @@
padding-right: 0; 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) { .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-weight: 400;

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

@ -459,6 +459,11 @@
.shippingContainer :global(.vtex-address-form__postalCode) { .shippingContainer :global(.vtex-address-form__postalCode) {
padding-bottom: 0; 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 { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input)::before {
content: "CALCULAR FRETE:"; content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif; 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) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block { .container--description-block {
margin-top: 40px; margin: 0;
padding: 0 40px;
} }
} }
.container--description-block .listContainer { .container--description-block .listContainer {
@ -70,7 +71,7 @@
font-size: 18px; font-size: 18px;
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
width: 114px; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
} }
@ -111,7 +112,7 @@
line-height: 38px; line-height: 38px;
text-transform: capitalize; text-transform: capitalize;
border-bottom: 2px solid #000000; border-bottom: 2px solid #000000;
width: 114px; width: 100%;
height: 38px; height: 38px;
border-radius: 0; border-radius: 0;
} }
@ -123,11 +124,11 @@
@media (max-width: 768px) and (min-width: 375px) { @media (max-width: 768px) and (min-width: 375px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) { .container--description-block .listContainer .listItemActive :global(.vtex-button) {
border-bottom: unset; border-bottom: unset;
width: 82px;
} }
} }
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { .container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
padding: 0; padding: 0;
width: 100%;
} }
@media (max-width: 1025px) and (min-width: 768px) { @media (max-width: 1025px) and (min-width: 768px) {
.container--description-block .listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) { .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; align-items: flex-end;
:global(.vtex-address-form__postalCode) { :global(.vtex-address-form__postalCode) {
padding-bottom: 0; padding-bottom: 0;
@media (max-width: 768px) and (min-width: 375px) {
width: calc(100% - 49px);
}
:global(.vtex-input)::before { :global(.vtex-input)::before {
content: "CALCULAR FRETE:"; content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;

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

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