@rhds/elements
Version:
Red Hat Design System Elements
64 lines (59 loc) • 1.89 kB
CSS
rh-skip-link:not(:defined) {
display: block;
position: relative;
}
rh-skip-link:not(:defined) > a {
background-color: var(--rh-color-surface-lightest, #ffffff);
border-block-start-width: 0;
border-block-end:
var(--rh-border-width-sm, 1px)
solid
var(--rh-color-border-interactive-on-light, #0066cc);
border-inline-start:
var(--rh-border-width-sm, 1px)
solid
var(--rh-color-border-interactive-on-light, #0066cc);
border-inline-end:
var(--rh-border-width-sm, 1px)
solid
var(--rh-color-border-interactive-on-light, #0066cc);
border-end-start-radius: var(--rh-border-radius-default, 3px);
border-end-end-radius: var(--rh-border-radius-default, 3px);
clip: rect(0, 0, 0, 0);
color: var(--rh-color-interactive-blue-darker, #0066cc);
font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
font-size: var(--rh-font-size-body-text-md, 1rem);
font-weight: var(--rh-font-weight-heading-bold, 700);
height: 1px;
left: 50%;
margin: -1px;
outline: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-decoration: none;
top: -40px;
transform: translateX(-50%);
transition: top 0.05s ease-in;
white-space: nowrap;
width: 1px;
}
rh-skip-link:not(:defined) > a:is(:active, :focus) {
border-width: var(--rh-border-width-md, 2px);
clip: auto;
height: auto;
margin: 0;
overflow: visible;
padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px);
top: 0;
white-space: inherit;
width: auto;
}
rh-skip-link:not(:defined) > a:is(:active, :hover) {
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
rh-skip-link:not(:defined) > a {
transition-duration: 0.001ms;
}
}