First commit.
This commit is contained in:
commit
b7977e1c28
1 changed files with 28081 additions and 0 deletions
44
sass/init/visually-hidden/_visually-hidden.scss
Normal file
44
sass/init/visually-hidden/_visually-hidden.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// sass-lint:disable no-important
|
||||
|
||||
// visually-hidden()
|
||||
//
|
||||
// Make an element visually hidden, but accessible to screen readers, etc.
|
||||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
//
|
||||
// Style guide: sass.mixins.visually-hidden
|
||||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
// visually-hidden--off()
|
||||
//
|
||||
// Turns off the visually-hidden effect.
|
||||
//
|
||||
// Style guide: sass.mixins.visually-hidden--off
|
||||
@mixin visually-hidden--off {
|
||||
position: static !important;
|
||||
clip: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// visually-hidden--focusable()
|
||||
//
|
||||
// Makes an element visually hidden by default, but visible when receiving
|
||||
// focus.
|
||||
//
|
||||
// Style guide: sass.mixins.visually-hidden--focusable
|
||||
@mixin visually-hidden--focusable {
|
||||
@include visually-hidden;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
@include visually-hidden--off;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue