yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated badge animation and position to be center aligned.

Browse Source
This commit is contained in:
Niels Lyngsø
2019-12-17 15:42:20 +01:00
parent 9640f05582
commit 746bcb3571
2 changed files with 119 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/Umbraco.Web.UI/config/umbracoSettings.Release.config
View File

@@ -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 {{

79
src/Umbraco.Web.UI/config/umbracoSettings.config
View File

@@ -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 {{