@mdn/bob
Version:
Builder of Bits aka The MDN Web Docs interactive examples, example builder
32 lines (28 loc) • 710 B
CSS
.tab-list {
display: flex;
gap: 0.5rem;
background: var(--background-secondary);
}
button[role="tab"] {
background-color: transparent;
color: var(--text-secondary);
padding: 0.5em 30px;
border: 0 none;
border-bottom: 3px solid transparent;
border-top: 3px solid transparent;
font: var(--type-emphasis-m);
cursor: pointer;
transition:
color 0.2s,
background-color 0.2s;
}
button[role="tab"]:hover,
button[role="tab"]:focus {
background-color: var(--background-tertiary);
color: var(--text-primary);
}
button[role="tab"][aria-selected="true"] {
color: var(--accent-primary);
border-bottom-color: var(--accent-primary);
background-color: var(--background-tertiary);
}