thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fixed visual issues with minimize button

Browse source
This commit is contained in:
thepaperpilot 2021-07-24 18:03:09 -05:00
parent a1860099ed
commit 5676260809
1 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/system/LayerTab.vue
View file

@ -5,7 +5,7 @@
<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button> <button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button>
<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else> <div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
<branches> <branches>
<sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack }"> <sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack, minimizable }">
<div class="subtabs"> <div class="subtabs">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id" <tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
:activeTab="id === activeSubtab" :options="subtab" :text="id" /> :activeTab="id === activeSubtab" :options="subtab" :text="id" />
@ -253,6 +253,10 @@ export default {
border-top: 0; border-top: 0;
} }
.subtabs-container.minimizable:not(.floating):first-child {
padding-right: 50px;
}
.subtabs-container:not(.floating):first-child .subtabs { .subtabs-container:not(.floating):first-child .subtabs {
margin-top: -50px; margin-top: -50px;
} }
@ -263,22 +267,24 @@ export default {
.minimize { .minimize {
position: absolute; position: absolute;
top: 0; top: 6px;
right: 0; right: 16px;
background-color: transparent; z-index: 7;
border: 1px solid transparent; line-height: 30px;
width: 30px;
border: none;
background: var(--background);
box-shadow: var(--background) 0 2px 3px 5px;
border-radius: 50%;
color: var(--color); color: var(--color);
font-size: 40px; font-size: 40px;
cursor: pointer; cursor: pointer;
line-height: 40px; padding: 0;
z-index: 7;
width: 60px;
background: var(--background);
} }
.minimized + .minimize { .minimized + .minimize {
transform: rotate(-90deg); transform: rotate(-90deg);
top: 3px; top: 10px;
} }
.goBack { .goBack {