Commit
Author: Arby [horizonmedimp@gmail.com]
Committer: GitHub [noreply@github.com] Mon, 01 Apr 2024 22:19:43 +0000
Hash: 894d7a3b14f073baf4f54f70620f11391e07688e
Timestamp: Mon, 01 Apr 2024 22:19:43 +0000 (8 months ago)

+16 -16 +/-3 browse
Fix media queries "-only" breakpoints bug and update documentation (#488) 
Fix media queries "-only" breakpoints bug and update documentation (#488)

* Fix media queries '-only' breakpoints bug

* Update documentation for media queries '-only' breakpoints
1diff --git a/docsite/index.html b/docsite/index.html
2index 945519a..724d2fe 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -3371,12 +3371,12 @@
6 @custom-media --portrait (orientation: portrait);
7 @custom-media --landscape (orientation: landscape);
8
9- @custom-media --md-only (480px <= width <= 768px);
10+ @custom-media --md-only (480px <= width < 768px);
11 @custom-media --md-n-above (width >= 768px);
12 @custom-media --md-n-below (width < 768px);
13 @custom-media --md-phone (--md-only) and (--portrait);
14
15- @custom-media --xxl-only (1440px <= width <= 1920px);
16+ @custom-media --xxl-only (1440px <= width < 1920px);
17 @custom-media --xxl-n-above (width >= 1920px);
18 @custom-media --xxl-n-below (width < 1920px);
19 </code></pre>
20 diff --git a/src/props.media.css b/src/props.media.css
21index 0321e35..cbf56f9 100644
22--- a/src/props.media.css
23+++ b/src/props.media.css
24 @@ -24,35 +24,35 @@
25 @custom-media --pointer (hover) and (pointer: coarse);
26 @custom-media --mouse (hover) and (pointer: fine);
27
28- @custom-media --xxs-only (0px <= width <= 240px);
29+ @custom-media --xxs-only (0px <= width < 240px);
30 @custom-media --xxs-n-above (width >= 240px);
31 @custom-media --xxs-n-below (width < 240px);
32 @custom-media --xxs-phone (--xxs-only) and (--portrait);
33
34- @custom-media --xs-only (240px <= width <= 360px);
35+ @custom-media --xs-only (240px <= width < 360px);
36 @custom-media --xs-n-above (width >= 360px);
37 @custom-media --xs-n-below (width < 360px);
38 @custom-media --xs-phone (--xs-only) and (--portrait);
39
40- @custom-media --sm-only (360px <= width <= 480px);
41+ @custom-media --sm-only (360px <= width < 480px);
42 @custom-media --sm-n-above (width >= 480px);
43 @custom-media --sm-n-below (width < 480px);
44 @custom-media --sm-phone (--sm-only) and (--portrait);
45
46- @custom-media --md-only (480px <= width <= 768px);
47+ @custom-media --md-only (480px <= width < 768px);
48 @custom-media --md-n-above (width >= 768px);
49 @custom-media --md-n-below (width < 768px);
50 @custom-media --md-phone (--md-only) and (--portrait);
51
52- @custom-media --lg-only (768px <= width <= 1024px);
53+ @custom-media --lg-only (768px <= width < 1024px);
54 @custom-media --lg-n-above (width >= 1024px);
55 @custom-media --lg-n-below (width < 1024px);
56 @custom-media --lg-phone (--lg-only) and (--portrait);
57
58- @custom-media --xl-only (1024px <= width <= 1440px);
59+ @custom-media --xl-only (1024px <= width < 1440px);
60 @custom-media --xl-n-above (width >= 1440px);
61 @custom-media --xl-n-below (width < 1440px);
62
63- @custom-media --xxl-only (1440px <= width <= 1920px);
64+ @custom-media --xxl-only (1440px <= width < 1920px);
65 @custom-media --xxl-n-above (width >= 1920px);
66 @custom-media --xxl-n-below (width < 1920px);
67\ No newline at end of file
68 diff --git a/src/props.media.js b/src/props.media.js
69index f4c53d8..15d4420 100644
70--- a/src/props.media.js
71+++ b/src/props.media.js
72 @@ -25,36 +25,36 @@ export const CustomMedia = {
73 "--pointer": "(hover) and (pointer: coarse)",
74 "--mouse": "(hover) and (pointer: fine)",
75
76- "--xxs-only": "(0px <= width <= 240px)",
77+ "--xxs-only": "(0px <= width < 240px)",
78 "--xxs-n-above": "(width >= 240px)",
79 "--xxs-n-below": "(width < 240px)",
80 "--xxs-phone": "(--xxs-only) and (--portrait)",
81
82- "--xs-only": "(240px <= width <= 360px)",
83+ "--xs-only": "(240px <= width < 360px)",
84 "--xs-n-above": "(width >= 360px)",
85 "--xs-n-below": "(width < 360px)",
86 "--xs-phone": "(--xs-only) and (--portrait)",
87
88- "--sm-only": "(360px <= width <= 480px)",
89+ "--sm-only": "(360px <= width < 480px)",
90 "--sm-n-above": "(width >= 480px)",
91 "--sm-n-below": "(width < 480px)",
92 "--sm-phone": "(--sm-only) and (--portrait)",
93
94- "--md-only": "(480px <= width <= 768px)",
95+ "--md-only": "(480px <= width < 768px)",
96 "--md-n-above": "(width >= 768px)",
97 "--md-n-below": "(width < 768px)",
98 "--md-phone": "(--md-only) and (--portrait)",
99
100- "--lg-only": "(768px <= width <= 1024px)",
101+ "--lg-only": "(768px <= width < 1024px)",
102 "--lg-n-above": "(width >= 1024px)",
103 "--lg-n-below": "(width < 1024px)",
104 "--lg-phone": "(--lg-only) and (--portrait)",
105
106- "--xl-only": "(1024px <= width <= 1440px)",
107+ "--xl-only": "(1024px <= width < 1440px)",
108 "--xl-n-above": "(width >= 1440px)",
109 "--xl-n-below": "(width < 1440px)",
110
111- "--xxl-only": "(1440px <= width <= 1920px)",
112+ "--xxl-only": "(1440px <= width < 1920px)",
113 "--xxl-n-above": "(width >= 1920px)",
114 "--xxl-n-below": "(width < 1920px)",
115 }
116\ No newline at end of file