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

develop #16

Merged
HenriqueSantosSantana merged 65 commits from develop into main 2023-01-09 18:59:51 +00:00
Conversation 0 Commits 65 Files Changed 96 +25 -23
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1ab503d3de - Show all commits

48
src/template/Header/index.module.scss
View File

@ -8,13 +8,13 @@ $containers: (
);
.header {
padding: 25px 0;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
padding: 25px 0;
background-color: var(--clr-common-black);
}
@ -29,12 +29,12 @@ $containers: (
}
.content {
padding: 0px 16px;
margin-bottom: 27.14px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 16px;
margin-bottom: 27.14px;
}
.content {
@ -73,14 +73,14 @@ $containers: (
}
.search {
display: flex;
align-items: center;
justify-content: center;
min-height: 36px;
border: 2px solid var(--clr-gray-150);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-common-white);
input {
@ -95,13 +95,13 @@ $containers: (
.search {
button {
width: 36px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 100%;
background-color: var(--clr-common-white);
}
}
@ -183,13 +183,13 @@ $containers: (
.menu {
@media only screen and (max-width: 1024px) {
width: 100vw;
height: 100vh;
position: fixed;
left: -100%;
top: 0;
width: 100vw;
height: 100vh;
background-color: transparent;
transition: 300ms ease;
@ -257,10 +257,11 @@ $containers: (
}
.actions-bottom {
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
// styles for menu is active
@ -275,20 +276,20 @@ $containers: (
// menu styles for large devices 1025 > x
.menu {
@media only screen and (min-width: 1025px) {
display: block;
width: 100%;
display: block;
.list {
width: function.fluid(map-get($containers, 'md'), 1280px);
padding: 14px 0;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 55px;
width: function.fluid(map-get($containers, 'md'), 1280px);
padding: 14px 0;
margin: 0 auto;
background-color: var(--clr-common-black);
a {
@ -349,9 +350,10 @@ $containers: (
// added search bottom box for small devices, medium devices
.search-bottom {
display: flex;
padding: 0 16px;
display: flex;
&-content {
width: 100%;
}