diff options
| author | Max | 2017-05-18 14:03:27 +0200 |
|---|---|---|
| committer | Max | 2017-05-18 14:03:27 +0200 |
| commit | f597e2fe949a1e18eb778b9a5bd102de88570555 (patch) | |
| tree | 7e42e6f91dd3e764cd2cf0c4f61f48501c2ed98f /src/sass/bootstrap4/mixins/_screen-reader.scss | |
| download | docs.maxmail.xyz-f597e2fe949a1e18eb778b9a5bd102de88570555.tar.gz | |
Diffstat (limited to 'src/sass/bootstrap4/mixins/_screen-reader.scss')
| -rw-r--r-- | src/sass/bootstrap4/mixins/_screen-reader.scss | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/mixins/_screen-reader.scss b/src/sass/bootstrap4/mixins/_screen-reader.scss new file mode 100644 index 0000000..e52b282 --- /dev/null +++ b/src/sass/bootstrap4/mixins/_screen-reader.scss @@ -0,0 +1,32 @@ +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +@mixin sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// +// Credit: HTML5 Boilerplate + +@mixin sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} |
