@postnord/web-components
Version:
PostNord Web Components
81 lines (80 loc) • 2.01 kB
CSS
/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-tab {
position: relative;
overflow: hidden;
flex-shrink: 0;
scroll-snap-align: center;
display: inline-block;
border-radius: 0.5em;
}
pn-tab .pn-tab {
position: relative;
cursor: pointer;
margin: 1em 0.25em;
padding: 0 0.25em;
border: none;
border-radius: 0.5em;
color: #2d2013;
background-color: transparent;
font-family: inherit;
font-size: 1em;
font-weight: 500;
text-decoration: none;
display: flex;
gap: 0.5em;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
pn-tab .pn-tab .pn-ripple {
animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
position: absolute;
border-radius: 50%;
background-color: #005d92;
transform: translate(-50%, -50%) scale(0);
opacity: 0.1;
pointer-events: none;
z-index: 3;
}
@keyframes ripple {
to {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
pn-tab .pn-tab {
transition-property: color, outline-color, background-color;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
pn-tab .pn-tab {
transition-duration: 0s;
transition-delay: 0s;
}
}
pn-tab .pn-tab {
outline: 0.2rem solid transparent;
outline-offset: 0.2rem;
}
pn-tab .pn-tab-label {
line-height: 1.5em;
}
pn-tab .pn-tab:focus-visible {
overflow: hidden;
outline-color: #005d92;
background-color: #ffffff;
}
pn-tab .pn-tab[aria-selected=true], pn-tab .pn-tab[aria-current=page] {
color: #005d92;
}
pn-tab .pn-tab[aria-selected=true]:focus, pn-tab .pn-tab[aria-current=page]:focus {
color: #0d234b;
}
pn-tab .pn-tab[aria-selected=true]:focus pn-icon .pn-icon-svg path,
pn-tab .pn-tab[aria-selected=true]:focus pn-icon .pn-icon-svg polygon, pn-tab .pn-tab[aria-current=page]:focus pn-icon .pn-icon-svg path,
pn-tab .pn-tab[aria-current=page]:focus pn-icon .pn-icon-svg polygon {
fill: #0d234b;
}