# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1556872207 -7200
# Node ID 7d33eff62dc659f0cbd751f62e6acbaea076c827
# Parent  8fdbc524e7b5ae572b4c56a690119a67758009d2
client: prepared diagram legend component to support multiple instances

diff -r 8fdbc524e7b5 -r 7d33eff62dc6 client/src/components/DiagramLegend.vue
--- a/client/src/components/DiagramLegend.vue	Fri May 03 10:22:58 2019 +0200
+++ b/client/src/components/DiagramLegend.vue	Fri May 03 10:30:07 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['d-flex border-right', { collapsed }]" id="diagram-legend">
+  <div :class="['diagram-legend', { collapsed }]">
     <span class="box-control toggle" @click="collapsed = !collapsed">
       <font-awesome-icon icon="angle-left" fixed-width />
     </span>
@@ -14,11 +14,13 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-#diagram-legend
+<style lang="sass">
+.diagram-legend
   position: relative
   width: 180px
   font-size: 0.8rem
+  display: flex
+  border-right: solid 1px #dee2e6
   .toggle
     margin-left: 0
     position: absolute
@@ -28,6 +30,7 @@
       transition: transform 0.3s
   &.collapsed
     width: 0
+    border-right: none
     .toggle
       left: 0.25rem
       svg