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

refactor/header #8

Merged
HenriqueSantosSantana merged 2 commits from refactor/header into develop 2022-12-31 05:55:42 +00:00
Conversation 0 Commits 2 Files Changed 2 +43 -11
2 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/settings/styles/utils/helpers/_mixin.scss
View File

@ -2,4 +2,3 @@
width: #{$size};
height: #{$size};
}

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

@ -1,5 +1,12 @@
@use '../../settings/styles/utils/helpers/functions' as function;
$containers: (
'xs': 339px,
'sm': 988px,
'md': 1080px,
'xl': 2299.68px,
);
.header {
position: sticky;
top: 0;
@ -32,23 +39,36 @@
.content {
@media only screen and (min-width: 1025px) {
width: #{function.fluid(1080px, 1280px)};
width: #{function.fluid(map-get($containers, 'md'), 1280px)};
padding: 0;
margin: 0 auto 22px;
}
@media only screen and (min-width: 2500px) {
width: #{function.fluid(2299.68px, 2500px)};
width: #{function.fluid(map-get($containers, 'xl'), 2500px)};
}
}
.logo {
$content: (
'md': 136px,
'xl': 265.62px,
);
// prettier-ignore
@media only screen and (min-width: 1025px) {
width: function.fluid(136px, 1080px);
width: function.fluid(
map-get($content, 'md'),
map-get($containers, 'md')
);
}
// prettier-ignore
@media only screen and (min-width: 2500px) {
width: function.fluid(265.62px, 2299.68px);
width: function.fluid(
map-get($content, 'xl'),
map-get($containers, 'xl')
);
}
}
@ -174,7 +194,7 @@
transition: 300ms ease;
&-content {
width: function.fluid(988px, 1024px);
width: function.fluid(map-get($containers, 'sm'), 1024px);
height: 100vh;
}
}
@ -189,7 +209,7 @@
.menu {
@media only screen and (max-width: 768px) {
&-content {
width: function.fluid(339px, 375px);
width: function.fluid(map-get($containers, 'xs'), 375px);
height: 100vh;
}
}
@ -265,7 +285,7 @@
justify-content: flex-start;
gap: 55px;
width: function.fluid(1080px, 1280px);
width: function.fluid(map-get($containers, 'md'), 1280px);
padding: 14px 0;
margin: 0 auto;
@ -286,18 +306,31 @@
@media screen and (min-width: 2500px) {
.list {
width: function.fluid(2299.68px, 2500px);
width: function.fluid(map-get($containers, 'xl'), 2500px);
}
}
}
.search-top {
$content: (
'md': 264px,
'xl': 515.62px,
);
// prettier-ignore
@media only screen and (min-width: 1025px) {
width: function.fluid(264px, 1080px);
width: function.fluid(
map-get($content, 'md'),
map-get($containers, 'md')
);
}
// prettier-ignore
@media only screen and (min-width: 2500px) {
width: function.fluid(515.62px, 2299.68px);
width: function.fluid(
map-get($content, 'xl'),
map-get($containers, 'xl')
);
}
}