primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-28 22:01:43 +03:00
Code Issues Projects Releases Wiki Activity

add show-on-focus utility

Browse Source
This commit is contained in:
broccolini 2017-06-12 18:02:28 -04:00
parent 31c14f00d0
commit f26b09c64a
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/primer-utilities/lib/visibility-display.scss
View File

@ -81,7 +81,6 @@
// Only display content to screen readers // Only display content to screen readers
// //
// See: http://a11yproject.com/posts/how-to-hide-content/ // See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
@ -93,3 +92,20 @@
word-wrap: normal; word-wrap: normal;
border: 0; border: 0;
} }
// Only display content on focus
.show-on-focus {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
&:focus {
z-index: 20;
width: auto;
height: auto;
clip: auto;
}
}