+47
-37
lines changedFilter options
+47
-37
lines changed Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@
44 44
</script>
45 45 46 46
<style lang="scss" scoped>
47 -
.md-dialog {
47 +
.md-dialog /deep/.md-dialog-container {
48 48
max-width: 768px;
49 49
}
50 50
</style>
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
1 1
<template>
2 2
<md-portal>
3 -
<transition name="md-dialog">
4 -
<div class="md-dialog" :class="[dialogClasses, $mdActiveTheme]" v-on="$listeners" @keydown.esc="onEsc" v-if="mdActive">
5 -
<md-focus-trap>
6 -
<div class="md-dialog-container">
7 -
<slot />
8 - 3 +
<div class="md-dialog" :class="dialogClasses">
4 +
<md-focus-trap>
5 +
<transition name="md-dialog">
6 +
<div class="md-dialog-container" :class="[dialogContainerClasses, $mdActiveTheme]" v-on="$listeners"
7 +
@keydown.esc="onEsc" v-if="mdActive">
8 +
<slot/>
9 9
<keep-alive>
10 -
<md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop" />
10 +
<md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop"/>
11 11
</keep-alive>
12 12
</div>
13 -
</md-focus-trap>
14 -
</div>
15 -
</transition>
13 +
</transition>
14 +
</md-focus-trap>
15 +
</div>
16 16
</md-portal>
17 17
</template>
18 18
@@ -54,14 +54,19 @@
54 54
mdAnimateFromSource: Boolean
55 55
},
56 56
computed: {
57 -
dialogClasses () {
57 +
dialogClasses() {
58 +
return {
59 +
'md-active': this.mdActive
60 +
}
61 +
},
62 +
dialogContainerClasses() {
58 63
return {
59 64
'md-dialog-fullscreen': this.mdFullscreen
60 65
}
61 66
}
62 67
},
63 68
watch: {
64 -
mdActive (isActive) {
69 +
mdActive(isActive) {
65 70
this.$nextTick().then(() => {
66 71
if (isActive) {
67 72
this.$emit('md-opened')
@@ -72,16 +77,16 @@
72 77
}
73 78
},
74 79
methods: {
75 -
closeDialog () {
80 +
closeDialog() {
76 81
this.$emit('update:mdActive', false)
77 82
},
78 -
onClick () {
83 +
onClick() {
79 84
if (this.mdClickOutsideToClose) {
80 85
this.closeDialog()
81 86
}
82 87
this.$emit('md-clicked-outside');
83 88
},
84 -
onEsc () {
89 +
onEsc() {
85 90
if (this.mdCloseOnEsc) {
86 91
this.closeDialog()
87 92
}
@@ -96,27 +101,39 @@
96 101
@import "~components/MdElevation/mixins";
97 102 98 103
.md-dialog {
104 +
position: fixed;
105 +
top: 0;
106 +
left: 0;
107 +
right: 0;
108 +
bottom: 0;
109 +
align-items: center;
110 +
justify-content: center;
111 +
pointer-events: none;
112 +
display: none;
113 +
z-index: -1;
114 + 115 +
&.md-active {
116 +
z-index: 110;
117 +
display: flex;
118 +
}
119 +
}
120 + 121 +
.md-dialog-container {
99 122
@include md-elevation(24);
100 123
min-width: 280px;
101 124
max-width: 80%;
102 125
max-height: 80%;
103 126
margin: auto;
104 127
display: flex;
105 128
flex-flow: column;
106 -
flex-direction: row;
107 129
overflow: hidden;
108 -
position: fixed;
109 -
top: 50%;
110 -
left: 50%;
111 -
z-index: 110;
112 130
border-radius: 2px;
113 131
backface-visibility: hidden;
114 132
pointer-events: auto;
115 -
transform: translate(-50%, -50%);
133 +
transform: scale(1);
116 134
transform-origin: center center;
117 -
transition: opacity .15s $md-transition-stand-timing,
118 -
transform .2s $md-transition-stand-timing;
119 -
will-change: opacity, transform, left, top;
135 +
transition: opacity .15s $md-transition-stand-timing, transform .2s $md-transition-stand-timing;
136 +
will-change: opacity, transform;
120 137 121 138
> .md-dialog-tabs,
122 139
> .md-dialog-title,
@@ -128,10 +145,10 @@
128 145
}
129 146
}
130 147 131 -
.md-dialog-enter-active,
148 +
.md-dialog-enter-active,
132 149
.md-dialog-leave-active {
133 150
opacity: 0;
134 -
transform: translate(-50%, -50%) scale(.9);
151 +
transform: scale(.9);
135 152 136 153
> .md-dialog-tabs,
137 154
> .md-dialog-title,
@@ -143,10 +160,6 @@
143 160
}
144 161 145 162
.md-dialog-container {
146 -
display: flex;
147 -
flex-flow: column;
148 -
flex: 1;
149 - 150 163
.md-tabs {
151 164
flex: 1;
152 165
}
@@ -164,13 +177,10 @@
164 177 165 178
.md-dialog-fullscreen {
166 179
@include md-layout-xsmall {
180 +
width: 100%;
181 +
height: 100%;
167 182
max-width: 100%;
168 183
max-height: 100%;
169 -
position: fixed;
170 -
top: 0;
171 -
right: 0;
172 -
bottom: 0;
173 -
left: 0;
174 184
border-radius: 0;
175 185
transform: none;
176 186
@@ -1,4 +1,4 @@
1 -
.md-dialog {
1 +
.md-dialog-container {
2 2
@include md-theme-component() {
3 3
@include md-theme-property(background-color, background);
4 4
@include md-theme-property(color, text-primary, background);
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