Mercurial > gemma
changeset 3144:7d33eff62dc6
client: prepared diagram legend component to support multiple instances
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 03 May 2019 10:30:07 +0200 |
parents | 8fdbc524e7b5 |
children | d33a5c1522dc |
files | client/src/components/DiagramLegend.vue |
diffstat | 1 files changed, 6 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- 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