From baa0ae5f8578452a033d3a821d282b7b386048ae Mon Sep 17 00:00:00 2001
From: Matt Colyer <matt@colyer.name>
Date: Wed, 11 Sep 2013 16:29:14 -0700
Subject: [PATCH] Initial commit

---
 atom.less         |   6 +++
 buttons.less      |  53 ++++++++++++++++++++
 editor.less       |  35 +++++++++++++
 git.less          |   9 ++++
 lists.less        | 125 ++++++++++++++++++++++++++++++++++++++++++++++
 loading.less      |  20 ++++++++
 overlays.less     |  36 +++++++++++++
 package.cson      |  16 ++++++
 panels.less       |  85 +++++++++++++++++++++++++++++++
 sites.less        |  14 ++++++
 tabs.less         |  65 ++++++++++++++++++++++++
 text.less         |  72 ++++++++++++++++++++++++++
 ui-mixins.less    |  39 +++++++++++++++
 ui-variables.less |  76 ++++++++++++++++++++++++++++
 utilities.less    |  19 +++++++
 15 files changed, 670 insertions(+)
 create mode 100644 atom.less
 create mode 100644 buttons.less
 create mode 100644 editor.less
 create mode 100644 git.less
 create mode 100644 lists.less
 create mode 100644 loading.less
 create mode 100644 overlays.less
 create mode 100644 package.cson
 create mode 100644 panels.less
 create mode 100644 sites.less
 create mode 100644 tabs.less
 create mode 100644 text.less
 create mode 100644 ui-mixins.less
 create mode 100644 ui-variables.less
 create mode 100644 utilities.less

