Update search design

docs/.vuepress/theme/AlgoliaSearchBox.vue

@@ -18,7 +18,6 @@ export default {
       ]).then(([docsearch]) => {
         docsearch = docsearch.default
         docsearch(Object.assign(this.options, {
-          debug: false,
           inputSelector: '#algolia-search-input'
         }))
       })
@@ -37,95 +36,39 @@ export default {
 @import './styles/config.styl'
 
 .algolia-search-wrapper
-  & > span
-    vertical-align middle
   .algolia-autocomplete
-    line-height normal
     .ds-dropdown-menu
-      background-color #fff
-      border 1px solid #999
-      border-radius 4px
-      font-size 16px
-      margin 6px 0 0
-      padding 4px
-      text-align left
-      &:before
-        border-color #999
-      [class*=ds-dataset-]
-        border none
-        padding 0
-      .ds-suggestions
-        margin-top 0
-      .ds-suggestion
-        border-bottom 1px solid $borderColor
-    .algolia-docsearch-suggestion--highlight
-      color #2c815b
+      width: 500px
     .algolia-docsearch-suggestion
-      border-color $borderColor
-      padding 0
       .algolia-docsearch-suggestion--category-header
-        padding 5px 10px
-        margin-top 0
-        background $accentColor
-        color #fff
-        font-weight 600
-        .algolia-docsearch-suggestion--highlight
-          background rgba(255, 255, 255, 0.6)
+        color: black
+        border-bottom 1px solid gray
       .algolia-docsearch-suggestion--wrapper
-        padding 0
-      .algolia-docsearch-suggestion--title
-        font-weight 600
-        margin-bottom 0
-        color $textColor
+        float none
       .algolia-docsearch-suggestion--subcategory-column
-        vertical-align top
-        padding 5px 7px 5px 5px
-        border-color $borderColor
-        background #f1f3f5
-        &:after
-          display none
-      .algolia-docsearch-suggestion--subcategory-column-text
-        color #555
-    .algolia-docsearch-footer
-      border-color $borderColor
-    .ds-cursor .algolia-docsearch-suggestion--content
-      background-color #e7edf3 !important
-      color $textColor
+        vertical-align middle
+        display inline-block
+        float: none
+        line-height 25px
+        color gray
+        .algolia-docsearch-suggestion--highlight
+          color: gray
+          background: inherit
+          padding: 0
+      .algolia-docsearch-suggestion--content
+        vertical-align middle
+        width 69%
+        display inline-block
+        float: none
+        line-height 25px
+        &:before
+          width 0
+      .algolia-docsearch-suggestion--title
+        font-weight bold
+        color black
+      .algolia-docsearch-suggestion--text
+        font-size 0.8rem
+        color gray
 
-@media (min-width: $MQMobile)
-  .algolia-search-wrapper
-    .algolia-autocomplete
-      .algolia-docsearch-suggestion
-        .algolia-docsearch-suggestion--subcategory-column
-          float none
-          width 150px
-          min-width 150px
-          display table-cell
-        .algolia-docsearch-suggestion--content
-          float none
-          display table-cell
-          width 100%
-          vertical-align top
-        .ds-dropdown-menu
-          min-width 515px !important
-
-@media (max-width: $MQMobile)
-  .algolia-search-wrapper
-    .ds-dropdown-menu
-      min-width calc(100vw - 4rem) !important
-      max-width calc(100vw - 4rem) !important
-    .algolia-docsearch-suggestion--wrapper
-      padding 5px 7px 5px 5px !important
-    .algolia-docsearch-suggestion--subcategory-column
-      padding 0 !important
-      background white !important
-    .algolia-docsearch-suggestion--subcategory-column-text:after
-      content " > "
-      font-size 10px
-      line-height 14.4px
-      display inline-block
-      width 5px
-      margin -3px 3px 0
-      vertical-align middle
 
 </style>