From 746bcb3571d144e8aeca92b6bd2d0231bf0e7e0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 17 Dec 2019 15:42:20 +0100 Subject: [PATCH] updated badge animation and position to be center aligned. --- .../config/umbracoSettings.Release.config | 80 ++++++++++++++----- .../config/umbracoSettings.config | 79 +++++++++++++----- 2 files changed, 119 insertions(+), 40 deletions(-) diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config index dc7257cda3..7e5c9ec5f1 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.Release.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.Release.config @@ -52,7 +52,6 @@ .umbraco-preview-badge {{ position: fixed; bottom: 0; - right: 0; display: inline-flex; background: rgba(27, 38, 79, 0.9); color: #fff; @@ -63,42 +62,83 @@ box-shadow: 0 5px 10px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2); line-height: 1; pointer-events:none; - transform: translateY(40px); - animation: umbraco-preview-badge--effect 1s 100ms ease both; + left: 50%; + transform: translate(-50%, 40px); + animation: umbraco-preview-badge--effect 10s 100ms ease both; + + border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{ 0% {{ - transform: translateY(40px); + transform: translate(-50%, 40px); animation-timing-function: ease-out; }} - 15% {{ - transform: translateY(-20px); + 1.5% {{ + transform: translate(-50%, -20px); animation-timing-function: ease-in; }} - 50% {{ - transform: translateY(-8px); + 5.0% {{ + transform: translate(-50%, -8px); animation-timing-function: ease-in; }} - 75% {{ - transform: translateY(-4px); + 7.5% {{ + transform: translate(-50%, -4px); animation-timing-function: ease-in; }} - 92% {{ - transform: translateY(-2px); + 9.2% {{ + transform: translate(-50%, -2px); animation-timing-function: ease-in; }} - 35%, - 65%, - 85% {{ - transform: translateY(0px); + 3.5%, + 6.5%, + 8.5% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 97% {{ - transform: translateY(0px); + 9.7% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 100% {{ - transform: translateY(0px); + 10.0% {{ + transform: translate(-50%, 0px); + }} + + + 60% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 61.5% {{ + transform: translate(-50%, -20px); + animation-timing-function: ease-in; + }} + 65.0% {{ + transform: translate(-50%, -8px); + animation-timing-function: ease-in; + }} + 67.5% {{ + transform: translate(-50%, -4px); + animation-timing-function: ease-in; + }} + 69.2% {{ + transform: translate(-50%, -2px); + animation-timing-function: ease-in; + }} + 63.5%, + 66.5%, + 68.5% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 69.7% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 70.0% {{ + transform: translate(-50%, 0px); + }} + 100.0% {{ + transform: translate(-50%, 0px); }} }} .umbraco-preview-badge__header {{ diff --git a/src/Umbraco.Web.UI/config/umbracoSettings.config b/src/Umbraco.Web.UI/config/umbracoSettings.config index dc7257cda3..fa998a9856 100644 --- a/src/Umbraco.Web.UI/config/umbracoSettings.config +++ b/src/Umbraco.Web.UI/config/umbracoSettings.config @@ -52,7 +52,6 @@ .umbraco-preview-badge {{ position: fixed; bottom: 0; - right: 0; display: inline-flex; background: rgba(27, 38, 79, 0.9); color: #fff; @@ -63,42 +62,82 @@ box-shadow: 0 5px 10px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .2); line-height: 1; pointer-events:none; - transform: translateY(40px); - animation: umbraco-preview-badge--effect 1s 100ms ease both; + left: 50%; + transform: translate(-50%, 40px); + animation: umbraco-preview-badge--effect 10s 100ms ease both; + border-radius: 3px 3px 0 0; }} @keyframes umbraco-preview-badge--effect {{ 0% {{ - transform: translateY(40px); + transform: translate(-50%, 40px); animation-timing-function: ease-out; }} - 15% {{ - transform: translateY(-20px); + 1.5% {{ + transform: translate(-50%, -20px); animation-timing-function: ease-in; }} - 50% {{ - transform: translateY(-8px); + 5.0% {{ + transform: translate(-50%, -8px); animation-timing-function: ease-in; }} - 75% {{ - transform: translateY(-4px); + 7.5% {{ + transform: translate(-50%, -4px); animation-timing-function: ease-in; }} - 92% {{ - transform: translateY(-2px); + 9.2% {{ + transform: translate(-50%, -2px); animation-timing-function: ease-in; }} - 35%, - 65%, - 85% {{ - transform: translateY(0px); + 3.5%, + 6.5%, + 8.5% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 97% {{ - transform: translateY(0px); + 9.7% {{ + transform: translate(-50%, 0px); animation-timing-function: ease-out; }} - 100% {{ - transform: translateY(0px); + 10.0% {{ + transform: translate(-50%, 0px); + }} + + + 60% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 61.5% {{ + transform: translate(-50%, -20px); + animation-timing-function: ease-in; + }} + 65.0% {{ + transform: translate(-50%, -8px); + animation-timing-function: ease-in; + }} + 67.5% {{ + transform: translate(-50%, -4px); + animation-timing-function: ease-in; + }} + 69.2% {{ + transform: translate(-50%, -2px); + animation-timing-function: ease-in; + }} + 63.5%, + 66.5%, + 68.5% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 69.7% {{ + transform: translate(-50%, 0px); + animation-timing-function: ease-out; + }} + 70.0% {{ + transform: translate(-50%, 0px); + }} + 100.0% {{ + transform: translate(-50%, 0px); }} }} .umbraco-preview-badge__header {{