From 9484c400b87c9a85f09fb00db367696dd374873c Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Tue, 17 May 2016 05:19:06 +1000 Subject: [PATCH] Revert the flash message animation Looks more consistent with the popup animation, also the intermittent animation jerk issue has been fixed --- .../system/assets/ui/less/flashmessage.less | 18 +++--------------- modules/system/assets/ui/less/form.less | 2 ++ modules/system/assets/ui/storm.css | 10 +++------- 3 files changed, 8 insertions(+), 22 deletions(-) diff --git a/modules/system/assets/ui/less/flashmessage.less b/modules/system/assets/ui/less/flashmessage.less index 50bc21f38..b3171171e 100644 --- a/modules/system/assets/ui/less/flashmessage.less +++ b/modules/system/assets/ui/less/flashmessage.less @@ -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)"); - } -} \ No newline at end of file diff --git a/modules/system/assets/ui/less/form.less b/modules/system/assets/ui/less/form.less index 4fc4cdc3d..3a3618062 100644 --- a/modules/system/assets/ui/less/form.less +++ b/modules/system/assets/ui/less/form.less @@ -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; diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 82f0c63da..80cd61dcb 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -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}