@sorocraft/ui 1.0.82 → 1.0.83
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.
|
@@ -41,27 +41,6 @@
|
|
|
41
41
|
|
|
42
42
|
/* RESPONSIVE */
|
|
43
43
|
|
|
44
|
-
$breakpoints: (
|
|
45
|
-
// Extra small mobile devices (older phones)
|
|
46
|
-
mobile-xs: 320px,
|
|
47
|
-
// Small mobile devices (small smartphones)
|
|
48
|
-
mobile-sm: 480px,
|
|
49
|
-
// Medium mobile devices (larger smartphones)
|
|
50
|
-
mobile-md: 576px,
|
|
51
|
-
// Small tablets or phablets
|
|
52
|
-
tablet-sm: 768px,
|
|
53
|
-
// Medium tablets or small desktops
|
|
54
|
-
tablet-md: 992px,
|
|
55
|
-
// Large tablets
|
|
56
|
-
tablet-lg: 1024px,
|
|
57
|
-
// Small to medium desktops
|
|
58
|
-
desktop-sm: 1200px,
|
|
59
|
-
// Medium to large desktops
|
|
60
|
-
desktop-md: 1440px,
|
|
61
|
-
// Large desktops and full HD screens,
|
|
62
|
-
desktop-lg: 1920px
|
|
63
|
-
);
|
|
64
|
-
|
|
65
44
|
$xxs: 375px;
|
|
66
45
|
$xs: 430px;
|
|
67
46
|
$sm: 580px;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
$breakpoints: (
|
|
2
|
+
mobile-xs: 320px,
|
|
3
|
+
mobile-sm: 480px,
|
|
4
|
+
mobile-md: 576px,
|
|
5
|
+
tablet-sm: 768px,
|
|
6
|
+
tablet-md: 992px,
|
|
7
|
+
tablet-lg: 1024px,
|
|
8
|
+
desktop-sm: 1200px,
|
|
9
|
+
desktop-md: 1440px,
|
|
10
|
+
desktop-lg: 1920px,
|
|
11
|
+
);
|
|
12
|
+
|
|
13
|
+
// Enhanced media query mixin
|
|
14
|
+
@mixin media($type, $start, $end: null) {
|
|
15
|
+
$start-value: map-get($breakpoints, $start);
|
|
16
|
+
$end-value: if($end, map-get($breakpoints, $end), null);
|
|
17
|
+
|
|
18
|
+
@if $type == "range" and $start-value and $end-value {
|
|
19
|
+
@media (min-width: #{$start-value}) and (max-width: #{$end-value}) {
|
|
20
|
+
@content;
|
|
21
|
+
}
|
|
22
|
+
} @else if $type == "down" and $start-value {
|
|
23
|
+
@media (max-width: #{$start-value}) {
|
|
24
|
+
@content;
|
|
25
|
+
}
|
|
26
|
+
} @else if $type == "up" and $start-value {
|
|
27
|
+
@media (min-width: #{$start-value}) {
|
|
28
|
+
@content;
|
|
29
|
+
}
|
|
30
|
+
} @else {
|
|
31
|
+
@error "Invalid type `#{$type}` or breakpoint `#{$start}` or `#{$end}`.";
|
|
32
|
+
}
|
|
33
|
+
}
|