forked from M3-Academy/desafio-react-e-typescript
refactor(header): created mixin for media queries
This commit is contained in:
parent
09295f127d
commit
95be3fe2ed
@ -1,4 +1,5 @@
|
||||
@import './resources/colors';
|
||||
@import './resources/fonts';
|
||||
@import './resources/breakpoints';
|
||||
@import './helpers/mixin';
|
||||
@import './helpers/functions';
|
||||
|
@ -3,3 +3,14 @@
|
||||
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
Normal file
6
src/settings/styles/utils/resources/_breakpoints.scss
Normal file
@ -0,0 +1,6 @@
|
||||
// desenvolvimento focado em mobile-first
|
||||
|
||||
$breakpoints: (
|
||||
'md': 1025px,
|
||||
'lg': 2500px,
|
||||
) !default;
|
Loading…
Reference in New Issue
Block a user