diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js new file mode 100644 index 000000000000..552e1fda442c --- /dev/null +++ b/packages/react/src/components/Helpers/HelperClasses.stories.js @@ -0,0 +1,29 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +/* eslint-disable no-console */ + +import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; + +export default { + title: 'Helpers/BreakpointClasses', + component: BreakpointClasses, +}; + +export const BreakpointClasses = () => { + const prefix = usePrefix(); + return ( + <> +
Small Only
+
Medium Only
+
Large Only
+
XL Only
+
Max Only
+ + ); +}; diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_helper-classes.scss new file mode 100644 index 000000000000..220fe6816d23 --- /dev/null +++ b/packages/styles/scss/utilities/_helper-classes.scss @@ -0,0 +1,43 @@ +@use '../breakpoint' as *; +@use '../config'; + +div[class*='hidden--'] { + padding: 2rem 1rem; +} + +// Classes that are used to hide elements only at specific breakpoints. +// Helpful for when you would like to hide elements outside of a Grid +.#{config.$prefix}__hidden--sm-only { + background: #8a3ffc; + @include breakpoint-between('sm', 'md') { + display: none; + } +} + +.#{config.$prefix}__hidden--md-only { + background: #4589ff; + @include breakpoint-between('md', 'lg') { + display: none; + } +} + +.#{config.$prefix}__hidden--lg-only { + background: #42be65; + @include breakpoint-between('lg', 'xlg') { + display: none; + } +} + +.#{config.$prefix}__hidden--xlg-only { + background: #f1c21b; + @include breakpoint-between('xlg', 'max') { + display: none; + } +} + +.#{config.$prefix}__hidden--max-only { + background: #da1e28; + @include breakpoint-up('max') { + display: none; + } +} diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss index 21bbd53494b9..a8e369b99add 100644 --- a/packages/styles/scss/utilities/_index.scss +++ b/packages/styles/scss/utilities/_index.scss @@ -10,6 +10,7 @@ @forward 'component-reset' as component-*; @forward 'convert' show em, rem; @forward 'focus-outline'; +@forward 'helper-classes'; @forward 'high-contrast-mode'; @forward 'keyframes'; @forward 'placeholder-colors';