fixes argyleink#277 (argyleink#279)

* fixes argyleink#277 * updates sample vars in docsite
kelvindecosta · Sep 19, 2022 · 2ae0a96 · 2ae0a96
1 parent 861f912
commit 2ae0a96
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -2971,12 +2971,12 @@ <h5>Viewport Vars Sample</h5>
 
               @custom-media --md-only       (480px &#60;= width &#60;= 768px);
               @custom-media --md-n-above    (width &#62;= 768px);
-              @custom-media --md-n-below    (width &#60;= 768px);
+              @custom-media --md-n-below    (width &#60; 768px);
               @custom-media --md-phone      (--md-only) and (--portrait);
 
               @custom-media --xxl-only      (1440px &#60;= width &#60;= 1920px);
               @custom-media --xxl-n-above   (width &#62;= 1920px);
-              @custom-media --xxl-n-below   (width &#60;= 1920px);
+              @custom-media --xxl-n-below   (width &#60; 1920px);
             </code></pre>
           </div>
         </div>

diff --git a/src/props.media.css b/src/props.media.css
@@ -23,33 +23,33 @@
 
 @custom-media --xxs-only      (0px <= width <= 240px);
 @custom-media --xxs-n-above   (width >= 240px);
-@custom-media --xxs-n-below   (width <= 240px);
+@custom-media --xxs-n-below   (width < 240px);
 @custom-media --xxs-phone     (--xxs-only) and (--portrait);
 
 @custom-media --xs-only       (240px <= width <= 360px);
 @custom-media --xs-n-above    (width >= 360px);
-@custom-media --xs-n-below    (width <= 360px);
+@custom-media --xs-n-below    (width < 360px);
 @custom-media --xs-phone      (--xs-only) and (--portrait);
 
 @custom-media --sm-only       (360px <= width <= 480px);
 @custom-media --sm-n-above    (width >= 480px);
-@custom-media --sm-n-below    (width <= 480px);
+@custom-media --sm-n-below    (width < 480px);
 @custom-media --sm-phone      (--sm-only) and (--portrait);
 
 @custom-media --md-only       (480px <= width <= 768px);
 @custom-media --md-n-above    (width >= 768px);
-@custom-media --md-n-below    (width <= 768px);
+@custom-media --md-n-below    (width < 768px);
 @custom-media --md-phone      (--md-only) and (--portrait);
 
 @custom-media --lg-only       (768px <= width <= 1024px);
 @custom-media --lg-n-above    (width >= 1024px);
-@custom-media --lg-n-below    (width <= 1024px);
+@custom-media --lg-n-below    (width < 1024px);
 @custom-media --lg-phone      (--lg-only) and (--portrait);
 
 @custom-media --xl-only       (1024px <= width <= 1440px);
 @custom-media --xl-n-above    (width >= 1440px);
-@custom-media --xl-n-below    (width <= 1440px);
+@custom-media --xl-n-below    (width < 1440px);
 
 @custom-media --xxl-only      (1440px <= width <= 1920px);
 @custom-media --xxl-n-above   (width >= 1920px);
-@custom-media --xxl-n-below   (width <= 1920px);
+@custom-media --xxl-n-below   (width < 1920px);