@rhds/elements
Version:
Red Hat Design System Elements
107 lines (91 loc) • 3.04 kB
CSS
rh-navigation-primary {
/* workaround for apparent regression in Safari 26.2 for containers defined on :host */
container: navigation-primary / inline-size;
& :is(rh-navigation-primary-item, rh-navigation-link) {
&[slot='links'] {
display: flex;
align-items: center;
}
&[slot='event'] {
&:hover {
animation: rh-navigation-event-bounce 1s infinite;
}
}
&:not([slot='links']) {
/** Navigation item text color */
color: var(--rh-color-text-primary) ;
& a {
/** Navigation link font size */
font-size: var(--rh-font-size-body-text-md, 1rem);
/* stylelint-disable-next-line @stylistic/max-line-length */
color: var(--rh-color-interactive-primary-default, light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc), var(--rh-color-interactive-primary-default-on-dark, #92c5f9))) ;
inline-size: 100%;
text-decoration: none;
&:hover {
text-decoration:
underline
dashed
/** Link hover decoration color */
var(--rh-color-gray-50, #707070)
/** Link hover decoration width */
var(--rh-border-width-sm, 1px);
transition-timing-function: ease;
transition-property: text-underline-offset, color, text-decoration-color;
transition-duration: 0.3s;
text-underline-offset: max(6px, 0.33em);
/** Link hover text color */
color: var(--rh-color-interactive-primary-hover) ;
}
}
}
}
& rh-navigation-link {
&:not([slot]) {
--_navigation-link-container-inline-size: 100%;
--_navigation-link-inline-size: 100%;
display: flex;
block-size: 100%;
inline-size: 100%;
border-block-start:
/** Navigation link separator width */
var(--rh-border-width-sm, 1px)
solid
/** Navigation link separator color */
var(--rh-color-border-subtle);
@container (min-width: 1200px) {
--_navigation-link-container-inline-size: fit-content;
--_navigation-link-container-display: inline-block;
--_navigation-link-inline-size: fit-content;
display: block;
inline-size: fit-content;
border-block-start: none;
}
}
&:nth-last-child(1 of rh-navigation-link:not([slot])) {
border-block-end:
/** Last navigation link separator width */
var(--rh-border-width-sm, 1px)
solid
/** Last navigation link separator color */
var(--rh-color-border-subtle);
@container (min-width: 1200px) {
border-block-end: none;
}
}
}
}
@keyframes rh-navigation-event-bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0); /* Element is at its original position */
}
40% {
transform: translateY(-10px); /* Element moves up 20px */
}
60% {
transform: translateY(-5px); /* Element moves up 10px from original */
}
}