Sha256: 3a6eb04db1fe93408acb7dfbd3771a36181acde092eada5a956eb2049f2ad053
Contents?: true
Size: 1.37 KB
Versions: 3
Compression:
Stored size: 1.37 KB
Contents
@import 'mixins/components.buttons';
.c-tabs[role='tablist'] {
display: block;
}
.c-tabs__headings {
display: flex;
text-align: center;
}
.c-tabs__nav {
overflow: hidden;
.c-tabs__headings {
margin-bottom: -1em;
padding-bottom: 1em;
overflow-x: auto;
overflow-y: hidden;
}
}
.c-tab-heading[role='tab'] {
--tab-heading-border-color: var(--color-default);
@include button-nude;
display: block;
flex: 1;
margin: 0;
padding: var(--spacing-medium);
white-space: nowrap;
border-bottom: var(--spacing-xsmall) solid var(--color-background);
border-radius: var(--border-radius) var(--border-radius) 0 0;
&:not(:disabled):not(.c-tab-heading--active):hover {
border-bottom-color: var(--tab-heading-border-color);
}
&.c-tab-heading--active {
background-color: var(--color-background);
border-bottom-color: var(--tab-heading-border-color);
}
&.c-tab-heading--brand {
--tab-heading-border-color: var(--color-brand);
}
&.c-tab-heading--info {
--tab-heading-border-color: var(--color-info);
}
&.c-tab-heading--warning {
--tab-heading-border-color: var(--color-warning);
}
&.c-tab-heading--success {
--tab-heading-border-color: var(--color-success);
}
&.c-tab-heading--error {
--tab-heading-border-color: var(--color-error);
}
}
.c-tabs__tab[role='tabpanel'] {
padding: var(--spacing-medium);
}
Version data entries
3 entries across 3 versions & 1 rubygems