refactor: repo (#1070)

packages/web/src/stylesheets/_navigation.scss

@@ -0,0 +1,198 @@
+@import './scrollbar';
+
+#navigation .scrollable {
+  @include minimal_scrollbar();
+  height: 100%;
+}
+
+$content-horizontal-padding: 16px;
+
+#navigation {
+  user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+
+  &,
+  #navigation-content {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--navigation-column-background-color);
+  }
+
+  .section-title-bar {
+    color: var(--navigation-section-title-color);
+    padding-top: 0.8125rem;
+    padding-bottom: 8px;
+    padding-left: $content-horizontal-padding;
+    padding-right: $content-horizontal-padding;
+    font-size: 12px;
+  }
+
+  .no-tags-placeholder {
+    padding: 0px $content-horizontal-padding;
+    font-size: 12px;
+    opacity: 0.4;
+    margin-top: -5px;
+  }
+
+  .root-drop {
+    width: '100%';
+    padding: 12px;
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    .sn-icon {
+      margin-right: 0.5rem;
+    }
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  .tag {
+    border: 0;
+    background-color: transparent;
+  }
+
+  .tag,
+  .root-drop {
+    font-size: 14px;
+    padding: 4px 14px;
+    cursor: pointer;
+    transition: height 0.1s ease-in-out;
+    position: relative;
+
+    > .tag-info {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+
+      .sn-icon {
+        display: block;
+        margin: 0 auto;
+      }
+
+      .tag-fold {
+        min-width: 22px;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        @extend .border-0;
+        @extend .bg-transparent;
+        @extend .p-0;
+      }
+
+      > .tag-icon {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        &.draggable {
+          cursor: move;
+        }
+
+        &.propose-folders {
+          cursor: help;
+        }
+      }
+
+      > .title {
+        @extend .focus\:outline-none;
+        @extend .focus\:shadow-none;
+        font-size: 14px;
+        line-height: 18px;
+
+        width: 80%;
+        background-color: transparent;
+        font-weight: 600;
+        color: var(--navigation-item-text-color);
+        -webkit-text-fill-color: var(--navigation-item-text-color);
+        border: none;
+        cursor: pointer;
+        text-overflow: ellipsis;
+        width: 75%;
+        flex-grow: 1;
+
+        // Required for Safari to avoid highlighting when dragging panel resizers
+        // Make sure to undo if it's selected (for editing)
+        user-select: none;
+        -moz-user-select: none;
+        -khtml-user-select: none;
+        -webkit-user-select: none;
+
+        pointer-events: none;
+
+        &.editing {
+          pointer-events: auto;
+          user-select: text;
+          -moz-user-select: text;
+          -khtml-user-select: text;
+          -webkit-user-select: text;
+        }
+
+        &:focus {
+          outline: 0;
+          box-shadow: 0;
+        }
+      }
+
+      .count {
+        padding-right: 4px;
+        padding-top: 1px;
+        font-weight: bold;
+        color: var(--navigation-item-count-color);
+        min-width: 15px;
+        text-align: right;
+      }
+    }
+
+    .meta {
+      padding-left: 3px;
+
+      &.with-folders {
+        padding-left: 25px;
+      }
+
+      > .menu {
+        font-size: 11px;
+
+        > .item {
+          margin-right: 4px;
+        }
+
+        opacity: 0.5;
+        font-weight: bold;
+        clear: both;
+        margin-top: 2px;
+        margin-bottom: 2px;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    &.selected {
+      > .tag-info {
+        .title {
+          cursor: text;
+        }
+      }
+    }
+
+    &:hover:not(.selected),
+    &.selected,
+    &.is-drag-over {
+      background-color: var(--navigation-item-selected-background-color);
+    }
+  }
+}