github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

update v-tabs and markdown styling

Browse Source
This commit is contained in:
Ben Haynes
2020-08-28 10:53:22 -04:00
parent 8ff52f9240
commit e6be15e3ce
3 changed files with 5 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/components/v-tabs/v-tab/v-tab.vue
View File

@@ -41,7 +41,7 @@ export default defineComponent({
<style>
body {
--v-tab-color: var(--foreground-normal);
--v-tab-color: var(--foreground-subdued);
--v-tab-background-color: var(--background-page);
--v-tab-color-active: var(--foreground-normal);
--v-tab-background-color-active: var(--background-page);
@@ -50,11 +50,13 @@ body {
<style lang="scss" scoped>
.v-tab.horizontal {
transition: color var(--fast) var(--transition);
color: var(--v-tab-color);
font-weight: 500;
font-size: 14px;
background-color: var(--v-tab-background-color);
&:hover,
&.active {
color: var(--v-tab-color-active);
background-color: var(--v-tab-background-color-active);

25
app/src/components/v-tabs/v-tabs.vue
View File

@@ -4,7 +4,6 @@
</v-list>
<div v-else class="v-tabs horizontal">
<slot />
<div class="slider" :style="slideStyle" />
</div>
</template>
@@ -40,20 +39,11 @@ export default defineComponent({
'v-tabs'
);
const slideStyle = computed(() => {
const activeIndex = items.value.findIndex((item) => item.active.value);
return {
'--_v-tabs-items': items.value.length,
'--_v-tabs-selected': activeIndex,
};
});
function update(newSelection: readonly (string | number)[]) {
emit('input', newSelection);
}
return { update, slideStyle, items };
return { update, items };
},
});
</script>
@@ -67,7 +57,7 @@ body {
<style lang="scss" scoped>
.v-tabs.horizontal {
position: relative;
display: flex;
display: inline-flex;
::v-deep .v-tab {
display: flex;
@@ -80,16 +70,5 @@ body {
padding: 8px 20px;
cursor: pointer;
}
.slider {
position: absolute;
bottom: -2px;
left: calc(100% / var(--_v-tabs-items) * var(--_v-tabs-selected));
width: calc(100% / var(--_v-tabs-items));
height: 2px;
background-color: var(--v-tabs-underline-color);
transition: var(--medium) cubic-bezier(0.66, 0, 0.33, 1);
transition-property: left, top;
}
}
</style>

2
app/src/interfaces/markdown/markdown.vue
View File

@@ -65,9 +65,7 @@ export default defineComponent({
--v-textarea-min-height: var(--input-height-tall);
--v-textarea-max-height: 400px;
--v-tab-color: var(--foreground-normal);
--v-tab-background-color: var(--background-subdued);
--v-tab-color-active: var(--foreground-normal);
--v-tab-background-color-active: var(--background-subdued);
display: flex;