@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
93 lines (79 loc) • 1.66 kB
CSS
.list {
max-width: 480px;
}
.list ol,
.list ul {
margin: 0;
padding: 0;
}
.list li::marker {
content: "";
font-size: 0;
}
.list fieldset > *,
.list li > * {
align-items: center;
background-color: var(
--list-background-color,
var(--color-background-primary)
);
box-sizing: border-box;
color: var(--color-foreground-on-primary);
display: inline-flex;
font-size: var(--font-size-16);
margin-block: 1px;
min-height: var(--spacing-600);
padding: var(--spacing-150) var(--spacing-200);
width: 100%;
}
.list__leading {
margin-inline-end: var(--spacing-200);
}
.list__trailing {
margin-inline-start: var(--spacing-200);
}
.list__body {
flex: 1;
}
.list ol li {
counter-increment: item;
}
.list ol li > :before {
content: counter(item) ".";
margin-inline-end: var(--spacing-200);
width: var(--spacing-300);
}
.list li > a,
.list li > button {
border: none;
text-align: left;
text-decoration: none;
}
.list li > a:focus,
.list li > a:hover,
.list li > button:focus,
.list li > button:hover {
color: var(--color-foreground-on-primary);
}
.list li > a:active,
.list li > a:focus,
.list li > a:hover,
.list li > button:active,
.list li > button:focus,
.list li > button:hover {
background-color: var(
--list-background-hover-color,
var(--color-state-primary-hover)
);
}
.list hr {
border: 0;
border-top: 1px solid var(--color-stroke-subtle);
height: 1px;
margin-inline: var(--spacing-200);
padding: 0;
}
[dir="rtl"] .list li > a,
[dir="rtl"] .list li > button {
text-align: right;
}