You are here

skip-link.css in Drupal 9

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. [dir="ltr"] .skip-link {
  14. padding-left: 1.125rem
  15. }
  16. [dir="rtl"] .skip-link {
  17. padding-right: 1.125rem
  18. }
  19. [dir="ltr"] .skip-link {
  20. padding-right: 1.125rem
  21. }
  22. [dir="rtl"] .skip-link {
  23. padding-left: 1.125rem
  24. }
  25. .skip-link {
  26. display: block;
  27. width: 100%;
  28. max-width: 98.125rem;
  29. padding-top: 0.5625rem;
  30. padding-bottom: 0.5625rem;
  31. text-decoration: none;
  32. color: #fff;
  33. outline: 0;
  34. background-color: #0d1214
  35. }
  36. .skip-link:after {
  37. content: "\0020 ➔";
  38. }
  39. .skip-link.focusable:focus {
  40. position: absolute !important; /* Override position from module file. */
  41. z-index: 503;
  42. width: 100%;
  43. height: 2.5rem;
  44. outline: none;
  45. }