From b0ff73fd7573fdb76e22790a5ac4589ed192ed9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 3 Aug 2020 14:12:06 +0200 Subject: [PATCH] make badge bounce --- .../editor/umb-variant-switcher.less | 26 +++++++++++++++++++ .../umb-editor-navigation-item.less | 21 +++++++++++++-- 2 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less index 8dbc070856..eae25b273c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-variant-switcher.less @@ -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); } + } } } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less index b3720feb3d..2fc705b11b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation-item.less @@ -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; + } } } }