diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss index 026d749..20d5303 100644 --- a/src/settings/styles/utils/exports.scss +++ b/src/settings/styles/utils/exports.scss @@ -1,4 +1,5 @@ @import './resources/colors'; @import './resources/fonts'; +@import './resources/breakpoints'; @import './helpers/mixin'; @import './helpers/functions'; diff --git a/src/settings/styles/utils/helpers/_mixin.scss b/src/settings/styles/utils/helpers/_mixin.scss index 48acbe9..e92efed 100644 --- a/src/settings/styles/utils/helpers/_mixin.scss +++ b/src/settings/styles/utils/helpers/_mixin.scss @@ -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; + } + } +} ; diff --git a/src/settings/styles/utils/resources/_breakpoints.scss b/src/settings/styles/utils/resources/_breakpoints.scss new file mode 100644 index 0000000..a136c45 --- /dev/null +++ b/src/settings/styles/utils/resources/_breakpoints.scss @@ -0,0 +1,6 @@ +// desenvolvimento focado em mobile-first + +$breakpoints: ( + 'md': 1025px, + 'lg': 2500px, +) !default;