remove side-tabs from tab-switcher, splitting functionality into separate component
This commit is contained in:
parent
debd3a3e7b
commit
a3a35e76a8
2 changed files with 2 additions and 110 deletions
|
|
@ -52,104 +52,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.side-tabs {
|
||||
flex-direction: row;
|
||||
|
||||
@media all and (width <= 800px) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
> .contents {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
> .tabs {
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden auto;
|
||||
flex-direction: column;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
flex-shrink: 0;
|
||||
flex-basis: 0.5em;
|
||||
content: "";
|
||||
border-right: 1px solid;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.tab-wrapper {
|
||||
min-width: 10em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media all and (width <= 800px) {
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
&:not(.active)::after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
|
||||
&::before {
|
||||
flex: 0 0 6px;
|
||||
content: "";
|
||||
border-right: 1px solid;
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
|
||||
&:last-child .tab {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
box-sizing: content-box;
|
||||
max-width: 9em;
|
||||
min-width: 1px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
padding-left: 1em;
|
||||
padding-right: calc(1em + 200px);
|
||||
margin-right: -200px;
|
||||
margin-left: 1em;
|
||||
|
||||
&:not(.active) {
|
||||
margin-top: 0;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
@media all and (width <= 800px) {
|
||||
padding-left: 0.25em;
|
||||
padding-right: calc(0.25em + 200px);
|
||||
margin-right: calc(0.25em - 200px);
|
||||
margin-left: 0.25em;
|
||||
|
||||
&:not(.active) {
|
||||
margin-top: 0;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
flex: 1 0 auto;
|
||||
min-height: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue