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

make badge bounce

Browse Source
This commit is contained in:
Niels Lyngsø
2020-08-03 14:12:06 +02:00
parent 8d6cafa456
commit b0ff73fd75
2 changed files with 45 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less
View File

@@ -50,6 +50,19 @@ button.umb-variant-switcher__toggle {
font-weight: bold;
background-color: @errorBackground;
color: @errorText;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: umb-variant-switcher__toggle--badge-bounce;
animation-timing-function: ease;
@keyframes umb-variant-switcher__toggle--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-6px); }
40% { transform: translateY(0); }
55% { transform: translateY(-3px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}
@@ -226,6 +239,19 @@ button.umb-variant-switcher__toggle {
font-weight: bold;
background-color: @errorBackground;
color: @errorText;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: umb-variant-switcher__name--badge-bounce;
animation-timing-function: ease;
@keyframes umb-variant-switcher__name--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-6px); }
40% { transform: translateY(0); }
55% { transform: translateY(-3px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
}
}

21
src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less
View File

@@ -65,8 +65,25 @@
&::before {
background-color: @red;
}
.badge.--error-badge {
display: block;
&:not(.is-active) {
.badge {
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-name: umb-sub-views-nav-item--badge-bounce;
animation-timing-function: ease;
@keyframes umb-sub-views-nav-item--badge-bounce {
0% { transform: translateY(0); }
20% { transform: translateY(-6px); }
40% { transform: translateY(0); }
55% { transform: translateY(-3px); }
70% { transform: translateY(0); }
100% { transform: translateY(0); }
}
}
.badge.--error-badge {
display: block;
}
}
}
}