@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
72 lines (62 loc) • 1.78 kB
CSS
.segmented-buttons {
border: 1px solid var(--color-stroke-default);
border-radius: var(--segmented-button-border-radius, 24px);
max-width: 720px;
min-width: 215px;
padding: var(--spacing-50);
}
.segmented-buttons > ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.segmented-buttons > ul > li {
display: flex;
flex: 1;
}
.segmented-buttons > ul > li:not(:first-child) {
margin-inline-start: var(--spacing-100);
}
.segmented-buttons__button {
background-color: initial;
border: none;
border-radius: var(--btn-border-radius, 20px);
color: var(--color-foreground-on-primary);
font-size: var(--font-size-default);
min-height: calc(40px - var(--spacing-50) * 2);
padding: var(--spacing-100) var(--spacing-200);
width: 100%;
}
.segmented-buttons--large .segmented-buttons__button {
min-height: calc(48px - var(--spacing-50) * 2);
}
.segmented-buttons__button-cell {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
}
.segmented-buttons__button svg.icon {
align-self: center;
}
.segmented-buttons__button svg.icon:first-child {
margin-inline-end: 8px;
}
.segmented-buttons__button svg.icon:last-child {
margin-inline-start: 8px;
}
.segmented-buttons__button svg.icon:only-child {
margin: 0;
}
.segmented-buttons__button[aria-current] {
background-color: var(--color-foreground-primary);
color: var(--color-foreground-on-inverse);
}
.segmented-buttons__button:not([aria-current]):active {
background-color: var(--color-state-primary-active);
}
.segmented-buttons__button:not([aria-current]):focus,
.segmented-buttons__button:not([aria-current]):hover {
background-color: var(--color-state-primary-hover);
}