From 19728f02a618079f7f573ab1dc4a5a1f9d976327 Mon Sep 17 00:00:00 2001 From: Henrik Askjer <henrik.askjer@uib.no> Date: Thu, 28 Oct 2021 10:20:55 +0200 Subject: [PATCH] Button content without pseudo elements --- src/components/Header.vue | 40 +++++++-------------------------------- 1 file changed, 7 insertions(+), 33 deletions(-) diff --git a/src/components/Header.vue b/src/components/Header.vue index cb758155..c4d5aa3b 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -22,7 +22,7 @@ <div class="inflection-wrapper" v-if="inflected"> <v-btn class="show-inflection" width="150px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name"> - <span v-bind:class="[{open:inflection_expanded}, dictionary]"/> + <span>{{inflection_button_text}}</span> </v-btn> <div class="inflection-canvas" v-if="inflection_expanded"> <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" /> @@ -71,6 +71,12 @@ export default { 'nob': 'nynorskordboka' }[this.dictionary] || '' }, + inflection_button_text: function() { + return { + "bob": {true: "Se bøyning ▼", false: "Skjul bøyning ▲"}, + "nob": {true: "Sjå bøying ▼", false: "Skjul bøying ▲"} + }[this.dictionary][this.inflection_expanded] + }, group_list: function() { return helpers.group_list(this.lemmas, this.dictionary) }, @@ -169,38 +175,6 @@ article h2.secondary_header { } -.show-inflection .bob:before { - content: "Se bøyning"; -} - -.show-inflection .nob:before { - content: "Sjå bøying"; -} - -.show-inflection .open.bob:before { - content: "Skjul bøyning"; -} - -.show-inflection .open.nob:before { - content: "Skjul bøying"; -} - -.show-inflection .bob:after, .show-inflection .nob:after { - content: "▼"; - right: 0; - top: 8px; - margin-left: 3px;; -} - - -.show-inflection .open:after { - content: "▲"; - right: 0; - top: 1px; - margin-left: 3px; -} - - @keyframes open { 0% { opacity: 0; -- GitLab