oasys-lib 2.26.0 → 2.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/oasys-lib.mjs +30 -30
- package/fesm2022/oasys-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/bloomandwild/variables.css +1 -1
- package/src/assets/bloomon/variables.css +1 -1
- package/src/assets/global/responsive.scss +25 -13
- package/src/assets/global/scss-breakpoints.scss +1 -1
package/package.json
CHANGED
|
@@ -1,50 +1,62 @@
|
|
|
1
1
|
@use 'scss-breakpoints';
|
|
2
2
|
|
|
3
|
-
//
|
|
4
|
-
// so
|
|
3
|
+
// Responsive breakpoint mixins + matching SCSS variables, sourced from the
|
|
4
|
+
// design tokens (`scss-breakpoints`) so they stay in sync with `variables.css`.
|
|
5
|
+
// Buckets: mobile 0–766 · tablet 767–1079 · laptop 1080–1439 · desktop 1440+.
|
|
5
6
|
$mobile-max: scss-breakpoints.$oasys-size-web-breakpoint-mobile;
|
|
6
7
|
$tablet-min: scss-breakpoints.$oasys-size-web-breakpoint-tablet;
|
|
7
8
|
$laptop-min: scss-breakpoints.$oasys-size-web-breakpoint-laptop;
|
|
8
9
|
$desktop-min: scss-breakpoints.$oasys-size-web-breakpoint-desktop;
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
// Each mixin targets EXACTLY ONE bucket by default (non-overlapping ranges).
|
|
12
|
+
// `tablet()` / `laptop()` accept `$mobileFirst: false` to switch to a
|
|
13
|
+
// cumulative max-width — i.e. that bucket AND everything below it — for
|
|
14
|
+
// "collapse below X" patterns. Examples:
|
|
15
|
+
// @include responsive.tablet { ... } // 767–1079 only
|
|
16
|
+
// @include responsive.laptop(false) { ... } // 0–1439 (mobile + tablet + laptop)
|
|
14
17
|
|
|
18
|
+
// Mobile only: 0 → ($tablet-min - 1). At current tokens: 0 – 766px.
|
|
19
|
+
@mixin mobile() {
|
|
20
|
+
@media only screen and (max-width: ($tablet-min - 1)) {
|
|
21
|
+
@content;
|
|
22
|
+
}
|
|
15
23
|
}
|
|
16
24
|
|
|
25
|
+
// Default: tablet only ($tablet-min → $laptop-min - 1, i.e. 767 – 1079px).
|
|
26
|
+
// With `$mobileFirst: false`: cumulative below-laptop (0 → $laptop-min - 1).
|
|
17
27
|
@mixin tablet($mobileFirst: true) {
|
|
18
28
|
@if $mobileFirst == true {
|
|
19
|
-
@media only screen and (min-width: ($tablet-min
|
|
29
|
+
@media only screen and (min-width: ($tablet-min )) and (max-width: ($laptop-min - 1)) {
|
|
20
30
|
@content;
|
|
21
31
|
}
|
|
22
32
|
}
|
|
23
33
|
|
|
24
|
-
|
|
25
|
-
@media only screen and (max-width: ($laptop-min - 1)){
|
|
34
|
+
@else {
|
|
35
|
+
@media only screen and (max-width: ($laptop-min - 1)) {
|
|
26
36
|
@content;
|
|
27
37
|
}
|
|
28
38
|
}
|
|
29
39
|
}
|
|
30
40
|
|
|
41
|
+
// Default: laptop only ($laptop-min → $desktop-min - 1, i.e. 1080 – 1439px).
|
|
42
|
+
// With `$mobileFirst: false`: cumulative below-desktop (0 → $desktop-min - 1).
|
|
31
43
|
@mixin laptop($mobileFirst: true) {
|
|
32
44
|
@if $mobileFirst == true {
|
|
33
|
-
@media only screen and (min-width: $laptop-min) {
|
|
45
|
+
@media only screen and (min-width: ($laptop-min )) and (max-width: ($desktop-min - 1)) {
|
|
34
46
|
@content;
|
|
35
47
|
}
|
|
36
48
|
}
|
|
37
49
|
|
|
38
|
-
|
|
39
|
-
@media only screen and (max-width: ($desktop-min - 1)){
|
|
50
|
+
@else {
|
|
51
|
+
@media only screen and (max-width: ($desktop-min - 1)) {
|
|
40
52
|
@content;
|
|
41
53
|
}
|
|
42
54
|
}
|
|
43
55
|
}
|
|
44
56
|
|
|
57
|
+
// Desktop and up: $desktop-min → ∞. At current tokens: 1440px and above.
|
|
45
58
|
@mixin desktop() {
|
|
46
59
|
@media only screen and (min-width: $desktop-min) {
|
|
47
60
|
@content;
|
|
48
61
|
}
|
|
49
62
|
}
|
|
50
|
-
|