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.

33 lines
1.1 KiB

9 months ago
  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. width: 1px !important;
  8. height: 1px !important;
  9. padding: 0 !important;
  10. margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  11. overflow: hidden !important;
  12. clip: rect(0, 0, 0, 0) !important;
  13. white-space: nowrap !important;
  14. border: 0 !important;
  15. // Fix for positioned table caption that could become anonymous cells
  16. &:not(caption) {
  17. position: absolute !important;
  18. }
  19. }
  20. // Use to only display content when it's focused, or one of its child elements is focused
  21. // (i.e. when focus is within the element/container that the class was applied to)
  22. //
  23. // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
  24. @mixin visually-hidden-focusable() {
  25. &:not(:focus):not(:focus-within) {
  26. @include visually-hidden();
  27. }
  28. }