Merge branch 'master' into docs_refactordocs_refactor

55 files changed, 362 insertions, 492 deletions

diff --git a/app/assets/fonts/SourceSansPro-Black.ttf.woff2 b/app/assets/fonts/SourceSansPro-Black.ttf.woff2
new file mode 100755
index 00000000000..c90d078406c
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-Black.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2
new file mode 100755
index 00000000000..b87e22c41b5
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-Bold.ttf.woff2 b/app/assets/fonts/SourceSansPro-Bold.ttf.woff2
new file mode 100755
index 00000000000..0f46f3e833a
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-Bold.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2
new file mode 100755
index 00000000000..8007df6df32
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2 b/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2
new file mode 100755
index 00000000000..b715f274082
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2
new file mode 100755
index 00000000000..d8f9d29d4aa
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-It.ttf.woff2 b/app/assets/fonts/SourceSansPro-It.ttf.woff2
new file mode 100755
index 00000000000..a00852641f8
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-It.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-Light.ttf.woff2 b/app/assets/fonts/SourceSansPro-Light.ttf.woff2
new file mode 100755
index 00000000000..d8b610ad76e
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-Light.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2
new file mode 100755
index 00000000000..e0eebac8273
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-Regular.ttf.woff2 b/app/assets/fonts/SourceSansPro-Regular.ttf.woff2
new file mode 100755
index 00000000000..0dd3464c74b
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-Regular.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2 b/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2
new file mode 100755
index 00000000000..2526d2e1b60
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2
diff --git a/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2
new file mode 100755
index 00000000000..606935af089
--- /dev/null
+++ b/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2
diff --git a/app/assets/javascripts/activities.js.coffee b/app/assets/javascripts/activities.js.coffee
index 63803747413..3b6b453ac51 100644
--- a/app/assets/javascripts/activities.js.coffee
+++ b/app/assets/javascripts/activities.js.coffee
@@ -1,7 +1,7 @@
 class @Activities
   constructor: ->
     Pager.init 20, true
-    $(".event-filter .btn").bind "click", (event) =>
+    $(".event-filter a").bind "click", (event) =>
       event.preventDefault()
       @toggleFilter($(event.currentTarget))
       @reloadActivities()
@@ -12,7 +12,7 @@ class @Activities
 
 
   toggleFilter: (sender) ->
-    sender.toggleClass "active"
+    sender.closest('li').toggleClass "active"
     event_filters = $.cookie("event_filter")
     filter = sender.attr("id").split("_")[0]
     if event_filters
diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index bcb2e6df7c0..eb951f71711 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -10,19 +10,19 @@ class @Admin
 
     $('body').on 'click', '.js-toggle-colors-link', (e) ->
       e.preventDefault()
-      $('.js-toggle-colors-link').hide()
-      $('.js-toggle-colors-container').show()
+      $('.js-toggle-colors-container').toggle()
 
     $('input#broadcast_message_color').on 'input', ->
-      previewColor = $('input#broadcast_message_color').val()
+      previewColor = $(@).val()
       $('div.broadcast-message-preview').css('background-color', previewColor)
 
     $('input#broadcast_message_font').on 'input', ->
-      previewColor = $('input#broadcast_message_font').val()
+      previewColor = $(@).val()
       $('div.broadcast-message-preview').css('color', previewColor)
 
     $('textarea#broadcast_message_message').on 'input', ->
-      previewMessage = $('textarea#broadcast_message_message').val()
+      previewMessage = $(@).val()
+      previewMessage = "Your message here" if previewMessage.trim() == ''
       $('div.broadcast-message-preview span').text(previewMessage)
 
     $('.log-tabs a').click (e) ->
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 619abb1fb07..4670c95344d 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -5,7 +5,7 @@ class @AwardsHandler
       event.preventDefault()
       $(".emoji-menu").show()
 
-    $("html").click ->
+    $("html").on 'click', (event) ->
       if !$(event.target).closest(".emoji-menu").length
         if $(".emoji-menu").is(":visible")
           $(".emoji-menu").hide()
diff --git a/app/assets/javascripts/behaviors/autosize.js.coffee b/app/assets/javascripts/behaviors/autosize.js.coffee
new file mode 100644
index 00000000000..b32072e61ee
--- /dev/null
+++ b/app/assets/javascripts/behaviors/autosize.js.coffee
@@ -0,0 +1,4 @@
+#= require autosize
+
+$ ->
+  autosize($('.js-autosize'))
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index c256ec8f41b..cbc70cd846c 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -6,22 +6,40 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-
+    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
+  fixAffixScroll: ->
+    fixAffix = ->
+      $discussion = $('.issuable-discussion')
+      $sidebar = $('.issuable-sidebar')
+      if $sidebar.hasClass('no-affix')
+        $sidebar.removeClass(['affix-top','affix'])
+      discussionHeight = $discussion.height()
+      sidebarHeight = $sidebar.height()
+      if sidebarHeight > discussionHeight
+        $discussion.height(sidebarHeight + 50)
+        $sidebar.addClass('no-affix')
+    $(window).on('resize', fixAffix)
+    fixAffix()
+
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
 
   initIssueBtnEventListeners: ->
+    _this = @
     issueFailMessage = 'Unable to update this issue at this time.'
     $('a.btn-close, a.btn-reopen').on 'click', (e) ->
       e.preventDefault()
       e.stopImmediatePropagation()
       $this = $(this)
       isClose = $this.hasClass('btn-close')
