diff --git a/docsite/index.html b/docsite/index.html index 945519a1..724d2fe5 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -3371,12 +3371,12 @@
Viewport Vars Sample
@custom-media --portrait (orientation: portrait); @custom-media --landscape (orientation: landscape); - @custom-media --md-only (480px <= width <= 768px); + @custom-media --md-only (480px <= width < 768px); @custom-media --md-n-above (width >= 768px); @custom-media --md-n-below (width < 768px); @custom-media --md-phone (--md-only) and (--portrait); - @custom-media --xxl-only (1440px <= width <= 1920px); + @custom-media --xxl-only (1440px <= width < 1920px); @custom-media --xxl-n-above (width >= 1920px); @custom-media --xxl-n-below (width < 1920px); diff --git a/src/props.media.css b/src/props.media.css index 0321e35c..cbf56f93 100644 --- a/src/props.media.css +++ b/src/props.media.css @@ -24,35 +24,35 @@ @custom-media --pointer (hover) and (pointer: coarse); @custom-media --mouse (hover) and (pointer: fine); -@custom-media --xxs-only (0px <= width <= 240px); +@custom-media --xxs-only (0px <= width < 240px); @custom-media --xxs-n-above (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-only (240px <= width < 360px); @custom-media --xs-n-above (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-only (360px <= width < 480px); @custom-media --sm-n-above (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-only (480px <= width < 768px); @custom-media --md-n-above (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-only (768px <= width < 1024px); @custom-media --lg-n-above (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-only (1024px <= width < 1440px); @custom-media --xl-n-above (width >= 1440px); @custom-media --xl-n-below (width < 1440px); -@custom-media --xxl-only (1440px <= width <= 1920px); +@custom-media --xxl-only (1440px <= width < 1920px); @custom-media --xxl-n-above (width >= 1920px); @custom-media --xxl-n-below (width < 1920px); \ No newline at end of file diff --git a/src/props.media.js b/src/props.media.js index f4c53d8a..15d44207 100644 --- a/src/props.media.js +++ b/src/props.media.js @@ -25,36 +25,36 @@ export const CustomMedia = { "--pointer": "(hover) and (pointer: coarse)", "--mouse": "(hover) and (pointer: fine)", - "--xxs-only": "(0px <= width <= 240px)", + "--xxs-only": "(0px <= width < 240px)", "--xxs-n-above": "(width >= 240px)", "--xxs-n-below": "(width < 240px)", "--xxs-phone": "(--xxs-only) and (--portrait)", - "--xs-only": "(240px <= width <= 360px)", + "--xs-only": "(240px <= width < 360px)", "--xs-n-above": "(width >= 360px)", "--xs-n-below": "(width < 360px)", "--xs-phone": "(--xs-only) and (--portrait)", - "--sm-only": "(360px <= width <= 480px)", + "--sm-only": "(360px <= width < 480px)", "--sm-n-above": "(width >= 480px)", "--sm-n-below": "(width < 480px)", "--sm-phone": "(--sm-only) and (--portrait)", - "--md-only": "(480px <= width <= 768px)", + "--md-only": "(480px <= width < 768px)", "--md-n-above": "(width >= 768px)", "--md-n-below": "(width < 768px)", "--md-phone": "(--md-only) and (--portrait)", - "--lg-only": "(768px <= width <= 1024px)", + "--lg-only": "(768px <= width < 1024px)", "--lg-n-above": "(width >= 1024px)", "--lg-n-below": "(width < 1024px)", "--lg-phone": "(--lg-only) and (--portrait)", - "--xl-only": "(1024px <= width <= 1440px)", + "--xl-only": "(1024px <= width < 1440px)", "--xl-n-above": "(width >= 1440px)", "--xl-n-below": "(width < 1440px)", - "--xxl-only": "(1440px <= width <= 1920px)", + "--xxl-only": "(1440px <= width < 1920px)", "--xxl-n-above": "(width >= 1920px)", "--xxl-n-below": "(width < 1920px)", } \ No newline at end of file