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 estilos do footer

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-02-01 10:38:48 -03:00
parent b95541fb3f
commit 98905f7456
7 changed files with 228 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
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 40px;
padding: 0 40px 0;
}
}
@ -110,3 +110,113 @@
margin-bottom: 8px;
}
}
/* Footer */
:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) {
display: flex;
justify-content: center;
}
@media (max-width: 2561px) and (min-width: 1920px) {
:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) {
justify-content: left;
}
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) {
display: unset;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.agenciamagma-store-theme-5-x-html--seja-um-franqueado) {
display: unset;
}
}
:global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) {
display: flex;
justify-content: right;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) {
display: unset;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.agenciamagma-store-theme-5-x-html--social-networks-component), :global(.agenciamagma-store-theme-5-x-html--payment-methods-component) {
display: unset;
}
}
/* Footer Credits */
:global(.agenciamagma-store-theme-5-x-html--credits) {
height: 107px;
background: #000000;
border-top: 1px solid #FFFFFF;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 32px 32px 0 438.5px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
:global(.agenciamagma-store-theme-5-x-html--credits) {
justify-content: space-between;
padding: 31.5px 320px 15.5px;
}
}
:global(.agenciamagma-store-theme-5-x-html--credits-mobile) {
background: #000000;
border-top: 1px solid #FFFFFF;
display: flex;
justify-content: center;
height: 131px;
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.agenciamagma-store-theme-5-x-html--credits-mobile) {
height: 151px;
}
}
:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media (max-width: 1025px) and (min-width: 768px) {
:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) {
margin-top: 16px;
margin-bottom: 32px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) {
margin-top: 16px;
margin-bottom: 32px;
padding: 0 40px;
}
}
@media (max-width: 2561px) and (min-width: 1920px) {
:global(.agenciamagma-store-theme-5-x-html--footer-credits-information) {
align-items: flex-start;
}
}
:global(.agenciamagma-store-theme-5-x-html--footer-credits-information-mobile) {
display: flex;
flex-direction: column;
align-items: center;
}

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

@ -133,6 +133,30 @@
line-height: 25px;
}
.flexRow--menu-row {
background-color: #000000;
height: 464px;
padding: 32px 32px 128px;
}
@media (max-width: 2561px) and (min-width: 1920px) {
.flexRow--menu-row {
padding: 32px 320px 128px;
}
}
.flexRow--menu-row-mobile {
background-color: #000000;
min-height: 532px;
padding: 0px 16px 32px;
}
.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile {
display: flex;
flex-direction: column;
}
.flexRow--menu-row-mobile .flexRowContent--menu-row-mobile .stretchChildrenWidth {
width: 100% !important;
}
@media (max-width: 768px) and (min-width: 375px) {
.flexRow--newsletter-footer {
margin-top: 32px;

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

@ -35,4 +35,16 @@
.container--slider-title .wrapper--slider-title .heading--slider-title {
font-size: 20px;
}
}
.container .wrapper .paragraph {
margin: 0;
font-weight: 400;
font-size: 12px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.45);
}
.container .wrapper .paragraph--footer {
font-weight: 700;
}

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

@ -28,7 +28,7 @@
.container {
width: 100%;
padding: 0;
margin: auto;
margin: 0 auto;
max-width: unset !important;
}
@ -712,16 +712,22 @@
.newsletter {
height: 175px;
background: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 16px 16px;
border-bottom: 1px solid #ffffff;
}
@media (max-width: 1025px) and (min-width: 768px) {
.newsletter {
border-bottom: none !important;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.newsletter {
height: 200px;
padding: 64px 16px 12px;
border-bottom: none !important;
}
}
.newsletter .container {
@ -808,14 +814,18 @@
}
@media (max-width: 1025px) and (min-width: 768px) {
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
padding-bottom: 16px;
padding-left: 24px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
padding-bottom: 16px;
padding-left: 24px;
}
}
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
@ -827,14 +837,14 @@
}
@media (max-width: 1025px) and (min-width: 768px) {
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
}
}
@media (max-width: 768px) and (min-width: 375px) {
.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
}
}
.newsletter .container .form .inputGroup .buttonContainer {

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

@ -157,6 +157,29 @@
//Footer
.flexRow--menu-row {
background-color: #000000;
height: 464px;
padding: 32px 32px 128px;
@media (max-width: 2561px) and (min-width: 1920px) {
padding: 32px 320px 128px;
}
}
.flexRow--menu-row-mobile {
background-color: #000000;
min-height: 532px;
padding: 0px 16px 32px;
.flexRowContent--menu-row-mobile {
display: flex;
flex-direction: column;
.stretchChildrenWidth{
width: 100% !important;
}
}
}
//Footer Newsletter
.flexRow--newsletter-footer {
@media (max-width: 768px) and (min-width: 375px) {
margin-top: 32px;

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

@ -15,7 +15,7 @@
border-left: none;
border-right: none;
border-bottom: 1px solid #aeaeae;
border-radius: 0;
border-radius: 0;
}
}
}
@ -26,7 +26,7 @@
.container {
width: 100%;
padding: 0;
margin: auto;
margin: 0 auto;
max-width: unset !important;
}
@ -688,14 +688,18 @@
.newsletter {
height: 175px;
background: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 16px 16px;
border-bottom: 1px solid #ffffff;
@media (max-width: 1025px) and (min-width: 768px) {
border-bottom: none !important;
}
@media (max-width: 768px) and (min-width: 375px) {
height: 200px;
padding: 64px 16px 12px;
border-bottom: none !important;
}
.container {
margin: 0;
@ -766,12 +770,16 @@
color: #929292;
border: 1px solid #000000;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
padding-bottom: 16px;
padding-left: 24px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
padding-bottom: 16px;
padding-left: 24px;
}
}
:global(.vtex-styleguide-9-x-input)::placeholder {
@ -781,12 +789,12 @@
color: #929292;
border: 1px solid #000000;
@media (max-width: 1025px) and (min-width: 768px) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
}
@media (max-width: 768px) and (min-width: 375px) {
font-size: 16px;
line-height: 22px;
font-size: 12px;
line-height: 16px;
}
}
}

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

@ -6,7 +6,7 @@
margin-top: 16px;
margin-bottom: 32px;
@media (max-width: 1025px) and (min-width: 768px) {
margin-bottom: 24px;
margin-bottom: 24px;
}
@media (max-width: 768px) and (min-width: 375px) {
margin-bottom: 16px;
@ -25,3 +25,21 @@
}
}
}
// Footer Credits
.container {
.wrapper {
.paragraph {
margin: 0;
font-weight: 400;
font-size: 12px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 0.45);
}
.paragraph--footer {
font-weight: 700;
}
}
}