+      shouldSubmit = $this.hasClass('btn-comment')
+      if shouldSubmit
+        _this.submitNoteForm($this.closest('form'))
       $this.prop('disabled', true)
       url = $this.attr('href')
       $.ajax
@@ -32,12 +50,13 @@ class @Issue
           new Flash(issueFailMessage, 'alert')
         success: (data, textStatus, jqXHR) ->
           if data.saved
-            $this.addClass('hidden')
             if isClose
+              $('a.btn-close').addClass('hidden')
               $('a.btn-reopen').removeClass('hidden')
               $('div.status-box-closed').removeClass('hidden')
               $('div.status-box-open').addClass('hidden')
             else
+              $('a.btn-reopen').addClass('hidden')
               $('a.btn-close').removeClass('hidden')
               $('div.status-box-closed').addClass('hidden')
               $('div.status-box-open').removeClass('hidden')
@@ -45,6 +64,11 @@ class @Issue
             new Flash(issueFailMessage, 'alert')
           $this.prop('disabled', false)
 
+  submitNoteForm: (form) =>
+    noteText = form.find("textarea.js-note-text").val()
+    if noteText.trim().length > 0
+      form.submit()
+
   disableTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('disable')
     $(document).off 'tasklist:changed', '.detail-page-description .js-task-list-container'
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 9047587db81..6af5a48a0bb 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -15,10 +15,13 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
+    @fixAffixScroll();
+
     @initTabs()
 
     # Prevent duplicate event bindings
     @disableTaskList()
+    @initMRBtnListeners()
 
     if $("a.btn-close").length
       @initTaskList()
@@ -27,6 +30,20 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
+  fixAffixScroll: ->
+    fixAffix = ->
+      $discussion = $('.issuable-discussion')
+      $sidebar = $('.issuable-sidebar')
+      if $sidebar.hasClass('no-affix')
+        $sidebar.removeClass(['affix-top','affix'])
+      discussionHeight = $discussion.height()
+      sidebarHeight = $sidebar.height()
+      if sidebarHeight > discussionHeight
+        $discussion.height(sidebarHeight + 50)
+        $sidebar.addClass('no-affix')
+    $(window).on('resize', fixAffix)
+    fixAffix()
+
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
@@ -43,6 +60,28 @@ class @MergeRequest
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
 
+  initMRBtnListeners: ->
+    _this = @
+    $('a.btn-close, a.btn-reopen').on 'click', (e) ->
+      $this = $(this)
+      shouldSubmit = $this.hasClass('btn-comment')
+      if shouldSubmit && $this.data('submitted')
+        return
+      if shouldSubmit
+        if $this.hasClass('btn-comment-and-close') || $this.hasClass('btn-comment-and-reopen')
+          e.preventDefault()
+          e.stopImmediatePropagation()
+          _this.submitNoteForm($this.closest('form'),$this)
+
+
+  submitNoteForm: (form, $button) =>
+    noteText = form.find("textarea.js-note-text").val()
+    if noteText.trim().length > 0
+      form.submit()
+      $button.data('submitted',true)
+      $button.trigger('click')
+
+
   disableTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('disable')
     $(document).off 'tasklist:changed', '.detail-page-description .js-task-list-container'
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 9e2dc1250c9..b10e1db7f3f 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -5,7 +5,7 @@
 #
 # ### Example Markup
 #
-#   <ul class="nav nav-tabs merge-request-tabs">
+#   <ul class="nav-links merge-request-tabs">
 #     <li class="notes-tab active">
 #       <a data-action="notes" data-target="#notes" data-toggle="tab" href="/foo/bar/merge_requests/1">
 #         Discussion
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 9e5204bfeeb..2bfc5cb2d9c 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -1,4 +1,5 @@
 #= require autosave
+#= require autosize
 #= require dropzone
 #= require dropzone_input
 #= require gfm_auto_complete
@@ -33,8 +34,6 @@ class @Notes
     $(document).on "click", ".note-edit-cancel", @cancelEdit
 
     # Reopen and close actions for Issue/MR combined with note form submit
-    $(document).on "click", ".js-note-target-reopen", @targetReopen
-    $(document).on "click", ".js-note-target-close", @targetClose
     $(document).on "click", ".js-comment-button", @updateCloseButton
     $(document).on "keyup", ".js-note-text", @updateTargetButtons
 
@@ -248,6 +247,7 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    autosize(textarea)
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -320,6 +320,7 @@ class @Notes
     form.show()
     textarea = form.find("textarea")
     textarea.focus()
+    autosize(textarea)
 
     # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
     # The textarea has the correct value, Chrome just won't show it unless we
@@ -355,7 +356,7 @@ class @Notes
     $('.note[id="' + note_id + '"]').each ->
       note = $(this)
       notes = note.closest(".notes")
-      count = notes.closest(".notes_holder").find(".discussion-notes-count")
+      count = notes.closest(".issuable-details").find(".notes-tab .badge")
 
       # check if this is the last note for this line
       if notes.find(".note").length is 1
@@ -365,9 +366,10 @@ class @Notes
 
         # for diff lines
         notes.closest("tr").remove()
