style: tweak toolbar scroll overlay

Kong · Jan 2, 2024 · c486f91 · c486f91
1 parent 788a609
commit c486f91
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/components/MarkdownUi.vue b/src/components/MarkdownUi.vue
@@ -7,15 +7,16 @@
   >
     <div
       v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay"
-      :class="{ 'left': !arrivedState.left }"
+      class="toolbar-overlay left"
+      :class="{ 'overlay-visible': !arrivedState.left }"
     />
     <div
       v-if="editable && currentMode !== 'read'"
-      class="toolbar-overlay"
-      :class="{ 'right': !arrivedState.right }"
+      class="toolbar-overlay right"
+      :class="{ 'overlay-visible': !arrivedState.right }"
     />
     <MarkdownToolbar
+      v-if="editable && currentMode !== 'read'"
       ref="toolbar"
       @change-mode="(mode: MarkdownMode) => currentMode = mode"
       @format-selection="formatSelection"
@@ -516,6 +517,16 @@ const markdownPanesMaxHeight = computed((): string => `${props.maxHeight}px`)
       display: block;
     }
 
+    &.left,
+    &.right {
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    &.overlay-visible {
+      opacity: 1;
+    }
+
     &.left {
       background: linear-gradient(to right, rgba(#000, 0.1), rgba(#000, 0));
       border-top-left-radius: var(--kui-border-radius-40, $kui-border-radius-40);