Skip to content

Instantly share code, notes, and snippets.

@troutacular
Last active April 21, 2017 18:41
Show Gist options
  • Select an option

  • Save troutacular/3aae72f89597865e6828eaddbef4641b to your computer and use it in GitHub Desktop.

Select an option

Save troutacular/3aae72f89597865e6828eaddbef4641b to your computer and use it in GitHub Desktop.
Hiding text on screen
/**
Screen Reader Text
==========
Apply to text meant only for screen readers.
Usage
=========
.class { @include screen-reader-text(); }
**/
@mixin screen-reader-text() {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
&:focus {
background-color: $color__background-screen;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: $color__text-screen;
display: block;
@include font-size(0.875);
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
}
/**
Squish Text
====================
Hides text in an element so you can see the background.
Usage
=========
.class { @include squish-text; }
**/
@mixin squish-text {
font: 0/0 serif;
text-shadow: none;
color: transparent;
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment