Style the select-lists

src/select-list.coffee

@@ -16,7 +16,7 @@ class SelectList extends View
       @div class: 'loading', outlet: 'loadingArea', =>
         @span class: 'loading-message', outlet: 'loading'
         @span class: 'badge', outlet: 'loadingBadge'
-      @ol outlet: 'list'
+      @ol class: 'list-group highlight-selected', outlet: 'list'
 
   # Private:
   @viewClass: -> 'select-list'

static/select-list.less

@@ -18,57 +18,21 @@
     }
   }
 
-  ol {
+  ol.list-group {
     position: relative;
     overflow-y: auto;
     max-height: 312px;
     margin: 0;
     padding: 0;
 
-    &:empty {
-      border: none;
-    }
-
     li {
-      padding: 10px;
       display: block;
 
-      &.two-lines {
-        padding: 5px 10px 5px 10px;
-      }
-
       .primary-line, .secondary-line {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
       }
     }
-
-    li:last-child {
-      border-bottom: none;
-    }
-
-    li.active-item {
-      .octicon(check, 14px);
-
-      &:before {
-        margin-right: 5px;
-      }
-    }
-
-    li.inactive-item {
-      padding-left: 29px;
-    }
-
-    li .right {
-      float: right;
-    }
-
-    .key-binding {
-      border-radius: 2px;
-      margin-left: 5px;
-      padding: 3px;
-      font-size: 11px;
-    }
   }
 }

themes/neue-dark-ui/lists.less

@@ -6,15 +6,15 @@
   margin: 0;
   list-style: none;
 
-  .list-item,
-  .list-nested-item > .list-item {
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
     .text(normal);
     line-height: @component-line-height;
   }
 
   .generate-list-item-text-color(@class) {
-    .list-item.@{class},
-    .list-nested-item.@{class} > .list-item {
+    li:not(.list-nested-item).@{class},
+    li.list-nested-item.@{class} > .list-item {
       .text(@class);
     }
   }
@@ -25,10 +25,10 @@
   .generate-list-item-text-color(error);
   .generate-list-item-text-color(selected);
 
-  .list-item:hover,
-  .list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
-  .list-nested-item .list-item:hover,
-  .list-nested-item .list-item:hover .disclosure-arrow,
+  li:not(.list-nested-item):hover,
+  li.list-nested-item:hover > .list-item, // i.e. highlight directory when hover child file
+  li.list-nested-item .list-item:hover,
+  li.list-nested-item .list-item:hover .disclosure-arrow,
   .selected > .list-nested-item > .list-item .disclosure-arrow,
   .selected > .list-nested-item > .list-item:hover .disclosure-arrow  {
     .text(highlighted);
@@ -49,6 +49,10 @@
     right: 0;
     height: @component-line-height;
   }
+
+  &.highlight-selected .selected{
+    background-color: @tool-panel-background-highlight-color;
+  }
 }
 
 // Handle indentation of the tree. Assume disclosure arrows.

themes/neue-dark-ui/overlay.less

@@ -7,8 +7,22 @@
   border: 1px solid @overlay-border-color;
   box-shadow: 0 0 10px @overlay-shadow-color;
   border-radius: @component-border-radius;
-}
 
-.overlay .editor.mini {
-  margin-bottom: @component-padding;
+  .editor.mini {
+    margin-bottom: @component-padding;
+  }
+
+  &.select-list, .select-list {
+
+    ol.list-group {
+      background-color: @overlay-inner-background-color;
+
+      li {
+        padding: @component-padding;
+        border-bottom: 1px solid @overlay-background-color;
+
+        &.two-lines { padding: @component-padding/2 @component-padding; }
+      }
+    }
+  }
 }

themes/neue-dark-ui/package.cson

@@ -9,4 +9,5 @@
   'editor'
   'tabs'
   'overlay'
+  'popover-list'
 ]

themes/neue-dark-ui/ui-variables.less

@@ -33,6 +33,7 @@
 @panel-heading-background-color: #43484d;
 
 @overlay-background-color: #202123;
+@overlay-inner-background-color: #27292b;
 @overlay-border-color: rgba(255, 255, 255, 0.05);
 @overlay-shadow-color: rgba(0, 0, 0, 0.5);