SHS-5911: Add indicator of 3rd level shortcut menu (#1681)

* SHS-5911: Add indicator of 3rd level shortcut menu.
SU-HSDO · Nov 22, 2024 · 8d192e5 · 8d192e5
1 parent 04d46cf
commit 8d192e5
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/admin/_toolbar.scss b/docroot/themes/humsci/humsci_basic/src/scss/admin/_toolbar.scss
@@ -35,6 +35,34 @@
       right: unset;
       left: 100%;
     }
+
+    li:has(.menu) {
+      & > a {
+        position: relative;
+        padding-right: 15px;
+
+        &::after {
+          content: '';
+          width: 16px;
+          height: 16px;
+          display: block;
+          position: absolute;
+          background-color: var(--gin-color-disabled);
+          mask-image: url('../../../contrib/gin/dist/media/sprite.svg#handle-view');
+          mask-position: center center;
+          mask-repeat: no-repeat;
+          mask-size: 14px 14px;
+          top: var(--gin-spacing-m);
+          right: var(--gin-spacing-s);
+        }
+      }
+
+      &:hover {
+        & > a::after {
+          background-color: var(--gin-color-primary-hover)
+        }
+      }
+    }
   }
 
   .menu:not(.toolbar-menu) li {

diff --git a/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css b/docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css
@@ -43,6 +43,25 @@ html:not(.gin--dark-mode) .user-logged-in[data-gin-accent="custom"] {
   left: 100%;
 }
 
+#toolbar-item-shortcuts-tray li > ul li:has(.menu) > a::after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  display: block;
+  position: absolute;
+  background-color: var(--gin-color-disabled);
+  mask-image: url('../../../contrib/gin/dist/media/sprite.svg#handle-view');
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-size: 14px 14px;
+  top: 12px;
+  right: var(--gin-spacing-s);
+}
+
+#toolbar-item-shortcuts-tray li > ul li:has(.menu):hover > a::after {
+  background-color: var(--gin-color-primary-hover);
+}
+
 #toolbar-item-shortcuts-tray .menu:not(.toolbar-menu) li {
   border-bottom: 1px solid var(--gin-border-color);
   min-width: 18rem;