@rhds/elements
Version:
Red Hat Design System Elements
71 lines (66 loc) • 2.07 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-primary-default-on-light, #0066cc);
font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', 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;
text-decoration-style: dashed;
text-decoration-color: inherit;
text-decoration-thickness: var(--rh-border-width-sm, 1px);
text-underline-offset: max(5px, 0.28em);
transition-timing-function: ease;
transition-property: text-underline-offset, color, text-decoration-color;
transition-duration: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
rh-skip-link:not(:defined) > a {
transition-duration: 0.001ms;
}
}