109 lines
No EOL
2.5 KiB
CSS
109 lines
No EOL
2.5 KiB
CSS
.tabs {
|
|
position: relative;
|
|
display: grid;
|
|
grid: auto minmax(0, 1fr) / 100%;
|
|
justify-content: start;
|
|
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
|
|
& > header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
|
|
border-block-end: 1px solid var(--surface-700);
|
|
|
|
& > .handle {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
column-gap: var(--padding-m);
|
|
|
|
background-color: transparent;
|
|
color: var(--text-2);
|
|
cursor: pointer;
|
|
border-radius: var(--radii-l) var(--radii-l) 0 0;
|
|
|
|
& > button {
|
|
display: grid;
|
|
align-content: center;
|
|
background-color: inherit;
|
|
color: inherit;
|
|
padding: var(--padding-l) 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
border-radius: inherit;
|
|
|
|
&:first-child {
|
|
padding-inline-start: var(--padding-xl);
|
|
}
|
|
|
|
&:last-child {
|
|
padding-inline-end: var(--padding-xl);
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--surface-600);
|
|
color: var(--text-1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
position: absolute;
|
|
grid-area: 2 / 1 / span 1 / span 1;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
|
|
&:not(.active) {
|
|
display: none;
|
|
}
|
|
|
|
& > summary {
|
|
grid-row: 1 / 1;
|
|
|
|
padding: var(--padding-s) var(--padding-m);
|
|
|
|
&::marker {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
&::details-content {
|
|
grid-area: 2 / 1 / span 1 / span var(--tab-count);
|
|
display: none;
|
|
grid: 100% / 100%;
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
|
|
overflow: auto;
|
|
}
|
|
|
|
&[open] {
|
|
& > summary {
|
|
background-color: var(--surface-600);
|
|
}
|
|
|
|
&::details-content {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@property --tab-count {
|
|
syntax: '<integer>';
|
|
inherits: true;
|
|
initial-value: 0;
|
|
} |