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 e6b3fdbfa907..8a8032ee163b 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 @@ -2,12 +2,16 @@ position: relative; display: block; } + +.umb-sub-views-nav-item__action, .umb-sub-views-nav-item > a { + background: transparent; text-align: center; cursor: pointer; display: block; padding: 4px 10px 0 10px; min-width: 70px; + border: 0 none; border-right: 1px solid @gray-9; box-sizing: border-box; display: flex; @@ -19,6 +23,7 @@ color: @ui-active-type; + &:focus, &:hover { color: @ui-active-type-hover !important; } @@ -37,18 +42,23 @@ } } +.umb-sub-views-nav-item__action:focus, +.umb-sub-views-nav-item__action:active, .umb-sub-views-nav-item > a:active { .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } +.umb-sub-views-nav-item__action:focus, .umb-sub-views-nav-item > a:focus { outline: none; } +.umb-sub-views-nav-item__action:hover, +.umb-sub-views-nav-item__action:focus, .umb-sub-views-nav-item > a:hover, .umb-sub-views-nav-item > a:focus { text-decoration: none; } - +.umb-sub-views-nav-item__action.is-active, .umb-sub-views-nav-item > a.is-active { color: @ui-light-active-type; @@ -59,6 +69,7 @@ } } +.umb-sub-views-nav-item__action.-has-error, .show-validation .umb-sub-views-nav-item > a.-has-error { color: @red; &::after { @@ -114,11 +125,19 @@ // center align horizontal left: 50%; transform: translateX(-50%); - - visibility:hidden; opacity: 0; - transition: visibility 0s 500ms, opacity 250ms 250ms; + transition: opacity 250ms 250ms; } + +// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76 +// See https://caniuse.com/#search=focus-within +@supports (-ms-ime-align:auto) { + .umb-sub-views-nav-item__anchor_dropdown { + visibility: hidden; + transition: visibility 0 500ms, opacity 250ms 250ms; + } +} + .umb-sub-views-nav-item__anchor_dropdown li a { border-left: 4px solid transparent; } @@ -126,12 +145,20 @@ border-left-color: @ui-selected-border; } +.umb-sub-views-nav-item:focus-within .umb-sub-views-nav-item__anchor_dropdown, .umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown { visibility:visible; opacity: 1; - transition: visibility 0s 0s, opacity 20ms 0s; + transition: opacity 20ms 0; } +// Currently Edge 18 does unfortunately not support :focus-within so for now we will use the "old" behavior - Support is coming with the upcoming release of Edge 76 +// See https://caniuse.com/#search=focus-within +@supports (-ms-ime-align:auto) { + .umb-sub-views-nav-item:hover .umb-sub-views-nav-item__anchor_dropdown { + transition: visibility 0 0, opacity 20ms 0; + } +} // -------------------------------- diff --git a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html index b76c74149d1e..9cdafd82b1a7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/content/umb-tabbed-content.html @@ -3,7 +3,7 @@
-
{{ group.label }}
+
{{ group.label }}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html index 68a3da435ba2..dda8fa70f47a 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-navigation-item.html @@ -1,19 +1,19 @@ - - + ng-class="{'is-active': vm.item.active, '-has-error': vm.item.hasError}" + class="umb-sub-views-nav-item__action"> + {{ vm.item.name }}
{{vm.item.badge.count}}
-
+ diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml index 0e43d4217e66..1d2c94067d8d 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml @@ -1614,6 +1614,8 @@ Mange hilsner fra Umbraco robotten Gå tilbage - Aktivt layout: + Aktivt layout: + Gå til + gruppe diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml index 41c77d0c3997..2b7b2f57e957 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml @@ -2132,6 +2132,8 @@ To manage your website, simply open the Umbraco back office and start adding con Go back - Active layout: + Active layout: + Jump to + group diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml index d9cea4f14c1e..365374f6eaee 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -2146,6 +2146,8 @@ To manage your website, simply open the Umbraco back office and start adding con Go back - Active layout: + Active layout: + Jump to + group