@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
100 lines (88 loc) • 2.43 kB
CSS
.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;
}