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

1 files changed, 95 insertions, 16 deletions

diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index e3ce69cd7..4e13ef8c8 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -4,19 +4,95 @@
     // border-top: 0.5px solid $main-accent; 
     position: relative;
     display: flex;
-    font-size: 12px;
+    border-bottom: 0.5px solid black;
+
+    padding-left: 6.5px;
+    padding-right: 2px;
+
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
+
+    background-color: white;
 
 
     .linkMenu-name {
         position: relative;
+        width: auto;
+
+        .linkMenu-text {
+
+            padding: 4px 2px;
+            //display: inline;
+
+            .linkMenu-source-title {
+                text-decoration: none;
+                color: rgb(43, 43, 43);
+                font-size: 7px;
+                padding-bottom: 0.75px;
+
+                margin-left: 20px;
+            }
+
+
+            .linkMenu-title-wrapper {
+
+                display: flex;
+
+                .destination-icon-wrapper {
+                    //border: 0.5px solid rgb(161, 161, 161);
+                    margin-right: 2px;
+                    padding-right: 2px;
+
+                    .destination-icon {
+                        float: left;
+                        width: 12px;
+                        height: 12px;
+                        padding: 1px;
+                        margin-right: 3px;
+                        color: rgb(161, 161, 161);
+                    }
+                }
+
+                .linkMenu-destination-title {
+                    text-decoration: none;
+                    color: rgb(85, 120, 196);
+                    font-size: 14px;
+                    padding-bottom: 2px;
+                    padding-right: 4px;
+                    margin-right: 4px;
+                    float: right;
+
+                    &:hover {
+                        text-decoration: underline;
+                        color: rgb(60, 90, 156);
+                        //display: inline;
+                        text-overflow: break;
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .linkMenu-description {
+                text-decoration: none;
+                font-style: italic;
+                color: rgb(95, 97, 102);
+                font-size: 10px;
+                margin-left: 20px;
+                max-width: 125px;
+                height: auto;
+                white-space: break-spaces;
+            }
+
+            p {
+                padding-right: 4px;
+                line-height: 12px;
+                border-radius: 5px;
+                //overflow-wrap: break-word;
+                user-select: none;
+            }
 
-        p {
-            padding: 4px 6px;
-            line-height: 12px;
-            border-radius: 5px;
-            overflow-wrap: break-word;
-            user-select: none;
         }
+
     }
 
     .linkMenu-item-content {
@@ -32,25 +108,27 @@
     }
 
     &:hover {
+
+        background-color: rgb(201, 239, 252);
+
         .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-destination-title {
+                text-decoration: underline;
+                color: rgb(60, 90, 156);
+                //display: inline;
+                text-overflow: break;
             }
         }
     }
 }
 
 .linkMenu-item-buttons {
+    //@extend: right;
     position: absolute;
     top: 50%;
     right: 0;
@@ -61,7 +139,8 @@
         width: 20px;
         height: 20px;
         margin: 0;
-        margin-right: 6px;
+        margin-right: 4px;
+        padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
         background-color: $dark-color;
@@ -84,7 +163,7 @@
 
         &:hover {
             background: $main-accent;
-            cursor: grab;
+            cursor: pointer;
         }
     }
 }
\ No newline at end of file