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

feat(header):logo 4k responsiva

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-06 19:13:40 -03:00
parent 568300c45a
commit 9bbf9e0fb4
2 changed files with 143 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
desafio-5/.gitignore vendored
View File

@ -1,5 +1,6 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
todo.txt
tasksHeader.txt
# dependencies
/webpack.config.js
/node_modules

161
desafio-5/src/components/modules/header.module.scss
View File

@ -1,12 +1,15 @@
@import "../utils/Variables.scss";
//desktop
.Header_wrapper {
display: flex;
color: white;
background: black;
flex-direction: column;
justify-content: space-between;
height: 22.225vh;
max-height: 162px;
// Top-header
&-top {
@ -16,11 +19,12 @@
padding: 22px 100px;
gap: 10px;
width: 100%;
height: 76px;
min-height: 63.333333333333%;
border-bottom: 1px solid $-gray-300;
&-logo {
width: 12.593%;
max-width: 265.61px;
margin: 3px 0;
img {
width: 100%;
@ -28,7 +32,7 @@
}
&-Searchbox{
width: 24.445%;
height: 32px;
height: 5.926vh;
position: relative;
display: flex;
align-items: center;
@ -39,18 +43,9 @@
background: $-white;
border: 2px solid $-gray-200;
border-radius: 5px;
//digitação
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $-gray-400;
}
input[placeholder] {
//digitação
color: $-gray-400 !important;
font-family: 'Roboto';
font-style: normal;
@ -62,12 +57,12 @@
position: absolute;
top: 0;
right: 0;
margin: 7px 16px;
margin: 2.652% 16px;
width: 6.82%;
height: 56.25%;
height: 72%;
img{
width: 100%;
height: 100%;
// height: 3.25vh;
}
}
}
@ -92,17 +87,16 @@
&-cart{
img{
min-width: 28px;
width: 100%;
height: 100%;
}
}
}
}
//bottom-header
&-bottom {
min-height: 44px;
min-height: 36.666666666667%;
display: flex;
flex-direction: column;
justify-content: center;
@ -119,6 +113,7 @@
height: 16px;
min-width: 54px;
width: 100%;
white-space: nowrap;
button{
width: 100%;
height: 100%;
@ -134,3 +129,131 @@
}
}
}
// 4k
@media screen and (min-width: 2500px){
//desktop
.Header_wrapper {
height: 15.312vh;
max-height: 100%;
// Top-header
&-top {
&-logo {
width: 11.549%;
max-width: 100%;
margin: 3px 0;
img {
width: 100%;
}
}
&-Searchbox{
width: 24.445%;
height: 5.926vh;
position: relative;
display: flex;
align-items: center;
input{
width: 100%;
height: 100%;
padding: 7px 36px 7px 16px;
background: $-white;
border: 2px solid $-gray-200;
border-radius: 5px;
}
input[placeholder] {
//digitação
color: $-gray-400 !important;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
button{
position: absolute;
top: 0;
right: 0;
margin: 2.652% 16px;
width: 6.82%;
height: 72%;
img{
width: 100%;
// height: 3.25vh;
}
}
}
&-menu{
margin: 3px 0;
display: flex;
gap: 55px;
width: 12.594%;
height: 90.35%;
order: 2;
&-login{
text-transform: uppercase;
color: $-white;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
}
&-cart{
img{
min-width: 28px;
width: 100%;
}
}
}
}
//bottom-header
&-bottom {
min-height: 36.666666666667%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 14px 100px;
gap: 10px;
&-navigator{
width: 32.686%;
ul{
list-style: none;
display: flex;
gap: 55px;
li{
height: 16px;
min-width: 54px;
width: 100%;
white-space: nowrap;
button{
width: 100%;
height: 100%;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $-white;
}
}
}
}
}
}
}
//Mobile
@media screen and (min-width: 280px) and (max-width: 490px) {
}