UNPKG

@ebay/skin

Version:

Skin - CSS modules that represent the brand eBay

100 lines (88 loc) 2.43 kB
.fake-tabs, .tabs { margin-top: var(--spacing-200); } span.fake-tabs, span.tabs { display: inline-block; } div.tabs__items[role="tablist"], ul.fake-tabs__items { font-size: var(--font-size-default); } ul.fake-tabs__items { display: block; list-style: none; margin: 0; padding: 0; } div.tabs__item[role="tab"] { cursor: default; } div.tabs__item[role="tab"], li.fake-tabs__item { display: inline-block; position: relative; -webkit-tap-highlight-color: var(--color-background-secondary); } div.tabs__item[role="tab"]:not(:last-child), li.fake-tabs__item:not(:last-child) { margin-inline-end: var(--spacing-450); } li.fake-tabs__item > a { padding: 1px 0; text-decoration: none; } div.tabs__item[role="tab"] > span { padding: 2px 0; } div.tabs__item[role="tab"] > span, li.fake-tabs__item > a { color: var(--tabs-item-foreground-color, var(--color-foreground-secondary)); display: inline-block; } div.tabs__item[role="tab"] > span:after, li.fake-tabs__item > a:after { background-color: initial; border-radius: 6px; content: ""; display: block; height: 2px; margin-top: var(--spacing-50); position: absolute; width: 100%; } div.tabs__item[role="tab"][aria-selected="true"] > span, li.fake-tabs__item > a[aria-current] { color: var( --tabs-item-selected-foreground-color, var(--color-foreground-primary) ); } div.tabs__item[role="tab"][aria-selected="true"] > span:after, li.fake-tabs__item > a[aria-current]:after { background-color: currentColor; } div.tabs__item[role="tab"]:focus:not(:focus-visible), li.fake-tabs__item a:focus:not(:focus-visible) { outline: none; } div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span, div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span, li.fake-tabs__item > a:not([aria-current]):focus, li.fake-tabs__item > a:not([aria-current]):hover { color: var( --tabs-item-hover-foreground-color, var(--color-foreground-secondary) ); } div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span:after, div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span:after, li.fake-tabs__item > a:not([aria-current]):focus:after, li.fake-tabs__item > a:not([aria-current]):hover:after { background-color: currentColor; } .fake-tabs__cell, .tabs__cell { margin: var(--spacing-200) 0; }