From fdd07e83b45655a4b38419cc93dbae84eddbd4db Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Mon, 14 Mar 2016 15:55:52 +0100
Subject: [PATCH] try border

---
 app/styles/app/layouts/jobs.sass         | 25 +++++++++---------------
 app/styles/app/mixins.sass               |  5 ++++-
 app/styles/app/modules/build-header.sass | 20 +++++++++----------
 app/styles/app/modules/status-icon.sass  |  7 ++++++-
 4 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/app/styles/app/layouts/jobs.sass b/app/styles/app/layouts/jobs.sass
index e372a039..b5b538a2 100644
--- a/app/styles/app/layouts/jobs.sass
+++ b/app/styles/app/layouts/jobs.sass
@@ -23,15 +23,15 @@
 .jobs-item
   border: 1px solid $cream-dark
   margin-bottom: 5px
-  @include colorJobs($turf-green, 'passed', 6px, $seed-green)
-  @include colorJobs($brick-red, 'failed', 6px, $quartz-red)
-  @include colorJobs($brick-red, 'errored', 6px, $quartz-red)
-  @include colorJobs($cement-grey, 'canceled', 6px, $pebble-grey)
-  @include colorJobs($canary-yellow, 'started', 6px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'queued', 6px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'booting', 6px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'received', 6px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'created', 6px, $haze-yellow, true)
+  @include colorJobs($turf-green, 'passed', 3px, $seed-green)
+  @include colorJobs($brick-red, 'failed', 3px, $quartz-red)
+  @include colorJobs($brick-red, 'errored', 3px, $quartz-red)
+  @include colorJobs($cement-grey, 'canceled', 3px, $pebble-grey)
+  @include colorJobs($canary-yellow, 'started', 3px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'queued', 3px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'booting', 3px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'received', 3px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'created', 3px, $haze-yellow, true)
 
   @include colorFadeOut('passed', $seed-green)
   @include colorFadeOut('failed', $quartz-red)
@@ -52,7 +52,6 @@
       justify-content: space-between
       align-items: center
       height: 34px
-      padding-left: 0.5em
 
 .section-title
   font-size: 16px
@@ -65,12 +64,6 @@
   @media #{$medium-up}
     flex: 0 0 2em
 
-  &.started,
-  &.booting,
-  &.received,
-  &.created
-    line-height: 3
-
 .job-number
   display: inline-block
   @media #{$medium-up}
diff --git a/app/styles/app/mixins.sass b/app/styles/app/mixins.sass
index 236090fe..844f1dd9 100644
--- a/app/styles/app/mixins.sass
+++ b/app/styles/app/mixins.sass
@@ -135,4 +135,7 @@
     @include colorStatusIcons($color, $status)
     &:hover,
     &:active
-      @include colorBg($bg-start, $status, $width, $hover)
+      background-color: $hover
+      border-left: $width solid $color
+      a
+        margin-left: - $width + 1px
diff --git a/app/styles/app/modules/build-header.sass b/app/styles/app/modules/build-header.sass
index b77f897b..0908aad2 100644
--- a/app/styles/app/modules/build-header.sass
+++ b/app/styles/app/modules/build-header.sass
@@ -3,15 +3,15 @@
   border: 1px solid $cream-dark
   clear: both
 
-  @include colorRows($turf-green, 'passed', 12px)
-  @include colorRows($brick-red, 'failed', 12px)
-  @include colorRows($brick-red, 'errored', 12px)
-  @include colorRows($cement-grey, 'canceled', 12px)
-  @include colorRows($canary-yellow, 'started', 12px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'queued', 12px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'booting', 12px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'received', 12px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'created', 12px, true, $dozer-yellow)
+  @include colorRows($turf-green, 'passed', 10px)
+  @include colorRows($brick-red, 'failed', 10px)
+  @include colorRows($brick-red, 'errored', 10px)
+  @include colorRows($cement-grey, 'canceled', 10px)
+  @include colorRows($canary-yellow, 'started', 10px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'queued', 10px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'booting', 10px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'received', 10px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'created', 10px, true, $dozer-yellow)
 
   @media #{$medium-up}
     display: flex
@@ -30,7 +30,7 @@
   font-size: 16px
   @media #{$medium-up}
     flex: 1 1 65%
-    padding-left: 2.5rem
+    padding-left: 2.2rem
 
 .build-tools
   padding: 1rem 0 1rem 3rem
diff --git a/app/styles/app/modules/status-icon.sass b/app/styles/app/modules/status-icon.sass
index 04f35071..c6b6f42c 100644
--- a/app/styles/app/modules/status-icon.sass
+++ b/app/styles/app/modules/status-icon.sass
@@ -34,10 +34,15 @@
       vertical-align: middle
       width: 5px
       height: 5px
-      border: solid 1px #bfb502
+      border: solid 1px $dozer-yellow
       border-radius: 50%
       transform-origin: center center
 
+  &.started,
+  &.received,
+  &.created
+    height: 19px
+
 @keyframes rotation
   0%
     transform: rotateZ(0deg)