Merge pull request #100 from orderedlist/docks-and-settings

Docks and settings

Author: orderedlist

index.less

@@ -4,6 +4,7 @@
 
 @import "styles/badges";
 @import "styles/buttons";
+@import "styles/docks";
 @import "styles/editor";
 @import "styles/git";
 @import "styles/lists";

styles/docks.less

@@ -0,0 +1,67 @@
+.atom-dock-inner.atom-dock-open {
+  &.left {
+    border-right: 1px solid @tree-view-border-color;
+  }
+
+  &.right {
+    border-left: 1px solid @tree-view-border-color;
+  }
+}
+
+.atom-dock-toggle-button {
+  width: 200px;
+  height: 200px;
+
+  &.left,
+  &.right {
+    width: 50px;
+  }
+
+  .atom-dock-toggle-button-inner {
+    width: 200px;
+    height: 200px;
+    border-radius: 100%;
+    border: 0;
+    background: rgba(0,0,0,0.4);
+
+
+    &.left {
+      .icon {
+        font-size: 64px;
+        transform: translateX(71px) translateY(-10px);
+
+        &:before {
+          font-size: 32px;
+        }
+      }
+    }
+
+    &.right {
+      .icon {
+        font-size: 64px;
+        transform: translateX(-71px) translateY(-10px);
+
+        &:before {
+          font-size: 32px;
+        }
+      }
+    }
+  }
+}
+
+.atom-dock-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+
+  &.left {
+    right: -3px;
+    width: 8px;
+  }
+
+  &.right {
+    left: -3px;
+    width: 8px;
+  }
+}

styles/settings.less

@@ -103,16 +103,27 @@
       padding:0 @component-padding;
       line-height:@component-padding*3;
       color:@text-color;
+      display: block;
 
       .btn {
         top:5px;
+
+        &.pull-right {
+          margin-left: @component-padding/2;
+        }
       }
 
       & + .container {
         padding-top:0;
       }
     }
 
+    .updates-heading-container .section-heading {
+      border: 0;
+      background: none;
+      margin: 0;
+    }
+
     .sub-section {
       margin-top:@component-padding;
       clear:both;
@@ -123,6 +134,12 @@
     }
   }
 
+  .updates-heading-container {
+    border-bottom:1px solid fade(@pane-item-border-color, 20%);
+    background:@tool-panel-background-color;
+    margin: -@component-padding -@component-padding @component-padding;
+  }
+
   .table {
     th {
       border:none;