Mercurial > hg > mpiwgzen_wide
view sass-extensions/zen-grids/templates/project/_visually-hidden.scss @ 0:a3750d724105 default tip
initital
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 02 Jun 2015 09:16:36 +0200 |
parents | |
children |
line wrap: on
line source
// // @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; } }