skip-link.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
  2. 10 core/themes/claro/css/components/skip-link.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
  2. 9 core/themes/olivero/css/components/skip-link.css
  3. 9 core/themes/seven/css/components/skip-link.css
  4. 9 core/themes/claro/css/components/skip-link.css
  5. 9 core/themes/bartik/css/components/skip-link.css
  6. 8.9.x core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
  7. 8.9.x core/themes/seven/css/components/skip-link.css
  8. 8.9.x core/themes/claro/css/components/skip-link.css
  9. 8.9.x core/themes/bartik/css/components/skip-link.css
  10. 11.x core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
  11. 11.x core/themes/olivero/css/components/skip-link.css
  12. 11.x core/themes/claro/css/components/skip-link.css

Skip link

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

File

core/themes/olivero/css/components/skip-link.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Skip link
  10. *
  11. * Allows keyboard users to quickly skip to the main content of the page.
  12. */
  13. .skip-link {
  14. display: block;
  15. width: 100%;
  16. max-width: calc(var(--max-bg-color) + var(--drupal-displace-offset-left, 0px));
  17. padding-block: var(--sp0-5);
  18. padding-inline-start: var(--sp);
  19. padding-inline-end: var(--sp);
  20. -webkit-text-decoration: none;
  21. text-decoration: none;
  22. color: var(--color--white);
  23. outline: 0;
  24. background-color: var(--color--gray-5);
  25. }
  26. .skip-link:hover {
  27. -webkit-text-decoration: underline;
  28. text-decoration: underline;
  29. color: var(--color--white);
  30. }
  31. .skip-link::after {
  32. content: "\0020 ➔";
  33. }
  34. .skip-link.focusable:focus {
  35. position: absolute !important; /* Override position from module file. */
  36. z-index: 503;
  37. width: 100%;
  38. height: 2.5rem;
  39. outline: none;
  40. }

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