Merge branch 'master' into build-cancel-spinnerbuild-cancel-spinner

44 files changed, 366 insertions, 269 deletions

diff --git a/app/assets/images/icon-link.png b/app/assets/images/icon-link.png
deleted file mode 100644
index 5b55e12571c..00000000000
--- a/app/assets/images/icon-link.png
+++ /dev/null
diff --git a/app/assets/images/icon_anchor.svg b/app/assets/images/icon_anchor.svg
new file mode 100644
index 00000000000..7e242586bad
--- /dev/null
+++ b/app/assets/images/icon_anchor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#333" fill-rule="evenodd" d="M9.683 6.676l-.047-.048C8.27 5.26 6.07 5.243 4.726 6.588l-2.29 2.29c-1.344 1.344-1.328 3.544.04 4.91 1.366 1.368 3.564 1.385 4.908.04l1.753-1.752c-.695.074-1.457-.078-2.176-.444L5.934 12.66c-.634.634-1.67.625-2.312-.017-.642-.643-.65-1.677-.017-2.312L6.035 7.9c.634-.634 1.67-.625 2.312.017.024.024.048.05.07.075l.003-.002c.36.36.943.366 1.3.01.355-.356.35-.938-.01-1.3l-.027-.024zM6.58 9.586l.048.05c1.367 1.366 3.565 1.384 4.91.04l2.29-2.292c1.344-1.343 1.328-3.542-.04-4.91-1.366-1.366-3.564-1.384-4.908-.04L7.127 4.187c.695-.074 1.457.078 2.176.444l1.028-1.027c.635-.634 1.67-.624 2.313.017.643.644.652 1.678.018 2.312l-2.43 2.432c-.635.634-1.67.624-2.313-.018-.024-.024-.048-.05-.07-.075l-.003.004c-.36-.362-.943-.367-1.3-.01-.355.355-.35.937.01 1.3.01.007.018.015.027.023z"/></svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index 5ea6086ab77..d5e11e22be5 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -12,7 +12,7 @@
     }
 
     Activities.prototype.updateTooltips = function() {
-      return gl.utils.localTimeAgo($('.js-timeago', '#activity'));
+      return gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
     };
 
     Activities.prototype.reloadActivities = function() {
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 8ac1ba7665e..5467e3edc69 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -1,6 +1,6 @@
 (function(w) {
   $(function() {
-    $('.js-toggle-button').on('click', function(e) {
+    $('body').on('click', '.js-toggle-button', function(e) {
       e.preventDefault();
       $(this)
         .find('.fa')
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index a612cf0f1ae..91c12570e09 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -54,4 +54,11 @@ $(() => {
         });
     }
   });
+
+  gl.IssueBoardsSearch = new Vue({
+    el: '#js-boards-seach',
+    data: {
+      filters: Store.state.filters
+    }
+  });
 });
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index d7f4107cb02..7e86f001f44 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -21,15 +21,10 @@
     },
     data () {
       return {
-        query: '',
         filters: Store.state.filters
       };
     },
     watch: {
-      query () {
-        this.list.filters = this.getFilterData();
-        this.list.getIssues(true);
-      },
       filters: {
         handler () {
           this.list.page = 1;
@@ -38,16 +33,6 @@
         deep: true
       }
     },
-    methods: {
-      getFilterData () {
-        const filters = this.filters;
-        let queryData = { search: this.query };
-
-        Object.keys(filters).forEach((key) => { queryData[key] = filters[key]; });
-
-        return queryData;
-      }
-    },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index a6644e9eb8c..50fc11d7737 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -20,7 +20,8 @@
     data () {
       return {
         scrollOffset: 250,
-        filters: Store.state.filters
+        filters: Store.state.filters,
+        showCount: false
       };
     },
     watch: {
@@ -30,6 +31,15 @@
           this.$els.list.scrollTop = 0;
         },
         deep: true
+      },
+      issues () {
+        this.$nextTick(() => {
+          if (this.scrollHeight() > this.listHeight()) {
+            this.showCount = true;
+          } else {
+            this.showCount = false;
+          }
+        });
       }
     },
     methods: {
@@ -58,6 +68,7 @@
         group: 'issues',
         sort: false,
         disabled: this.disabled,
+        filter: '.board-list-count',
         onStart: (e) => {
           const card = this.$refs.issue[e.oldIndex];
 
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index be2b8c568a8..91fd620fdb3 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -11,6 +11,7 @@ class List {
     this.loading = true;
     this.loadingMore = false;
     this.issues = [];
+    this.issuesSize = 0;
 
     if (obj.label) {
       this.label = new ListLabel(obj.label);
@@ -51,17 +52,13 @@ class List {
   }
 
   nextPage () {
-    if (Math.floor(this.issues.length / 20) === this.page) {
+    if (this.issuesSize > this.issues.length) {
       this.page++;
 
       return this.getIssues(false);
     }
   }
 
-  canSearch () {
-    return this.type === 'backlog';
-  }
-
   getIssues (emptyIssues = true) {
     const filters = this.filters;
     let data = { page: this.page };
@@ -80,12 +77,13 @@ class List {
       .then((resp) => {
         const data = resp.json();
         this.loading = false;
+        this.issuesSize = data.size;
 
         if (emptyIssues) {
           this.issues = [];
         }
 
-        this.createIssues(data);
+        this.createIssues(data.issues);
       });
   }
 
@@ -96,14 +94,20 @@ class List {
   }
 
   addIssue (issue, listFrom) {
-    this.issues.push(issue);
+    if (!this.findIssue(issue.id)) {
+      this.issues.push(issue);
 
-    if (this.label) {
-      issue.addLabel(this.label);
-    }
+      if (this.label) {
+        issue.addLabel(this.label);
+      }
 
-    if (listFrom) {
-      gl.boardService.moveIssue(issue.id, listFrom.id, this.id);
+      if (listFrom) {
+        this.issuesSize++;
+        gl.boardService.moveIssue(issue.id, listFrom.id, this.id)
+          .then(() => {
+            listFrom.getIssues(false);
+          });
+      }
     }
   }
 
@@ -116,6 +120,7 @@ class List {
       const matchesRemove = removeIssue.id === issue.id;
 
       if (matchesRemove) {
+        this.issuesSize--;
         issue.removeLabel(this.label);
       }
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
index 18f26a1f911..bd07ee0c161 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ b/app/assets/javascripts/boards/stores/boards_store.js.es6
@@ -15,7 +15,8 @@
         author_id: gl.utils.getParameterValues('author_id')[0],
         assignee_id: gl.utils.getParameterValues('assignee_id')[0],
         milestone_title: gl.utils.getParameterValues('milestone_title')[0],
-        label_name: gl.utils.getParameterValues('label_name[]')
+        label_name: gl.utils.getParameterValues('label_name[]'),
+        search: ''
       };
     },
     addList (listObj) {
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index ba64d2bcf0b..38cdc7b9fba 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -199,6 +199,7 @@
               break;
             case 'labels':
               switch (path[2]) {
+                case 'new':
                 case 'edit':
                   new Labels();
               }
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 5a2a8523d9f..77b2082cba0 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -556,7 +556,7 @@
       if (isInput) {
         field = $(this.el);
       } else {
-        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
+        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + escape(value) + "']");
       }
       if (el.hasClass(ACTIVE_CLASS)) {
         el.removeClass(ACTIVE_CLASS);
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 6838d9d8da1..e6422602ce8 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -127,7 +127,7 @@
 
     Issue.prototype.initCanCreateBranch = function() {
       var $container;
-      $container = $('div#new-branch');
+      $container = $('#new-branch');
       if ($container.length === 0) {
         return;
       }
@@ -139,7 +139,6 @@
         if (data.can_create_branch) {
           $container.find('.checking').hide();
           $container.find('.available').show();
-          return $container.find('a').attr('disabled', false);
         } else {
           $container.find('.checking').hide();
           return $container.find('.unavailable').show();
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 565dbeacdb3..bab23ff5ac0 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -164,7 +164,7 @@
                 instance.addInput(this.fieldName, label.id);
               }
             }
-            if ($form.find("input[type='hidden'][name='" + ($dropdown.data('fieldName')) + "'][value='" + (this.id(label)) + "']").length) {
+            if ($form.find("input[type='hidden'][name='" + ($dropdown.data('fieldName')) + "'][value='" + escape(this.id(label)) + "']").length) {
               selectedClass.push('is-active');
             }
             if ($dropdown.hasClass('js-multiselect') && removesAll) {
diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js
index e5d4fd44c96..7d8eef1b495 100644
--- a/app/assets/javascripts/logo.js
+++ b/app/assets/javascripts/logo.js
@@ -1,16 +1,12 @@
 (function() {
   Turbolinks.enableProgressBar();
 
-  start = function() {
+  $(document).on('page:fetch', function() {
     $('.tanuki-logo').addClass('animate');
-  };
+  });
 
-  stop = function() {
+  $(document).on('page:change', function() {
     $('.tanuki-logo').removeClass('animate');
-  };
-
-  $(document).on('page:fetch', start);
-
-  $(document).on('page:change', stop);
+  });
 
 }).call(this);
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index 798f15e40a0..a787b11f2a9 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -4,6 +4,8 @@
   this.ProjectNew = (function() {
     function ProjectNew() {
       this.toggleSettings = bind(this.toggleSettings, this);
+      this.$selects = $('.features select');
+
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
           $('.project-edit-container').hide();
@@ -15,18 +17,24 @@
     }
 
     ProjectNew.prototype.toggleSettings = function() {
-      this._showOrHide('#project_builds_enabled', '.builds-feature');
-      return this._showOrHide('#project_merge_requests_enabled', '.merge-requests-feature');
+      var self = this;
+
+      this.$selects.each(function () {
+        var $select = $(this),
+            className = $select.data('field').replace(/_/g, '-')
+              .replace('access-level', 'feature');
+        self._showOrHide($select, '.' + className);
+      });
     };
 
     ProjectNew.prototype.toggleSettingsOnclick = function() {
-      return $('#project_builds_enabled, #project_merge_requests_enabled').on('click', this.toggleSettings);
+      this.$selects.on('change', this.toggleSettings);
     };
 
     ProjectNew.prototype._showOrHide = function(checkElement, container) {
-      var $container;
-      $container = $(container);
-      if ($(checkElement).prop('checked')) {
+      var $container = $(container);
+
+      if ($(checkElement).val() !== '0') {
         return $container.show();
       } else {
         return $container.hide();
diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
index 6e677fa8cc6..23eda7d44ca 100644
--- a/app/assets/javascripts/todos.js
+++ b/app/assets/javascripts/todos.js
@@ -13,6 +13,7 @@
       this.perPage = this.el.data('perPage');
       this.clearListeners();
       this.initBtnListeners();
+      this.initFilters();
     }
 
     Todos.prototype.clearListeners = function() {
@@ -27,6 +28,31 @@
       return $('.todo').on('click', this.goToTodoUrl);
     };
 
+    Todos.prototype.initFilters = function() {
+      new UsersSelect();
+      this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
+      this.initFilterDropdown($('.js-type-search'), 'type');
+      this.initFilterDropdown($('.js-action-search'), 'action_id');
+
+      $('form.filter-form').on('submit', function (event) {
+        event.preventDefault();
+        Turbolinks.visit(this.action + '&' + $(this).serialize());
+      });
+    };
+
+    Todos.prototype.initFilterDropdown = function($dropdown, fieldName, searchFields) {
+      $dropdown.glDropdown({
+        selectable: true,
+        filterable: searchFields ? true : false,
+        fieldName: fieldName,
+        search: { fields: searchFields },
+        data: $dropdown.data('data'),
+        clicked: function() {
+          return $dropdown.closest('form.filter-form').submit();
+        }
+      })
+    };
+
     Todos.prototype.doneClicked = function(e) {
       var $this;
       e.preventDefault();
@@ -66,7 +92,7 @@
         success: (function(_this) {
           return function(data) {
             $this.remove();
-            $('.js-todos-list').remove();
+            $('.prepend-top-default').html('<div class="nothing-here-block">You\'re all done!</div>');
             return _this.updateBadges(data);
           };
         })(this)
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
deleted file mode 100644
index 6c4d88cf407..00000000000
--- a/app/assets/javascripts/user.js
+++ /dev/null
@@ -1,29 +0,0 @@
-(function() {
-  this.User = (function() {
-    function User(opts) {
-      this.opts = opts;
-      $('.profile-groups-avatars').tooltip({
-        "placement": "top"
-      });
-      this.initTabs();
-      $('.hide-project-limit-message').on('click', function(e) {
-        $.cookie('hide_project_limit_message', 'false', {
-          path: gon.relative_url_root || '/'
-        });
-        $(this).parents('.project-limit-message').remove();
-        return e.preventDefault();
-      });
-    }
-
-    User.prototype.initTabs = function() {
-      return new UserTabs({
-        parentEl: '.user-profile',
-        action: this.opts.action
-      });
-    };
-
-    return User;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/user.js.es6 b/app/assets/javascripts/user.js.es6
new file mode 100644
index 00000000000..6889d3a7491
--- /dev/null
+++ b/app/assets/javascripts/user.js.es6
@@ -0,0 +1,34 @@
+(global => {
+  global.User = class {
+    constructor(opts) {
+      this.opts = opts;
+      this.placeProfileAvatarsToTop();
+      this.initTabs();
+      this.hideProjectLimitMessage();
+    }
+
+    placeProfileAvatarsToTop() {
+      $('.profile-groups-avatars').tooltip({
+        placement: 'top'
+      });
+    }
+
+    initTabs() {
+      return new UserTabs({
+        parentEl: '.user-profile',
+        action: this.opts.action
+      });
+    }
+
+    hideProjectLimitMessage() {
+      $('.hide-project-limit-message').on('click', e => {
+        e.preventDefault();
+        const path = gon.relative_url_root || '/';
+        $.cookie('hide_project_limit_message', 'false', {
+          path: path
+        });
+        $(this).parents('.project-limit-message').remove();
+      });
+    }
+  }
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index cd3ddf5fee9..4618687a4be 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -206,7 +206,9 @@
   }
 
   svg, .fa {
-    margin-right: 3px;
+    &:not(:last-child) {
+      margin-right: 3px;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 8984bce616c..5957dce89bc 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -53,7 +53,7 @@ pre {
 
   &.well-pre {
     border: 1px solid #eee;
-    background: #f9f9f9;
+    background: $gray-light;
     border-radius: 0;
     color: #555;
   }
@@ -225,7 +225,7 @@ li.note {
 
 .milestone {
   &.milestone-closed {
-    background: #f9f9f9;
+    background: $gray-light;
   }
   .progress {
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index be5c64c56d3..b0ba112476b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -183,6 +183,13 @@
     &.dropdown-menu-user-link {
       line-height: 16px;
     }
+
+    .icon-play {
+      fill: $table-text-gray;
+      margin-right: 6px;
+      height: 12px;
+      width: 11px;
+    }
   }
 
   .dropdown-header {
@@ -195,6 +202,12 @@
   .separator + .dropdown-header {
     padding-top: 2px;
   }
+
+  .unclickable {
+    cursor: not-allowed;
+    padding: 5px 8px;
+    color: $dropdown-header-color;
+  }
 }
 
 .dropdown-menu-large {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index d3e3fc50736..e3be45ba1dc 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -115,7 +115,7 @@
         padding: 0;
       }
       td.blame-commit {
-        background: #f9f9f9;
+        background: $gray-light;
         min-width: 350px;
 
         .commit-author-link {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index afe4a276ae5..1036219172e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -84,7 +84,7 @@ header {
     .side-nav-toggle {
       position: absolute;
       left: -10px;
-      margin: 6px 0;
+      margin: 7px 0;
       font-size: 18px;
       padding: 6px 10px;
       border: none;
@@ -136,6 +136,8 @@ header {
     }
 
     .title {
+      position: relative;
+      padding-right: 20px;
       margin: 0;
       font-size: 19px;
       max-width: 400px;
@@ -148,7 +150,11 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
-      @media (max-width: $screen-sm-max) {
+      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+        max-width: 300px;
+      }
+
+      @media (max-width: $screen-xs-max) {
         max-width: 190px;
       }
 
@@ -160,11 +166,15 @@ header {
       }
 
       .dropdown-toggle-caret {
-        position: relative;
-        top: -2px;
+        color: $gl-text-color;
+        border: transparent;
+        background: transparent;
+        position: absolute;
+        right: 3px;
         width: 12px;
-        line-height: 12px;
-        margin-left: 5px;
+        line-height: 19px;
+        margin-top: (($header-height - 19) / 2);
+        padding: 0;
         font-size: 10px;
         text-align: center;
         cursor: pointer;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 396a37bab6e..00f92cef9a4 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -9,14 +9,6 @@
   border-radius: $radius;
 }
 
-@mixin transition($transition) {
-  -webkit-transition: $transition;
-  -moz-transition: $transition;
-  -ms-transition: $transition;
-  -o-transition: $transition;
-  transition: $transition;
-}
-
 /**
  * Prefilled mixins
  * Mixins with fixed values
@@ -52,7 +44,7 @@
     }
 
     &.active {
-      background: #f9f9f9;
+      background: $gray-light;
       a {
         font-weight: 600;
       }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ef2fe844f94..9efbaf54e90 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -8,10 +8,7 @@
   height: 30px;
   transition-duration: .3s;
   -webkit-transform: translateZ(0);
-  background: -webkit-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
-  background: -o-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
-  background: -moz-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
-  background: linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
 
   &.scrolling {
     visibility: visible;
@@ -211,12 +208,6 @@
       }
     }
 
-    .project-filter-form {
-      input {
-        background-color: $background-color;
-      }
-    }
-
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
       width: 100%;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index b2e22b60440..c75dacf95d9 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -151,7 +151,7 @@
   background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
   @include border-radius($border-radius-default);
-  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
   &:focus {
     border-color: $input-border-focus;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 371c1bf17e1..915aa631ef8 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -125,7 +125,7 @@ $panel-inner-border:       $border-color;
 //
 //##
 
-$well-bg:                     #f9f9f9;
+$well-bg:                     $gray-light;
 $well-border:                 #eee;
 
 //== Code
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 06874a993fa..3f8433a0e7f 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -159,25 +159,18 @@
     position: relative;
 
     a.anchor {
-      // Setting `display: none` would prevent the anchor being scrolled to, so
-      // instead we set the height to 0 and it gets updated on hover.
-      height: 0;
+      left: -16px;
+      position: absolute;
+      text-decoration: none;
+
+      &:after {
+        content: url('icon_anchor.svg');
+        visibility: hidden;
+      }
     }
 
-    &:hover > a.anchor {
-      $size: 14px;
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      margin-top: -11px;
-      margin-right: 0;
-      padding-right: 15px;
-      display: inline-block;
-      width: $size;
-      height: $size;
-      background-image: image-url("icon-link.png");
-      background-size: contain;
-      background-repeat: no-repeat;
+    &:hover > a.anchor:after {
+      visibility: visible;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5da390118c6..e4a3ca3a9ea 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,12 +10,78 @@ $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 
 /*
+ * Color schema
+ */
+$white-light: #fff;
+$white-normal: #ededed;
+$white-dark: #ececec;
+
+$gray-light: #fafafa;
+$gray-normal: #f5f5f5;
+$gray-dark: #ededed;
+$gray-darkest: #c9c9c9;
+
+$green-light: #38ae67;
+$green-normal: #2faa60;
+$green-dark: #2ca05b;
+
+$blue-light: #2ea8e5;
+$blue-normal: #2d9fd8;
+$blue-dark: #2897ce;
+
+$blue-medium-light: #3498cb;
+$blue-medium: #2f8ebf;
+$blue-medium-dark: #2d86b4;
+
+$orange-light: #fc8a51;
+$orange-normal: #e75e40;
+$orange-dark: #ce5237;
+
+$red-light: #e52c5a;
+$red-normal: #d22852;
+$red-dark: darken($red-normal, 5%);
+
+$black: #000;
+$black-transparent: rgba(0, 0, 0, 0.3);
+
+$border-white-light: #f1f2f4;
+$border-white-normal: #d6dae2;
+$border-white-dark: #c6cacf;
+
+$border-gray-light: #dcdcdc;
+$border-gray-normal: #d7d7d7;
+$border-gray-dark: #c6cacf;
+
+$border-green-light: #2faa60;
+$border-green-normal: #2ca05b;
+$border-green-dark: #279654;
+
+$border-blue-light: #2d9fd8;
+$border-blue-normal: #2897ce;
+$border-blue-dark: #258dc1;
+
+$border-orange-light: #fc6d26;
+$border-orange-normal: #ce5237;
+$border-orange-dark: #c14e35;
+
+$border-red-light: #d22852;
+$border-red-normal: #ca264f;
+$border-red-dark: darken($border-red-normal, 5%);
+
+$help-well-bg: $gray-light;
+$help-well-border: #e5e5e5;
+
+$warning-message-bg: #fbf2d9;
+$warning-message-color: #9e8e60;
+$warning-message-border: #f0e2bb;
+
+/*
  * UI elements
  */
 $border-color:          #e5e5e5;
 $focus-border-color:    #3aabf0;
 $table-border-color:    #f0f0f0;
-$background-color:      #fafafa;
+$background-color:      $gray-light;
 $dark-background-color: #f5f5f5;
 $table-text-gray:       #8f8f8f;
 
@@ -90,73 +156,6 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 
-/*
- * Color schema
- */
-
-$white-light: #fff;
-$white-normal: #ededed;
-$white-dark: #ececec;
-
-$gray-light: #faf9f9;
-$gray-normal: #f5f5f5;
-$gray-dark: #ededed;
-$gray-darkest: #c9c9c9;
-
-$green-light: #38ae67;
-$green-normal: #2faa60;
-$green-dark: #2ca05b;
-
-$blue-light: #2ea8e5;
-$blue-normal: #2d9fd8;
-$blue-dark: #2897ce;
-
-$blue-medium-light: #3498cb;
-$blue-medium: #2f8ebf;
-$blue-medium-dark: #2d86b4;
-
-$orange-light: #fc8a51;
-$orange-normal: #e75e40;
-$orange-dark: #ce5237;
-
-$red-light: #e52c5a;
-$red-normal: #d22852;
-$red-dark: darken($red-normal, 5%);
-
-$black: #000;
-$black-transparent: rgba(0, 0, 0, 0.3);
-
-$border-white-light: #f1f2f4;
-$border-white-normal: #d6dae2;
-$border-white-dark: #c6cacf;
-
-$border-gray-light: #dcdcdc;
-$border-gray-normal: #d7d7d7;
-$border-gray-dark: #c6cacf;
-
-$border-green-light: #2faa60;
-$border-green-normal: #2ca05b;
-$border-green-dark: #279654;
-
-$border-blue-light: #2d9fd8;
-$border-blue-normal: #2897ce;
-$border-blue-dark: #258dc1;
-
-$border-orange-light: #fc6d26;
-$border-orange-normal: #ce5237;
-$border-orange-dark: #c14e35;
-
-$border-red-light: #d22852;
-$border-red-normal: #ca264f;
-$border-red-dark: darken($border-red-normal, 5%);
-
-$help-well-bg: #fafafa;
-$help-well-border: #e5e5e5;
-
-$warning-message-bg: #fbf2d9;
-$warning-message-color: #9e8e60;
-$warning-message-border: #f0e2bb;
-
 /* tanuki logo colors */
 $tanuki-red: #e24329;
 $tanuki-orange: #fc6d26;
@@ -186,7 +185,7 @@ $line-removed-dark: #fac5cd;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;
-$match-line: #fafafa;
+$match-line: $gray-light;
 $table-border-gray: #f0f0f0;
 $line-target-blue: #eaf3fc;
 $line-select-yellow: #fcf8e7;
@@ -267,7 +266,7 @@ $zen-control-hover-color: #111;
 $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
-$calendar-unselectable-bg: #faf9f9;
+$calendar-unselectable-bg: $gray-light;
 
 /*
  * Personal Access Tokens
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 9ac4d801ac4..037278bb083 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -10,7 +10,7 @@
 .is-dragging {
   // Important because plugin sets inline CSS
   opacity: 1!important;
-  
+
   * {
     // !important to make sure no style can override this when dragging
     cursor: -webkit-grabbing!important;
@@ -142,11 +142,6 @@
   }
 }
 
-.board-header-loading-spinner {
-  margin-right: 10px;
-  color: $gray-darkest;
-}
-
 .board-inner-container {
   border-bottom: 1px solid $border-color;
   padding: $gl-padding;
@@ -160,40 +155,6 @@
   border-bottom: 1px solid $border-color;
 }
 
-.board-search-container {
-  position: relative;
-  background-color: #fff;
-
-  .form-control {
-    padding-right: 30px;
-  }
-}
-
-.board-search-icon,
-.board-search-clear-btn {
-  position: absolute;
-  right: $gl-padding + 10px;
-  top: 50%;
-  margin-top: -7px;
-  font-size: 14px;
-}
-
-.board-search-icon {
-  color: $gl-placeholder-color;
-}
-
-.board-search-clear-btn {
-  padding: 0;
-  line-height: 1;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  &:hover {
-    color: $gl-link-color;
-  }
-}
-
 .board-delete {
   margin-right: 10px;
   padding: 0;
@@ -304,3 +265,22 @@
   margin-right: 8px;
   font-weight: 500;
 }
+
+.issue-boards-search {
+  width: 335px;
+
+  .form-control {
+    display: inline-block;
+    width: 210px;
+  }
+}
+
+.board-list-count {
+  padding: 10px 0;
+  color: $gl-placeholder-color;
+  font-size: 13px;
+
+  > .fa {
+    margin-right: 5px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 8c33e7d9a2e..23255f34710 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -36,6 +36,7 @@
     &.affix {
       right: 30px;
       bottom: 15px;
+      z-index: 1;
 
       @media (min-width: $screen-md-min) {
         right: 26%;
@@ -107,7 +108,7 @@
   }
 
   .blocks-container {
-    padding: $gl-padding;
+    padding: 0 $gl-padding;
   }
 
   .block {
@@ -122,6 +123,13 @@
     }
   }
 
+  .retry-link {
+    color: $gl-link-color;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .stage-item {
     cursor: pointer;
 
@@ -131,7 +139,7 @@
   }
 
   .build-dropdown {
-    padding: 0 $gl-padding;
+    padding: $gl-padding 0;
 
     .dropdown-menu-toggle {
       margin-top: 8px;
@@ -145,7 +153,6 @@
   }
 
   .builds-container {
-    margin-top: $gl-padding;
     background-color: $white-light;
     border-top: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 6a58b445afa..b369f5c0805 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -113,11 +113,13 @@
 
   .commit-row-description {
     font-size: 14px;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $btn-gray-hover;
     padding: 10px 15px;
     margin: 10px 0;
-    background: #f9f9f9;
+    background: $gray-light;
     display: none;
+    white-space: pre-line;
+    word-break: normal;
 
     pre {
       border: none;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 55f9d4a0011..d01c60ee6ab 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -4,8 +4,9 @@
     margin: 0;
   }
 
-  .fa-play {
-    font-size: 14px;
+  .icon-play {
+    height: 13px;
+    width: 12px;
   }
 
   .dropdown-new {
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 0cd45fb90bf..1d00da1266c 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -60,7 +60,7 @@
 
       pre {
         border: none;
-        background: #f9f9f9;
+        background: $gray-light;
         border-radius: 0;
         color: #777;
         margin: 0 20px;
@@ -92,7 +92,7 @@
     border: 1px solid #eee;
     padding: 5px;
     @include border-radius(5px);
-    background: #f9f9f9;
+    background: $gray-light;
     margin-left: 10px;
     top: -6px;
     img {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index dfe1e3075da..910700b0206 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -12,6 +12,10 @@
       padding-right: 8px;
       margin-bottom: 10px;
       min-width: 15px;
+
+      .selected_issue {
+        vertical-align: text-top;
+      }
     }
 
     .issue-labels {
@@ -68,12 +72,12 @@ form.edit-issue {
   }
 
   &.closed {
-    background: #f9f9f9;
+    background: $gray-light;
     border-color: #e5e5e5;
   }
 
   &.merged {
-    background: #f9f9f9;
+    background: $gray-light;
     border-color: #e5e5e5;
   }
 }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 606459f82cd..38c7cd98e41 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -7,6 +7,7 @@
     display: inline-block;
     margin-right: 10px;
     margin-bottom: 10px;
+    text-decoration: none;
   }
 
   &.suggest-colors-dropdown {
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 1f499897c16..5ec660799e3 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -16,7 +16,7 @@ $colors: (
   white_button_origin_chosen  : #268ced,
 
   white_header_not_chosen     : #f0f0f0,
-  white_line_not_chosen       : #f9f9f9,
+  white_line_not_chosen       : $gray-light,
 
 
   dark_header_head_neutral   : rgba(#3f3, .2),
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 0dcf61dd2dd..ee5d9de66d8 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -2,6 +2,7 @@
   .stage {
     max-width: 90px;
     width: 90px;
+    text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -146,6 +147,7 @@
   }
 
   .stage-cell {
+    text-align: center;
 
     svg {
       height: 18px;
@@ -153,10 +155,6 @@
       vertical-align: middle;
       overflow: visible;
     }
-
-    .light {
-      width: 3px;
-    }
   }
 
   .duration,
@@ -215,6 +213,13 @@
           border-color: $border-white-normal;
         }
       }
+
+      .btn {
+        .icon-play {
+          height: 13px;
+          width: 12px;
+        }
+      }
     }
   }
 
@@ -469,11 +474,22 @@
 .pipelines.tab-pane {
 
   .content-list.pipelines {
-    overflow: scroll;
+    overflow: auto;
   }
 
   .stage {
-    max-width: 60px;
-    width: 60px;
+    max-width: 100px;
+    width: 100px;
+  }
+
+  .pipeline-actions {
+    min-width: initial;
+  }
+}
+
+.ci-status-icon-created {
+
+  svg {
+    fill: $table-text-gray;
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index eaf2d3270b3..f2db373da52 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -311,6 +311,14 @@ a.deploy-project-label {
   color: $gl-success;
 }
 
+.lfs-enabled {
+  color: $gl-success;
+}
+
+.lfs-disabled {
+  color: $gl-warning;
+}
+
 .breadcrumb.repo-breadcrumb {
   padding: 0;
   background: transparent;
@@ -600,18 +608,25 @@ pre.light-well {
   }
 }
 
-.project-show-readme .readme-holder {
-  padding: $gl-padding 0;
-  border-top: 0;
-
-  .edit-project-readme {
-    z-index: 2;
-    position: relative;
+.project-show-readme {
+  .row-content-block {
+    background-color: inherit;
+    border: none;
   }
 
-  .wiki h1 {
-    border-bottom: none;
-    padding: 0;
+  .readme-holder {
+    padding: $gl-padding 0;
+    border-top: 0;
+
+    .edit-project-readme {
+      z-index: 2;
+      position: relative;
+    }
+
+    .wiki h1 {
+      border-bottom: none;
+      padding: 0;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index c9d436d72ba..436fb00ba2e 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -80,7 +80,7 @@
 
     .search-icon {
       @extend .fa-search;
-      @include transition(color .15s);
+      transition: color 0.15s;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
@@ -125,7 +125,7 @@
     }
 
     .location-badge {
-      @include transition(all .15s);
+      transition: all 0.15s;
       background-color: $location-badge-active-bg;
       color: $white-light;
     }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 587f2d9f3c1..0ee7ceecae5 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -43,6 +43,15 @@
       border-color: $blue-normal;
     }
 
+    &.ci-created {
+      color: $table-text-gray;
+      border-color: $table-text-gray;
+
+      svg {
+        fill: $table-text-gray;
+      }
+    }
+
     svg {
       height: 13px;
       width: 13px;
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 0340526a53a..68a5d1ae06c 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -99,7 +99,7 @@
 
       pre {
         border: none;
-        background: #f9f9f9;
+        background: $gray-light;
         border-radius: 0;
         color: #777;
         margin: 0 20px;
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 9da40fe2b09..cdd38442550 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -11,6 +11,20 @@
     }
   }
 
+  .add-to-tree {
+    vertical-align: top;
+  }
+
+  .last-commit {
+    max-width: 506px;
+
+    .last-commit-content {
+      @include str-truncated;
+      width: calc(100% - 140px);
+      margin-left: 3px;
+    }
+  }
+
   .tree-table {
     margin-bottom: 0;
 
diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss
index 8d855ce99b0..c9846103762 100644
--- a/app/assets/stylesheets/pages/xterm.scss
+++ b/app/assets/stylesheets/pages/xterm.scss
@@ -20,6 +20,9 @@
   $l-cyan: #8abeb7;
   $l-white: $ci-text-color;
 
+  .term-bold {
+    font-weight: bold;
+  }
   .term-italic {
     font-style: italic;
   }