Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3332442 by Gauravvv, smustgrave, bnjmnm: Refactor Claro's skip-link stylesheet

merge-requests/3505/head
Lauri Eskola 2023-02-20 10:42:28 +02:00
parent 3e0144bb37
commit 93f6a23912
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/themes/claro/css/components/skip-link.css
View File

@ -12,21 +12,27 @@
* Allows keyboard users to quickly skip to the main content of the page. * Allows keyboard users to quickly skip to the main content of the page.
*/ */
:root {
--skip-link-bg-color: var(--color-gray-800);
--skip-link-color: var(--color-white);
--skip-link-active-bg-color: var(--color-gray);
}
.skip-link { .skip-link {
z-index: 50; z-index: 50;
left: 50%; left: 50%;
padding: 1px 0.625rem 2px; padding: 1px 0.625rem 2px;
transform: translateX(-50%); transform: translateX(-50%);
color: var(--color-white); color: var(--skip-link-color);
border-radius: 0 0 0.625rem 0.625rem; border-radius: 0 0 0.625rem 0.625rem;
background: var(--color-gray-800); background: var(--skip-link-bg-color);
font-size: 0.94em; font-size: 0.94em;
} }
.skip-link:hover, .skip-link:hover,
.skip-link:active { .skip-link:active {
color: var(--color-white); color: var(--skip-link-color);
background-color: var(--color-gray); background-color: var(--skip-link-active-bg-color);
} }
.skip-link:focus { .skip-link:focus {

32
core/themes/claro/css/components/skip-link.pcss.css
View File

@ -5,24 +5,30 @@
* Allows keyboard users to quickly skip to the main content of the page. * Allows keyboard users to quickly skip to the main content of the page.
*/ */
:root {
--skip-link-bg-color: var(--color-gray-800);
--skip-link-color: var(--color-white);
--skip-link-active-bg-color: var(--color-gray);
}
.skip-link { .skip-link {
z-index: 50; z-index: 50;
left: 50%; left: 50%;
padding: 1px 10px 2px; padding: 1px 10px 2px;
transform: translateX(-50%); transform: translateX(-50%);
color: var(--color-white); color: var(--skip-link-color);
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
background: var(--color-gray-800); background: var(--skip-link-bg-color);
font-size: 0.94em; font-size: 0.94em;
} &:hover,
.skip-link:hover, &:active {
.skip-link:active { color: var(--skip-link-color);
color: var(--color-white); background-color: var(--skip-link-active-bg-color);
background-color: var(--color-gray); }
} &:focus {
.skip-link:focus { text-decoration: none;
text-decoration: none; }
} &.visually-hidden.focusable:focus {
.skip-link.visually-hidden.focusable:focus { position: absolute !important;
position: absolute !important; }
} }