Update screen-reader-text class.

This commit is contained in:
Sami Keijonen 2017-10-22 19:00:06 +03:00
parent a0ee266dee
commit 3f9c31b6a1
2 changed files with 15 additions and 6 deletions

View File

@ -1,10 +1,14 @@
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
&:focus {
@ -12,6 +16,7 @@
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: $color__text-screen;
display: block;
@include font-size(0.875);

View File

@ -599,13 +599,16 @@ a:hover, a:active {
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
word-wrap: normal !important;
/* Many screen reader and browser combinations announce broken words as they would appear visually. */
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
@ -613,6 +616,7 @@ a:hover, a:active {
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;