diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-12-22 14:29:08 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-12-22 14:32:57 +0100 |
| commit | fe5d74a864ddd1429b0753a3984c45b2392176d2 (patch) | |
| tree | 43780acb909d3907ae0cc2143e77e79c07572890 /src/styles/base | |
| parent | 139b3a252c9f90de603be1a98e3186b359353541 (diff) | |
chore: add a skip to content link
Diffstat (limited to 'src/styles/base')
| -rw-r--r-- | src/styles/base/_helpers.scss | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/src/styles/base/_helpers.scss b/src/styles/base/_helpers.scss new file mode 100644 index 0000000..0c3b617 --- /dev/null +++ b/src/styles/base/_helpers.scss @@ -0,0 +1,49 @@ +@use "@styles/abstracts/functions" as fun; +@use "@styles/abstracts/mixins" as mix; + +/*========================================================================= +>>> TABLE OF CONTENTS: +=========================================================================== + 1.0 Accessibility + 2.0. Alignments +===========================================================================*/ + +//========================================================================= +// 1.0. Accessibility +//========================================================================= + +/* Text meant only for screen readers. */ +.screen-reader-text { + width: fun.convert-px(1); + height: fun.convert-px(1); + padding: 0; + position: absolute !important; + overflow: hidden; + border: 0; + clip: rect(1px, 1px, 1px, 1px); + word-break: normal; + word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ + + &:focus { + display: block; + width: auto; + height: auto; + padding: var(--spacing-xs) var(--spacing-sm); + left: var(--spacing-2xs); + top: var(--spacing-xs); + z-index: 100000; + background: var(--color-primary); + box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0 + var(--color-shadow); + clip: auto !important; + color: var(--color-fg-inverted); + font-size: var(--font-size-md); + font-weight: 600; + } +} + +@include mix.motion("reduce") { + * { + transition: none !important; + } +} |