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

1 files changed, 44 insertions, 12 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ba9f32d7d..0b7411fca 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,6 +1,7 @@
 @import "globalCssVariables";
 
 $linkGap : 3px;
+
 .documentDecorations {
     position: absolute;
 }
@@ -26,6 +27,14 @@ $linkGap : 3px;
         opacity: 0.8;
     }
 
+    .documentDecorations-radius {
+        pointer-events: auto;
+        background: black;
+        opacity: 0.8;
+        transform: translate(10px, 10px);
+        grid-row: 4;
+    }
+
     #documentDecorations-topLeftResizer,
     #documentDecorations-leftResizer,
     #documentDecorations-bottomLeftResizer {
@@ -45,11 +54,27 @@ $linkGap : 3px;
         grid-column-end: 7;
     }
 
+    #documentDecorations-borderRadius {
+        grid-column-start: 5;
+        grid-column-end: 7;
+        border-radius: 100%;
+
+        .borderRadiusTooltip {
+            width: 10px;
+            height: 10px;
+            position: absolute;
+        }
+    }
+
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
     }
 
+    #documentDecorations-bottomRightResizer {
+        grid-row: 4;
+    }
+
     #documentDecorations-topRightResizer,
     #documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
@@ -64,7 +89,8 @@ $linkGap : 3px;
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
-    .title{
+
+    .title {
         background: $alt-accent;
         grid-column-start: 3;
         grid-column-end: 4;
@@ -107,7 +133,6 @@ $linkGap : 3px;
 
 .linkFlyout {
     grid-column: 2/4;
-    margin-top: $linkGap;
 }
 
 .linkButton-empty:hover {
@@ -123,6 +148,7 @@ $linkGap : 3px;
 }
 
 .link-button-container {
+    margin-top: $linkGap;
     grid-column: 1/4;
     width: auto;
     height: auto;
@@ -130,9 +156,13 @@ $linkGap : 3px;
     flex-direction: row;
 }
 
+.linkButtonWrapper {
+    pointer-events: auto;
+    padding-right: 5px;
+    width: 25px;
+}
+
 .linkButton-linker {
-    margin-left: 5px;
-    margin-top: $linkGap;
     height: 20px;
     width: 20px;
     text-align: center;
@@ -147,7 +177,8 @@ $linkGap : 3px;
     transform: scale(1.05);
 }
 
-.linkButton-empty, .linkButton-nonempty {
+.linkButton-empty,
+.linkButton-nonempty {
     height: 20px;
     width: 20px;
     border-radius: 50%;
@@ -173,8 +204,6 @@ $linkGap : 3px;
 
 .templating-menu {
     position: absolute;
-    bottom: 0;
-    left: 50px;
     pointer-events: auto;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -186,15 +215,17 @@ $linkGap : 3px;
     align-items: center;
 }
 
-.fa-icon-link {
+.documentdecorations-icon {
     margin-top: 3px;
 }
-.templating-button {
+
+.templating-button,
+.docDecs-tagButton {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     opacity: 0.9;
-    font-size:14;
+    font-size: 14;
     background-color: $dark-color;
     color: $light-color;
     text-align: center;
@@ -208,14 +239,15 @@ $linkGap : 3px;
 
 #template-list {
     position: absolute;
-    top: 0;
-    left: 30px;
+    top: 25px;
+    left: 0px;
     width: max-content;
     font-family: $sans-serif;
     font-size: 12px;
     background-color: $light-color-secondary;
     padding: 2px 12px;
     list-style: none;
+
     .templateToggle {
         text-align: left;
     }