this took longer than i would have liked.
This commit is contained in:
parent
e36ce8e849
commit
07ce15d30e
|
@ -3,7 +3,7 @@
|
||||||
v-if="show"
|
v-if="show"
|
||||||
ref="el"
|
ref="el"
|
||||||
class="fdidabkb"
|
class="fdidabkb"
|
||||||
:class="{ thin: thin_ }"
|
:class="{ thin: thin_, tabs: tabs?.length > 0 }"
|
||||||
:style="{ background: bg }"
|
:style="{ background: bg }"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
|
@ -300,13 +300,31 @@ onUnmounted(() => {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
padding-inline: 12px;
|
padding-inline: 12p
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) {
|
||||||
> .left {
|
> .left {
|
||||||
// flex-basis: unset !important;
|
min-width: unset !important;
|
||||||
min-width: max-content !important;
|
max-width: 40%;
|
||||||
}
|
}
|
||||||
.titleContainer {
|
> .left, > .right {
|
||||||
min-width: 0;
|
flex: unset !important;
|
||||||
|
}
|
||||||
|
&:not(.tabs) {
|
||||||
|
> .left {
|
||||||
|
width: 0 !important;
|
||||||
|
flex-grow: 1 !important;
|
||||||
|
max-width: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.tabs {
|
||||||
|
> .left {
|
||||||
|
flex-shrink: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons ~ .titleContainer > .title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -461,11 +479,9 @@ onUnmounted(() => {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
> .left {
|
> .left {
|
||||||
// margin-right: auto;
|
|
||||||
min-width: 20%;
|
min-width: 20%;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
// min-width: max-content;
|
|
||||||
}
|
}
|
||||||
> .right {
|
> .right {
|
||||||
// margin-left: auto;
|
// margin-left: auto;
|
||||||
|
@ -519,6 +535,7 @@ onUnmounted(() => {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: color 0.2s, opacity 0.2s, width 0.2s, min-width .2s;
|
transition: color 0.2s, opacity 0.2s, width 0.2s, min-width .2s;
|
||||||
|
--width: max-content;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
Loading…
Reference in New Issue