adding visibility:hidden to the un-hovered list fixes the problem. have also tidied up the css a bit to remove duplicate class references
This commit is contained in:
Nathan Woulfe
committed by
Bjarke Berg
Bjarke Berg
parent
e2d63f553f
commit
e0a34d3873
@@ -1,199 +1,195 @@
|
||||
.umb-sub-views-nav-item {
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(~'@{editorHeaderHeight}' - ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
|
||||
position: relative;
|
||||
|
||||
color: @ui-active-type;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: @ui-active-type-hover !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
background-color: @ui-light-active-border;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
opacity: 0;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
}
|
||||
&__action,
|
||||
> 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;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(~'@{editorHeaderHeight}'- ~'1px'); // need to offset the 1px border-bottom on .umb-editor-header - avoids overflowing top of the container
|
||||
position: relative;
|
||||
color: @ui-active-type;
|
||||
|
||||
.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;
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: @ui-active-type-hover !important;
|
||||
text-decoration: 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;
|
||||
|
||||
&::after {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 0px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
background-color: @ui-light-active-border;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
opacity: 0;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: @ui-light-active-type;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__action:focus,
|
||||
&__action:active,
|
||||
& > a:active {
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
&:focus-within &__anchor_dropdown,
|
||||
&:hover &__anchor_dropdown {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
height: 4px;
|
||||
transition: opacity 20ms 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
min-width: 16px;
|
||||
color: @white;
|
||||
background-color: @ui-active-type;
|
||||
border: 2px solid @white;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 2px;
|
||||
line-height: 16px;
|
||||
display: block;
|
||||
|
||||
&.-type-alert {
|
||||
background-color: @red;
|
||||
}
|
||||
|
||||
&.-type-warning {
|
||||
background-color: @yellow-d2;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
height: 12px;
|
||||
min-width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
&__anchor_dropdown {
|
||||
// inherits from .dropdown-menu
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// center align horizontal
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 250ms 250ms;
|
||||
visibility: hidden;
|
||||
|
||||
li {
|
||||
&.is-active a {
|
||||
border-left-color: @ui-selected-border;
|
||||
}
|
||||
|
||||
a {
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
&:hover &__anchor_dropdown {
|
||||
transition: visibility 0 0, opacity 20ms 0;
|
||||
}
|
||||
|
||||
&__anchor_dropdown {
|
||||
visibility: hidden;
|
||||
transition: visibility 0 500ms, opacity 250ms 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------
|
||||
// item__more, appears when there is not enough room for the visible items.
|
||||
// --------------------------------
|
||||
|
||||
&-more__icon {
|
||||
margin-bottom: 10px;
|
||||
|
||||
i {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
background: @ui-active-type; // fallback if browser doesnt support currentColor
|
||||
background: currentColor;
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
i:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-more__dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
min-width: auto;
|
||||
margin-top: 10px;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item:first {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validation
|
||||
.umb-sub-views-nav-item__action.-has-error,
|
||||
.show-validation .umb-sub-views-nav-item > a.-has-error {
|
||||
color: @red;
|
||||
&::after {
|
||||
background-color: @red;
|
||||
}
|
||||
}
|
||||
color: @red;
|
||||
|
||||
.umb-sub-views-nav-item .icon {
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item .badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
min-width: 16px;
|
||||
color: @white;
|
||||
background-color: @ui-active-type;
|
||||
border: 2px solid @white;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
padding: 2px;
|
||||
line-height: 16px;
|
||||
display: block;
|
||||
|
||||
&.-type-alert {
|
||||
background-color: @red;
|
||||
}
|
||||
&.-type-warning {
|
||||
background-color: @yellow-d2;
|
||||
}
|
||||
&:empty {
|
||||
height: 12px;
|
||||
min-width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-text {
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
||||
.umb-sub-views-nav-item__anchor_dropdown {// inherits from .dropdown-menu
|
||||
display: block;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// center align horizontal
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
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;
|
||||
&::after {
|
||||
background-color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item__anchor_dropdown li a {
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
.umb-sub-views-nav-item__anchor_dropdown li.is-active a {
|
||||
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: 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------
|
||||
// item__more, appears when there is not enough room for the visible items.
|
||||
// --------------------------------
|
||||
|
||||
.umb-sub-views-nav-item-more__icon {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-more__icon i {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border-radius: 50%;
|
||||
background: @ui-active-type;// fallback if browser doesnt support currentColor
|
||||
background: currentColor;
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-more__icon i:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item-more__dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
min-width: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.umb-sub-views-nav-item-more__dropdown > li {
|
||||
display: flex;
|
||||
}
|
||||
.umb-sub-views-nav-item-more__dropdown .umb-sub-views-nav-item:first {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user