new changes

This commit is contained in:
f.shokouhi
2019-11-03 11:34:10 +03:30
parent da3dd22ec5
commit 6ece7b720d
5 changed files with 76 additions and 21 deletions
+22 -8
View File
@@ -2,7 +2,7 @@
<v-form ref="form">
<v-container grid-list-xs fluid>
<material-card color="black" title="Add Cycle">
<v-layout align-center justify-center wrap class="px-5 my-3">
<v-layout wrap class="px-5 my-3">
<v-flex xs12 sm6 md4 class="WM-FlexCenter">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-text-field
@@ -59,7 +59,9 @@
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md4 class="WM-FlexCenter pl-3" style="position: relative" v-for="(label, key) in formData.labels" :key="key">
<v-flex xs12></v-flex>
<v-flex xs12 sm6 md4 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" v-for="(label, key) in formData.labels" :key="key">
<div class="Inner">
<v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete
color="black"
@@ -78,20 +80,23 @@
@click="duplicateForm(key)"
>
<v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>ADD
</v-btn>
</v-btn>
<v-btn v-if="key > 0"
absolute
small
left
bottom
color="red"
right
top
color="pink"
@click="removeForm(key)"
>
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
</v-btn>
</v-btn>
</div>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12>
<hr class="v-divider theme--light" style="margin:30px 0 0 0 !important">
</v-flex>
<v-flex xs12 sm12 md12 class="WM-FlexCenter">
<!-- <v-icon class="fa fa-sort-amount-desc mr-2"></v-icon> -->
<v-textarea color="black" v-model="formData.note" class="py-3 pr-3" name="address">
@@ -213,4 +218,13 @@ export default {
.v-btn--floating, .v-btn--icon:before {
border-radius: 50%!important;
}
.WM-DuplicateInput {
margin: 15px 0;
}
.WM-DuplicateInput .Inner {
padding: 15px 20px !important;
margin: 0 10px 0 0;
width: 100%;
border: 1px solid rgba(0,0,0,.2);
}
</style>
+22 -6
View File
@@ -14,8 +14,10 @@
class="py-3 pr-3"
></v-text-field>
</v-flex>
<v-flex xs12 md12 sm12></v-flex>
<!-- <v-row style="position: relative" v-for="(item, key) in formData.items" :key="key"> -->
<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3" style="position: relative" v-for="(item, key) in formData.items" :key="key">
<v-flex xs12 md3 sm3 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" v-for="(item, key) in formData.items" :key="key">
<div class="Inner">
<v-icon class="fas fa-check mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete
@@ -41,17 +43,20 @@
<v-btn v-if="key > 0"
absolute
small
left
bottom
color="red"
right
top
color="pink"
@click="removeForm(key)"
>
<v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>REMOVE
</v-btn>
</div>
</v-flex>
<!-- </v-row> -->
<v-spacer></v-spacer>
<v-flex xs12>
<hr class="v-divider theme--light" style="margin-top:30px !important">
</v-flex>
</v-layout>
<v-layout align-center justify-center wrap class="px-5 mb-3">
<v-flex xs12 sm12 md12>
@@ -162,3 +167,14 @@ export default {
}
};
</script>
<style media="screen">
.WM-DuplicateInput {
margin: 15px 0;
}
.WM-DuplicateInput .Inner {
padding: 15px 20px !important;
margin: 0 10px 0 0;
width: 100%;
border: 1px solid rgba(0,0,0,.2);
}
</style>