diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index 47f2aa4..ca96dca 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -3,7 +3,9 @@ @use "../../tokens/spacing" as *; .iati-button { - display: inline-flex; + --display: inline-flex; // Used by .display--* utilities + + display: var(--display); align-items: center; justify-content: center; gap: 0.25em; diff --git a/src/scss/iati.scss b/src/scss/iati.scss index 12bc329..9a99298 100644 --- a/src/scss/iati.scss +++ b/src/scss/iati.scss @@ -4,6 +4,7 @@ @use "typography"; @use "components"; @use "layout"; +@use "utilities"; // Expose tokens as Sass variables @forward "tokens"; diff --git a/src/scss/layout/header/header.stories.ts b/src/scss/layout/header/header.stories.ts index ee2348c..9ddf282 100644 --- a/src/scss/layout/header/header.stories.ts +++ b/src/scss/layout/header/header.stories.ts @@ -52,7 +52,7 @@ export const Header: Story = {
${CountrySwitcher.render?.call({ ...args })} - diff --git a/src/scss/utilities/_display.scss b/src/scss/utilities/_display.scss new file mode 100644 index 0000000..3be4d94 --- /dev/null +++ b/src/scss/utilities/_display.scss @@ -0,0 +1,15 @@ +@use "../tokens/screens" as *; + +:root { + --display: block; +} + +.hide { + display: none; +} + +.display--sm { + @media (min-width: $screen-sm) { + display: var(--display); + } +} diff --git a/src/scss/utilities/_index.scss b/src/scss/utilities/_index.scss new file mode 100644 index 0000000..51eb377 --- /dev/null +++ b/src/scss/utilities/_index.scss @@ -0,0 +1 @@ +@use "display";