diff options
Diffstat (limited to 'sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss')
-rw-r--r-- | sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss new file mode 100644 index 000000000..a03776778 --- /dev/null +++ b/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss @@ -0,0 +1,51 @@ +// +// @file +// Accessibility features. +// + +// As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +@mixin visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { + clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax. + } + clip: rect(1px, 1px, 1px, 1px); +} + +// Turns off the visually-hidden effect. +@mixin visually-hidden-off { + position: static !important; + clip: auto; + height: auto; + width: auto; + overflow: auto; +} + +// Makes an element visually hidden, except when it receives focus. +@mixin visually-focusable { + @include visually-hidden(); + + &:active, + &:focus { + @include visually-hidden-off(); + } +} + +// Placeholder styles for use with @extend. +%visually-hidden { + @include visually-hidden(); +} +%visually-hidden-off { + @include visually-hidden-off(); +} +%visually-focusable { + @extend %visually-hidden; + + &:active, + &:focus { + @extend %visually-hidden-off; + } +} |