17 files changed, 306 insertions, 214 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index fab96404a6c..d5fe5bc2ef1 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -91,6 +91,10 @@
     background-color: $white-light;
     border-top: none;
   }
+
+  &.top-block .container-fluid {
+    background-color: inherit;
+  }
 }
 
 .cover-block {
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 408d4a68e1e..0a8603b6702 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -8,8 +8,8 @@
  */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   .page-with-sidebar {
-
-    .collapse-nav a {
+    .toggle-nav-collapse,
+    .pin-nav-btn {
       color: $color-light;
       background: $color;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 63996ea44f6..a7bcb456560 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -2,8 +2,19 @@
  *  Application Header
  *
  */
+@mixin tanuki-logo-colors($path-color) {
+  fill: $path-color;
+  transition: all 0.8s;
+
+  &:hover,
+  &.highlight {
+    fill: lighten($path-color, 25%);
+    transition: all 0.1s;
+  }
+}
+
 header {
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
 
   &.navbar-empty {
     height: $header-height;
@@ -79,14 +90,9 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
-
-      .side-nav-toggle {
-        display: block;
-      }
     }
 
     .side-nav-toggle {
-      display: none;
       position: absolute;
       left: -10px;
       margin: 6px 0;
@@ -108,9 +114,7 @@ header {
   .header-content {
     position: relative;
     height: $header-height;
-    padding-right: 40px;
     padding-left: 30px;
-    transition-duration: .3s;
 
     @media (min-width: $screen-sm-min) {
       padding-right: 0;
@@ -198,25 +202,24 @@ header {
   }
 }
 
-.header-collapsed {
-  margin-left: 0;
+#tanuki-logo {
 
-  .header-content {
-
-    @media (min-width: $screen-sm-max) {
-      padding-left: 30px;
-      transition-duration: .3s;
-    }
+  #tanuki-left-ear,
+  #tanuki-right-ear,
+  #tanuki-nose {
+    @include tanuki-logo-colors($tanuki-red);
   }
-}
 
-.tanuki-shape {
-  transition: all 0.8s;
+  #tanuki-left-eye,
+  #tanuki-right-eye {
+    @include tanuki-logo-colors($tanuki-orange);
+  }
 
-  &:hover, &.highlight {
-    fill: rgb(255, 255, 255);
-    transition: all 0.1s;
+  #tanuki-left-cheek,
+  #tanuki-right-cheek {
+    @include tanuki-logo-colors($tanuki-yellow);
   }
+
 }
 
 @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b34ec16cdba..a12c0bba44a 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -159,7 +159,7 @@ ul.content-list {
       background-color: $gray-light;
       border: dotted 1px $gray-dark;
       margin: 1px 0;
-      min-height: 30px;
+      min-height: 52px;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 829222509f0..a55918f8711 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -242,6 +242,12 @@
       }
     }
   }
+
+  &.adjust {
+    .nav-text, .nav-controls {
+      width: auto;
+    }
+  }
 }
 
 .layout-nav {
@@ -251,7 +257,7 @@
   z-index: 11;
   background: $background-color;
   border-bottom: 1px solid $border-color;
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
   text-align: center;
 
   .container-fluid {
@@ -347,6 +353,12 @@
       .badge {
         color: $gl-icon-color;
       }
+
+      &:hover {
+        a, i {
+          color: $black;
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 4668e7e911b..a0bb3427af0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,26 +1,31 @@
 .page-with-sidebar {
   padding-top: $header-height;
-  transition-duration: .3s;
+  transition: padding $sidebar-transition-duration;
 
   .sidebar-wrapper {
     position: fixed;
     top: 0;
     bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
     left: 0;
     height: 100%;
-    transition-duration: .3s;
+    overflow: hidden;
+    transition: width $sidebar-transition-duration;
   }
 }
 
 .sidebar-wrapper {
   z-index: 1000;
   background: $background-color;
+
+  .nicescroll-rails-hr {
+    // TODO: Figure out why nicescroll doesn't hide horizontal bar
+    display: none!important;
+  }
 }
 
 .content-wrapper {
   width: 100%;
+  transition: padding $sidebar-transition-duration;
 
   .container-fluid {
     background: #fff;
@@ -34,50 +39,39 @@
   }
 }
 
-.sidebar-wrapper {
-
-  .sidebar-user {
-    padding: 15px 22px;
-    position: fixed;
-    bottom: 0;
-    width: $sidebar_width;
-    overflow: hidden;
-    transition-duration: .3s;
+.sidebar-user {
+  padding: 15px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: $sidebar_width;
+  overflow: hidden;
+  font-size: 16px;
+  line-height: 36px;
+  transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
 
-    .username {
-      margin-left: 10px;
-      width: $sidebar_width - 2 * 10px;
-      font-size: 16px;
-      line-height: 34px;
-    }
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 50px;
   }
 }
 
+.nav-sidebar {
+  position: absolute;
+  top: 50px;
+  bottom: 65px;
+  width: $sidebar_width;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-.tanuki-shape {
-  transition: all 0.8s;
-
-  &:hover, &.highlight {
-    fill: rgb(255, 255, 255);
-    transition: all 0.1s;
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 115px;
   }
-}
-
-
-.nav-sidebar {
-  margin-top: 22 + $header-height;
-  margin-bottom: 116px;
-  transition-duration: .3s;
-  list-style: none;
-  overflow: hidden;
 
   &.navbar-collapse {
     padding: 0 !important;
   }
 
   li {
-    width: $sidebar_width;
-
     &.separate-item {
       padding-top: 10px;
       margin-top: 10px;
@@ -90,20 +84,18 @@
     }
 
     a {
-      width: $sidebar_width;
-      padding: 7px 15px 7px 23px;
+      padding: 7px 15px 7px 12px;
       font-size: $gl-font-size;
       line-height: 24px;
       display: block;
       text-decoration: none;
       font-weight: normal;
       outline: none;
+      white-space: nowrap;
 
-      &:hover {
-        text-decoration: none;
-      }
-
-      &:active, &:focus {
+      &:hover,
+      &:active,
+      &:focus {
         text-decoration: none;
       }
 
@@ -115,10 +107,6 @@
       svg {
         margin-right: 13px;
       }
-
-      &.back-link i {
-        transition-duration: .3s;
-      }
     }
   }
 
@@ -129,37 +117,50 @@
   }
 }
 
-.sidebar-subnav {
-  margin-left: 0;
-  padding-left: 0;
-
-  li {
-    list-style: none;
-  }
-}
-
-.collapse-nav a {
+.toggle-nav-collapse {
   width: $sidebar_width;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
+  min-height: 50px;
   padding: 5px 0;
   font-size: 18px;
-  background: transparent;
-  height: 50px;
-  text-align: center;
-  line-height: 40px;
+  line-height: 30px;
+}
+
+.nav-header-btn {
+  padding: 10px 5px;
+  color: inherit;
   transition-duration: .3s;
-  outline: none;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    color: $white-light;
     text-decoration: none;
   }
 }
 
-.sidebar-wrapper {
-  &.hidden-nav {
-    width: 0;
+.pin-nav-btn {
+  display: none;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  width: $sidebar_width;
+  line-height: 30px;
+
+  @media (min-width: $sidebar-breakpoint) {
+    display: block;
+  }
+
+  .fa {
+    transition: transform .15s;
+  }
+
+  &.is-active {
+    .fa {
+      transform: rotate(90deg);
+    }
   }
 }
 
@@ -168,62 +169,34 @@
 
   .sidebar-wrapper {
     width: 0;
-
-    .nav-sidebar {
-      width: 0;
-
-      li {
-        width: auto;
-
-        a {
-          span {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .collapse-nav a {
-      width: 0;
-
-      i {
-        display: none;
-      }
-    }
-
-    .sidebar-user {
-      width: 0;
-      padding-left: 0;
-      padding-right: 0;
-
-      .username {
-        display: none;
-      }
-    }
   }
 }
 
 .page-sidebar-expanded {
-
-  @media (max-width: $screen-sm-max) {
-    padding-left: 0;
-  }
-
   .sidebar-wrapper {
     width: $sidebar_width;
+  }
+}
 
-    .nav-sidebar {
-      width: $sidebar_width;
+.page-sidebar-pinned {
+  .content-wrapper,
+  .layout-nav {
+    @media (min-width: $sidebar-breakpoint) {
+      padding-left: $sidebar_width;
     }
+  }
+}
 
-    .nav-sidebar li a {
-      width: $sidebar_width;
+header.header-pinned-nav {
+  @media (min-width: $sidebar-breakpoint) {
+    padding-left: ($sidebar_width + $gl-padding);
 
-      &.back-link {
-        i {
-          opacity: 0;
-        }
-      }
+    .side-nav-toggle {
+      display: none;
+    }
+
+    .header-content {
+      padding-left: 0;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 752d8ec8788..c37574ca7a1 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -6,6 +6,8 @@ $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
+$sidebar-transition-duration: .15s;
+$sidebar-breakpoint: 1440px;
 
 /*
  * UI elements
@@ -154,6 +156,11 @@ $warning-message-border: #f0e2bb;
 /* header */
 $light-grey-header: #faf9f9;
 
+/* tanuki logo colors */
+$tanuki-red: #e24329;
+$tanuki-orange: #fc6d26;
+$tanuki-yellow: #fca326;
+
 /*
  * State colors:
  */
@@ -261,5 +268,10 @@ $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: #faf9f9;
 
+/*
+ * Personal Access Tokens
+ */
+$personal-access-tokens-disabled-label-color: #bbb;
+
 $ci-output-bg: #1d1f21;
 $ci-text-color: #c5c8c6;
diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss
index 28611a5ec81..9495c5b3f37 100644
--- a/app/assets/stylesheets/mailers/devise.scss
+++ b/app/assets/stylesheets/mailers/devise.scss
@@ -38,6 +38,10 @@ table {
     margin: 0 auto;
     text-align: left;
     width: 600px;
+
+    & > td {
+      text-align: center;
+    }
   }
 
   &#body {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c8c6bbde084..761e33f0df7 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -7,84 +7,111 @@
   margin-right: 9px;
 }
 
-.lists-separator {
-  margin: 10px 0;
-  border-color: #ddd;
+.commit-header {
+  padding: 5px 10px;
+  background-color: $background-color;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  font-size: 14px;
+
+  &:first-child {
+    border-top-width: 0;
+  }
 }
 
-.commits-row {
-  ul {
-    margin: 0;
+.commit-row-title {
+  line-height: 1;
+  margin-bottom: 7px;
 
-    li.commit {
-      padding: 8px 0;
-    }
+  .notes_count {
+    float: right;
+    margin-right: 10px;
+  }
+
+  .str-truncated {
+    max-width: 70%;
   }
 
-  .commits-row-date {
-    font-size: 15px;
-    line-height: 20px;
-    margin-bottom: 5px;
+  .commit-row-message {
+    color: $gl-dark-link-color;
+  }
+
+  .text-expander {
+    display: inline-block;
+    background: $gray-light;
+    color: $gl-placeholder-color;
+    padding: 0 5px;
+    cursor: pointer;
+    border: 1px solid $border-gray-dark;
+    border-radius: $border-radius-default;
+    margin-left: 5px;
+
+    &:hover {
+      background-color: darken($gray-light, 10%);
+      text-decoration: none;
+    }
   }
 }
 
-li.commit {
-  list-style: none;
+.commit-actions {
+  @media (min-width: $screen-sm-min) {
+    float: right;
+    margin-left: $gl-padding;
+    margin-top: 2px;
+    font-size: 0;
+  }
 
-  .commit-row-title {
-    font-size: $list-font-size;
-    line-height: 20px;
-    margin-bottom: 2px;
+  .btn-transparent {
+    padding-left: 0;
+    padding-right: 0;
+  }
 
-    .btn-clipboard {
-      margin-top: -1px;
+  .btn {
+    &:not(:first-child) {
+      margin-left: $gl-padding;
     }
+  }
+}
 
-    .notes_count {
-      float: right;
-      margin-right: 10px;
-    }
+.commit-short-id {
+  font-family: $monospace_font;
+  font-weight: 600;
+}
 
-    .commit_short_id {
-      min-width: 65px;
-      color: $gl-dark-link-color;
-      font-family: $monospace_font;
-    }
+.commit {
+  padding: 10px 0;
 
-    .str-truncated {
-      max-width: 70%;
-    }
+  @media (min-width: $screen-sm-min) {
+    padding-left: 46px;
+  }
 
-    .commit-row-message {
-      color: $gl-dark-link-color;
+  &:not(:last-child) {
+    border-bottom: 1px solid #eee;
+  }
 
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+  a,
+  button {
+    color: $gl-dark-link-color;
+    vertical-align: baseline;
+  }
 
-    .text-expander {
-      background: #eee;
-      color: #555;
-      padding: 0 5px;
-      cursor: pointer;
-      margin-left: 4px;
-      &:hover {
-        background-color: #ddd;
-      }
-    }
+  .avatar {
+    margin-left: -46px;
   }
 
   .item-title {
     display: inline-block;
-    max-width: 70%;
+
+    @media (min-width: $screen-sm-min) {
+      max-width: 70%;
+    }
   }
 
   .commit-row-description {
     font-size: 14px;
     border-left: 1px solid #eee;
     padding: 10px 15px;
-    margin: 5px 0 10px 5px;
+    margin: 10px 0;
     background: #f9f9f9;
     display: none;
 
@@ -93,6 +120,7 @@ li.commit {
       background: inherit;
       padding: 0;
       margin: 0;
+      white-space: pre-wrap;
     }
 
     a {
@@ -102,7 +130,7 @@ li.commit {
 
   .commit-row-info {
     color: $gl-gray;
-    line-height: 24px;
+    line-height: 1;
 
     a {
       color: $gl-gray;
@@ -111,10 +139,6 @@ li.commit {
     .avatar {
       margin-right: 8px;
     }
-
-    .committed_ago {
-      display: inline-block;
-    }
   }
 
   &.inline-commit {
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 22679c764dc..a34b06f1054 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -66,8 +66,7 @@
     font-family: $regular_font;
   }
 
-  .gitignore-selector {
-
+  .gitignore-selector, .license-selector {
     .dropdown {
       line-height: 21px;
     }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f57845ad9c9..687117233f6 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -145,7 +145,6 @@
 
       .assign-yourself {
         margin-top: 10px;
-        font-weight: normal;
         display: block;
       }
     }
@@ -158,6 +157,10 @@
       font-weight: normal;
     }
 
+    .no-value {
+      color: $gl-placeholder-color;
+    }
+
     .sidebar-collapsed-icon {
       display: none;
     }
@@ -248,11 +251,16 @@
       padding-bottom: 0;
       margin-bottom: 10px;
     }
+
+    .issuable-header-btn {
+      display: none;
+    }
   }
 
   .issuable-header-btn {
     background: $gray-normal;
     border: 1px solid $border-gray-normal;
+    
     &:hover {
       background: $gray-dark;
       border: 1px solid $border-gray-dark;
@@ -322,7 +330,7 @@
   margin-left: 5px;
 
   a {
-    color: #8c8c8c;
+    color: $gl-placeholder-color;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index bc65404a741..046c38aba44 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -115,6 +115,13 @@
   }
 }
 
+.draggable-handler {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity .3s;
+  color: $gray-darkest;
+}
+
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -122,6 +129,13 @@
     display: none;
     color: $gray-light;
   }
+
+  li:hover {
+    .draggable-handler {
+      display: inline-block;
+      opacity: 1;
+    }
+  }
 }
 
 .other-labels {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a47f2580aa3..e67271adfb1 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -244,6 +244,10 @@
 
   .panel-footer {
     padding: 5px 10px;
+
+    .btn {
+      min-width: auto;
+    }
   }
 
   .commit {
@@ -252,9 +256,7 @@
     }
 
     .avatar {
-      width: 20px;
-      height: 20px;
-      margin-right: 5px;
+      margin-left: 0;
     }
 
     .commit-row-info {
@@ -313,3 +315,13 @@
     }
   }
 }
+
+.merged-buttons {
+  .btn {
+    float: left;
+
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 0c084118753..35d728aec83 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -139,6 +139,12 @@ ul.notes {
       @media (min-width: $screen-sm-min) {
         padding-right: 0;
       }
+
+      @media (max-width: $screen-xs-min) {
+        .inline {
+          display: block;
+        }
+      }
     }
 
     .note-emoji-button {
@@ -258,7 +264,11 @@ ul.notes {
   position: absolute;
   right: 0;
   top: 0;
-  
+
+  .note-action-button {
+    margin-left: 10px;
+  }
+
   @media (min-width: $screen-sm-min) {
     position: relative;
   }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 167ab40d881..46371ec6871 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -192,6 +192,25 @@
   }
 }
 
+.personal-access-tokens-never-expires-label {
+  color: $personal-access-tokens-disabled-label-color;
+}
+
+.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
+  text-align: center;
+}
+
+.created-personal-access-token-container {
+  #created-personal-access-token {
+    width: 90%;
+    display: inline;
+  }
+
+  .btn-clipboard {
+    margin-left: 5px;
+  }
+}
+
 .user-profile {
   @media (max-width: $screen-xs-max) {
     .cover-block {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 768e2ad7665..ed8e9d6915b 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -5,10 +5,12 @@
     font-weight: normal;
   }
 }
+
 .no-ssh-key-message, .project-limit-message {
   background-color: #f28d35;
   margin-bottom: 0;
 }
+
 .new_project,
 .edit-project {
   fieldset.features {
@@ -18,13 +20,6 @@
   }
 }
 
-.project-name-holder {
-  .help-inline {
-    vertical-align: top;
-    padding: 7px;
-  }
-}
-
 .project-home-panel {
   background: $white-light;
   text-align: left;
@@ -33,7 +28,7 @@
   .container-fluid {
     position: relative;
 
-    @media (min-width: $screen-md-max) {
+    @media (min-width: $screen-lg-min) {
       .row {
         display: flex;
         -ms-flex-align: center;
@@ -224,7 +219,7 @@
     right: 16px;
     bottom: 0;
 
-    @media (max-width: $screen-lg-min) {
+    @media (max-width: $screen-md-max) {
       top: 0;
     }
 
@@ -233,7 +228,7 @@
       right: 0;
       bottom: 61px;
 
-      @media (max-width: $screen-lg-min) {
+      @media (max-width: $screen-md-max) {
         position: relative;
         bottom: 0;
         margin-right: 10px;
@@ -371,6 +366,7 @@ a.deploy-project-label {
 
 .project-import .btn {
   float: left;
+  margin-bottom: 10px;
   margin-right: 10px;
 }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index f16fc7f388f..99c9e81ddb9 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -101,7 +101,7 @@
   margin: 0;
 
   .commit {
-    padding: 0;
+    padding: 0 0 0 55px;
 
     .commit-row-title {
       .commit-row-message {
@@ -129,4 +129,6 @@
 .tree-controls {
   float: right;
   margin-top: 11px;
+  position: relative;
+  z-index: 2;
 }