mirror of
https://github.com/discourse/discourse.git
synced 2026-08-08 17:53:55 +08:00
a4b2b57db7Usage:
```scss
@use "lib/viewport";
@include viewport.from(sm) {
...
}
@include viewport.until(lg) {
...
}
@include viewport.between(sm, lg) {
...
}
```
Values are inclusive on the lower bound, and exclusive on the upper
bound.
35 lines
568 B
SCSS
Vendored
35 lines
568 B
SCSS
Vendored
@use "sass:map";
|
|
|
|
$breakpoints: (
|
|
sm: 40rem,
|
|
md: 48rem,
|
|
lg: 64rem,
|
|
xl: 80rem,
|
|
2xl: 96rem,
|
|
);
|
|
|
|
@function _get-breakpoint($bp) {
|
|
@if not map.has-key($breakpoints, $bp) {
|
|
@error "Invalid breakpoint: #{$bp}";
|
|
}
|
|
|
|
@return map.get($breakpoints, $bp);
|
|
}
|
|
|
|
@mixin from($bp) {
|
|
@media (width >= #{_get-breakpoint($bp)}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin until($bp) {
|
|
@media (width < #{_get-breakpoint($bp)}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin between($from, $until) {
|
|
@media (#{_get-breakpoint($from)} <= width < #{_get-breakpoint($until)}) {
|
|
@content;
|
|
}
|
|
}
|
