feat(media-query): Add CSS media queries to BUIE (#2854)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: greathmaster

src/components/media-query/constants.js

@@ -1,7 +1,8 @@
-export const SIZE_SMALL = '(max-width: 374px)';
-export const SIZE_MEDIUM = '(min-width: 375px) and (max-width: 767px)';
-export const SIZE_LARGE = '(min-width: 768px) and (max-width: 1023px)';
-export const SIZE_XLARGE = '(min-width: 1024px)';
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+
+export const SIZE_SMALL = smallScreen;
+export const SIZE_MEDIUM = mediumScreen;
+export const SIZE_LARGE = largeScreen;
 
 export const HOVER = '(hover: hover)';
 export const ANY_HOVER = '(any-hover: hover)';

src/styles/_variables.scss

@@ -5,6 +5,7 @@
 @import './constants/typography';
 @import './constants/themes';
 @import './constants/buttons';
+@import './constants/media-queries';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins

src/styles/constants/_media-queries.scss

@@ -0,0 +1,13 @@
+$size-small-max: 374px;
+$size-medium-max: 767px;
+$size-large-max: 1023px;
+
+$small-screen: unquote('(max-width: #{$size-small-max})');
+$medium-screen: unquote('(max-width: #{$size-medium-max})');
+$large-screen: unquote('(max-width: #{$size-large-max})');
+
+@mixin breakpoint($media-query) {
+    @media #{$media-query} {
+        @content;
+    }
+}

src/styles/variables.js

@@ -101,4 +101,10 @@ export const bdlBtnIconSize = "20px"; // bdl-btn-icon-size
 export const bdlBtnTextIconSize = "16px"; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = "16px"; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = "0.15s"; // bdl-transitionDurationBase
-export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const bdlTimingFunction = ["cubic-bezier(0","0","0.6","1)"]; // bdl-timingFunction
+export const sizeSmallMax = "374px"; // size-small-max
+export const sizeMediumMax = "767px"; // size-medium-max
+export const sizeLargeMax = "1023px"; // size-large-max
+export const smallScreen = "(max-width: 374px)"; // small-screen
+export const mediumScreen = "(max-width: 767px)"; // medium-screen
+export const largeScreen = "(max-width: 1023px)"; // large-screen

src/styles/variables.json

@@ -98,5 +98,11 @@
     "bdl-btn-text-icon-size": "16px",
     "bdl-btn-padding-horizontal": "16px",
     "bdl-transitionDurationBase": "0.15s",
-    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"]
+    "bdl-timingFunction": ["cubic-bezier(0", "0", "0.6", "1)"],
+    "size-small-max": "374px",
+    "size-medium-max": "767px",
+    "size-large-max": "1023px",
+    "small-screen": "(max-width: 374px)",
+    "medium-screen": "(max-width: 767px)",
+    "large-screen": "(max-width: 1023px)"
 }

src/styles/variables.ts

@@ -99,3 +99,9 @@ export const bdlBtnTextIconSize = '16px'; // bdl-btn-text-icon-size
 export const bdlBtnPaddingHorizontal = '16px'; // bdl-btn-padding-horizontal
 export const bdlTransitionDurationBase = '0.15s'; // bdl-transitionDurationBase
 export const bdlTimingFunction = ['cubic-bezier(0', '0', '0.6', '1)']; // bdl-timingFunction
+export const sizeSmallMax = '374px'; // size-small-max
+export const sizeMediumMax = '767px'; // size-medium-max
+export const sizeLargeMax = '1023px'; // size-large-max
+export const smallScreen = '(max-width: 374px)'; // small-screen
+export const mediumScreen = '(max-width: 767px)'; // medium-screen
+export const largeScreen = '(max-width: 1023px)'; // large-screen