summaryrefslogtreecommitdiff
path: root/sites/brdo.brontosaurus.cz.mrp/themes/mrp/sass-extensions/zen-grids/templates/project/_visually-hidden.scss
diff options
context:
space:
mode:
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.scss51
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;
+ }
+}