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(mobile):searchbox mobile responsiva

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-01-07 05:50:34 -03:00
parent 66594603d9
commit 495781af10
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -231,12 +231,10 @@
padding: 25px 16px;
gap: 10px;
height: 16.297vh;
// background: pink;
&-menu{
border: none;
min-height: 22.5px;
height: 4.083vh;
width: 8.17%;
.hamburguer{
width: 100%;
height: 100%;
@ -260,6 +258,47 @@
}
}
}
//bottom-header-mobile
&-mobilebottom{
display: flex;
align-items: center;
padding: 0 16px 25px 16px ;
&-Searchbox{
width: 100%;
height: 6.669vh;
position: relative;
display: flex;
align-items: flex-start;
input{
width: 100%;
height: 100%;
padding: 7px 10% 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: 7px 16px;
width: 18px;
height: 18px;
img{
width: 100%;
}
}
}
}
// Top-header-desktop
&-top {

1
desafio-5/src/components/scripts/header.tsx
View File

@ -49,6 +49,7 @@ const Header = () =>{
</div>
<div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
<div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
<input name="search" type="text" placeholder="Buscar">
</input>