@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
58 lines (53 loc) • 1.36 kB
CSS
summary.details__summary {
align-items: center;
border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
box-sizing: border-box;
color: var(
--details-summary-foreground-color,
var(--color-foreground-primary)
);
display: inline-flex;
font-size: var(--font-size-default);
font-weight: var(--font-weight-bold);
list-style-position: inside;
list-style-type: none;
padding: 12px 8px;
}
summary.details__summary:before {
content: none;
}
summary.details__summary::-webkit-details-marker {
display: none;
}
summary.details__summary:focus,
summary.details__summary:hover {
background-color: var(--color-state-secondary-hover);
outline: 1;
}
summary.details__summary:active {
background-color: var(--color-state-secondary-active);
outline: 1;
}
summary.details__summary--center {
justify-content: center;
width: 100%;
}
summary.details__summary--small {
font-size: var(--font-size-small);
padding: 4px 8px;
}
span.details__icon {
margin-inline-start: 8px;
}
span.details__icon[hidden] {
display: inline-flex;
}
details.details[open] span.details__icon {
transform: rotate(180deg);
}
details.details[open] summary.details__summary:before {
content: none;
}
details.details summary:focus:not(:focus-visible) {
outline: none;
}