Mercurial > gemma
diff client/src/layers/Layers.vue @ 1217:ba8cd80d68b6
made more use of bootstrap classes instead of custom css
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:20:22 +0100 |
parents | 9d93968db2cd |
children | c14353e2cdb9 |
line wrap: on
line diff
--- a/client/src/layers/Layers.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/layers/Layers.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,6 +1,6 @@ <template> - <div class="layerselectmenu"> - <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer"> + <div class="position-relative ml-auto"> + <div @click="$store.commit('application/showLayers', !showLayers)" class="d-flex flex-column ui-element minimizer position-absolute mt-1"> <div> <i class="fa fa-th-list"></i> </div> @@ -20,12 +20,7 @@ </template> <style lang="sass" scoped> -.layerselectmenu - position: relative - margin-left: auto - .layerselection - background-color: white opacity: $slight-transparent .layerselectioncollapsed @@ -38,10 +33,8 @@ width: $layerselect-width .minimizer - position: absolute z-index: 2 right: 0 - margin-top: $x-small-offset height: $icon-width width: $icon-height </style> @@ -72,14 +65,13 @@ ...mapGetters("map", ["layersForLegend"]), ...mapState("application", ["showLayers"]), layerSelectStyle() { - return { - "ui-element": true, - rounded: true, - layerselection: true, - shadow: true, - layerselectionexpanded: this.showLayers, - layerselectioncollapsed: !this.showLayers - }; + return [ + "ui-element rounded layerselection bg-white shadow", + { + layerselectionexpanded: this.showLayers, + layerselectioncollapsed: !this.showLayers + } + ]; } }, methods: {