MateusLopes/desafio-react-e-typescript-mateus-lopes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando responsividade para todas as telas

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2023-01-08 12:07:36 -03:00
parent 8a60bc4054
commit de0c5f430f
1 changed files with 406 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

406
src/components/footer/footer.scss Normal file
View File

@ -0,0 +1,406 @@
@import "../../styles/utils/variaveis";
footer {
.newsletter-wrapper {
display: flex;
justify-content: center;
border-top: 1px solid $color-black;
border-bottom: 1px solid $color-black;
padding: 16px 0;
@media (max-width: 1024px) {
padding: 16px;
}
.newsletter {
@media (max-width: 1024px) {
width: 100%;
}
&-title {
color: $color-gray-200;
font-family: $font-family-Roboto;
font-weight: 500;
font-size: 18px;
line-height: 21px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 8px;
@media (min-width: 2500px) {
font-size: 36px;
line-height: 42px;
}
@media (max-width: 1024px) {
font-size: 14px;
line-height: 16px;
}
}
.second-wrapper {
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
gap: 16px;
}
.newsletter-input {
padding: 12px 15px;
width: 340px;
border-radius: 4px;
border: 1px solid $color-gray-650;
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 14px;
color: $color-gray-600;
@media (min-width: 2500px) {
width: 669px;
height: 59px;
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
width: 100%;
border-radius: 0;
}
@media (max-width: 375px) {
padding: 16px 15px;
}
&::placeholder {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 14px;
color: $color-gray-600;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
}
&:focus {
outline: none;
border-color: $color-gray-400;
}
}
.newsletter-btn {
padding: 14px 0;
width: 126px;
background-color: $color-black;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
border: none;
color: $color-white;
text-transform: uppercase;
font-family: $font-family-Roboto;
font-weight: 700;
font-size: 12px;
line-height: 14px;
text-align: center;
letter-spacing: 0.05em;
margin-left: 8px;
@media (min-width: 2500px) {
width: 246px;
height: 59px;
font-size: 28px;
line-height: 28.13px;
}
@media (max-width: 1024px) {
width: 100%;
margin-left: 0;
border-radius: 0;
font-size: 12px;
line-height: 16px;
box-shadow: none;
}
@media (max-width: 375px) {
padding: 17px 0;
}
}
}
}
}
.footer-top {
padding: 50px 100px;
display: flex;
justify-content: space-between;
@media (max-width: 1024px) {
padding: 24px 16px;
flex-direction: column;
}
.menu-footer-mobile {
display: none;
@media (max-width: 1024px) {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
.footer-menu-item {
display: flex;
flex-direction: column;
gap: 12px;
.footer-menu-title {
display: flex;
justify-content: space-between;
font-family: $font-family-Roboto;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: $color-gray-200;
.close-open-menu {
font-size: 17px;
}
}
li {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: $color-gray-200;
}
}
}
}
.menu-footer {
display: flex;
flex-direction: column;
gap: 12px;
width: 155px;
@media (min-width: 2500px) {
width: 315px;
}
@media (max-width: 1024px) {
display: none;
}
&-title {
font-family: $font-family-Roboto;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $color-gray-200;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
}
}
li a {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-gray-200;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
&.bold {
font-weight: 500;
}
}
li:last-child {
text-decoration: underline;
}
}
.social {
margin-left: 37px;
@media (max-width: 1024px) {
margin-left: 0;
}
&-links {
display: flex;
gap: 10px;
margin-bottom: 12px;
@media (max-width: 1024px) {
margin-bottom: 6px;
}
a {
width: 35px;
height: 35px;
img {
width: 100%;
height: 100%;
}
@media (min-width: 2500px) {
width: 70px;
height: 70px;
}
}
}
a.link {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-gray-200;
@media (min-width: 2500px) {
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
display: none;
}
}
}
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding: 15px 100px;
background-color: $color-black;
@media (max-width: 1024px) {
flex-direction: column;
gap: 15px;
padding: 15px 16px;
}
.social-reason {
display: flex;
align-items: center;
width: 234px;
color: $color-white;
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
@media (min-width: 2500px) {
width: 467px;
font-size: 20px;
line-height: 23px;
}
@media (max-width: 1024px) {
order: 2;
}
}
.payment-metods {
display: flex;
align-items: center;
gap: 12px;
@media (max-width: 1024px) {
order: 1;
}
@media (max-width: 375px) {
gap: 11px;
}
.line {
height: 24px;
width: 1px;
background-color: $color-gray-600;
}
img {
@media (min-width: 2500px) {
width: 70px;
&:last-child {
width: 106px;
height: 66px;
}
}
@media (max-width: 375px) {
width: 30px;
height: 17px;
&:last-child {
width: 45px;
height: 28px;
}
}
}
}
.authors {
display: flex;
align-items: center;
gap: 13px;
color: $color-white;
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
@media (min-width: 2500px) {
font-size: 20px;
line-height: 23px;
}
@media (max-width: 1024px) {
order: 3;
}
.m3,
.vtex {
display: flex;
align-items: center;
gap: 13px;
}
.m3 img {
@media (min-width: 2500px) {
width: 54.95px;
}
}
.vtex img {
@media (min-width: 2500px) {
width: 84.22px;
}
}
}
}
}