Delete button style tweaks

recogito · Mar 21, 2021 · b44df91 · b44df91
1 parent f8d8575
commit b44df91
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
@@ -194,7 +194,7 @@ const Editor = props => {
                 className="r6o-btn left delete-annotation" 
                 title={i18n.t('Delete')}
                 onClick={onDelete}>
-                <TrashIcon width={15} />
+                <TrashIcon width={12} />
               </button>
             )}
 

diff --git a/themes/default/editor/_editor.scss b/themes/default/editor/_editor.scss
@@ -64,24 +64,28 @@
 
     .r6o-btn.delete-annotation {
       position:absolute;
-      top:5px;
-      left:5px;
+      top:7px;
+      left:7px;
       background-color:transparent;
       border:none;
-      color:rgba($ocean, .8);
-      width:36px;
-      height:36px;
+      color:$ocean;
+      width:32px;
+      height:32px;
       min-width:0;
       border-radius: 100%;
       padding:0;
       display: flex;
       justify-content:center;
       align-items:center;
+      -webkit-transition:all .1s ease-in;
+         -moz-transition:all .1s ease-in;
+           -o-transition:all .1s ease-in;
+              transition:all .1s ease-in;
     }
 
     .r6o-btn.delete-annotation:hover {
-      color:$ocean;
-      background-color:$blueish-white-hi;
+      color:#fff;
+      background-color:#ef352c;
     }
   }