-      else
-        # update notes count
-        count.get(0).lastChild.nodeValue = " #{notes.children().length - 1}"
+
+      # update notes count
+      oldNum = parseInt(count.text())
+      count.text(oldNum - 1)
 
       note.remove()
 
@@ -512,17 +514,6 @@ class @Notes
   visibilityChange: =>
     @refresh()
 
-  targetReopen: (e) =>
-    @submitNoteForm($(e.target).parents('form'))
-
-  targetClose: (e) =>
-    @submitNoteForm($(e.target).parents('form'))
-
-  submitNoteForm: (form) =>
-    noteText = form.find(".js-note-text").val()
-    if noteText.trim().length > 0
-      form.submit()
-
   updateCloseButton: (e) =>
     textarea = $(e.target)
     form = textarea.parents('form')
@@ -531,13 +522,16 @@ class @Notes
   updateTargetButtons: (e) =>
     textarea = $(e.target)
     form = textarea.parents('form')
-
     if textarea.val().trim().length > 0
       form.find('.js-note-target-reopen').text('Comment & reopen')
       form.find('.js-note-target-close').text('Comment & close')
+      form.find('.js-note-target-reopen').addClass('btn-comment-and-reopen')
+      form.find('.js-note-target-close').addClass('btn-comment-and-close')
     else
       form.find('.js-note-target-reopen').text('Reopen')
       form.find('.js-note-target-close').text('Close')
+      form.find('.js-note-target-reopen').removeClass('btn-comment-and-reopen')
+      form.find('.js-note-target-close').removeClass('btn-comment-and-close')
 
   initTaskList: ->
     @enableTaskList()
diff --git a/app/assets/javascripts/wikis.js.coffee b/app/assets/javascripts/wikis.js.coffee
index 81cfc37b956..19420f42468 100644
--- a/app/assets/javascripts/wikis.js.coffee
+++ b/app/assets/javascripts/wikis.js.coffee
@@ -1,17 +1,18 @@
+#= require latinise
+
 class @Wikis
   constructor: ->
-    $('.build-new-wiki').bind "click", (e) ->
-      $('[data-error~=slug]').addClass("hidden")
-      $('p.hint').show()
+    $('.build-new-wiki').bind 'click', (e) =>
+      $('[data-error~=slug]').addClass('hidden')
       field = $('#new_wiki_path')
-      valid_slug_pattern = /^[\w\/-]+$/
+      slug = @slugify(field.val())
 
-      slug = field.val()
-      if slug.match valid_slug_pattern
+      if (slug.length > 0)
         path = field.attr('data-wikis-path')
-        if(slug.length > 0)
-          location.href = path + "/" + slug
-      else
-        e.preventDefault()
-        $('p.hint').hide()
-        $('[data-error~=slug]').removeClass("hidden")
+        location.href = path + '/' + slug
+
+  dasherize: (value) ->
+    value.replace(/[_\s]+/g, '-')
+
+  slugify: (value) =>
+    @dasherize(value.trim().toLowerCase().latinise())
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 48a4971c8fc..fa7641b1676 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -24,6 +24,7 @@
 @import "framework/lists.scss";
 @import "framework/markdown_area.scss";
 @import "framework/mobile.scss";
+@import "framework/nav.scss";
 @import "framework/pagination.scss";
 @import "framework/panels.scss";
 @import "framework/selects.scss";
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index fa0e70847f3..d0f5d33bf4d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -18,9 +18,9 @@
   line-height: 36px;
 }
 
