Mercurial > gemma
diff client/src/zoom/zoom.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 | b23622905a3f |
| children | 3c84035b1f1b |
line wrap: on
line diff
--- a/client/src/zoom/zoom.vue Mon Nov 19 15:10:09 2018 +0100 +++ b/client/src/zoom/zoom.vue Mon Nov 19 15:20:22 2018 +0100 @@ -1,9 +1,9 @@ <template> - <div class="d-flex buttoncontainer shadow" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> - <button class="zoomButton rounded-left ui-element border-right" @click="zoomIn"> + <div class="d-flex buttoncontainer shadow mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh' : ''"> + <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn"> <i class="fa fa-plus"></i> </button> - <button class="zoomButton rounded-right ui-element" @click="zoomOut"> + <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut"> <i class="fa fa-minus"></i> </button> </div> @@ -11,20 +11,15 @@ <style lang="sass" scoped> .buttoncontainer - position: absolute bottom: 0 left: 50% margin-left: -$icon-width - margin-bottom: $offset .zoomButton - background-color: white min-height: $icon-width min-width: $icon-width - margin-bottom: auto z-index: 2 outline: none - border: 0px </style> <script> import { mapState } from "vuex";