blob: e72f572824deb58f5a06bd35b0f2d17ec5bf1da0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
@use "../variables" as var;
@use "sass:map";
/// Media query: media type
/// @param {String} $type - Media type: all, screen, print, retina.
/// @example scss - `@media only screen` equivalent is:
/// @include media("screen");
@mixin media($type) {
@if $type == "retina" {
$type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
} @else if $type == "screen" or $type == "print" {
$type: "only #{$type}";
}
@media #{$type} {
@content;
}
}
/// Media query: min-width / max-width or min-height / max-height
/// @param {String} $from - min size breakpoint.
/// @param {String} $until - max size breakpoint.
/// @param {String} $kind - width or height. Default: width.
/// @example scss - `@media (min-width: "md")` equivalent is:
/// @include dimensions("md");
@mixin dimensions($from: null, $until: null, $kind: "width") {
$query: "";
@if $from {
@if type-of($from) == "string" {
$size: map.get(var.$breakpoints, $from);
@if $kind == "width" {
$query: "(min-width: #{$size})";
} @else if $kind == "height" {
$query: "(min-height: #{$size})";
} @else {
@error "`$kind` must be either width or height.";
}
} @else {
@error "`$from` must be a string.";
}
}
@if $from and $until {
$query: $query + " and ";
}
@if $until {
@if type-of($until) == "string" {
$size: map.get(var.$breakpoints, $until);
$size: calc(#{$size} - 1px);
@if $kind == "width" {
$query: $query + "(max-width: #{$size})";
} @else if $kind == "height" {
$query: $query + "(max-height: #{$size})";
} @else {
@error "`$kind` must be either width or height.";
}
} @else {
@error "`$until` must be a string.";
}
}
@media #{$query} {
@content;
}
}
/// Media query: prefers-reduced-motion
/// @param {String} $value - Media query value: `no-preference` or `reduce`.
/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is:
/// @include motion("reduce");
@mixin motion($value) {
@if $value == "no-preference" or $value == "reduce" {
@media (prefers-reduced-motion: #{$value}) {
@content;
}
} @else {
@error "Allowed values are `no-preference` and `reduce`.";
}
}
/// Media query: any-pointer
/// @param {String} $value - Media query value: `fine`, `coarse` or `none`.
/// @example scss - @media (any-pointer: "fine") equivalent is:
/// @include pointer("fine");
@mixin pointer($value) {
@if $value == "fine" or $value == "coarse" or $value == "none" {
@media (any-pointer: #{$value}) {
@content;
}
} @else {
@error "Allowed values are `fine`, `coarse` and `none`.";
}
}
|