From dfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sun, 4 Jul 2021 02:22:39 +0200
Subject: viewer: use CSS modules

GitHub: closes #196
---
 viewer/src/components/LdCommand.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'viewer/src/components/LdCommand.vue')

diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 7ffa670..19174ad 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -19,14 +19,14 @@
 -->
 
 <template>
-  <div class="flex command-btns">
+  <div class="flex" :class="$style.commandBtns">
     <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
       <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" />
     </a>
     <ld-command-sort />
     <a
-      :class="{ disabled: isEntryPoint() }"
-      class="link command-secondary"
+      class="link"
+      :class="{ disabled: isEntryPoint(), [$style.commandSecondary]: true }"
       :title="$t('command.back')"
       @click="isEntryPoint() || $router.back()"
     >
@@ -68,11 +68,11 @@ export default class LdCommand extends Vue {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/_buefy_variables.scss";
 @import "~@/assets/scss/theme.scss";
 
-.command-btns {
+.commandBtns {
   background-color: $command-buttons-bgcolor;
   justify-content: space-around;
   vertical-align: middle;
@@ -90,7 +90,7 @@ export default class LdCommand extends Vue {
   @media only screen and (max-width: $tablet) {
     flex: 0 1;
 
-    > .command-secondary {
+    > .commandSecondary {
       display: none;
     }
   }
-- 
cgit v1.2.3