11 files changed, 117 insertions, 34 deletions

diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
new file mode 100644
index 00000000000..1fec61bdba1
--- /dev/null
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -0,0 +1,72 @@
+// This file is based off animate.css 3.5.1, available here:
+// https://github.com/daneden/animate.css/blob/3.5.1/animate.css
+// 
+// animate.css - http://daneden.me/animate
+// Version - 3.5.1
+// Licensed under the MIT license - http://opensource.org/licenses/MIT
+// 
+// Copyright (c) 2016 Daniel Eden
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+.animated.flipOutX,
+.animated.flipOutY,
+.animated.bounceIn,
+.animated.bounceOut {
+  -webkit-animation-duration: .75s;
+  animation-duration: .75s;
+}
+
+@-webkit-keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes pulse {
+  from {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    -webkit-transform: scale3d(1.05, 1.05, 1.05);
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3386523dbf7..f8aecd0558d 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -289,7 +289,7 @@ table {
   text-shadow: none;
 
   @media (min-width: $screen-sm-min) {
-    margin-top: 11px;
+    margin-top: 8px;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 61d9954c6c8..8c96c7a9c31 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -36,22 +36,6 @@
       }
     }
 
-    .filename {
-      &.old {
-        display: inline-block;
-        span.idiff {
-          background-color: #f8cbcb;
-        }
-      }
-
-      &.new {
-        display: inline-block;
-        span.idiff {
-          background-color: #a6f3a6;
-        }
-      }
-    }
-
     a:not(.btn) {
       color: $gl-dark-link-color;
     }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 558b133f593..46acc3b772f 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -28,10 +28,6 @@ input[type='text'].danger {
 }
 
 label {
-  &.control-label {
-    @extend .col-sm-2;
-  }
-
   &.inline-label {
     margin: 0;
   }
@@ -41,6 +37,10 @@ label {
   }
 }
 
+.control-label {
+  @extend .col-sm-2;
+}
+
 .inline-input-group {
   width: 250px;
 }
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index dc4668877f2..16cf394c426 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -9,8 +9,7 @@
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
     .header-logo {
-      background-color: $color;
-      border-color: $color;
+      background: $color-darker;
 
       a {
         color: $color-light;
@@ -21,7 +20,7 @@
       }
 
       &:hover {
-        background-color: $color-darker;
+        background-color: $color-dark;
         a {
           color: #fff;
 
@@ -91,8 +90,8 @@
 }
 
 $theme-blue: #2980b9;
-$theme-charcoal: #333c47;
-$theme-graphite: #888;
+$theme-charcoal: #3d454d;
+$theme-graphite: #666;
 $theme-gray: #373737;
 $theme-green: #019875;
 $theme-violet: #548;
@@ -103,11 +102,11 @@ body {
   }
 
   &.ui_charcoal {
-    @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272d);
+    @include gitlab-theme(#d6d7d9, #485157, $theme-charcoal, #353b41);
   }
 
   &.ui_graphite {
-    @include gitlab-theme(#ccc, $theme-graphite, #777, #666);
+    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
   }
 
   &.ui_gray {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 8190a97ed58..0da96c4017d 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -6,12 +6,12 @@ header {
   transition-duration: .3s;
 
   &.navbar-empty {
-    height: 58px;
+    height: $header-height;
     background: #fff;
     border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
-      margin: 11px 0;
+      margin: 8px 0;
       text-align: center;
 
       #tanuki-logo, img {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f2d7dc625e0..a81fcb1c6b3 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -209,6 +209,15 @@
     float: right;
     padding: 7px 0 0;
 
+    @media (max-width: $screen-xs-min) {
+      float: none;
+      padding: 0 9px;
+
+      .dropdown-new {
+        width: 100%;
+      }
+    }
+
     i {
       color: $layout-link-gray;
     }
@@ -225,6 +234,10 @@
 
     .dropdown {
       margin-left: 7px;
+
+      @media (max-width: $screen-xs-min) {
+        margin-left: 0;
+      }
     }
   }
 
@@ -260,4 +273,10 @@
 
 .page-with-layout-nav {
   margin-top: 50px;
+
+  &.controls-dropdown-visible {
+    @media (max-width: $screen-xs-min) {
+      margin-top: 96px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index bd91f51708c..f90d7a806d3 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -312,7 +312,7 @@
     }
 
     .nav-sidebar li a {
-      width: 230px;
+      width: $sidebar_width;
 
       &.back-link {
         i {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 2779cd56788..3575984b229 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -269,3 +269,11 @@ h1, h2, h3, h4 {
     text-align: right;
   }
 }
+
+.idiff.deletion {
+  background: $line-removed-dark;
+}
+
+.idiff.addition {
+  background: $line-added-dark;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 84e74db06b0..c5a4dbe372c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,7 +2,7 @@
  * Layout
  */
 $sidebar_collapsed_width: 62px;
-$sidebar_width: 230px;
+$sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
@@ -12,7 +12,7 @@ $gutter_inner_width: 258px;
  */
 $border-color:       #e5e5e5;
 $focus-border-color: #3aabf0;
-$table-border-color: #ececec;
+$table-border-color: #f0f0f0;
 $background-color:   #fafafa;
 
 /*
@@ -178,6 +178,7 @@ $table-border-gray: #f0f0f0;
 $line-target-blue: #eaf3fc;
 $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
+
 /*
  * Fonts
  */
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index f870ea0d87f..ff02ebdd34c 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -32,7 +32,7 @@
   }
 }
 
-.zen-cotrol {
+.zen-control {
   padding: 0;
   color: #555;
   background: none;