blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Style tabs component

Browse Source
This commit is contained in:
Pablo Vazquez 2022-07-05 16:47:55 +02:00 committed by Francesco Siddi
parent c3d0e71439
commit 30b734712c
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/app/src/components/TabsWrapper.vue
View File

@ -8,38 +8,45 @@ provide("selectedTitle", selectedTitle);
</script> </script>
<template> <template>
<div> <nav>
<ul class="tabs-header"> <ul class="tabs-header">
<li <li
v-for="title in tabTitles" v-for="title in tabTitles"
:key="title" :key="title"
class="tab-item" class="tab-item"
:class="{ selected: selectedTitle === title }" :class="{ active: selectedTitle === title }"
@click="selectedTitle = title" @click="selectedTitle = title"
> >
{{ title }} {{ title }}
</li> </li>
</ul> </ul>
<slot /> <slot />
</div> </nav>
</template> </template>
<style scoped> <style scoped>
nav {
margin: var(--spacer-sm) 0;
}
.tabs-header { .tabs-header {
list-style: none; align-items: center;
padding: 0;
margin: 0;
display: flex; display: flex;
justify-content: space-between; gap: var(--spacer);
gap: 5px; list-style: none;
} }
.tab-item { .tab-item {
flex: 1; border-bottom: var(--border-width) solid transparent;
padding: 5px 0; color: var(--color-text-hint);
cursor: pointer; cursor: pointer;
padding: var(--spacer-sm) 0;
transition: border-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
user-select: none; user-select: none;
} }
.tab-item.selected {
border-bottom: 1px solid white; .tab-item:hover,
.tab-item.active {
border-color: var(--color-text);
color: var(--color-text);
} }
</style> </style>