ndlib/sipity

View on GitHub
app/assets/stylesheets/modules/_visibility.css.scss

Summary

Maintainability
Test Coverage
// Helper classes from H5BP: https://html5boilerplate.com/

// Hide visually and from screen readers:
// http://juicystudio.com/article/screen-readers-display-none.php
.hidden {
  display: none !important;
  visibility: hidden;
}


// Hide only visually, but have it available for screen readers:
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


// Extends the .visuallyhidden class to allow the element
// to be focusable when navigated to via the keyboard:
// https://www.drupal.org/node/897638

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}


// Hide visually and from screen readers, but maintain layout

.invisible {
  visibility: hidden;
}