jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the dialog stack animations

Browse Source
This commit is contained in:
Stefan Zermatten
2017-01-13 13:21:05 +02:00
parent dbbb3739d0
commit c416adc85b
3 changed files with 116 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
View File

@@ -1,6 +1,28 @@
.dialog-stack {
background: rgba(0,0,0,0.4);
z-index: 1;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
visibility: visible;
transition: visibility 0s linear;
}
.dialog-stack.hide {
visibility: hidden;
transition: visibility 0s linear 0.4s;
}
.dialog-stack .backdrop {
background: rgba(0,0,0,0.4);
opacity: 1;
transition: opacity 0.4s linear;
}
.dialog-stack.hide .backdrop {
opacity: 0;
transition: opacity 0.2s linear;
}
.dialog-stack .dialog-sizer {
@@ -11,12 +33,20 @@
.dialog-stack .dialog {
position: absolute;
transform-origin: top left;
width: 100%;
height: 100%;
background: white;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.4);
transition: all ease 0.5s;
transition: all 0.4s ease;
overflow: hidden;
border-radius: 2px;
}
.dialog-stack .dialog .testButton {
height: 200px;
width: 100px;
background: red;
border-radius: 30px;
}