tweak comment collapse styling

src/components/Comment.vue

@@ -3,13 +3,15 @@
     <div class="by">
       <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
       {{ comment.time | timeAgo }} ago
-      <span v-if="comment.kids && comment.kids.length">
-        | <a class="expand" @click="open = !open">
-          {{ (open ? 'collapse ' : 'expand ') + pluralize(comment.kids.length) }}
-        </a>
-      </span>
     </div>
     <div class="text" v-html="comment.text"></div>
+    <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length">
+      <a @click="open = !open">{{
+        open
+            ? '[-]'
+            : '[+] ' + pluralize(comment.kids.length) + ' collapsed'
+      }}</a>
+    </div>
     <ul class="comment-children" v-show="open">
       <comment v-for="id in comment.kids" :id="id"></comment>
     </ul>
@@ -31,9 +33,7 @@ export default {
     }
   },
   methods: {
-    pluralize (n) {
-      return n + (n === 1 ? ' reply' : ' replies')
-    }
+    pluralize: n => n + (n === 1 ? ' reply' : ' replies')
   }
 }
 </script>
@@ -41,19 +41,16 @@ export default {
 <style lang="stylus">
 .comment-children
   .comment-children
-    margin-left 1em
+    margin-left 1.5em
 
 .comment
   border-top 1px solid #eee
   position relative
-  .expand
-    cursor pointer
-  .by, .text
+  .by, .text, .toggle
     font-size .9em
-    padding 1em 0
+    margin 1em 0
   .by
     color #999
-    padding-bottom 0
     a
       color #999
       text-decoration underline
@@ -61,4 +58,15 @@ export default {
     overflow-wrap break-word
     a:hover
       color #ff6600
+  .toggle
+    background-color #fffbf2
+    padding .3em .5em
+    border-radius 4px
+    a
+      color #999
+      cursor pointer
+    &.open
+      padding 0
+      background-color transparent
+      margin-bottom -0.5em
 </style>