diff --git a/changelog/unreleased/enhancement-hover-in-oc-drop-menues b/changelog/unreleased/enhancement-hover-in-oc-drop-menues new file mode 100644 index 000000000..4e8d79def --- /dev/null +++ b/changelog/unreleased/enhancement-hover-in-oc-drop-menues @@ -0,0 +1,5 @@ +Enhancement: Hover in ocDrop menues + +We've added the "oc-menu-item-hover" class for
  • elements inside ocDrop, to add the hover effect on buttons and links. + +https://github.com/owncloud/owncloud-design-system/pull/2069 diff --git a/src/components/atoms/OcDrop/OcDrop.vue b/src/components/atoms/OcDrop/OcDrop.vue index 7b1b6403f..6d75457cd 100644 --- a/src/components/atoms/OcDrop/OcDrop.vue +++ b/src/components/atoms/OcDrop/OcDrop.vue @@ -208,6 +208,27 @@ export default { // note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed padding: 8px; } + li.oc-menu-item-hover { + a, + button:not([role="switch"]) { + box-sizing: border-box; + padding: var(--oc-space-small); + color: var(--oc-color-swatch-passive-default); + &:focus, + &:hover { + background-color: var(--oc-color-background-hover); + + text-decoration: none !important; + border-radius: 5px; + } + &:hover span { + color: var(--oc-color-swatch-brand-hover) !important; + } + span { + text-decoration: none !important; + } + } + } } .oc-drop { diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue index bfaf840ee..1165d1f4f 100644 --- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue +++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue @@ -183,10 +183,6 @@ export default { #oc-breadcrumb-contextmenu-trigger > span { vertical-align: middle; border: 3px solid transparent; - &:hover { - background-color: var(--oc-color-background-hover); - border-radius: 5px; - } } #oc-breadcrumb-contextmenu li button { diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue index aec1b35aa..d28690031 100644 --- a/src/components/molecules/OcTable/OcTable.vue +++ b/src/components/molecules/OcTable/OcTable.vue @@ -472,7 +472,7 @@ export default { transition: background-color $transition-duration-short ease-in-out; } - &-hover tr:hover span:not(.avatarInitials):not(button span) { + &-hover tr:hover td:not(:last-child) span:not(.avatarInitials):not(button span) { color: var(--oc-color-swatch-brand-hover) !important; }