Improved content menu

assets/styles/imports/_tooltip.scss

@@ -91,24 +91,34 @@
       border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
       box-shadow: $box-shadow-large;
+
+      nav {
+        margin-left: -$space-small;
+        margin-right: -$space-small;
+
+        a {
+          padding-left: 12px;
+        }
+      }
     }
 
     .popover-arrow {
       border-color: $background-color-soft;
     }
 
-    @include arrow(8px, "popover", $background-color-soft);
+    @include arrow(7px, "popover", $background-color-soft);
   }
 
+
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity .1s, visibility .1s;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity .1s;
   }
 }

components/ContentMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <dropdown
-    class="post-menu"
+    class="content-menu"
     :placement="placement"
     offset="5"
   >
@@ -9,38 +9,30 @@
       slot-scope="{toggleMenu}"
     >
       <a
-        class="post-menu-trigger"
+        class="content-menu-trigger"
         href="#"
         @click.prevent="toggleMenu()"
       >
-        <ds-icon
-          v-if="placement.indexOf('top') === 0"
-          name="angle-up"
-        />
-        <ds-icon
-          v-else
-          name="angle-down"
-        />
+        <ds-icon name="ellipsis-v" />
       </a>
     </template>
-    <template
+    <div
       slot="popover"
       slot-scope="{toggleMenu}"
+      class="content-menu-popover"
     >
-      <div class="post-menu-popover">
-        <ds-menu :routes="routes">
-          <ds-menu-item
-            slot="Navigation"
-            slot-scope="item"
-            :route="item.route"
-            :parents="item.parents"
-            @click.stop.prevent="openItem(item.route, toggleMenu)"
-          >
-            <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-          </ds-menu-item>
-        </ds-menu>
-      </div>
-    </template>
+      <ds-menu :routes="routes">
+        <ds-menu-item
+          slot="Navigation"
+          slot-scope="item"
+          :route="item.route"
+          :parents="item.parents"
+          @click.stop.prevent="openItem(item.route, toggleMenu)"
+        >
+          <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+        </ds-menu-item>
+      </ds-menu>
+    </div>
   </dropdown>
 </template>
 
@@ -104,3 +96,14 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.content-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>

components/PostCard.vue

@@ -115,7 +115,7 @@ export default {
     z-index: 1;
   }
 }
-.post-menu {
+.content-menu {
   // position: absolute;
   // bottom: $space-small;
   // right: $space-small;

layouts/default.vue

@@ -165,14 +165,9 @@ export default {
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -16px;
     margin-right: -10px;
     padding-top: 1rem;
     padding-bottom: 1rem;
-
-    a {
-      padding-left: 12px;
-    }
   }
 }
 </style>

styleguide/src/system/tokens/border-radius.yml

@@ -9,7 +9,7 @@ props:
   - name: border-radius-large
     value: "4px"
   - name: border-radius-base
-    value: "3px"
+    value: "4px"
   - name: border-radius-rounded
     value: "2em"
   - name: border-radius-circle