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

Fixed separators getting cut off if the tab on the left can be scrolled

Browse source 
This also required some cleanup around the stick CSS
This commit is contained in:
thepaperpilot 2022-04-24 21:48:27 -05:00
parent dc8a5fb558
commit eb81fdfb2c
3 changed files with 10 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/Game.vue
View file

@ -11,7 +11,6 @@
/> />
<component :is="tab" :index="index" v-else /> <component :is="tab" :index="index" v-else />
</div> </div>
<div class="separator" v-if="index !== tabs.length - 1"></div>
</div> </div>
</div> </div>
</template> </template>
@ -66,14 +65,8 @@ function gatherLayerProps(layer: GenericLayer) {
flex-grow: 1; flex-grow: 1;
} }
.separator { .tab + .tab > .inner-tab {
position: absolute; border-left: solid 4px var(--outline);
right: -4px;
top: 0;
bottom: 0;
width: 8px;
background: var(--outline);
z-index: 1;
} }
</style> </style>
@ -82,7 +75,7 @@ function gatherLayerProps(layer: GenericLayer) {
height: 4px; height: 4px;
border: none; border: none;
background: var(--outline); background: var(--outline);
margin: var(--feature-margin) -10px; margin: var(--feature-margin) 0;
} }
.tab .modal-body hr { .tab .modal-body hr {

13
src/components/layout/Sticky.vue
View file

@ -43,18 +43,7 @@ onMounted(() => {
.sticky { .sticky {
position: sticky; position: sticky;
background: var(--background); background: var(--background);
margin-left: -10px; width: calc(100% - 2px);
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
width: 100%;
z-index: 3; z-index: 3;
} }
.modal-body .sticky {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
</style> </style>

23
src/features/tabs/TabFamily.vue
View file

@ -168,29 +168,22 @@ export default defineComponent({
margin-bottom: 20px; margin-bottom: 20px;
} }
.tab-family-container .sticky {
margin-left: -3px !important;
margin-right: -3px !important;
}
.tab-buttons-container { .tab-buttons-container {
width: calc(100% - 14px);
z-index: 4; z-index: 4;
} }
.tab-buttons-container:not(.floating) { .tab-buttons-container:not(.floating) {
border-top: solid 4px;
border-bottom: solid 4px; border-bottom: solid 4px;
border-color: inherit; border-color: inherit;
} }
:not(.layer-tab):not(.modal-body) > .tab-family-container > .tab-buttons-container:not(.floating) {
width: calc(100% + 6px);
margin-left: -3px;
}
.tab-buttons-container:not(.floating) .tab-buttons { .tab-buttons-container:not(.floating) .tab-buttons {
width: calc(100% + 14px);
margin-left: -7px;
margin-right: -7px;
box-sizing: border-box;
text-align: left; text-align: left;
padding-left: 14px;
margin-bottom: -4px; margin-bottom: -4px;
} }
@ -239,11 +232,7 @@ export default defineComponent({
> .tab-family-container > .tab-family-container
> .tab-buttons-container:not(.floating):first-child > .tab-buttons-container:not(.floating):first-child
.tab-buttons { .tab-buttons {
padding-left: 2px; padding-left: 0;
}
.tab-buttons-container:not(.floating):first-child {
border-top: 0;
} }
.minimizable > .tab-buttons-container:not(.floating):first-child { .minimizable > .tab-buttons-container:not(.floating):first-child {