skip-link.pcss.css

Same filename in this branch
  1. main core/themes/olivero/css/components/skip-link.pcss.css
  2. main core/themes/claro/css/components/skip-link.pcss.css
  3. main core/themes/admin/css/components/skip-link.pcss.css
Same filename and directory in other branches
  1. 10 core/themes/olivero/css/components/skip-link.pcss.css
  2. 10 core/themes/claro/css/components/skip-link.pcss.css
  3. 11.x core/themes/olivero/css/components/skip-link.pcss.css
  4. 11.x core/themes/claro/css/components/skip-link.pcss.css
  5. 9 core/themes/olivero/css/components/skip-link.pcss.css
  6. 9 core/themes/claro/css/components/skip-link.pcss.css
  7. 8.9.x core/themes/claro/css/components/skip-link.pcss.css
  8. 11.x core/themes/admin/css/components/skip-link.pcss.css
  9. 11.x core/themes/default_admin/css/components/skip-link.pcss.css

Skip link

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

File

View on git.drupalcode.org

core/themes/default_admin/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. 

  8. /* Intentionally flip the background and foreground colors to provide visual

  9.    differentiation while maintaining contrast. */

  10. .skip-link {

  11.   z-index: 503;

  12.   top: 0;

  13.   inset-inline-start: 0;

  14.   padding: 1px 10px 2px;

  15.   color: var(--admin-color-bg-raised);

  16.   border-end-end-radius: 10px;

  17.   background: var(--admin-color-text-loud);

  18.   box-shadow: var(--admin-shadow-color-1);

  19.   font-size: 0.94em;

  20. 

  21.   &.visually-hidden.focusable:focus {

  22.     position: absolute !important;

  23.   }

  24. }

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