diff --git a/atom.less b/atom.less
new file mode 100644
index 0000000..f868642
--- /dev/null
+++ b/atom.less
@@ -0,0 +1,6 @@
+@import "ui-variables";
+
+#root-view {
+  font: caption;
+  background-color: @app-background-color;
+}
diff --git a/buttons.less b/buttons.less
new file mode 100644
index 0000000..7fd046c
--- /dev/null
+++ b/buttons.less
@@ -0,0 +1,53 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.btn-background (@color, @hover-color, @selected-color, @text-color) {
+  color: @text-color;
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
+
+  &:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
+  }
+  &.selected,
+  &.selected:hover {
+    color: @text-color-highlight;
+    background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
+    &:hover {
+      background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
+    }
+  }
+}
+
+.btn-variant (@color) {
+  @bg: darken(@color, 10%);
+  @hover: @color;
+  @selected: @color;
+  .btn-background(@bg, @hover, @selected, @text-color-highlight);
+}
+
+.btn {
+  .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
+}
+
+.btn.btn-primary {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-info {
+  .btn-variant(@background-color-info);
+}
+.btn.btn-success {
+  .btn-variant(@background-color-success);
+}
+.btn.btn-warning {
+  .btn-variant(@background-color-warning);
+}
+.btn.btn-error {
+  .btn-variant(@background-color-error);
+}
+
+.caret {
+  border-top: 5px solid #fff;
+  margin-top: -1px;
+}
diff --git a/editor.less b/editor.less
new file mode 100644
index 0000000..1b6ee50
--- /dev/null
+++ b/editor.less
@@ -0,0 +1,35 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.editor.mini {
+  color: @text-color-highlight;
+  background-color: @input-background-color;
+  border: 1px solid @input-border-color;
+  box-shadow:
+    inset 0 1px 1px rgba(0, 0, 0, .075);
+  border-radius: @component-border-radius;
+  padding-left: @component-padding/2;
+
+  .cursor { border-color: #fff; }
+  .selection .region { background-color: #444; }
+}
+
+.editor.editor-colors.mini.is-focused {
+  background-color: lighten(@input-background-color, 5%);
+}
+
+// FIXME: these should go in syntax themes?
+.editor .gutter.drop-shadow {
+  -webkit-box-shadow: -2px 0 10px 2px #222;
+}
+
+@-webkit-keyframes highlight {
+  from { background-color: rgba(100, 255, 100, 0.7); }
+  to { background-color: null; }
+}
+
+.editor .highlighted.selection .region {
+  -webkit-animation-name: highlight;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: 1;
+}
diff --git a/git.less b/git.less
new file mode 100644
index 0000000..cfdc73c
--- /dev/null
+++ b/git.less
@@ -0,0 +1,9 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.status { .text(normal); }
+.status-added { .text(info); }
+.status-ignored { .text(subtle); }
+.status-modified { .text(warning); }
+.status-removed { .text(error); }
+.status-renamed { .text(success); }
diff --git a/lists.less b/lists.less
new file mode 100644
index 0000000..a4f84b6
--- /dev/null
+++ b/lists.less
@@ -0,0 +1,125 @@
+@import "ui-variables";
+@import "ui-mixins";
+@import "octicon-mixins";
+
+.list-group, .list-tree {
+  li:not(.list-nested-item),
+  li.list-nested-item > .list-item {
+    .text(normal);
+  }
+
+  .generate-list-item-text-color(@class) {
+    li:not(.list-nested-item).text-@{class},
+    li.list-nested-item.text-@{class} > .list-item {
+      .text(@class);
+    }
+  }
+  .generate-list-item-text-color(subtle);
+  .generate-list-item-text-color(info);
+  .generate-list-item-text-color(success);
+  .generate-list-item-text-color(warning);
+  .generate-list-item-text-color(error);
+  .generate-list-item-text-color(selected);
+
+  .generate-list-item-status-color(@textClass, @status) {
+    li:not(.list-nested-item).status-@{status},
+    li.list-nested-item.status-@{status} > .list-item {
+      .text(@textClass);
+    }
+  }
+  .generate-list-item-status-color(subtle, ignored);
+  .generate-list-item-status-color(info, added);
+  .generate-list-item-status-color(success, renamed);
+  .generate-list-item-status-color(warning, modified);
+  .generate-list-item-status-color(error, removed);
+
+  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(highlight);
+  }
+}
+
+.select-list ol.list-group,
+&.select-list ol.list-group {
+  li.two-lines {
+    .secondary-line { color: @text-color-subtle; }
+    &.selected .secondary-line { color: lighten(@text-color-subtle, 10%); }
+  }
+
+  // We want to highlight the background of the list items because we dont
+  // know their size.
+  li.selected {
+    background-color: @background-color-highlight;
+    &:before{ display: none; }
+  }
+
+  &.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;
+    }
+    > li:not(.active):before {
+      margin-right: @component-icon-padding;
+    }
+    li.active {
+      .octicon(check, @active-icon-size);
+      &:before {
+        margin-right: @component-icon-padding;
+        color: @text-color-success;
+      }
+    }
+  }
+}
+
+.select-list.popover-list {
+  background-color: @overlay-background-color;
+  -webkit-box-shadow: 0 0 3px 3px @base-border-color;
+  padding: @component-padding/2;
+  border-radius: @component-border-radius;
+  border: 1px solid @overlay-border-color;
+
+  .editor {
+    margin-bottom: @component-padding/2;
+  }
+
+  .list-group li {
+    padding-left: @component-padding/2;
+  }
+}
+
+.ui-sortable {
+  li {
+    line-height: 2.5;
+  }
+
+  // For sortable lists in the settings view
+  li.ui-sortable-placeholder {
+    visibility: visible !important;
+    background-color: darken(@pane-item-background-color, 3%);
+  }
+}
+
+li.ui-draggable-dragging, li.ui-sortable-helper {
+  line-height: @component-line-height;
+  height: @component-line-height;
+  border: 0;
+  border-radius: 0;
+  list-style: none;
+  padding: 0 @component-padding;
+  background: @background-color-highlight;
+  box-shadow: 0 0 1px @base-border-color;
+}
diff --git a/loading.less b/loading.less
new file mode 100644
index 0000000..591945b
--- /dev/null
+++ b/loading.less
@@ -0,0 +1,20 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.loading-spinner(@size) {
+  width: @size;
+  height: @size;
+  display: block;
+
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.loading-spinner-medium {
+  .loading-spinner(64px);
+}
+
+.loading-spinner-small {
+  .loading-spinner(32px);
+}
diff --git a/overlays.less b/overlays.less
new file mode 100644
index 0000000..182499a
--- /dev/null
+++ b/overlays.less
@@ -0,0 +1,36 @@
+@import "ui-variables";
+
+.overlay {
+  color: @text-color;
+  background-color: @overlay-background-color;
+  padding: @component-padding;
+  border: 1px solid @overlay-border-color;
+  box-shadow: 0 0 10px @base-border-color;
+  border-radius: @component-border-radius;
+
+  .editor.mini {
+    margin-bottom: @component-padding;
+  }
+
+  .select-list ol.list-group,
+  &.select-list ol.list-group {
+
+    background-color: lighten(@overlay-background-color, 3%);
+
+    li {
+      padding: @component-padding;
+      border-bottom: 1px solid @overlay-background-color;
+
+      &.two-lines { padding: @component-padding/2 @component-padding; }
+
+      .status.icon {
+        float: right;
+        margin-left: @component-icon-padding;
+        &:before {
+          margin-right: 0;
+        }
+      }
+    }
+
+  }
+}
diff --git a/package.cson b/package.cson
new file mode 100644
index 0000000..6a4d360
--- /dev/null
+++ b/package.cson
@@ -0,0 +1,16 @@
+'stylesheets': [
+  'atom'
+  'utilities'
+  'text'
+  'git'
+  'sites'
+  'loading'
+  'buttons'
+  'panels'
+  'panes'
+  'lists'
+  'editor'
+  'tabs'
+  'overlays'
+  'dropdowns'
+]
diff --git a/panels.less b/panels.less
new file mode 100644
index 0000000..c8e2b94
--- /dev/null
+++ b/panels.less
@@ -0,0 +1,85 @@
+@import "ui-mixins";
+@import "ui-variables";
+@import "buttons";
+
+.panel {
+  &.bordered {
+    border: 1px solid @base-border-color;
+    border-radius: @component-border-radius;
+
+    .panel-heading {
+      border-radius: @component-border-radius @component-border-radius 0 0;
+    }
+  }
+}
+
+.tool-panel {
+  .text(normal);
+  position: relative;
+
+  opacity: 0.8;
+  background-color: @tool-panel-background-color;
+
+  &:focus {
+    opacity: 1;
+  }
+
+  &.panel-bottom {
+    border-top: 1px solid @tool-panel-border-color;
+    box-shadow: inset 0 1px 0 @background-color-highlight;
+  }
+
+  &.panel-left {
+    border-right: 1px solid @tool-panel-border-color;
+  }
+}
+
+.inset-panel {
+  position: relative;
+  background-color: @inset-panel-background-color;
+  border-radius: @component-border-radius;
+
+  border: 1px solid @inset-panel-border-color;
+  box-shadow:
+    inset 0 1px 3px fadeout(@inset-panel-border-color, 40%),
+    inset 0 -1px 3px fadeout(@background-color-highlight, 3%);
+
+  .panel-heading {
+    border-radius: @component-border-radius @component-border-radius 0 0;
+  }
+}
+
+.is-blurred {
+  .tool-panel,
+  .inset-panel {
+    opacity: 0.6;
+  }
+}
+
+.panel-heading {
+  .text(normal);
+
+  margin: 0;
+  border-bottom: 1px solid @panel-heading-border-color;
+  border-top: 1px solid fadein(@background-color-highlight, 10%);
+  padding: @component-padding - 2px @component-padding;
+
+  font-size: @font-size;
+  line-height: 1;
+
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(@panel-heading-background-color, darken(@panel-heading-background-color, 10%));
+
+  .btn {
+    padding: 1px 5px;
+    font-size: 10px;
+    position: relative;
+    top: -3px;
+
+    @bg: lighten(@button-background-color, 10%);
+    @hover: lighten(@button-background-color-hover, 10%);
+    @selected: lighten(@button-background-color-selected, 10%);
+    @text: lighten(@text-color, 10%);
+    .btn-background(@bg, @hover, @selected, @text);
+  }
+}
diff --git a/sites.less b/sites.less
new file mode 100644
index 0000000..fa79d92
--- /dev/null
+++ b/sites.less
@@ -0,0 +1,14 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.ui-site(@num, @color) {
+  .ui-site-@{num} {
+    background-color: @color;
+  }
+}
+
+.ui-site(1, @ui-site-color-1);
+.ui-site(2, @ui-site-color-2);
+.ui-site(3, @ui-site-color-3);
+.ui-site(4, @ui-site-color-4);
+.ui-site(5, @ui-site-color-5);
diff --git a/tabs.less b/tabs.less
new file mode 100644
index 0000000..e2f9e16
--- /dev/null
+++ b/tabs.less
@@ -0,0 +1,65 @@
+@import "ui-variables";
+@import "ui-mixins";
+
+.tab-bar {
+  height: @tab-height + 6px;
+  border-bottom: 4px solid @tab-bar-border-color;
+  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
+  margin-bottom: 1px;
+  background-color: @tab-bar-background-color;
+}
+
+.tab {
+  height: @tab-height;
+  line-height: @tab-height;
+  color: @text-color;
+  margin: 0;
+  background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 rgba(0, 0, 0, 1),
+    inset 1px 0 0 @background-color-highlight,
+    inset -1px 0 0 @background-color-highlight;
+}
+
+.tab:hover {
+  color: @text-color-highlight;
+}
+
+.tab.active {
+  height: @tab-height + 1px;
+  background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color);
+  color: @text-color-highlight;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
+  z-index: 2;
+  box-shadow:
+    inset 0 1px 0 rgba(0, 0, 0, 0.5),
+    inset 0 2px 0 rgba(255, 255, 255, 0.1),
+    inset 1px 0 0 rgba(255, 255, 255, 0.1),
+    inset -1px 0 0 rgba(255, 255, 255, 0.1)
+}
+
+.tab.active:hover .close-icon {
+  color: @text-color-highlight;
+}
+
+// Bootstrap nav tabs.
+.nav.nav-tabs {
+  border-bottom-color: @tab-background-color-active;
+
+  > li {
+    margin-bottom: 0;
+  }
+
+  > li > a {
+    border: none;
+  }
+
+  > li.active > a {
+    .text(highlight);
+    border: none;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    background-color: @background-color-highlight;
+  }
+}
diff --git a/text.less b/text.less
new file mode 100644
index 0000000..8f9c9fc
--- /dev/null
+++ b/text.less
@@ -0,0 +1,72 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+h1,
+h2,
+h3 {
+  line-height: 1em;
+  margin-bottom: 15px
+}
+h1 { font-size: 2em; }
+h2 { font-size: 1.5em; }
+h3 { font-size: 1.2em; }
+
+p {
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+label {
+  font-weight: normal;
+}
+
+pre {
+  box-shadow: none;
+  color: @text-color;
+  background: @inset-panel-background-color;
+  border-radius: @component-border-radius;
+  border: none;
+  margin: 0;
+}
+
+code {
+  .text(highlight);
+  background: @background-color-highlight;
+  border-radius: @component-border-radius;
+}
+
+.selected { .text(highlight); }
+
+.text-smaller { font-size: 0.9em; }
+
+.text-subtle { .text(subtle); }
+.text-highlight { .text(highlight); }
+
+.text-info { .text(info); }
+.text-warning { .text(warning); }
+.text-success { .text(success); }
+.text-error { .text(error); }
+
+.highlight {
+  color: @text-color-highlight;
+  font-weight: bold;
+  text-shadow: none;
+  background-color: @background-color-highlight;
+  border-radius: @component-border-radius;
+  padding: 1px 3px;
+}
+
+.highlight-color(@name, @color) {
+  .highlight-@{name} {
+    color: @text-color-highlight;
+    font-weight: bold;
+    text-shadow: none;
+    background-color: @color;
+    border-radius: @component-border-radius;
+    padding: 1px 3px;
+  }
+}
+.highlight-color(info, @background-color-info);
+.highlight-color(warning, @background-color-warning);
+.highlight-color(error, @background-color-error);
+.highlight-color(success, @background-color-success);
diff --git a/ui-mixins.less b/ui-mixins.less
new file mode 100644
index 0000000..04b74f7
--- /dev/null
+++ b/ui-mixins.less
@@ -0,0 +1,39 @@
+@import "ui-variables";
+
+// Pattern matching; ish is cray.
+// http://lesscss.org/#-pattern-matching-and-guard-expressions
+.text(normal) {
+  font-weight: normal;
+  color: @text-color;
+  text-shadow: 0 -1px 0 #333;
+}
+.text(subtle) {
+  font-weight: normal;
+  color: @text-color-subtle;
+  text-shadow: none;
+}
+.text(highlight) {
+  font-weight: normal;
+  color: @text-color-highlight;
+  text-shadow: 0 -1px 0 #333;
+}
+.text(selected) {
+  .text(highlight)
+}
+
+.text(info) {
+  color: @text-color-info;
+  text-shadow: none;
+}
+.text(success) {
+  color: @text-color-success;
+  text-shadow: none;
+}
+.text(warning) {
+  color: @text-color-warning;
+  text-shadow: none;
+}
+.text(error) {
+  color: @text-color-error;
+  text-shadow: none;
+}
diff --git a/ui-variables.less b/ui-variables.less
new file mode 100644
index 0000000..dcdfd48
--- /dev/null
+++ b/ui-variables.less
@@ -0,0 +1,76 @@
+// Colors
+
+@text-color: #aaa;
+@text-color-subtle: #555;
+@text-color-highlight: #fff;
+@text-color-selected: @text-color-highlight;
+
+@text-color-info: #5293d8;
+@text-color-success: #1fe977;
+@text-color-warning: #f78a46;
+@text-color-error: #c00;
+
+@background-color-info: #0098ff;
+@background-color-success: #17ca65;
+@background-color-warning: #ff4800;
+@background-color-error: #c00;
+@background-color-highlight: rgba(255, 255, 255, 0.07);
+@background-color-selected: @background-color-highlight;
+
+@app-background-color: #333;
+
+@base-background-color: lighten(@tool-panel-background-color, 5%);
+@base-border-color: rgba(0, 0, 0, 0.5);
+
+@pane-item-background-color: @base-background-color;
+@pane-item-border-color: rgba(0, 0, 0, 0.5);
+
+@input-background-color: #212224;
+@input-border-color: @base-border-color;
+
+@tool-panel-background-color: #1d1f21;
+@tool-panel-border-color: @base-border-color;
+
+@inset-panel-background-color: #161719;
+@inset-panel-border-color: @base-border-color;
+
+@panel-heading-background-color: #43484d;
+@panel-heading-border-color: fadein(@base-border-color, 10%);
+
+@overlay-background-color: #202123;
+@overlay-border-color: @background-color-highlight;
+
+@button-background-color: #43484d;
+@button-background-color-hover: lighten(@button-background-color, 5%);
+@button-background-color-selected: #5c6064;
+@button-border-color: @base-border-color;
+
+@tab-bar-background-color: @inset-panel-background-color;
+@tab-bar-border-color: darken(@tab-background-color-active, 10%);
+@tab-background-color: #292c2f;
+@tab-background-color-active: @panel-heading-background-color;
+@tab-border-color: transparent;
+
+@tree-view-background-color: @tool-panel-background-color;
+@tree-view-border-color: @tool-panel-border-color;
+
+@ui-site-color-1: @background-color-success; // green
+@ui-site-color-2: @background-color-info; // blue
+@ui-site-color-3: @background-color-warning; // orange
+@ui-site-color-4: #db2ff4; // purple
+@ui-site-color-5: #f5e11d; // yellow
+
+
+// Sizes
+
+@font-size: 12px;
+
+@disclosure-arrow-size: 12px;
+
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+@component-border-radius: 2px;
+
+@tab-height: 30px;
diff --git a/utilities.less b/utilities.less
new file mode 100644
index 0000000..feb882f
--- /dev/null
+++ b/utilities.less
@@ -0,0 +1,19 @@
+@import "ui-mixins";
+@import "ui-variables";
+
+.key-binding {
+  background: -webkit-linear-gradient(
+    rgba(100, 100, 100, 0.5),
+    rgba(70,70,70, 0.5));
+  -webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
+  display: inline-block;
+  line-height: 100%;
+  padding: 1px 3px;
+  border-radius: @component-border-radius;
+  margin-left: @component-icon-padding;
+}
+
+.badge {
+  .text(highlight);
+  background: @background-color-highlight;
+}