sthag
4e4f8814d3
- Replace @import with @use and @forward - Only color function is used in _basic.scss for now - Change _all.scss to _index.scss - Modules use direct dependencies - Move @include from _config.scss to _common.scss, this was a long term mistake - Remove $color_list - Change basic_color()
44 lines
1.4 KiB
SCSS
44 lines
1.4 KiB
SCSS
@use "../global/config";
|
|
|
|
@use "sass:math";
|
|
|
|
//Sections for Media Queries
|
|
@mixin forPhoneUp {
|
|
@media (min-width: #{config.$screen_tiny - 1}) { @content; } //599px
|
|
}
|
|
@mixin forPhoneOnly {
|
|
@media (max-width: #{config.$screen_tiny - 1}) { @content; } //599px
|
|
}
|
|
@mixin forTabletPortraitUp {
|
|
@media (min-width: config.$screen_small) { @content; } //600px
|
|
}
|
|
@mixin forTabletPortraitOnly {
|
|
@media (min-width: config.$screen_tiny) and (max-width: #{config.$screen_small - 1}) { @content; } //600px - 899px
|
|
}
|
|
@mixin forTabletLandscapeUp {
|
|
@media (min-width: config.$screen_small) { @content; } //900px
|
|
}
|
|
@mixin forTabletLandscapeOnly {
|
|
@media (min-width: config.$screen_small) and (max-width: #{config.$screen_medium - 1}) { @content; } //900px - 1199px
|
|
}
|
|
@mixin forDesktopUp {
|
|
@media (min-width: config.$screen_medium) { @content; } //1200px
|
|
}
|
|
@mixin forDesktopOnly {
|
|
@media (min-width: config.$screen_medium) and (max-width: #{config.$screen_huge - 1}) { @content; } //1200px - 1799px
|
|
}
|
|
@mixin forBigDesktopUp {
|
|
@media (min-width: config.$screen_huge) { @content; } //1800px
|
|
}
|
|
|
|
//Mobile-first Media Query
|
|
@mixin goingLarge($width) {
|
|
// @media (min-width: $width/16+em) { @content; }
|
|
// @media (min-width: (math.div($width, 16)+em)) { @content; }
|
|
@media (min-width: ($width)) { @content; }
|
|
}
|
|
|
|
//Desktop-first Media Query
|
|
@mixin goingSmall($width) {
|
|
@media (max-width: ($width)) { @content; }
|
|
}
|