@postnord/web-components
Version:
PostNord Web Components
102 lines (101 loc) • 2.57 kB
CSS
/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-accordion-row {
position: relative;
margin: 0 -0.25em 0;
}
pn-accordion-row .pn-accordion-row {
width: 100%;
display: flex;
flex-direction: column;
}
pn-accordion-row .pn-accordion-row-summary {
color: #2d2013;
position: relative;
border: none;
outline: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
width: 100%;
padding: 0.25em;
font-size: 1em;
font-weight: 400;
border-radius: 0.5em;
list-style: none;
}
pn-accordion-row .pn-accordion-row-summary:hover > .pn-accordion-row-text {
background-color: #e0f8ff;
}
pn-accordion-row .pn-accordion-row-summary:focus-visible > .pn-accordion-row-text {
outline-color: #005d92;
}
pn-accordion-row .pn-accordion-row-summary::-webkit-details-marker {
display: none;
}
pn-accordion-row .pn-accordion-row-text {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: 0.75em;
background-color: #ffffff;
border-radius: 0.5em;
-webkit-tap-highlight-color: transparent;
}
pn-accordion-row .pn-accordion-row-text[data-transparent] {
background-color: transparent;
}
pn-accordion-row .pn-accordion-row-text {
outline: 0.2rem solid transparent;
outline-offset: 0.2rem;
transition-property: background-color, outline-color;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
pn-accordion-row .pn-accordion-row-text {
transition-duration: 0s;
transition-delay: 0s;
}
}
pn-accordion-row .pn-accordion-row-text .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-accordion-row .pn-accordion-row-icon {
margin-left: auto;
flex-shrink: 0;
transition-property: transform;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
pn-accordion-row .pn-accordion-row-icon {
transition-duration: 0s;
transition-delay: 0s;
}
}
pn-accordion-row .pn-accordion-row-icon path {
fill: #005d92;
}
pn-accordion-row .pn-accordion-row[open] .pn-accordion-row-icon {
transform: rotate(-180deg);
}
pn-accordion-row .pn-accordion-row-content {
color: #2d2013;
display: block;
padding: 1em;
}