+51
-29
lines changedFilter options
+51
-29
lines changed Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
1 1
<template>
2 2
<md-portal>
3 -
<div class="md-dialog" :class="dialogClasses">
4 -
<md-focus-trap>
5 -
<transition name="md-dialog">
3 +
<transition name="md-dialog">
4 +
<div class="md-dialog" v-if="mdActive">
5 +
<md-focus-trap>
6 6
<div class="md-dialog-container" :class="[dialogContainerClasses, $mdActiveTheme]" v-on="$listeners"
7 -
@keydown.esc="onEsc" v-if="mdActive">
7 +
@keydown.esc="onEsc">
8 8
<slot/>
9 9
<keep-alive>
10 10
<md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop"/>
11 11
</keep-alive>
12 12
</div>
13 -
</transition>
14 -
</md-focus-trap>
15 -
</div>
13 +
</md-focus-trap>
14 +
</div>
15 +
</transition>
16 16
</md-portal>
17 17
</template>
18 18
@@ -54,19 +54,19 @@
54 54
mdAnimateFromSource: Boolean
55 55
},
56 56
computed: {
57 -
dialogClasses() {
57 +
dialogClasses () {
58 58
return {
59 59
'md-active': this.mdActive
60 60
}
61 61
},
62 -
dialogContainerClasses() {
62 +
dialogContainerClasses () {
63 63
return {
64 64
'md-dialog-fullscreen': this.mdFullscreen
65 65
}
66 66
}
67 67
},
68 68
watch: {
69 -
mdActive(isActive) {
69 +
mdActive (isActive) {
70 70
this.$nextTick().then(() => {
71 71
if (isActive) {
72 72
this.$emit('md-opened')
@@ -77,16 +77,16 @@
77 77
}
78 78
},
79 79
methods: {
80 -
closeDialog() {
80 +
closeDialog () {
81 81
this.$emit('update:mdActive', false)
82 82
},
83 -
onClick() {
83 +
onClick () {
84 84
if (this.mdClickOutsideToClose) {
85 85
this.closeDialog()
86 86
}
87 87
this.$emit('md-clicked-outside');
88 88
},
89 -
onEsc() {
89 +
onEsc () {
90 90
if (this.mdCloseOnEsc) {
91 91
this.closeDialog()
92 92
}
@@ -100,6 +100,10 @@
100 100
@import "~components/MdLayout/mixins";
101 101
@import "~components/MdElevation/mixins";
102 102 103 +
$opacity-transition-duration: .15s;
104 +
$transform-transition-duration: .20s;
105 +
$max-duration: max($opacity-transition-duration, $transform-transition-duration);
106 + 103 107
.md-dialog {
104 108
position: fixed;
105 109
top: 0;
@@ -109,13 +113,40 @@
109 113
align-items: center;
110 114
justify-content: center;
111 115
pointer-events: none;
112 -
display: none;
113 -
z-index: -1;
116 +
display: flex;
117 +
transition-duration: $max-duration;
118 +
z-index: 110;
119 + 120 +
&.md-dialog-leave,
121 +
&.md-dialog-enter-to {
122 +
.md-dialog-container {
123 +
opacity: 1;
124 +
transform: scale(1);
125 +
}
126 + 127 +
.md-dialog-fullscreen {
128 +
@include md-layout-xsmall {
129 +
opacity: 0;
130 +
transform: translate(0, 30%);
131 +
}
132 +
}
133 +
}
134 + 135 +
&.md-dialog-enter,
136 +
&.md-dialog-leave-to {
137 +
.md-dialog-container {
138 +
opacity: 0;
139 +
transform: scale(.9);
140 +
}
114 141 115 -
&.md-active {
116 -
z-index: 110;
117 -
display: flex;
142 +
.md-dialog-fullscreen {
143 +
@include md-layout-xsmall {
144 +
opacity: 1;
145 +
transform: translate(0, 0);
146 +
}
147 +
}
118 148
}
149 + 119 150
}
120 151 121 152
.md-dialog-container {
@@ -130,9 +161,10 @@
130 161
border-radius: 2px;
131 162
backface-visibility: hidden;
132 163
pointer-events: auto;
164 +
opacity: 1;
133 165
transform: scale(1);
134 166
transform-origin: center center;
135 -
transition: opacity .15s $md-transition-stand-timing, transform .2s $md-transition-stand-timing;
167 +
transition: opacity $opacity-transition-duration $md-transition-stand-timing, transform $transform-transition-duration $md-transition-stand-timing;
136 168
will-change: opacity, transform;
137 169 138 170
> .md-dialog-tabs,
@@ -183,16 +215,6 @@
183 215
max-height: 100%;
184 216
border-radius: 0;
185 217
transform: none;
186 - 187 -
&.md-dialog-enter {
188 -
opacity: 0;
189 -
transform: translate3D(0, 30%, 0);
190 -
}
191 - 192 -
&.md-dialog-leave-active {
193 -
opacity: 0;
194 -
transform: translate3D(0, 0, 0);
195 -
}
196 218
}
197 219
}
198 220
</style>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4