Mercurial > gemma

comparison client/src/drawtool/Drawtool.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 9d93968db2cd
children 74562dc29e10
comparison
equal deleted inserted replaced
1216:1c7806728172 1217:ba8cd80d68b6
1 <template> 1 <template>
2 <div class="d-flex flex-column"> 2 <div class="d-flex flex-column">
3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool rounded"> 3 <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
4 <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i> 4 <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
5 </div> 5 </div>
6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool rounded"> 6 <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
7 <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i> 7 <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
8 </div> 8 </div>
9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool rounded" v-if="selectedSurvey"> 9 <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
10 <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i> 10 <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
11 </div> 11 </div>
12 </div> 12 </div>
13 </template> 13 </template>
14 14
15 <style lang="sass" scoped> 15 <style lang="sass" scoped>
16 .drawtool 16 .drawtool
17 background-color: white
18 padding: $small-offset
19 margin-left: $offset
20 height: $icon-width 17 height: $icon-width
21 width: $icon-height 18 width: $icon-height
22 margin-bottom: $offset
23 margin-right: $offset
24 z-index: 2 19 z-index: 2
25 20
26 .inverted 21 .inverted
27 color: #0077ff 22 color: #0077ff
28 </style> 23 </style>