list styles cleanup

jstnjns · Feb 12, 2017 · 25c6f3f · 25c6f3f
1 parent 21e7850
commit 25c6f3f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 55 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*.log
diff --git a/styles/lists.less b/styles/lists.less
@@ -2,28 +2,14 @@
 @import "ui-mixins";
 @import "octicon-mixins";
 
-.list-group, .list-tree {
+.list-group,
+.list-tree {
   li {
-  // li:not(.list-nested-item),
-  // li.list-nested-item > .list-item {
     .text(normal);
   }
 
-  .project-root {
-    &:before {
-      height: @tab-height;
-    }
-
-    > .header {
-      line-height: @tab-height !important;
-        // background: @tab-bar-background-color;
-    }
-  }
-
   .generate-list-item-text-color(@class) {
     li.text-@{class} {
-    // li:not(.list-nested-item).text-@{class},
-    // li.list-nested-item.text-@{class} > .list-item {
       .text(@class);
     }
   }
@@ -58,48 +44,23 @@
   }
 }
 
-.select-list ol.list-group,
-&.select-list ol.list-group {
-  li.two-lines {
-    .secondary-line { color: @text-color-subtle; }
-    &.selected .secondary-line {
-      color: @text-color;
-    }
-  }
-
-  // We want to highlight the background of the list items because we dont
-  // know their size.
-  li.selected {
-    background-color: @background-color-selected;
-    &:before{ display: none; }
-  }
+.select-list .list-group {
+  li {
+    padding: 10px;
 
-  &.mark-active{
-    @active-icon-size: 14px;
-
-    // pad in front of the text where the icon would be We'll pad the non-
-    // active items with a 'fake' icon so other classes can pad the item
-    // without worrying about the icon padding.
-    li:before {
-      content: '';
-      background-color: transparent;
-      position: static;
-      display: inline-block;
-      left: auto; right: auto;
-      height: @active-icon-size;
-      width: @active-icon-size;
+    .status {
+      float: right;
     }
 
-    > li:not(.active):before {
-      margin-right: @component-icon-padding;
+    &.selected {
+      background-color: @background-color-selected;
+      &:before{ display: none; }
     }
 
-    li.active {
-      .octicon(check, @active-icon-size);
-
-      &:before {
-        margin-right: @component-icon-padding;
-        color: @text-color-success;
+    &.two-lines {
+      .secondary-line { color: @text-color-subtle; }
+      &.selected .secondary-line {
+        color: @text-color;
       }
     }
   }

diff --git a/styles/settings.less b/styles/settings.less
@@ -1,16 +1,31 @@
 @import "ui-variables";
 
 .settings-view {
+  .section {
+    border-top: 5px solid darken(@app-background-color, 3%);
+
+    &,
+    &:first-child,
+    &:last-child {
+      padding: 40px;
+    }
+  }
+
+  .sub-section {
+    margin: 40px 0;
+  }
 
   .config-menu {
     background: darken(@app-background-color, 3%);
     border: none;
-  }
 
+    .nav > li.active > a {
+      background: @app-background-color;
+    }
+  }
 
   .package-card {
     padding: 10px;
     border: none;
   }
-
 }
diff --git a/styles/tree-view.less b/styles/tree-view.less
@@ -3,6 +3,22 @@
 .tree-view {
   background: @tree-view-background-color;
 
+  .project-root {
+    &:before {
+      height: @tab-height;
+    }
+
+    &.selected {
+      &:before {
+        background: transparent;
+      }
+    }
+
+    > .header {
+      line-height: @tab-height !important;
+    }
+  }
+
   .selected {
     &:before {
       background: @tree-view-background-color-active;