Standardised dropdown list item styles, Extracted page editor toolbar

[bookstack] / resources / sass / _lists.scss

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 77727060e64e8bdf0d333f830deb805db148e117..26d12a25da42949cbced533fd25ac66caac1bf9c 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -185,6 +185,7 @@
     padding-bottom: $-xxs;
     background-clip: content-box;
     border-radius: 0 3px 3px 0;
+    padding-inline-end: 0;
     .content {
       padding-top: $-xs;
       padding-bottom: $-xs;
@@ -192,7 +193,7 @@
     }
   }
   .entity-list-item.selected {
-    background-color: rgba(0, 0, 0, 0.08);
+    @include lightDark(background-color, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
   }
   .entity-list-item.no-hover {
     margin-top: -$-xs;
@@ -201,6 +202,7 @@
   .entity-list-item-name {
     font-size: 1em;
     margin: 0;
+    margin-inline-end: $-m;
   }
   .chapter-child-menu {
     font-size: .8rem;
@@ -357,13 +359,15 @@ ul.pagination {
     border: 1px solid #CCC;
     margin-inline-start: -1px;
     user-select: none;
-    &.disabled {
-      cursor: not-allowed;
-    }
+    @include lightDark(color, #555, #eee);
+    @include lightDark(border-color, #ccc, #666);
+  }
+  li.disabled {
+    cursor: not-allowed;
   }
   li.active span {
-    @include lightDark(color, #444, #eee);
-    @include lightDark(background-color, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
+    @include lightDark(color, #111, #eee);
+    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
   }
 }
 
@@ -428,6 +432,9 @@ ul.pagination {
     flex: 1;
     text-align: start;
   }
+  > .content {
+    min-width: 0;
+  }
   &:not(.no-hover) {
     cursor: pointer;
   }
@@ -436,12 +443,8 @@ ul.pagination {
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 4px;
   }
-  &.outline-hover {
-    border: 1px solid transparent;
-  }
   &.outline-hover:hover {
     background-color: transparent;
-    border-color: rgba(0, 0, 0, 0.1);
   }
   &:focus {
     @include lightDark(background-color, #eee, #222);
@@ -545,6 +548,17 @@ ul.pagination {
   }
 }
 
+.entity-item-tags {
+  font-size: .75rem;
+  opacity: 1;
+  .primary-background-light {
+    background: transparent;
+  }
+  .tag-name {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+}
+
 .dropdown-container {
   display: inline-block;
   vertical-align: top;
@@ -560,15 +574,15 @@ ul.pagination {
   right: 0;
   margin: $-m 0;
   @include lightDark(background-color, #fff, #333);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
   border-radius: 1px;
-  border: 1px solid #EEE;
-  @include lightDark(border-color, #eee, #000);
   min-width: 180px;
   padding: $-xs 0;
   @include lightDark(color, #555, #eee);
   fill: currentColor;
   text-align: start !important;
+  max-height: 500px;
+  overflow-y: auto;
   &.wide {
     min-width: 220px;
   }
@@ -579,13 +593,22 @@ ul.pagination {
   li.active a {
     font-weight: 600;
   }
-  a, button {
-    display: block;
-    padding: $-xs $-m;
+  button {
+    width: 100%;
+    text-align: start;
+  }
+  li.border-bottom {
+    border-bottom: 1px solid #DDD;
+  }
+  li hr {
+    margin: $-xs 0;
+  }
+  .icon-item, .text-item, .label-item {
+    padding: 8px $-m;
     @include lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
-    line-height: 1.6;
+    line-height: 1.4;
     cursor: pointer;
     &:hover, &:focus {
       text-decoration: none;
@@ -602,15 +625,30 @@ ul.pagination {
       width: 16px;
     }
   }
-  button {
-    width: 100%;
-    text-align: start;
+  .text-item {
+    display: block;
   }
-  li.border-bottom {
-    border-bottom: 1px solid #DDD;
+  .label-item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto min-content;
+    gap: $-m;
   }
-  li hr {
-    margin: $-xs 0;
+  .label-item > *:nth-child(2) {
+    opacity: 0.7;
+    &:hover {
+      opacity: 1;
+    }
+  }
+  .icon-item {
+    display: grid;
+    align-items: start;
+    grid-template-columns: 16px auto;
+    gap: $-m;
+    svg {
+      margin-inline-end: 0;
+      margin-block-start: 1px;
+    }
   }
 }
 
@@ -663,11 +701,21 @@ ul.pagination {
     padding: $-s;
   }
   a:not(.active) {
-    @include lightDark(color, #444, #666);
+    @include lightDark(color, #444, #888);
   }
   a:hover {
     @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
-    border-radius: 3px;
+    border-radius: 4px;
     text-decoration: none;
   }
-}
\ No newline at end of file
+  &.in-sidebar {
+    a {
+      display: block;
+      margin-bottom: $-xs;
+    }
+    a.active {
+      border-radius: 4px;
+      @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+  }
+}