Merge branch 'issue-box-redesign' into 'master'

Issue box redesign I complained before about the issue box looks. This is a proposed redesign. The background of the issue is slightly lighter than the comments, so there is a clear distinction. To make sure the issue then doesn't disappear, the shadow is slightly strongly (but still barely noticeable, to keep it flat). The left top corner is round to highlight the status 'label', as it were a real label. See merge request !1125

Merge branch 'issue-box-redesign' into 'master'
376e004c · Dmitriy Zaporozhets · 91d30c90 · be296633 · 376e004c
Commit 376e004c authored Sep 29, 2014 by Dmitriy Zaporozhets
Hide whitespace changes
Inline Side-by-side

Showing with 23 additions and 14 deletions

issue_box.scss app/assets/stylesheets/generic/issue_box.scss +23 -14

No files found.
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@@ -8,43 +8,51 @@
 */

 .issue-box {
-  color: #666;
+  color: #555;
  margin:20px 0;
-  background: #FFF;
-  border: 1px solid #EEE;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+  background: #f9f9f9;
+  border-top-left-radius: 5px;
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));

  &.issue-box-closed {
-    border-color: $border_danger;
    .state {
+      background-color: #F3CECE;
+      border-color: $border_danger;
+    }
+    .state-label {
      background-color: $bg_danger;
      color: #FFF;
-      border-color: $border_danger;
    }
  }

  &.issue-box-merged {
-    border-color: $border_primary;
    .state {
+      background-color: #B7CEE7;
+      border-color: $border_primary;
+    }
+    .state-label {
      background-color: $bg_primary;
      color: #FFF;
-      border-color: $border_primary;
    }
  }

  &.issue-box-open {
-    border-color: $border_success;
    .state {
-      border-color: $border_success;
+      background-color: #D6F1D7;
+      border-color: $bg_success;
+    }
+    .state-label {
      background-color: $bg_success;
      color: #FFF;
    }
  }

  &.issue-box-expired {
-    border-color: #cea61b;
    .state {
+      background-color: #EEE9B3;
      border-color: #faebcc;
+    }
+    .state-label {
      background: #cea61b;
      color: #FFF;
    }
@@ -55,8 +63,7 @@
  }

  .state {
-    border-bottom: 1px solid #DDD;
-    padding: 10px 15px;
+    background-color: #f9f9f9;
  }

  .title {
@@ -104,12 +111,14 @@
    font-size: 14px;
    float: left;
    font-weight: bold;
+    padding: 10px 15px;
+    border-top-left-radius: 5px;
  }

  .creator {
    float: right;
+    padding: 10px 15px;
    a {
-      color: #FFF;
      text-decoration: underline;
    }
  }