Adjust hover feedback, use chevron right for crumb

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

src/components/Breadcrumb/Breadcrumb.vue

@@ -30,8 +30,8 @@ This component is meant to be used inside a Breadcrumbs component.
 
 <template>
  <div ref="crumb"
- class="crumb"
- :class="{'crumb--with-action': $slots.default, 'crumb--hovered': hovering}"
+ class="vue-crumb"
+ :class="{'vue-crumb--with-action': $slots.default, 'vue-crumb--hovered': hovering}"
  draggable="false"
  @dragstart.prevent="() => {/** Prevent the breadcrumb from being draggable. */}"
  @drop.prevent="dropped"
@@ -56,16 +56,20 @@ This component is meant to be used inside a Breadcrumbs component.
  <!-- @slot All action elements passed into the default slot will be used -->
  <slot />
  </Actions>
+ <ChevronRight class="vue-crumb__separator" :size="20" />
  </div>
 </template>
 
 <script>
 import Actions from '../Actions'
 
+import ChevronRight from 'vue-material-design-icons/ChevronRight'
+
 export default {
  name: 'Breadcrumb',
  components: {
  Actions,
+ ChevronRight,
  },
  props: {
  /**
@@ -215,7 +219,7 @@ export default {
 
 <style lang="scss" scoped>
 
-.crumb {
+.vue-crumb {
  background-image: none;
  display: inline-flex;
  height: $clickable-area;
@@ -227,23 +231,9 @@ export default {
  a {
  flex-shrink: 1;
  }
- }
-
- &::after {
- content: '';
- display: flex;
- align-items: center;
- color: var(--color-border-dark);
- font-size: 26px;
- width: 8px;
- min-width: 8px;
- background-image: url('./breadcrumb.svg');
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- opacity: .3;
- body.theme--dark & {
- background-image: url('./breadcrumb-light.svg');
+ // Don't show breadcrumb separator for last crumb
+ .vue-crumb__separator {
+ display: none;
  }
  }
 
@@ -255,8 +245,31 @@ export default {
  padding-right: 2px;
  }
 
- > a, > span {
+ &__separator {
+ padding: 0;
+ opacity: .7;
+ }
+
+ &--hovered > a {
+ background-color: var(--color-background-dark);
+ opacity: .7;
+ }
+
+ > a {
+ &:hover,
+ &:focus {
+ background-color: var(--color-background-dark);
+ }
+ &:focus{
+ opacity: 1;
+ }
+ &:hover {
+ opacity: .7;
+ }
+ opacity: .5;
+ padding: 12px;
  max-width: 100%;
+ border-radius: var(--border-radius-pill);
  }
 
  a {

src/components/Breadcrumbs/Breadcrumbs.vue

@@ -286,12 +286,12 @@ export default {
  */
  getWidth(el) {
  if (!el.classList) return 0
- const hide = el.classList.contains('crumb--hidden')
+ const hide = el.classList.contains('vue-crumb--hidden')
  el.style.minWidth = 'auto'
- el.classList.remove('crumb--hidden')
+ el.classList.remove('vue-crumb--hidden')
  const w = el.offsetWidth
  if (hide) {
- el.classList.add('crumb--hidden')
+ el.classList.add('vue-crumb--hidden')
  }
  el.style.minWidth = ''
  return w
@@ -341,8 +341,8 @@ export default {
  this.menuBreadcrumbProps.open = false
 
  // Remove all hovering classes
- const crumbs = document.querySelectorAll('.crumb')
- crumbs.forEach((f) => { f.classList.remove('crumb--hovered') })
+ const crumbs = document.querySelectorAll('.vue-crumb')
+ crumbs.forEach((f) => { f.classList.remove('vue-crumb--hovered') })
  return this.preventDefault(e)
  },
  /**
@@ -369,11 +369,11 @@ export default {
  }
  // Get the correct element, in case we hover a child.
  if (e.target.closest) {
- const target = e.target.closest('.crumb')
- if (target.classList && target.classList.contains('crumb')) {
- const crumbs = document.querySelectorAll('.crumb')
- crumbs.forEach((f) => { f.classList.remove('crumb--hovered') })
- target.classList.add('crumb--hovered')
+ const target = e.target.closest('.-vue-crumb')
+ if (target.classList && target.classList.contains('vue-crumb')) {
+ const crumbs = document.querySelectorAll('.vue-crumb')
+ crumbs.forEach((f) => { f.classList.remove('vue-crumb--hovered') })
+ target.classList.add('vue-crumb--hovered')
  }
  }
  },
@@ -396,12 +396,12 @@ export default {
  }
  // Get the correct element, in case we leave directly from a child.
  if (e.target.closest) {
- const target = e.target.closest('.crumb')
+ const target = e.target.closest('.vue-crumb')
  if (target.contains(e.relatedTarget)) {
  return
  }
- if (target.classList && target.classList.contains('crumb')) {
- target.classList.remove('crumb--hovered')
+ if (target.classList && target.classList.contains('vue-crumb')) {
+ target.classList.remove('vue-crumb--hovered')
  }
  }
  },
@@ -416,9 +416,9 @@ export default {
  crumbs.forEach((crumb, i) => {
  if (crumb?.elm?.classList) {
  if (this.hiddenIndices.includes(i + offset)) {
- crumb.elm.classList.add('crumb--hidden')
+ crumb.elm.classList.add('vue-crumb--hidden')
  } else {
- crumb.elm.classList.remove('crumb--hidden')
+ crumb.elm.classList.remove('vue-crumb--hidden')
  }
  }
  })
@@ -493,7 +493,7 @@ export default {
  path = to
  }
  return createElement(element, {
- class: 'crumb',
+ class: 'vue-crumb',
  props: {
  to,
  href,
@@ -538,9 +538,5 @@ export default {
  min-width: 100px;
  flex-shrink: 1;
  }
-
- .crumb--hovered{
- background-color: var(--color-primary-light);
- }
 }
 </style>