Merge branch 'templatesMac' of https://github.com/browngraphicslab/Dash-Web into templatesMac

1 files changed, 130 insertions, 14 deletions

diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index dedcce6ef..a4018bd2d 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -1,21 +1,137 @@
-#linkMenu-container {
+@import "../globalCssVariables";
+
+.linkMenu {
     width: 100%;
     height: auto;
-    display: flex;
-    flex-direction: column;
 }
 
-#linkMenu-searchBar {
-    width: 100%;
-    padding: 5px;
-    margin-bottom: 10px;
+.linkMenu-list {
+    max-height: 200px;
+    overflow-y: scroll;
+}
+
+.linkMenu-group {
+    border-bottom: 0.5px solid lightgray; 
+    padding: 5px 0;
+
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    .linkMenu-group-name {
+        display: flex;
+
+        &:hover {
+            p {
+                background-color: lightgray;
+            }
+            p.expand-one {
+                width: calc(100% - 26px);
+            }
+            .linkEditor-tableButton {
+                display: block;
+            }
+        }
+
+        p {
+            width: 100%;
+            padding: 4px 6px;
+            line-height: 12px;
+            border-radius: 5px;
+            font-weight: bold;
+        }
+
+        .linkEditor-tableButton {
+            display: none;
+        }
+    }
+}
+
+.linkMenu-item {
+    // border-top: 0.5px solid $main-accent; 
+    position: relative;
+    display: flex;
     font-size: 12px;
-    border: 1px solid #bababa;
+    
+
+    .link-name {
+        position: relative;
+
+        p {
+            padding: 4px 6px;
+            line-height: 12px;
+            border-radius: 5px;
+            overflow-wrap: break-word;
+        }
+    }
+
+    .linkMenu-item-content {
+        width: 100%;
+    }
+    
+    .link-metadata {
+        padding: 0 10px 0 16px;
+        margin-bottom: 4px;
+        color: $main-accent;
+        font-style: italic;
+        font-size: 10.5px;
+    }
+
+    &:hover {
+        .linkMenu-item-buttons {
+            display: flex;
+        }
+        .linkMenu-item-content {
+            &.expand-two p {
+                width: calc(100% - 52px);
+                background-color: lightgray;
+            }
+            &.expand-three p {
+                width: calc(100% - 84px);
+                background-color: lightgray;
+            }
+        }
+    }
 }
 
-#linkMenu-list {
-    margin-top: 5px;
-    width: 100%;
-    height: 100px;
-    overflow-y: scroll;
-}
\ No newline at end of file
+.linkMenu-item-buttons {
+    display: none;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+
+    .button {
+        width: 20px;
+        height: 20px;
+        margin: 0;
+        margin-right: 6px;
+        border-radius: 50%;
+        cursor: pointer;
+        pointer-events: auto;
+        background-color: $dark-color;
+        color: $light-color;
+        font-size: 65%;
+        transition: transform 0.2s;
+        text-align: center;
+        position: relative;
+
+        .fa-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+        &:hover {
+            background: $main-accent;
+        }
+    }
+}
+
+
+