UNPKG

@ebay/skin

Version:

Skin - CSS modules that represent the brand eBay

141 lines (133 loc) 4 kB
div.filter-group { display: flex; flex-wrap: wrap; } a.filter-link, button.filter-button { align-items: center; background-color: var( --filter-button-background-color, var(--color-background-secondary) ); border: 1px solid transparent; border-color: var( --filter-button-selected-border-color, var(--color-stroke-default) ); border-radius: 16px; box-sizing: border-box; color: var( --filter-button-foreground-color, var(--color-foreground-primary) ); display: inline-flex; flex: 0 1 auto; flex-direction: column; font-family: inherit; font-size: var(--font-size-default); height: 32px; justify-content: center; margin: 0; max-width: 280px; min-width: 56px; padding: 0 var(--spacing-200); text-align: center; text-decoration: none; vertical-align: bottom; } a.filter-link + a.filter-link, a.filter-link + button.filter-button, button.filter-button + a.filter-link, button.filter-button + button.filter-button { margin-left: 8px; } a.filter-link:active, a.filter-link:focus, a.filter-link:hover, button.filter-button:active, button.filter-button:focus, button.filter-button:hover { background-color: var( --filter-button-background-color, var(--color-state-secondary-hover) ); } a.filter-link .filter-link__cell, button.filter-button .filter-button__cell { display: inline-block; max-width: 258px; overflow: hidden; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; } a.filter-link:visited { color: var( --filter-button-foreground-color, var(--color-foreground-primary) ); } a.filter-link--selected, button.filter-button[aria-pressed="true"] { font-weight: 700; } a.filter-link--selected, a.filter-link--selected:visited, button.filter-button[aria-pressed="true"] { border-color: var( --filter-button-selected-border-color, var(--color-stroke-strong) ); } a.filter-link--selected:not([href]), a.filter-link--selected[aria-disabled="true"], a.filter-link:not([href]), a.filter-link[aria-disabled="true"], button.filter-button[aria-disabled="true"], button.filter-button[aria-pressed="true"][aria-disabled="true"], button.filter-button[aria-pressed="true"][disabled], button.filter-button[disabled] { color: var( --filter-button-disabled-foreground-color, var(--color-foreground-disabled) ); font-weight: 400; } a.filter-link--selected:not([href]):focus, a.filter-link--selected:not([href]):hover, a.filter-link--selected[aria-disabled="true"]:focus, a.filter-link--selected[aria-disabled="true"]:hover, a.filter-link:not([href]):focus, a.filter-link:not([href]):hover, a.filter-link[aria-disabled="true"]:focus, a.filter-link[aria-disabled="true"]:hover, button.filter-button[aria-disabled="true"]:focus, button.filter-button[aria-disabled="true"]:hover, button.filter-button[aria-pressed="true"][aria-disabled="true"]:focus, button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover, button.filter-button[aria-pressed="true"][disabled]:focus, button.filter-button[aria-pressed="true"][disabled]:hover, button.filter-button[disabled]:focus, button.filter-button[disabled]:hover { background-color: var( --filter-button-background-color, var(--color-background-secondary) ); color: var( --filter-button-disabled-foreground-color, var(--color-foreground-disabled) ); } a.filter-link--selected:not([href]):hover, a.filter-link--selected[aria-disabled="true"]:hover, button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover, button.filter-button[aria-pressed="true"][disabled]:hover { background-color: var( --filter-button-selected-background-color, var(--color-state-secondary-hover) ); } a.filter-link:focus:not(:focus-visible), button.filter-button:focus:not(:focus-visible) { outline: none; }