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): created data styles for containers in header

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-12-31 02:54:05 -03:00
parent 95be3fe2ed
commit 7a11a7f872
4 changed files with 43 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/settings/styles/utils/exports.scss
View File

@ -1,5 +1,4 @@
@import './resources/colors';
@import './resources/fonts';
@import './resources/breakpoints';
@import './helpers/mixin';
@import './helpers/functions';

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

@ -2,15 +2,3 @@
width: #{$size};
height: #{$size};
}
@mixin mq($point, $type, $custom) {
@if map-has-key($breakpoints, $point) {
@media screen and (#{$type}-width: #{map-get($breakpoints, $point)}) {
@content;
}
} @else if map-has-key($breakpoints, $point) == false && $custom == true {
@media screen and (#{$type}-width: #{$custom}) {
@content;
}
}
} ;

6
src/settings/styles/utils/resources/_breakpoints.scss
View File

@ -1,6 +0,0 @@
// desenvolvimento focado em mobile-first
$breakpoints: (
'md': 1025px,
'lg': 2500px,
) !default;

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')
);
}
}