Mercurial > gemma
comparison client/src/staging/Staging.vue @ 1213:9d93968db2cd
replaced custom css with bootstrap classes
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 14:13:01 +0100 |
parents | 8df4ebbc5c3f |
children | 5a8e8ee9034d |
comparison
equal
deleted
inserted
replaced
1212:387826a2efd3 | 1213:9d93968db2cd |
---|---|
1 <template> | 1 <template> |
2 <div v-if="showStagingArea" class="card staging-card"> | 2 <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative"> |
3 <div class="card-body staging-card-body"> | 3 <div class="p-3"> |
4 <div | 4 <div |
5 @click="$store.commit('application/showStagingArea', !showStagingArea);" | 5 @click="$store.commit('application/showStagingArea', !showStagingArea);" |
6 class="ui-element close-showStagingArea" | 6 class="ui-element close-showStagingArea position-absolute" |
7 > | 7 > |
8 <i class="fa fa-close"></i> | 8 <i class="fa fa-close"></i> |
9 </div> | 9 </div> |
10 <div class="card-title mb-4 headline"> | 10 <div class="card-title mb-4 headline"> |
11 <h4>Staging area</h4> | 11 <h4>Staging area</h4> |
25 }; | 25 }; |
26 </script> | 26 </script> |
27 | 27 |
28 <style lang="sass" scoped> | 28 <style lang="sass" scoped> |
29 .close-showStagingArea | 29 .close-showStagingArea |
30 position: absolute | |
31 z-index: 2 | 30 z-index: 2 |
32 right: 0 | 31 right: 0 |
33 top: 7px | 32 top: 7px |
34 border-radius: $border-radius | |
35 height: $icon-width | 33 height: $icon-width |
36 width: $icon-height | 34 width: $icon-height |
37 | 35 |
38 .staging-card | 36 .staging-card |
39 position: relative | |
40 background-color: white | |
41 width: 30rem | 37 width: 30rem |
42 height: 28rem | 38 height: 28rem |
43 margin-left: auto | |
44 margin-right: auto | |
45 border-radius: $border-radius | |
46 opacity: $slight-transparent | 39 opacity: $slight-transparent |
47 </style> | 40 </style> |