skip-link.pcss.css

Same filename in this branch
  1. 9 core/themes/olivero/css/components/skip-link.pcss.css
Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/skip-link.pcss.css
  2. 10 core/themes/olivero/css/components/skip-link.pcss.css
  3. 10 core/themes/claro/css/components/skip-link.pcss.css
  4. 11.x core/themes/olivero/css/components/skip-link.pcss.css
  5. 11.x core/themes/claro/css/components/skip-link.pcss.css

Skip link

Allows keyboard users to quickly skip to the main content of the page.

File

core/themes/claro/css/components/skip-link.pcss.css

View source
  1. /**
  2. * @file
  3. * Skip link
  4. *
  5. * Allows keyboard users to quickly skip to the main content of the page.
  6. */
  7. @import "../base/variables.pcss.css";
  8. .skip-link {
  9. z-index: 50;
  10. left: 50%;
  11. padding: 1px 10px 2px;
  12. transform: translateX(-50%);
  13. color: var(--color-white);
  14. border-radius: 0 0 10px 10px;
  15. background: var(--color-gray-800);
  16. font-size: 0.94em;
  17. }
  18. .skip-link:hover,
  19. .skip-link:active {
  20. color: var(--color-white);
  21. background-color: var(--color-gray);
  22. }
  23. .skip-link:focus {
  24. text-decoration: none;
  25. }
  26. .skip-link.visually-hidden.focusable:focus {
  27. position: absolute !important;
  28. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.