// ============================= // mixins.scss // ============================= // Useful functions.
// responsivity // =============================================== @mixin for-size($size, $width: 1000px) {
// ▼▼▼▼ DO NOT EDIT ▼▼▼▼ // by resolution @if $size == 'hd-up' { @media (min-width: 720px) { @content; } } @else if $size == 'fhd-up' { @media (min-width: 1080px) { @content; } } @else if $size == 'qhd-up' { @media (min-width: 1440px) { @content; } } @else if $size == 'uhd-up' { @media (min-width: 2160px) { @content; } } // by devices @else if $size == 'tablet' { @media (max-width: 768px) { @content; } } @else if $size == 'tablet-up' { @media (min-width: 768px) { @content; } } @else if $size == 'desktop' { @media (min-width: 769px) { @content; } } // custom natural breakpoints (project+element-specific) @else if $size == 'bp-up'{ @media (min-width: $width) { @content; } } // custom natural breakpoints down (project+element-specific) @else if $size == 'bp-down'{ @media (max-width: $width) { @content; } } // ▲▲▲▲ DO NOT EDIT ▲▲▲▲ // natural breakpoints (project-specific) @else if $size == 'menu-width'{ @media (max-width: $s-menuWidth) { @content; } } @else if $size == 'menu-width-up'{ @media (min-width: $s-menuWidth) { @content; } }
}
// flexbox // =============================================== @mixin flexbox($align: center, $justify: center, $direction: row){
display: flex; align-items: $align; justify-content: $justify; flex-direction: $direction; @content;
}