You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

29 lines
1012 B

  1. // stylelint-disable declaration-no-important
  2. // Hide content visually while keeping it accessible to assistive technologies
  3. //
  4. // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
  5. // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
  6. @mixin visually-hidden() {
  7. position: absolute !important;
  8. width: 1px !important;
  9. height: 1px !important;
  10. padding: 0 !important;
  11. margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  12. overflow: hidden !important;
  13. clip: rect(0, 0, 0, 0) !important;
  14. white-space: nowrap !important;
  15. border: 0 !important;
  16. }
  17. // Use to only display content when it's focused, or one of its child elements is focused
  18. // (i.e. when focus is within the element/container that the class was applied to)
  19. //
  20. // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
  21. @mixin visually-hidden-focusable() {
  22. &:not(:focus):not(:focus-within) {
  23. @include visually-hidden();
  24. }
  25. }