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.
*/
: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 {
z-index: 50;
left: 50%;
padding: 1px 0.625rem 2px;
transform: translateX(-50%);
color: var(--color-white);
color: var(--skip-link-color);
border-radius: 0 0 0.625rem 0.625rem;
background: var(--color-gray-800);
background: var(--skip-link-bg-color);
font-size: 0.94em;
}
.skip-link:hover,
.skip-link:active {
color: var(--color-white);
background-color: var(--color-gray);
color: var(--skip-link-color);
background-color: var(--skip-link-active-bg-color);
}
.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.
*/
: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 {
z-index: 50;
left: 50%;
padding: 1px 10px 2px;
transform: translateX(-50%);
color: var(--color-white);
color: var(--skip-link-color);
border-radius: 0 0 10px 10px;
background: var(--color-gray-800);
background: var(--skip-link-bg-color);
font-size: 0.94em;
}
.skip-link:hover,
.skip-link:active {
color: var(--color-white);
background-color: var(--color-gray);
}
.skip-link:focus {
text-decoration: none;
}
.skip-link.visually-hidden.focusable:focus {
position: absolute !important;
&:hover,
&:active {
color: var(--skip-link-color);
background-color: var(--skip-link-active-bg-color);
}
&:focus {
text-decoration: none;
}
&.visually-hidden.focusable:focus {
position: absolute !important;
}
}