forked from vikunja/frontend
fix: stop revealing elements on hover if hover is not supported (#3191)
Resolves #3162 Co-authored-by: Dan Stewart <git@mail.danstewart.dev> Reviewed-on: vikunja/frontend#3191 Reviewed-by: konrad <k@knt.li> Co-authored-by: danstewart <danstewart@noreply.kolaente.de> Co-committed-by: danstewart <danstewart@noreply.kolaente.de>
This commit is contained in:
parent
ad0029789d
commit
7b6f76d1b4
|
@ -342,13 +342,20 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-list-dropdown {
|
.menu-list-dropdown {
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .menu-list-dropdown {
|
@media(hover: hover) and (pointer: fine) {
|
||||||
opacity: 1;
|
.menu-list-dropdown {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .menu-list-dropdown {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item-icon {
|
.menu-item-icon {
|
||||||
|
@ -418,7 +425,6 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.dragging-disabled) .handle {
|
&:not(.dragging-disabled) .handle {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
@ -482,17 +488,24 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
.favorite {
|
.favorite {
|
||||||
margin-left: .25rem;
|
margin-left: .25rem;
|
||||||
transition: opacity $transition, color $transition;
|
transition: opacity $transition, color $transition;
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.is-favorite {
|
&.is-favorite {
|
||||||
color: var(--warning);
|
color: var(--warning);
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.favorite.is-favorite,
|
|
||||||
.list-menu:hover .favorite {
|
@media(hover: hover) and (pointer: fine) {
|
||||||
opacity: 1;
|
.list-menu .favorite {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-menu:hover .favorite,
|
||||||
|
.favorite.is-favorite {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-menu-title {
|
.list-menu-title {
|
||||||
|
|
|
@ -147,7 +147,7 @@ const listStore = useListStore()
|
||||||
top: var(--list-card-padding);
|
top: var(--list-card-padding);
|
||||||
right: var(--list-card-padding);
|
right: var(--list-card-padding);
|
||||||
transition: opacity $transition, color $transition;
|
transition: opacity $transition, color $transition;
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--warning);
|
color: var(--warning);
|
||||||
|
@ -160,8 +160,14 @@ const listStore = useListStore()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-card:hover .favorite {
|
@media(hover: hover) and (pointer: fine) {
|
||||||
opacity: 1;
|
.list-card .favorite {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-card:hover .favorite {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-fade-in {
|
.background-fade-in {
|
||||||
|
|
|
@ -339,7 +339,7 @@ function hideDeferDueDatePopup(e) {
|
||||||
}
|
}
|
||||||
|
|
||||||
.favorite {
|
.favorite {
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 27px;
|
width: 27px;
|
||||||
transition: opacity $transition, color $transition;
|
transition: opacity $transition, color $transition;
|
||||||
|
@ -354,21 +354,26 @@ function hideDeferDueDatePopup(e) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .favorite {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle {
|
.handle {
|
||||||
opacity: 0;
|
opacity: 1;
|
||||||
transition: opacity $transition;
|
transition: opacity $transition;
|
||||||
margin-right: .25rem;
|
margin-right: .25rem;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .handle {
|
@media(hover: hover) and (pointer: fine) {
|
||||||
opacity: 1;
|
& .favorite,
|
||||||
|
& .handle {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .favorite,
|
||||||
|
&:hover .handle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:deep(.fancycheckbox) {
|
:deep(.fancycheckbox) {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user