diff --git a/www/src/pages/foundations/elevation.tsx b/www/src/pages/foundations/elevation.tsx
index a9170576a6..0340b96652 100644
--- a/www/src/pages/foundations/elevation.tsx
+++ b/www/src/pages/foundations/elevation.tsx
@@ -395,14 +395,14 @@ export default function ElevationPage({ pageContext }) {
Example variables usage
Variables are available with following pattern:
- {'$box-shadow-{direction}-{level}'}
+ {'var(--pgn-elevation-box-shadow-{direction}-{level})'}
For example:
- $box-shadow-right-2
+ var(--pgn-elevation-box-shadow-right-2)
- $box-shadow-up-3
+ var(--pgn-elevation-box-shadow-up-3)
diff --git a/www/src/pages/foundations/responsive.tsx b/www/src/pages/foundations/responsive.tsx
index 4131cf5724..8e9e9ecd57 100644
--- a/www/src/pages/foundations/responsive.tsx
+++ b/www/src/pages/foundations/responsive.tsx
@@ -18,11 +18,34 @@ const BREAKPOINT_DESCRIPTIONS = {
extraExtraLarge: { name: 'Extra extra large', identifier: 'xxl' },
};
+const customBreakpoints = [
+ { name: '--pgn-size-breakpoint-min-width-xs', property: 'min-width', value: '0px' },
+ { name: '--pgn-size-breakpoint-max-width-xs', property: 'max-width', value: '576px' },
+ { name: '--pgn-size-breakpoint-min-width-sm', property: 'min-width', value: '576px' },
+ { name: '--pgn-size-breakpoint-max-width-sm', property: 'max-width', value: '768px' },
+ { name: '--pgn-size-breakpoint-min-width-md', property: 'min-width', value: '768px' },
+ { name: '--pgn-size-breakpoint-max-width-md', property: 'max-width', value: '992px' },
+ { name: '--pgn-size-breakpoint-min-width-lg', property: 'min-width', value: '992px' },
+ { name: '--pgn-size-breakpoint-max-width-lg', property: 'max-width', value: '1200px' },
+ { name: '--pgn-size-breakpoint-min-width-xl', property: 'min-width', value: '1200px' },
+ { name: '--pgn-size-breakpoint-max-width-xl', property: 'max-width', value: '1400px' },
+ { name: '--pgn-size-breakpoint-min-width-xxl', property: 'min-width', value: '1400px' },
+];
+
const getBreakpointDescription = (breakpoint) => BREAKPOINT_DESCRIPTIONS[breakpoint] || {};
function IdentifierCell({ row }) {
return {row.values.identifier}
;
}
+
+function PropertyCell({ row }) {
+ return {row.values.property}
;
+}
+
+function ValueCell({ row }) {
+ return {row.values.value}
;
+}
+
function MinWidthCell({ row }) {
if (row.values.identifier === 'xs') {
return (
@@ -45,6 +68,7 @@ function MinWidthCell({ row }) {
}
return {row.values.minWidth ? `${row.values.minWidth}px` : '-'}
;
}
+
function MaxWidthCell({ row }) {
return {row.values.maxWidth ? `${row.values.maxWidth}px` : '-'}
;
}
@@ -83,7 +107,8 @@ function Responsive({ pageContext }) {
>
- Basic usage
+ SCSS variables
+ Basic usage
To access or change the breakpoints in the scss use $grid-breakpoints
variable.
@@ -99,6 +124,57 @@ function Responsive({ pageContext }) {
{'@include media-breakpoint-up(map.get($grid-breakpoints, \'lg\')) { // styles here }'}
+
+ CSS Custom Media Breakpoints
+
+ Media breakpoints in CSS are defined using the following variables.
+
+ Available Breakpoints
+
+
+
+
+ Basic Usage
+
+ The structure of a breakpoint variable is:
+
+
+ {'--pgn-size-breakpoint-{width_type}-{class_infix}'}
+
+
+ Explanation of the variable components:
+
+ {'{width_type}'}
specifies the width type, either min for a minimum width
+ (inclusive) or max for a maximum width (inclusive).
+
+ {'{class_infix}'}
refers to the breakpoint name, such as sm
, md
,
+ or lg
.
+
+
+
+
+
+ Example for applying styles when the screen width is narrower than the md
breakpoint:
+
+
+ {'@media (--pgn-size-breakpoint-max-width-md) { // styles here }'}
+
+
+
+ For applying styles when the screen width is wider than the md
breakpoint:
+
+
+ {'@media (--pgn-size-breakpoint-min-width-md) { // styles here }'}
+
);
@@ -116,6 +192,8 @@ const cellPropTypes = {
identifier: PropTypes.string,
minWidth: PropTypes.number,
maxWidth: PropTypes.number,
+ property: PropTypes.string,
+ value: PropTypes.string,
}),
}),
};
@@ -132,4 +210,10 @@ IdentifierCell.defaultProps = cellDefaultProps;
MinWidthCell.defaultProps = cellDefaultProps;
MaxWidthCell.defaultProps = cellDefaultProps;
+PropertyCell.propTypes = cellPropTypes;
+ValueCell.propTypes = cellPropTypes;
+
+PropertyCell.defaultProps = cellDefaultProps;
+ValueCell.defaultProps = cellDefaultProps;
+
export default Responsive;