skip-link.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/skip-link.pcss.css
  2. 9 core/themes/claro/css/components/skip-link.pcss.css
  3. 10 core/themes/olivero/css/components/skip-link.pcss.css
  4. 10 core/themes/claro/css/components/skip-link.pcss.css
  5. 11.x core/themes/olivero/css/components/skip-link.pcss.css
  6. 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. 

  8. .skip-link {

  9.   z-index: 50;

  10.   left: 50%;

  11.   padding: 1px 10px 2px;

  12.   transform: translateX(-50%);

  13.   color: #fff;

  14.   border-radius: 0 0 10px 10px;

  15.   background: #444;

  16.   font-size: 0.94em;

  17. }

  18. .skip-link:focus {

  19.   text-decoration: none;

  20. }

  21. .skip-link.visually-hidden.focusable:focus {

  22.   position: absolute !important;

  23. }

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