TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert the flash message animation 

Looks more consistent with the popup animation, also the intermittent animation jerk issue has been fixed
This commit is contained in:
Samuel Georges 2016-05-17 05:19:06 +10:00
parent 3bad70f041
commit 9484c400b8
3 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/system/assets/ui/less/flashmessage.less
View File

@ -38,12 +38,13 @@
&.fade {
.opacity(0);
.transition(~'opacity .15s linear');
.transition(~'all 0.5s, width 0s');
.transform(~'scale(0.9)');
}
&.fade.in {
.opacity(1);
.animation(~'flashmessage-fade-in 1s cubic-bezier(0.2, 0.7, 0.5, 1)');
.transform( ~'scale(1)');
}
&.success { background: @color-flash-success-bg; }
@ -82,16 +83,3 @@
width: auto;
}
}
@keyframes flashmessage-fade-in {
0% {
.transform(~"translateY(-30%)");
opacity: 0;
}
70% {
opacity: 1;
}
100% {
.transform(~"translateY(0)");
}
}

2
modules/system/assets/ui/less/form.less
View File

@ -351,6 +351,8 @@
height: 88px;
color: lighten(@color-form-field-recordfinder-btn, 15%);
text-shadow: none;
padding-left: 15px;
padding-right: 15px;
i {
font-size: 14px;

10
modules/system/assets/ui/storm.css
View File

@ -1727,8 +1727,8 @@ div.scoreboard .scoreboard-offset{padding-left:20px}
body.slim-container div.scoreboard{padding:0 20px}
#layout-canvas .flash-message{display:none}
.flash-message{position:fixed;width:500px;left:50%;top:13px;margin-left:-250px;color:#ffffff;font-size:14px;padding:10px 30px 10px 15px;z-index:10000;word-wrap:break-word;text-shadow:0 -1px 0px rgba(0,0,0,0.25);text-align:center;-webkit-box-shadow:inset 0 -2px 0 rgba(0,0,0,0.1);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity .15s linear;transition:opacity .15s linear}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1);animation:flashmessage-fade-in 1s cubic-bezier(0.2,0.7,0.5,1)}
.flash-message.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}
.flash-message.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.flash-message.success{background:#8da85e}
.flash-message.error{background:#cc3300}
.flash-message.warning{background:#f0ad4e}
@ -1738,10 +1738,6 @@ body.slim-container div.scoreboard{padding:0 20px}
.flash-message.static{position:static !important;width:auto !important;display:block !important;margin-left:0 !important}
@media (max-width:768px){.flash-message{left:10px;right:10px;top:10px;margin-left:0;width:auto}
}
@keyframes flashmessage-fade-in{0%{-webkit-transform:translateY(-30%);-ms-transform:translateY(-30%);transform:translateY(-30%);opacity:0}
70%{opacity:1}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
[class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-small.png");width:16px;height:16px;line-height:16px;vertical-align:middle;display:inline-block;margin:-3px 2px 0 2px}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min--moz-device-pixel-ratio:2),only screen and (-o-min-device-pixel-ratio:2/1),only screen and (min-device-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){[class^="flag-"],[class*=" flag-"]{background-image:url("images/flag-icons-large.png");background-size:16px 3952px}
}
@ -2452,7 +2448,7 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
.field-checkboxlist-scrollable .checkbox ~ .checkbox{margin-top:0}
.field-recordfinder{background-color:#ffffff;border:1px solid #bdc3c7;overflow:hidden;position:relative;-webkit-box-shadow:inset 0 1px 0 #bdc3c7,0 1px 0 #fff;box-shadow:inset 0 1px 0 #bdc3c7,0 1px 0 #fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.field-recordfinder .form-control{background:transparent;border-color:transparent;height:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:7px 30px 7px 11px;-webkit-box-shadow:none;box-shadow:none}
.field-recordfinder .btn{background:transparent;position:absolute;right:-2px;top:50%;margin-top:-43px;height:88px;color:#595959;text-shadow:none}
.field-recordfinder .btn{background:transparent;position:absolute;right:-2px;top:50%;margin-top:-43px;height:88px;color:#595959;text-shadow:none;padding-left:15px;padding-right:15px}
.field-recordfinder .btn i{font-size:14px}
.field-recordfinder .btn:hover{color:#333333}
.field-recordfinder .text-muted i{font-size:14px;position:relative;top:1px;display:inline-block;margin:0 2px}