Mercurial > gemma

comparison client/src/zoom/zoom.vue @ 1217:ba8cd80d68b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 b23622905a3f
children 3c84035b1f1b
comparison
equal deleted inserted replaced
1216:1c7806728172 1217:ba8cd80d68b6
1 <template> 1 <template>
2 <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> 2 <div class="d-flex buttoncontainer shadow mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''">
3 <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn"> 3 <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn">
4 <i class="fa fa-plus"></i> 4 <i class="fa fa-plus"></i>
5 </button> 5 </button>
6 <button class="zoomButton rounded-right ui-element" @click="zoomOut"> 6 <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut">
7 <i class="fa fa-minus"></i> 7 <i class="fa fa-minus"></i>
8 </button> 8 </button>
9 </div> 9 </div>
10 </template> 10 </template>
11 11
12 <style lang="sass" scoped> 12 <style lang="sass" scoped>
13 .buttoncontainer 13 .buttoncontainer
14 position: absolute
15 bottom: 0 14 bottom: 0
16 left: 50% 15 left: 50%
17 margin-left: -$icon-width 16 margin-left: -$icon-width
18 margin-bottom: $offset
19 17
20 .zoomButton 18 .zoomButton
21 background-color: white
22 min-height: $icon-width 19 min-height: $icon-width
23 min-width: $icon-width 20 min-width: $icon-width
24 margin-bottom: auto
25 z-index: 2 21 z-index: 2
26 outline: none 22 outline: none
27 border: 0px
28 </style> 23 </style>
29 <script> 24 <script>
30 import { mapState } from "vuex"; 25 import { mapState } from "vuex";
31 26
32 export default { 27 export default {