Update: Dialog styling & animation
Dialogs slide & fade in. All appear in the same spot (50px from top)
This commit is contained in:
@@ -4610,6 +4610,58 @@ input:-moz-placeholder {
|
||||
{
|
||||
font-weight: bold;
|
||||
}*/
|
||||
.ui-dialog {
|
||||
animation-name: ui-dialog-show;
|
||||
-webkit-animation-name: ui-dialog-show;
|
||||
animation-duration: .2s;
|
||||
-webkit-animation-duration: .2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes ui-dialog-show {
|
||||
0% {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes ui-dialog-show {
|
||||
0% {
|
||||
-webkit-transform: translateY(-30px);
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.ui-widget-overlay.ui-front {
|
||||
animation-name: ui-dialog-fadeIn;
|
||||
-webkit-animation-name: ui-dialog-fadeIn;
|
||||
animation-duration: .2s;
|
||||
-webkit-animation-duration: .2s;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
}
|
||||
@keyframes ui-dialog-fadeIn {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes ui-dialog-fadeIn {
|
||||
0% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.page .dialog {
|
||||
display: none;
|
||||
}
|
||||
@@ -4618,6 +4670,7 @@ input:-moz-placeholder {
|
||||
border-color: #333333;
|
||||
background: #fcfcfc;
|
||||
box-shadow: rgba(20, 20, 20, 0.7) 0px 0px 50px;
|
||||
top: 50px !important;
|
||||
}
|
||||
.ui-dialog .ui-widget-header {
|
||||
border-top: none;
|
||||
|
||||
Reference in New Issue
Block a user