1 files changed, 12 insertions, 10 deletions

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 618b15a..d518365 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -21,14 +21,15 @@
   <div
     ref="breadcrumb"
     v-dragscroll
-    class="ld-breadcrumb flex scrollbar"
+    class="flex scrollbar"
+    :class="$style.ldBreadcrumb"
     @click.capture="e => dragScrollClickFix.onClickCapture(e)"
     @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
     @dragscrollmove="checkForOverflowMask"
   >
-    <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
-    <ul class="ld-breadcrumb">
+    <div v-show="overflowMask" :class="$style.ldBreadcrumbOverflowMask"></div>
+    <ul>
       <li v-for="(item, idx) in currentItemPath" :key="item.path">
         <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
         <router-link :to="item.path" class="link">
@@ -47,13 +48,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Ref, Watch, Prop } from "vue-property-decorator";
+import { Item } from "@/@types/gallery";
 import DragScrollClickFix from "@/services/dragscrollclickfix";
 import Navigation from "@/services/navigation";
+import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
 
 @Component
 export default class LdBreadcrumb extends Vue {
-  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Item[];
   @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
@@ -82,16 +84,16 @@ export default class LdBreadcrumb extends Vue {
     });
   }
 
-  getIcon(item: Gallery.Item) {
+  getIcon(item: Item) {
     return Navigation.getIcon(item);
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
 @import "~@/assets/scss/theme.scss";
 
-.ld-breadcrumb-overflow-mask {
+.ldBreadcrumbOverflowMask {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -103,7 +105,7 @@ export default class LdBreadcrumb extends Vue {
   pointer-events: none;
 }
 
-.ld-breadcrumb {
+.ldBreadcrumb {
   ul {
     display: flex;
     white-space: nowrap;
@@ -116,7 +118,7 @@ export default class LdBreadcrumb extends Vue {
     align-self: center;
     margin-right: $breadcrumb-margins;
   }
-  &.scrollbar {
+  &:global(.scrollbar) {
     overflow-y: hidden;
     scrollbar-width: none;
     &::-webkit-scrollbar {