Card menu trigger styling

app/styles/addons/ghost-editor/cardmenu.css

@@ -18,20 +18,24 @@
     z-index: 9999999; /* have to compete with codemirror */
 }
 
-#gh-cardmenu-button {
-    position:absolute;
-    width: 40px;
-    height: 40px;
-    background-color:pink;
-    font-size:40px;
-    line-height: 40px;
-    color: powderblue;
-    font-family: "Comic Sans MS", cursive, sans-serif;
+.gh-cardmenu-button {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    padding: 6px;
+    border: var(--midgrey) 1px solid;
+    background: #fff;
+    border-radius: 100%;
+    font-size: 16px;
+    line-height: 16px;
+    text-align: center;
+    color: var(--midgrey);
+}
+
+.gh-cardmenu-button svg path {
+    stroke: var(--midgrey);
+    stroke-width: 2px;
 }
-#gh-cardmenu-button:hover {
-    background-color:red;
-    color: yellow;
-} 
 
 .gh-cardmenu-search {
     position: relative;

lib/gh-koenig/addon/components/koenig-plus-menu.js

@@ -130,19 +130,19 @@ export default Component.extend({
             this.set('isButton', true);
             run.schedule('afterRender', this,
                 () => {
-                    let button = this.$('#gh-cardmenu-button');
-                    button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 5);
+                    let button = this.$('.gh-cardmenu-button');
+                    button.css('top', offset.top + $editor.scrollTop() - editorOffset.top - 2);
                     if (currentNode.tagName.toLowerCase() === 'li') {
                         button.css('left', this.$(currentNode.parentNode).position().left + $editor.scrollLeft() - 90);
                     } else {
-                        button.css('left', offset.left + $editor.scrollLeft() - 90);
+                        button.css('left', offset.left + $editor.scrollLeft() - 50);
                     }
                 });
         });
     },
     actions: {
         openMenu: function () { // eslint-disable-line
-            let button = this.$('#gh-cardmenu-button');
+            let button = this.$('.gh-cardmenu-button');
             let editor = this.get('editor');
             this.set('isOpen', true);
 

lib/gh-koenig/addon/templates/components/koenig-plus-menu.hbs

@@ -1,5 +1,5 @@
 {{#if showButton}}
-<button id="gh-cardmenu-button" {{action "openMenu"}}>+</button>
+<button class="gh-cardmenu-button" {{action "openMenu"}}>{{inline-svg "plus"}}</button>
 {{/if}}
 {{#if isOpen}}
 <div class="gh-cardmenu">
@@ -14,4 +14,4 @@
         {{koenig-menu-item tool=tool editor=editor range=range selected=tool.selected clicked=(action "closeMenu")}}
     {{/each}}
 </div>
-{{/if}}
+{{/if}}

public/assets/icons/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M11.5.5v22M22.5 11.5h-22"/></g></svg>