local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: active color for editor buttons

Browse source
This commit is contained in:
kolaente 2022-05-08 23:31:38 +02:00
parent 4b0d491359
commit f1c9887243
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/input/editor.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="editor"> <div class="editor">
<div class="clear"></div> <div class="clear"></div>
<vue-easymde <vue-easymde
:configs="config" :configs="config"
@change="bubble" @change="bubble"
@ -35,7 +35,8 @@
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a> <a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
</li> </li>
</ul> </ul>
<x-button v-else-if="isEditActive" @click="toggleEdit" variant="secondary" :shadow="false" v-cy="'saveEditor'"> <x-button v-else-if="isEditActive" @click="toggleEdit" variant="secondary" :shadow="false"
v-cy="'saveEditor'">
{{ $t('misc.save') }} {{ $t('misc.save') }}
</x-button> </x-button>
</template> </template>
@ -176,7 +177,7 @@ export default defineComponent({
} }
this.changeTimeout = setTimeout(() => { this.changeTimeout = setTimeout(() => {
this.$emit('update:modelValue',this.text) this.$emit('update:modelValue', this.text)
this.$emit('change', this.text) this.$emit('change', this.text)
}, timeout) }, timeout)
}, },
@ -348,7 +349,7 @@ export default defineComponent({
color: var(--grey-400) !important; color: var(--grey-400) !important;
font-style: italic; font-style: italic;
} }
&-cursor { &-cursor {
border-color: var(--grey-700); border-color: var(--grey-700);
} }
@ -369,7 +370,11 @@ export default defineComponent({
button { button {
color: var(--grey-700); color: var(--grey-700);
&.active {
background: var(--grey-200);
}
svg { svg {
vertical-align: middle; vertical-align: middle;
@ -384,7 +389,7 @@ export default defineComponent({
top: 24px; top: 24px;
margin-left: -3px; margin-left: -3px;
} }
&:hover { &:hover {
background: var(--grey-200); background: var(--grey-200);
border-color: var(--grey-300); border-color: var(--grey-300);