Unverified Commit 93f6a239 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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

parent 3e0144bb

core/themes/claro/css/components/skip-link.css

+10 −4
Original line number Diff line number Diff line
@@ -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 {

core/themes/claro/css/components/skip-link.pcss.css

+19 −13
Original line number Diff line number Diff line
@@ -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;

  &:hover,

  &:active {

    color: var(--skip-link-color);

    background-color: var(--skip-link-active-bg-color);

  }

.skip-link:hover,

.skip-link:active {

  color: var(--color-white);

  background-color: var(--color-gray);

}

.skip-link:focus {

  &:focus {

    text-decoration: none;

  }

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

  &.visually-hidden.focusable:focus {

    position: absolute !important;

  }

}