-
Notifications
You must be signed in to change notification settings - Fork 1
/
AccentDialog.vue
89 lines (85 loc) · 1.72 KB
/
AccentDialog.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script>
import ModalDialog from './ModalDialog';
export default {
props: ['title', 'type', 'yesText'],
computed: {
style() {
const btn = {
default: '',
success: 'is-success',
warning: 'is-warning',
danger: 'is-danger',
info: 'is-info',
};
return this.type ? btn[this.type] : 'is-primary';
},
yes() {
return this.yesText || 'Хорошо';
},
},
methods: {
confirm() {
this.$emit('confirm');
this.$emit('close');
},
},
components: {
ModalDialog,
},
};
</script>
<template>
<ModalDialog @close="$emit('close')">
<div class="dialog-caption">
<div class="dialog-caption__title">
{{title}}
</div>
<div class="dialog-caption__option">
<slot name="option"></slot>
</div>
</div>
<div class="modal-dialog__wrapper capped">
<slot name="content"></slot>
</div>
<slot></slot>
</ModalDialog>
</template>
<style lang="scss">
.dialog-caption {
background: $primary;
color: $scheme-main;
font-size: 16px;
padding: ($size-normal + $size-normal * 0.2) $size-normal $size-normal;
display: flex;
&__title {
flex: 3 1 auto;
margin-right: 10px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&__option {
flex: 0 0 auto;
color: $scheme-main;
cursor: pointer;
a {
color: $scheme-main;
display: inline-block;
}
.material-icons {
vertical-align: middle;
position: relative;
top: -1px;
}
.account {
border-bottom: 1px dashed #bbcccc;
font-size: 15px;
padding-bottom: 1px;
}
}
&.warning {
background: $warning;
}
}
</style>