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>