fix(dropdown): Visually group suggestions together

algolia · Jan 29, 2016 · 592c8f2 · 592c8f2
1 parent 9c7dbbc
commit 592c8f2
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -21,9 +21,13 @@
   color: #333;
   cursor: pointer;
   overflow: hidden;
-  border-bottom: 1px solid $color-border;
 }
 
+  // Each sub-suggestion
+ .algolia-docsearch-suggestion__secondary {
+    border-top: 1px solid $color-border;
+  }
+
 // Main category headers
 .algolia-docsearch-suggestion--category-header {
   display: none;
@@ -62,6 +66,7 @@
 // The secondary column is hidden on small screens
 .algolia-docsearch-suggestion--subcategory-column {
   display: none;
+  cursor: default;
 }
 // The text snippet is hidden on small screens
 .algolia-docsearch-suggestion--text {
@@ -70,7 +75,14 @@
 
 .algolia-docsearch-suggestion--content {
   padding: 3px 5px;
+  width: 100%;
+  border-top: 1px solid lighten($color-border, 60%);
 }
+
+  .algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
+  .algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
+    border-top: 0;
+  }
 
 .algolia-docsearch-suggestion--subcategory-inline {
   display: inline-block;
@@ -128,8 +140,12 @@
   .algolia-docsearch-suggestion {
     display: table;
     width: 100%;
-    border-bottom: 1px solid $color-border-light;
   }
+
+  .algolia-docsearch-suggestion__secondary {
+    border-top: 1px solid $color-border-light;
+  }
+
   .algolia-docsearch-suggestion--subcategory-column {
     border-right: 1px solid $color-border-light;
     background: $color-left-column-bg;