Add blame view age map

1 files changed, 50 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index d08df05fd6c..b26d8fbd5fe 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -59,6 +59,43 @@
     }
   }
 
+  .file-blame-legend {
+    background-color: $gray-light;
+    text-align: right;
+    padding: 8px $gl-padding;
+
+    @media (max-width: $screen-xs-max) {
+      text-align: left;
+    }
+
+    .left-label {
+      padding-right: 5px;
+    }
+
+    .right-label {
+      padding-left: 5px;
+    }
+
+    .legend-box {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      padding: 0 2px;
+    }
+
+    @for $i from 0 through 5 {
+      .legend-box-#{$i} {
+        background-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
+      }
+    }
+
+    @for $i from 1 through 4 {
+      .legend-box-#{$i + 5} {
+        background-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
+      }
+    }
+  }
+
   .file-content {
     background: $white-light;
 
@@ -118,6 +155,19 @@
         padding: 5px 10px;
         min-width: 400px;
         background: $gray-light;
+        border-left: 3px solid;
+      }
+
+      @for $i from 0 through 5 {
+        td.blame-commit-age-#{$i} {
+          border-left-color: mix($blame-cyan, $blame-blue, $i / 5.0 * 100%);
+        }
+      }
+
+      @for $i from 1 through 4 {
+        td.blame-commit-age-#{$i + 5} {
+          border-left-color: mix($blame-gray, $blame-cyan, $i / 4.0 * 100%);
+        }
       }
 
       td.line-numbers {