-.content-block,
 .gray-content-block {
-  margin: -$gl-padding;
+  margin-top: 0;
+  margin-bottom: -$gl-padding;
   background-color: $background-color;
   padding: $gl-padding;
   margin-bottom: 0px;
@@ -86,10 +86,7 @@
 .cover-block {
   text-align: center;
   background: $background-color;
-  margin: -$gl-padding;
-  margin-bottom: 0;
-  padding: 44px $gl-padding;
-  border-bottom: 1px solid $border-color;
+  padding-top: 44px;
   position: relative;
 
   .avatar-holder {
@@ -136,3 +133,19 @@
 .block-connector {
   margin-top: -1px;
 }
+
+.nav-block {
+  .controls {
+    float: right;
+    margin-top: 11px;
+  }
+}
+
+.content-block {
+  padding: $gl-padding 0;
+  border-bottom: 1px solid $border-color;
+
+  &.oneline-block {
+    line-height: 42px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 97a94638847..c99292c3f83 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,12 +1,8 @@
 @mixin btn-default {
   @include border-radius(3px);
-  border-width: 1px;
-  border-style: solid;
-  font-size: 15px;
+  font-size: $gl-font-size;
   font-weight: 500;
-  line-height: 18px;
-  padding: 11px $gl-padding;
-  letter-spacing: .4px;
+  padding: $gl-vert-padding $gl-padding;
 
   &:focus,
   &:active {
@@ -17,8 +13,6 @@
 
 @mixin btn-middle {
   @include btn-default;
-  @include border-radius(3px);
-  padding: 11px 24px;
 }
 
 @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
@@ -74,16 +68,15 @@
   @include btn-default;
   @include btn-white;
 
+  &.btn-small,
   &.btn-sm {
-    padding: 5px 10px;
-  }
-
-  &.btn-nr {
-    padding: 7px 10px;
+    padding: 4px 10px;
+    font-size: 13px;
+    line-height: 18px;
   }
 
   &.btn-xs {
-    padding: 1px 5px;
+    padding: 2px 5px;
   }
 
   &.btn-success,
@@ -131,6 +124,12 @@
     &:last-child {
       margin-right: 0px;
     }
+    &.btn-xs {
+      margin-right: 3px;
+    }
+  }
+  &.disabled {
+    pointer-events: auto !important;
   }
 }
 
@@ -153,33 +152,42 @@
   }
 }
 
-.btn-group-next {
+.btn-clipboard {
+  border: none;
+  padding: 0 5px;
+}
+
+.input-group-btn {
   .btn {
-    padding: 9px 0px;
-    font-size: 15px;
-    color: #7f8fa4;
-    border-color: #e7e9ed;
-    width: 140px;
-
-    .badge {
-      font-weight: normal;
-      background-color: #eee;
-      color: #78a;
+    @include btn-gray;
+    @include btn-middle;
+
+    &:hover {
+      outline: none;
     }
 
-    &.active {
-      border-color: $gl-info;
-      background: $gl-info;
-      color: #fff;
+    &:focus {
+      outline: none;
+    }
+
+    &:active {
+      outline: none;
+    }
 
-      .badge {
-        color: $gl-info;
-        background-color: white;
-      }
+    &.btn-clipboard {
+      padding-left: 15px;
+      padding-right: 15px;
     }
   }
-}
 
-.btn-clipboard {
-  border: none;
+  .active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+
+    border: 1px solid #c6cacf !important;
+    background-color: #e4e7ed !important;
+  }
+
+  .btn-green {
+    @include btn-green
+  }
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 11730000f85..585a9d83913 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -75,6 +75,8 @@ hr {
   @include str-truncated;
 }
 
+.item-title { font-weight: 600; }
+
 /** FLASH message **/
 .author_link {
   color: $gl-link-color;
@@ -374,75 +376,6 @@ table {
   }
 }
 
-.center-top-menu, .left-top-menu {
-  @include nav-menu;
-  text-align: center;
-  margin-top: 5px;
-  margin-bottom: $gl-padding;
-  height: auto;
-  margin-top: -$gl-padding;
-
-  &.no-bottom {
-    margin-bottom: 0;
-  }
-
-  &.no-top {
-    margin-top: 0;
-  }
-
-  li a {
-    display: inline-block;
-    padding-top: $gl-padding;
-    padding-bottom: 11px;
-    margin-bottom: -1px;
-  }
-
-  &.bottom-border {
-    border-bottom: 1px solid $border-color;
-    height: 57px;
-  }
-
-  &.wide {
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
-  }
-}
-
-.left-top-menu {
-  text-align: left;
-  border-bottom: 1px solid #EEE;
-}
-
-.center-middle-menu {
-  @include nav-menu;
-  padding: 0;
-  text-align: center;
-  margin: -$gl-padding;
-  margin-top: 0;
-  margin-bottom: 0;
-  height: 58px;
-  border-bottom: 1px solid $border-color;
-
-  li {
-    &:after {
-      content: "|";
-      color: $border-gray-light;
-    }
-
-    &:last-child {
-      &:after {
-        content: none;
-      }
-    }
-
-    > a {
-      display: inline-block;
-      text-transform: uppercase;
-      font-size: 13px;
-    }
-  }
-}
-
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
 }
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index cbfd4bc29b6..6ee104ee31a 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -3,11 +3,8 @@
  *
  */
 .file-holder {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
   border: none;
-  border-top: 1px solid #E7E9EE;
-  border-bottom: 1px solid #E7E9EE;
+  border: 1px solid $border-color;
 
   &.readme-holder {
     border-bottom: 0;
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 82eb50ad4be..1bfd0213995 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -8,10 +8,12 @@
   .flash-notice {
     @extend .alert;
     @extend .alert-info;
+    margin: 0;
   }
 
   .flash-alert {
     @extend .alert;
     @extend .alert-danger;
+    margin: 0;
   }
 }
diff --git a/app/assets/stylesheets/framework/fonts.scss b/app/assets/stylesheets/framework/fonts.scss
index 20988f7b430..7a946109e3a 100644
--- a/app/assets/stylesheets/framework/fonts.scss
+++ b/app/assets/stylesheets/framework/fonts.scss
@@ -3,23 +3,39 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), font-url('SourceSansPro-Light.ttf.woff');
+  src:
+    local('Source Sans Pro Light'),
+    local('SourceSansPro-Light'),
+    font-url('SourceSansPro-Light.ttf.woff2') format('woff2'),
+    font-url('SourceSansPro-Light.ttf.woff') format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), font-url('SourceSansPro-Regular.ttf.woff');
+  src:
+    local('Source Sans Pro'),
+    local('SourceSansPro-Regular'),
+    font-url('SourceSansPro-Regular.ttf.woff2') format('woff2'),
+    font-url('SourceSansPro-Regular.ttf.woff') format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), font-url('SourceSansPro-Semibold.ttf.woff');
+  src:
+    local('Source Sans Pro Semibold'),
+    local('SourceSansPro-Semibold'),
+    font-url('SourceSansPro-Semibold.ttf.woff2') format('woff2'),
+    font-url('SourceSansPro-Semibold.ttf.woff') format('woff');
 }
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), font-url('SourceSansPro-Bold.ttf.woff');
+  src:
+    local('Source Sans Pro Bold'),
+    local('SourceSansPro-Bold'),
+    font-url('SourceSansPro-Bold.ttf.woff2') format('woff2'),
+    font-url('SourceSansPro-Bold.ttf.woff') format('woff');
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 032d343df44..4dab806d50e 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -74,8 +74,10 @@ label {
 
 .form-control {
   @include box-shadow(none);
-  height: 42px;
-  padding: 8px $gl-padding;
+}
+
+.form-control-inline {
+  display: inline;
 }
 
 .wiki-content {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 4dbbb56104b..ba5e72c8c5a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -28,6 +28,7 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
+    border-bottom: 1px solid #EEE;
 
     .container-fluid {
       width: 100% !important;
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index a1a9990241d..e901c78d02f 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -5,8 +5,6 @@ html {
 }
 
 body {
-  background-color: #F3F3F3 !important;
-
   &.navless {
     background-color: white !important;
   }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 1c74e525a60..c6bc6fb324d 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -74,7 +74,7 @@
 
 
 /** light list with border-bottom between li **/
-ul.bordered-list {
+ul.bordered-list, ul.unstyled-list {
   @include basic-list;
 
   &.top-list {
@@ -88,6 +88,10 @@ ul.bordered-list {
   }
 }
 
+ul.unstyled-list > li {
+  border-bottom: none;
+}
+
 ul.task-list {
   li.task-list-item {
     list-style-type: none;
@@ -105,10 +109,8 @@ ul.content-list {
   padding: 0;
 
   > li {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
     color: $gl-gray;
 
     .avatar {
@@ -129,6 +131,7 @@ ul.content-list {
 .panel > .content-list {
   li {
     margin: 0;
+    padding: $gl-padding;
   }
 }
 
@@ -144,7 +147,7 @@ ul.controls {
   > li {
     float: left;
     margin-right: 10px;
-    
+
     &:last-child {
       margin-right: 0;
     }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 4a00a197d9a..6732343802a 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -65,13 +65,6 @@
   position: relative;
 }
 
-.md-header {
-  ul {
-    float: left;
-    margin-bottom: 1px;
-  }
-}
-
 .referenced-users {
   color: #4c4e54;
   padding-top: 10px;
@@ -85,28 +78,12 @@
   box-shadow: none;
 }
 
-.new_note,
-.edit_note,
-.detail-page-description,
-.milestone-description,
-.wiki-content,
-.merge-request-form {
-  .nav-tabs {
-    margin-bottom: 0;
-    border: none;
-
-    li a,
-    li.active a {
-      border: 1px solid #DDD;
-    }
-  }
-}
-
 .markdown-area {
   @include border-radius(0);
   background: #FFF;
   border: 1px solid #ddd;
   min-height: 140px;
+  max-height: 430px;
   padding: 5px;
   box-shadow: none;
   width: 100%;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 41fd890f14f..1d5000fe388 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -118,38 +118,3 @@
   font-size: 16px;
   line-height: 24px;
 }
-
-@mixin nav-menu {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  height: 56px;
-
-  li {
-    display: inline-block;
-
-    a {
-      padding: 14px;
-      font-size: 15px;
-      line-height: 28px;
-      color: #959494;
-      border-bottom: 2px solid transparent;
-
-      &:hover, &:active, &:focus {
-        text-decoration: none;
-        outline: none;
-      }
-    }
-
-    &.active a {
-      color: #616060;
-      border-bottom: 2px solid #4688f1;
-    }
-
-    .badge {
-      font-weight: normal;
-      background-color: #eee;
-      color: #78a;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index c00709fb6bb..0997dfc287c 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -9,7 +9,7 @@
     padding-right: 5px;
   }
 
-  .nav.nav-tabs > li > a {
+  .nav-links > li > a {
     padding: 10px;
     font-size: 12px;
     margin-right: 3px;
@@ -81,7 +81,7 @@
     display: none;
   }
 
-  .center-top-menu, .left-top-menu {
+  .nav-links, .nav-links {
     li a {
       font-size: 14px;
       padding: 19px 10px;
@@ -100,11 +100,6 @@
 }
 
 @media (max-width: $screen-sm-max) {
-  .page-with-sidebar .content-wrapper {
-    padding: 0;
-    padding-top: 1px;
-  }
-
   .issues-filters {
     .milestone-filter, .labels-filter {
       display: none;
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
new file mode 100644
index 00000000000..c537d97fb24
--- /dev/null
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -0,0 +1,39 @@
+.nav-links {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  height: auto;
+  border-bottom: 1px solid $border-color;
+
+  li {
+    display: inline-block;
+
+    a {
+      display: inline-block;
+      padding: 14px;
+      padding-top: $gl-padding;
+      padding-bottom: 11px;
+      margin-bottom: -1px;
+      font-size: 15px;
+      line-height: 28px;
+      color: #959494;
+      border-bottom: 2px solid transparent;
+
+      &:hover, &:active, &:focus {
+        text-decoration: none;
+        outline: none;
+      }
+    }
+
+    &.active a {
+      color: #000000;
+      border-bottom: 2px solid #4688f1;
+    }
+
+    .badge {
+      font-weight: normal;
+      background-color: #eee;
+      color: #78a;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index af145191bc8..3ee3443e349 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -3,8 +3,8 @@
   .select2-choice {
     background: #FFF;
     border-color: #DDD;
-    height: 42px;
-    padding: 8px $gl-padding;
+    height: 36px;
+    padding: 6px $gl-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 83243dd2457..540d0b03163 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -21,11 +21,10 @@
 
 .content-wrapper {
   width: 100%;
-  padding: 20px;
 
   .container-fluid {
     background: #FFF;
-    padding: $gl-padding;
+    padding: 0 $gl-padding;
 
     &.container-blank {
       background: none;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 793ab3d9bb9..c4e9f467ce4 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -1,13 +1,11 @@
 .table-holder {
-  margin: -$gl-padding;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0;
 }
 
 table {
   &.table {
     margin-bottom: $gl-padding;
-    
+
     .dropdown-menu a {
       text-decoration: none;
     }
@@ -32,6 +30,7 @@ table {
       }
 
       th {
+        background-color: $background-color;
         font-weight: normal;
         font-size: 15px;
         border-bottom: 1px solid $border-color !important;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index ff41e26ed8a..47b843e5e3d 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -5,10 +5,8 @@
   padding: 0;
 
   .timeline-entry {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
     color: $gl-gray;
     border-bottom: 1px solid $border-white-light;
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 94f0ed761df..88072606bf5 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -99,47 +99,6 @@
   }
 }
 
-// Nav tabs
-.nav.nav-tabs {
-  margin-bottom: 15px;
-
-  li {
-    > a {
-      margin-right: 5px;
-      line-height: 20px;
-      border-color: #EEE;
-      color: #888;
-      border-bottom: 1px solid #ddd;
-      .badge {
-        background-color: #eee;
-        color: #888;
-        text-shadow: 0 1px 1px #fff;
-      }
-      i.fa {
-        line-height: 14px;
-      }
-    }
-    &.active {
-      > a {
-        border-color: #CCC;
-        border-bottom: 1px solid #fff;
-        color: #333;
-        font-weight: bold;
-      }
-    }
-  }
-}
-
-.nav-tabs > li > a,
-.nav-pills > li > a {
-  color: #666;
-}
-
-.nav-pills > .active > a > span > .badge {
-  background-color: #fff;
-  color: $gl-primary;
-}
-
 
 /**
  * fix to keep tooltips position in top navigation bar
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 63868a34e2a..cd0621cdbf3 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -46,7 +46,7 @@ $font-size-base:         $gl-font-size;
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$padding-base-vertical:     9px;
+$padding-base-vertical:     $gl-vert-padding;
 $padding-base-horizontal:   $gl-padding;
 $component-active-color:    #fff;
 $component-active-bg:       $brand-info;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 714369d9f15..ab4f71af039 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -177,7 +177,7 @@ body {
 }
 
 .page-title {
-  margin-top: 0px;
+  margin-top: $gl-padding;
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: 600;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index af75123b0af..85ecdddda79 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -22,8 +22,10 @@ $header-height: 58px;
 $fixed-layout-width: 1280px;
 $gl-gray: #5a5a5a;
 $gl-padding: 16px;
+$gl-vert-padding: 6px;
 $gl-padding-top:10px;
 $gl-avatar-size: 46px;
+$secondary-text: #7f8fa4;
 
 /*
  * Color schema
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 002bd7e8ca5..c3f27333fad 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -4,7 +4,7 @@
     position: absolute;
     top: 0px;
     right: 4px;
-    line-height: 40px;
+    line-height: 56px;
   }
 
   a.js-zen-leave {
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 17245d3be7b..e53d6fc6bdc 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -35,6 +35,8 @@
 }
 
 .commit-box {
+  border-top: 1px solid $border-color;
+
   .commit-title {
     margin: 0;
     font-size: 23px;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index deab805dbc2..529a43548c8 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,7 +1,5 @@
 .detail-page-header {
-  margin: -$gl-padding;
-  padding: 7px $gl-padding;
-  margin-bottom: 0px;
+  padding: 11px 0;
   border-bottom: 1px solid $border-color;
   color: #5c5d5e;
   font-size: 16px;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index afd6fb73675..04e9a58e1cf 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -1,9 +1,7 @@
 // Common
 .diff-file {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  border: none;
-  border-bottom: 1px solid #E7E9EE;
+  border: 1px solid $border-color;
+  border-top: none;
 
   .diff-header {
     position: relative;
@@ -23,14 +21,6 @@
       }
     }
 
-    .diff-controls {
-      .btn {
-        padding: 0px 10px;
-        font-size: 13px;
-        line-height: 28px;
-      }
-    }
-
     .commit-short-id {
       font-family: $monospace_font;
       font-size: smaller;
@@ -76,6 +66,7 @@
       width: 100%;
       font-family: $monospace_font;
       border: none;
+      border-collapse: separate;
       margin: 0px;
       padding: 0px;
       .line_holder td {
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 984b4b91216..8fa15b35748 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,9 +4,7 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding $gl-padding $gl-padding ($gl-padding + $gl-avatar-size + 15px);
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
+  padding: $gl-padding 0 $gl-padding ($gl-avatar-size + 15px);
   border-bottom: 1px solid $table-border-color;
   color: #7f8fa4;
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d4b44004f4f..977ada0ff38 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -20,6 +20,11 @@
       position: fixed;
       top: 70px;
       margin-right: 35px;
+
+      &.no-affix {
+        position: relative;
+        top: 0;
+      }
     }
   }
 }
@@ -27,10 +32,10 @@
 .project-issuable-filter {
   .controls {
     float: right;
-    margin-top: 7px;
+    margin-top: 11px;
   }
 
-  .center-top-menu {
+  .nav-links {
     text-align: left;
   }
 }
@@ -95,7 +100,7 @@
 
   .cross-project-reference {
     color: $gl-link-color;
-    
+
     span {
       white-space: nowrap;
       width: 85%;
@@ -105,8 +110,13 @@
       text-overflow: ellipsis;
     }
 
+    cite {
+      font-style: normal;
+    }
+
     button {
       float: right;
+      padding: 3px 5px;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index a02a3a72e79..ad92cc22815 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -6,7 +6,7 @@
     .issue-title {
       margin-bottom: 5px;
       font-size: $list-font-size;
-      font-weight: bold;
+      font-weight: 600;
     }
 
     .issue-info {
@@ -144,3 +144,8 @@ form.edit-issue {
 .issue-form .select2-container {
   width: 250px !important;
 }
+
+.issue-closed-by-widget {
+  color: $secondary-text;
+  margin-left: 52px;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 82effde0bf3..75f2ae80a92 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,9 +3,9 @@
  *
  */
 .mr-state-widget {
-  background: #F7F8FA;
+  background: $background-color;
   color: $gl-gray;
-  border: 1px solid #dce0e6;
+  border: 1px solid $border-color;
   @include border-radius(2px);
 
   form {
@@ -150,7 +150,7 @@
     .merge-request-title {
       margin-bottom: 5px;
       font-size: $list-font-size;
-      font-weight: bold;
+      font-weight: 600;
     }
 
     .merge-request-info {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index d86259f93fb..2c9a42f9892 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -159,6 +159,7 @@
 .edit_note {
   .markdown-area {
     min-height: 140px;
+    max-height: 430px;
   }
   .note-form-actions {
     background: transparent;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index f24b71963a8..3a87b71078d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -26,6 +26,8 @@
 }
 
 .project-home-panel {
+  padding-bottom: 40px;
+  border-bottom: 1px solid $border-color;
 
   .cover-controls {
     .project-settings-dropdown {
@@ -51,6 +53,8 @@
   }
 
   .notifications-btn {
+    margin-top: -28px;
+
     .fa-bell {
       margin-right: 6px;
     }
@@ -75,17 +79,6 @@
     }
   }
 
-  .git-clone-holder {
-    max-width: 498px;
-
-    .form-control {
-      background: #FFF;
-      font-size: 14px;
-      height: 42px;
-      margin-left: -1px;
-    }
-  }
-
   .visibility-level-label {
     @extend .btn;
     @extend .btn-gray;
@@ -98,24 +91,31 @@
     }
   }
 
-  .git-clone-holder {
-    display: inline-table;
-    position: relative;
-  }
-
   .project-repo-buttons {
-    margin-top: 12px;
+    margin-top: 20px;
     margin-bottom: 0px;
 
     .count-buttons {
       display: block;
-      margin-bottom: 12px;
+      margin-bottom: 20px;
+    }
+
+    .clone-row {
+      .split-repo-buttons,
+      .project-clone-holder {
+        display: inline-block;
+      }
+
+      .split-repo-buttons {
+        margin: 0 12px;
+      }
     }
 
     .btn {
       @include btn-gray;
       text-transform: none;
     }
+
     .count-with-arrow {
       display: inline-block;
       position: relative;
@@ -160,10 +160,10 @@
         border-style: solid;
         font-size: 13px;
         font-weight: 600;
-        line-height: 20px;
-        padding: 11px 16px;
+        line-height: 13px;
+        padding: $gl-vert-padding $gl-padding;
         letter-spacing: .4px;
-        padding: 10px;
+        padding: 10px 14px;
         text-align: center;
         vertical-align: middle;
         touch-action: manipulation;
@@ -189,117 +189,6 @@
   }
 }
 
-.git-clone-holder {
-  .project-home-dropdown + & {
-    margin-right: 45px;
-  }
-
-  .clone-options {
-    display: table-cell;
-    a.btn {
-      width: 100%;
-    }
-  }
-
-  .form-control {
-    cursor: auto;
-    @extend .monospace;
-    background: #FAFAFA;
-    width: 101%;
-  }
-
-  .input-group-addon {
-    background: #f7f8fa;
-
-    &.git-protocols {
-      padding: 0;
-      border: none;
-
-      .input-group-btn:last-child > .btn {
-        @include border-radius-right(0);
-
-        border-left: 1px solid #c6cacf;
-        margin-left: -2px !important;
-      }
-    }
-  }
-}
-
-.projects-search-form {
-
-  .input-group .form-control {
-    height: 42px;
-  }
-}
-
-.input-group-btn {
-  .btn {
-    @include btn-gray;
-    @include btn-middle;
-
-    &:hover {
-      outline: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:active {
-      outline: none;
-    }
-
-    &.btn-clipboard {
-      padding-left: 15px;
-      padding-right: 15px;
-    }
-  }
-
-  .active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-
-    border: 1px solid #c6cacf !important;
-    background-color: #e4e7ed !important;
-  }
-
-  .btn-green {
-    @include btn-green
-  }
-
-}
-
-.split-repo-buttons {
-  display: inline-table;
-  margin: 0 12px 0 12px;
-
-  .btn{
-    @include btn-gray;
-    @include btn-default;
-  }
-
-  .dropdown-toggle  {
-    margin: -5px;
-  }
-}
-
-#notification-form {
-  margin-left: 5px;
-}
-
-.dropdown-new {
-  margin-left: -5px;
-}
-
-.open > .dropdown-new.btn {
-  @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-
-  border: 1px solid #c6cacf !important;
-  background-color: #e4e7ed !important;
-  text-transform: none;
-  color: #313236 !important;
-  font-size: 15px;
-}
-
 .dropdown-menu {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
   @include border-radius (0px);
@@ -351,28 +240,6 @@
   color: #555;
 }
 
-ul.nav.nav-projects-tabs {
-  @extend .nav-tabs;
-
-  padding-left: 8px;
-
-  li {
-    a {
-      padding: 6px 25px;
-      margin-top: 2px;
-      border-color: #DDD;
-      background-color: #EEE;
-      text-shadow: 0 1px 1px white;
-      color: #555;
-    }
-    &.active {
-      a {
-        font-weight: bold;
-      }
-    }
-  }
-}
-
 .project_member_row form {
   margin: 0px;
 }
@@ -399,9 +266,9 @@ ul.nav.nav-projects-tabs {
 
 .breadcrumb.repo-breadcrumb {
   padding: 0;
-  line-height: 42px;
   background: transparent;
   border: none;
+  line-height: 42px;
   margin: 0;
 
   > li + li:before {
@@ -416,11 +283,8 @@ ul.nav.nav-projects-tabs {
 
 .top-area {
   border-bottom: 1px solid #EEE;
-  margin: 0 -16px;
-  padding: 0 $gl-padding;
-  height: 42px;
 
-  ul.left-top-menu {
+  ul.nav-links {
     display: inline-block;
     width: 50%;
     margin-bottom: 0px;
@@ -431,12 +295,12 @@ ul.nav.nav-projects-tabs {
     width: 50%;
     display: inline-block;
     float: right;
-    padding-top: 7px;
+    padding-top: 11px;
     text-align: right;
 
     .btn-green {
-      margin-top: -2px;
       margin-left: 10px;
+      float: right;
     }
   }
 
@@ -482,11 +346,11 @@ table.table.protected-branches-list tr.no-border {
   padding-top: 10px;
   padding-bottom: 4px;
 
-  ul.nav-pills {
+  ul.nav {
     display:inline-block;
   }
 
-  .nav-pills li {
+  .nav li {
     display:inline;
   }
 
@@ -523,8 +387,7 @@ pre.light-well {
 }
 
 .projects-search-form {
-  margin: -$gl-padding;
-  padding: $gl-padding;
+  padding: $gl-padding 0;
   padding-bottom: 0;
   margin-bottom: 0px;
 
@@ -574,10 +437,8 @@ pre.light-well {
   @include basic-list;
 
   .project-row {
-    padding: $gl-padding;
+    padding: $gl-padding 0;
     border-color: $table-border-color;
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
 
     &.no-description {
       .project {
@@ -631,8 +492,6 @@ pre.light-well {
 }
 
 .project-last-commit {
-  margin: 0 7px;
-
   .ci-status {
     margin-right: 16px;
   }
@@ -662,9 +521,7 @@ pre.light-well {
 }
 
 .project-show-readme .readme-holder {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  padding: ($gl-padding + 7px);
+  padding: $gl-padding 0;
   border-top: 0;
 
   .edit-project-readme {
@@ -672,3 +529,32 @@ pre.light-well {
     position: relative;
   }
 }
+
+.git-clone-holder {
+  width: 498px;
+
+  .btn-clipboard {
+    border: 1px solid $border-color;
+    padding: 6px $gl-padding;
+  }
+
+  .project-home-dropdown + & {
+    margin-right: 45px;
+  }
+
+  .clone-options {
+    display: table-cell;
+    a.btn {
+      width: 100%;
+    }
+  }
+
+  .form-control {
+    @extend .monospace;
+    background: #FFF;
+    font-size: 14px;
+    margin-left: -1px;
+    cursor: auto;
+    width: 101%;
+  }
+}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 97505edeabf..6a6dd7dfc85 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,4 +1,7 @@
 .tree-holder {
+  > .nav-block {
+    margin: 11px 0;
+  }
 
   .file-finder {
     width: 50%;
@@ -13,7 +16,7 @@
 
     tr {
       > td, > th {
-        line-height: 28px;
+        line-height: 26px;
       }
 
       &:hover {
@@ -86,12 +89,14 @@
 
 .blob-commit-info {
   list-style: none;
+  padding: $gl-padding;
+  background: $background-color;
+  border: 1px solid $border-color;
+  border-bottom: none;
   margin: 0;
-  padding: 0;
-  margin-bottom: 5px;
 
   .commit {
-    padding: $gl-padding 0;
+    padding: 0;
 
     .commit-row-title {
       .commit-row-message {
@@ -115,3 +120,8 @@
   font-weight: normal;
   color: $md-link-color;
 }
+
+.tree-controls {
+  float: right;
+  margin-top: 11px;
+}