Merge remote-tracking branch 'origin/master' into 22191-delete-dynamic-envs-mr

101 files changed, 2153 insertions, 732 deletions

diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index d5e11e22be5..f4f8cf04184 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -21,16 +21,14 @@
     };
 
     Activities.prototype.toggleFilter = function(sender) {
-      var event_filters, filter;
+      var filter = sender.attr("id").split("_")[0];
+
       $('.event-filter .active').removeClass("active");
-      event_filters = $.cookie("event_filter");
-      filter = sender.attr("id").split("_")[0];
-      $.cookie("event_filter", (event_filters !== filter ? filter : ""), {
+      $.cookie("event_filter", filter, {
         path: gon.relative_url_root || '/'
       });
-      if (event_filters !== filter) {
-        return sender.closest('li').toggleClass("active");
-      }
+
+      sender.closest('li').toggleClass("active");
     };
 
     return Activities;
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 599331df3f5..56ec1489f89 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -6,11 +6,10 @@
     groupProjectsPath: "/api/:version/groups/:id/projects.json",
     projectsPath: "/api/:version/projects.json?simple=true",
     labelsPath: "/:namespace_path/:project_path/labels",
-    licensePath: "/api/:version/licenses/:key",
-    gitignorePath: "/api/:version/gitignores/:key",
-    gitlabCiYmlPath: "/api/:version/gitlab_ci_ymls/:key",
+    licensePath: "/api/:version/templates/licenses/:key",
+    gitignorePath: "/api/:version/templates/gitignores/:key",
+    gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
     issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
-
     group: function(group_id, callback) {
       var url = Api.buildUrl(Api.groupPath)
         .replace(':id', group_id);
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 91c12570e09..d4f8f4b9420 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -28,12 +28,13 @@ $(() => {
       state: Store.state,
       loading: true,
       endpoint: $boardApp.dataset.endpoint,
+      boardId: $boardApp.dataset.boardId,
       disabled: $boardApp.dataset.disabled === 'true',
       issueLinkBase: $boardApp.dataset.issueLinkBase
     },
     init: Store.create.bind(Store),
     created () {
-      gl.boardService = new BoardService(this.endpoint);
+      gl.boardService = new BoardService(this.endpoint, this.boardId);
     },
     ready () {
       Store.disabled = this.disabled;
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index 7e86f001f44..cacb36a897f 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/app/assets/javascripts/boards/components/board.js.es6
@@ -21,7 +21,8 @@
     },
     data () {
       return {
-        filters: Store.state.filters
+        filters: Store.state.filters,
+        showIssueForm: false
       };
     },
     watch: {
@@ -33,6 +34,11 @@
         deep: true
       }
     },
+    methods: {
+      showNewIssueForm() {
+        this.showIssueForm = !this.showIssueForm;
+      }
+    },
     ready () {
       const options = gl.issueBoards.getBoardSortableDefaultOptions({
         disabled: this.disabled,
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
index 63d72d857d9..ff90f2d6d75 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ b/app/assets/javascripts/boards/components/board_blank_state.js.es6
@@ -8,10 +8,8 @@
     data () {
       return {
         predefinedLabels: [
-          new ListLabel({ title: 'Development', color: '#5CB85C' }),
-          new ListLabel({ title: 'Testing', color: '#F0AD4E' }),
-          new ListLabel({ title: 'Production', color: '#FF5F00' }),
-          new ListLabel({ title: 'Ready', color: '#FF0000' })
+          new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
+          new ListLabel({ title: 'Doing', color: '#5CB85C' })
         ]
       }
     },
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 474805c1437..7022a29e818 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/app/assets/javascripts/boards/components/board_list.js.es6
@@ -1,4 +1,5 @@
 //= require ./board_card
+//= require ./board_new_issue
 
 (() => {
   const Store = gl.issueBoards.BoardsStore;
@@ -8,14 +9,16 @@
 
   gl.issueBoards.BoardList = Vue.extend({
     components: {
-      'board-card': gl.issueBoards.BoardCard
+      'board-card': gl.issueBoards.BoardCard,
+      'board-new-issue': gl.issueBoards.BoardNewIssue
     },
     props: {
       disabled: Boolean,
       list: Object,
       issues: Array,
       loading: Boolean,
-      issueLinkBase: String
+      issueLinkBase: String,
+      showIssueForm: Boolean
     },
     data () {
       return {
@@ -73,7 +76,7 @@
         group: 'issues',
         sort: false,
         disabled: this.disabled,
-        filter: '.board-list-count',
+        filter: '.board-list-count, .is-disabled',
         onStart: (e) => {
           const card = this.$refs.issue[e.oldIndex];
 
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
new file mode 100644
index 00000000000..a4fad422eca
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_new_issue.js.es6
@@ -0,0 +1,58 @@
+(() => {
+  window.gl = window.gl || {};
+
+  gl.issueBoards.BoardNewIssue = Vue.extend({
+    props: {
+      list: Object,
+      showIssueForm: Boolean
+    },
+    data() {
+      return {
+        title: '',
+        error: false
+      };
+    },
+    watch: {
+      showIssueForm () {
+        this.$els.input.focus();
+      }
+    },
+    methods: {
+      submit(e) {
+        e.preventDefault();
+        if (this.title.trim() === '') return;
+
+        this.error = false;
+
+        const labels = this.list.label ? [this.list.label] : [];
+        const issue = new ListIssue({
+          title: this.title,
+          labels
+        });
+
+        this.list.newIssue(issue)
+          .then((data) => {
+            // Need this because our jQuery very kindly disables buttons on ALL form submissions
+            $(this.$els.submitButton).enable();
+          })
+          .catch(() => {
+            // Need this because our jQuery very kindly disables buttons on ALL form submissions
+            $(this.$els.submitButton).enable();
+
+            // Remove the issue
+            this.list.removeIssue(issue);
+
+            // Show error message
+            this.error = true;
+            this.showIssueForm = true;
+          });
+
+        this.cancel();
+      },
+      cancel() {
+        this.showIssueForm = false;
+        this.title = '';
+      }
+    }
+  });
+})();
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index 44addb3ea98..f629d45c587 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -21,7 +21,7 @@
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,
       ghostClass: 'is-ghost',
-      filter: '.has-tooltip',
+      filter: '.has-tooltip, .btn',
       delay: gl.issueBoards.touchEnabled ? 100 : 0,
       scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
       scrollSpeed: 20,
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
index 91fd620fdb3..5d0a561cdba 100644
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ b/app/assets/javascripts/boards/models/list.js.es6
@@ -87,6 +87,17 @@ class List {
       });
   }
 
+  newIssue (issue) {
+    this.addIssue(issue);
+    this.issuesSize++;
+
+    return gl.boardService.newIssue(this.id, issue)
+      .then((resp) => {
+        const data = resp.json();
+        issue.id = data.iid;
+      });
+  }
+
   createIssues (data) {
     data.forEach((issueObj) => {
       this.addIssue(new ListIssue(issueObj));
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
index 9b80fb2e99f..b9c91cbf31e 100644
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ b/app/assets/javascripts/boards/services/board_service.js.es6
@@ -1,15 +1,15 @@
 class BoardService {
-  constructor (root) {
+  constructor (root, boardId) {
     Vue.http.options.root = root;
 
-    this.lists = Vue.resource(`${root}/lists{/id}`, {}, {
+    this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
       generate: {
         method: 'POST',
-        url: `${root}/lists/generate.json`
+        url: `${root}/${boardId}/lists/generate.json`
       }
     });
-    this.issue = Vue.resource(`${root}/issues{/id}`, {});
-    this.issues = Vue.resource(`${root}/lists{/id}/issues`, {});
+    this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
+    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
 
     Vue.http.interceptors.push((request, next) => {
       request.headers['X-CSRF-Token'] = $.rails.csrfToken();
@@ -58,4 +58,10 @@ class BoardService {
       to_list_id
     });
   }
+
+  newIssue (id, issue) {
+    return this.issues.save({ id }, {
+      issue
+    });
+  }
 };
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index f336bfc36d6..97462a5959c 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -15,18 +15,17 @@
       this.hideSidebar = bind(this.hideSidebar, this);
       this.toggleSidebar = bind(this.toggleSidebar, this);
       this.updateDropdown = bind(this.updateDropdown, this);
+      this.$document = $(document);
       clearInterval(Build.interval);
       // Init breakpoint checker
       this.bp = Breakpoints.get();
-      $('.js-build-sidebar').niceScroll();
+      this.initSidebar();
 
       this.populateJobs(this.build_stage);
       this.updateStageDropdownText(this.build_stage);
-      this.hideSidebar();
 
-      $(document).off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
       $(window).off('resize.build').on('resize.build', this.hideSidebar);
-      $(document).off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+      this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
       $('#js-build-scroll > a').off('click').on('click', this.stepTrace);
       this.updateArtifactRemoveDate();
       if ($('#build-trace').length) {
@@ -62,6 +61,21 @@
       }
     }
 
+    Build.prototype.initSidebar = function() {
+      this.$sidebar = $('.js-build-sidebar');
+      this.sidebarTranslationLimits = {
+        min: $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()
+      }
+      this.sidebarTranslationLimits.max = this.sidebarTranslationLimits.min + $('.scrolling-tabs-container').outerHeight();
+      this.$sidebar.css({
+        top: this.sidebarTranslationLimits.max
+      });
+      this.$sidebar.niceScroll();
+      this.hideSidebar();
+      this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
+      this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
+    };
+
     Build.prototype.getInitialBuildTrace = function() {
       var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']
 
@@ -129,15 +143,23 @@
 
     Build.prototype.toggleSidebar = function() {
       if (this.shouldHideSidebar()) {
-        return $('.js-build-sidebar').toggleClass('right-sidebar-expanded right-sidebar-collapsed');
+        return this.$sidebar.toggleClass('right-sidebar-expanded right-sidebar-collapsed');
       }
     };
 
+    Build.prototype.translateSidebar = function(e) {
+      var newPosition = this.sidebarTranslationLimits.max - document.body.scrollTop;
+      if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
+      this.$sidebar.css({
+        top: newPosition
+      });
+    };
+
     Build.prototype.hideSidebar = function() {
       if (this.shouldHideSidebar()) {
-        return $('.js-build-sidebar').removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        return this.$sidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
       } else {
-        return $('.js-build-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        return this.$sidebar.removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
       }
     };
 
diff --git a/app/assets/javascripts/commit/image-file.js b/app/assets/javascripts/commit/image_file.js
index e893491b19b..e893491b19b 100644
--- a/app/assets/javascripts/commit/image-file.js
+++ b/app/assets/javascripts/commit/image_file.js
diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js.es6
index 294d2c9052c..9a2082d97e0 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js.es6
@@ -9,7 +9,10 @@
         var $dropdown, selected;
         $dropdown = $(this);
         selected = $dropdown.data('selected');
-        return $dropdown.glDropdown({
+        const $dropdownContainer = $dropdown.closest('.dropdown');
+        const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
+        const $filterInput = $('input[type="search"]', $dropdownContainer);
+        $dropdown.glDropdown({
           data: function(term, callback) {
             return $.ajax({
               url: $dropdown.data('refs-url'),
@@ -42,6 +45,14 @@
             return $el.text().trim();
           }
         });
+        $filterInput.on('keyup', (e) => {
+          const keyCode = e.keyCode || e.which;
+          if (keyCode !== 13) return;
+          const text = $filterInput.val();
+          $fieldInput.val(text);
+          $('.dropdown-toggle-text', $dropdown).text(text);
+          $dropdownContainer.removeClass('open');
+        });
       });
     };
 
diff --git a/app/assets/javascripts/cycle-analytics.js.es6 b/app/assets/javascripts/cycle_analytics.js.es6
index cd9886ba58d..cd9886ba58d 100644
--- a/app/assets/javascripts/cycle-analytics.js.es6
+++ b/app/assets/javascripts/cycle_analytics.js.es6
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js.es6
index 8d99b12102d..f3957ed374b 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -8,6 +8,7 @@
   Dispatcher = (function() {
     function Dispatcher() {
       this.initSearch();
+      this.initFieldErrors();
       this.initPageScripts();
     }
 
@@ -20,7 +21,11 @@
       path = page.split(':');
       shortcut_handler = null;
       switch (page) {
+        case 'sessions:new':
+          new UsernameValidator();
+          break;
         case 'projects:boards:show':
+        case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
           break;
         case 'projects:merge_requests:index':
@@ -126,6 +131,9 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:show':
+          new gl.Pipelines();
+          break;
         case 'groups:activity':
           new Activities();
           break;
@@ -136,12 +144,12 @@
           break;
         case 'groups:group_members:index':
           new gl.MemberExpirationDate();
-          new GroupMembers();
+          new gl.Members();
           new UsersSelect();
           break;
         case 'projects:project_members:index':
           new gl.MemberExpirationDate();
-          new ProjectMembers();
+          new gl.Members();
           new UsersSelect();
           break;
         case 'groups:new':
@@ -287,6 +295,12 @@
       }
     };
 
+    Dispatcher.prototype.initFieldErrors = function() {
+      $('.show-gl-field-errors').each((i, form) => {
+        new gl.GlFieldErrors(form);
+      });
+    };
+
     return Dispatcher;
 
   })();
diff --git a/app/assets/javascripts/gfm_auto_complete.js.es6 b/app/assets/javascripts/gfm_auto_complete.js.es6
index d0786bf0053..845313b6b38 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.es6
+++ b/app/assets/javascripts/gfm_auto_complete.js.es6
@@ -52,37 +52,27 @@
         }
       }
     },
-    setup: function(input) {
+    setup: _.debounce(function(input) {
       // Add GFM auto-completion to all input fields, that accept GFM input.
       this.input = input || $('.js-gfm-input');
       // destroy previous instances
       this.destroyAtWho();
       // set up instances
       this.setupAtWho();
-      if (this.dataSource) {
-        if (!this.dataLoading && !this.cachedData) {
-          this.dataLoading = true;
-          setTimeout((function(_this) {
-            return function() {
-              var fetch;
-              fetch = _this.fetchData(_this.dataSource);
-              return fetch.done(function(data) {
-                _this.dataLoading = false;
-                return _this.loadData(data);
-              });
-            };
-          // We should wait until initializations are done
-          // and only trigger the last .setup since
-          // The previous .dataSource belongs to the previous issuable
-          // and the last one will have the **proper** .dataSource property
-          // TODO: Make this a singleton and turn off events when moving to another page
-          })(this), 1000);
-        }
-        if (this.cachedData != null) {
-          return this.loadData(this.cachedData);
-        }
+
+      if (this.dataSource && !this.dataLoading && !this.cachedData) {
+        this.dataLoading = true;
+        return this.fetchData(this.dataSource)
+          .done((data) => {
+            this.dataLoading = false;
+            this.loadData(data);
+          });
+        };
+
+      if (this.cachedData != null) {
+        return this.loadData(this.cachedData);
       }
-    },
+    }, 1000),
     setupAtWho: function() {
       // Emoji
       this.input.atwho({
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index d4403375643..53762f2965c 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -25,7 +25,7 @@
         return function(e) {
           e.preventDefault();
           e.stopPropagation();
-          return _this.input.val('').trigger('keyup').focus();
+          return _this.input.val('').trigger('input').focus();
         };
       })(this));
       // Key events
@@ -37,28 +37,16 @@
             e.preventDefault()
           }
         })
-        .on('keyup', function(e) {
-          var keyCode;
-          keyCode = e.which;
-          if (ARROW_KEY_CODES.indexOf(keyCode) >= 0) {
-            return;
-          }
+        .on('input', function() {
           if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
             $inputContainer.addClass(HAS_VALUE_CLASS);
           } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
             $inputContainer.removeClass(HAS_VALUE_CLASS);
           }
-          if (keyCode === 13 && !options.elIsInput) {
-            return false;
-          }
           // Only filter asynchronously only if option remote is set
           if (this.options.remote) {
             clearTimeout(timeout);
             return timeout = setTimeout(function() {
-              var blurField = this.shouldBlur(keyCode);
-              if (blurField && this.filterInputBlur) {
-                this.input.blur();
-              }
               return this.options.query(this.input.val(), function(data) {
                 return this.options.callback(data);
               }.bind(this));
@@ -255,7 +243,7 @@
                 _this.fullData = data;
                 _this.parseData(_this.fullData);
                 if (_this.options.filterable && _this.filter && _this.filter.input) {
-                  return _this.filter.input.trigger('keyup');
+                  return _this.filter.input.trigger('input');
                 }
               };
             // Remote data
@@ -487,7 +475,7 @@
       // Triggering 'keyup' will re-render the dropdown which is not always required
       // specially if we want to keep the state of the dropdown needed for bulk-assignment
       if (!this.options.persistWhenHide) {
-        $input.trigger("keyup");
+        $input.trigger("input");
       }
       if (this.dropdown.find(".dropdown-toggle-page").length) {
         $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
@@ -500,14 +488,27 @@
 
     // Render the full menu
     GitLabDropdown.prototype.renderMenu = function(html) {
-      var menu_html;
-      menu_html = "";
       if (this.options.renderMenu) {
-        menu_html = this.options.renderMenu(html);
+        return this.options.renderMenu(html);
       } else {
-        menu_html = $('<ul />').append(html);
+        var ul = document.createElement('ul');
+
+        for (var i = 0; i < html.length; i++) {
+          var el = html[i];
+
+          if (el instanceof jQuery) {
+            el = el.get(0);
+          }
+
+          if (typeof el === 'string') {
+            ul.innerHTML += el;
+          } else {
+            ul.appendChild(el);
+          }
+        }
+
+        return ul;
       }
-      return menu_html;
     };
 
     // Append the menu into the dropdown
@@ -521,7 +522,7 @@
     };
 
     GitLabDropdown.prototype.renderItem = function(data, group, index) {
-      var cssClass, field, fieldName, groupAttrs, html, selected, text, url, value;
+      var field, fieldName, html, selected, text, url, value;
       if (group == null) {
         group = false;
       }
@@ -529,18 +530,16 @@
         // Render the row
         index = false;
       }
-      html = "";
-      // Divider
-      if (data === "divider") {
-        return "<li class='divider'></li>";
-      }
-      // Separator is a full-width divider
-      if (data === "separator") {
-        return "<li class='separator'></li>";
+      html = document.createElement('li');
+      if (data === 'divider' || data === 'separator') {
+        html.className = data;
+        return html;
       }
       // Header
       if (data.header != null) {
-        return _.template('<li class="dropdown-header"><%- header %></li>')({ header: data.header });
+        html.className = 'dropdown-header';
+        html.innerHTML = data.header;
+        return html;
       }
       if (this.options.renderRow) {
         // Call the render function
@@ -567,24 +566,25 @@
         } else {
           text = data.text != null ? data.text : '';
         }
-        cssClass = "";
-        if (selected) {
-          cssClass = "is-active";
-        }
         if (this.highlight) {
           text = this.highlightTextMatches(text, this.filterInput.val());
         }
+        // Create the list item & the link
+        var link = document.createElement('a');
+
+        link.href = url;
+        link.innerHTML = text;
+
+        if (selected) {
+          link.className = 'is-active';
+        }
+
         if (group) {
-          groupAttrs = 'data-group=' + group + ' data-index=' + index;
-        } else {
-          groupAttrs = '';
+          link.dataset.group = group;
+          link.dataset.index = index;
         }
-        html = _.template('<li><a href="<%- url %>" <%- groupAttrs %> class="<%- cssClass %>"><%= text %></a></li>')({
-          url: url,
-          groupAttrs: groupAttrs,
-          cssClass: cssClass,
-          text: text
-        });
+
+        html.appendChild(link);
       }
       return html;
     };
@@ -738,6 +738,7 @@
             return false;
           }
           if (currentKeyCode === 13 && currentIndex !== -1) {
+            e.preventDefault();
             _this.selectRowAtIndex();
           }
         };
diff --git a/app/assets/javascripts/gl_field_errors.js.es6 b/app/assets/javascripts/gl_field_errors.js.es6
new file mode 100644
index 00000000000..8657e7b4abf
--- /dev/null
+++ b/app/assets/javascripts/gl_field_errors.js.es6
@@ -0,0 +1,167 @@
+((global) => {
+  /*
+   * This class overrides the browser's validation error bubbles, displaying custom
+   * error messages for invalid fields instead. To begin validating any form, add the
+   * class `show-gl-field-errors` to the form element, and ensure error messages are
+   * declared in each inputs' title attribute.
+   *
+   * Example:
+   *
+   * <form class='show-gl-field-errors'>
+   *  <input type='text' name='username' title='Username is required.'/>
+   *</form>
+   *
+    * */
+
+  const errorMessageClass = 'gl-field-error';
+  const inputErrorClass = 'gl-field-error-outline';
+
+  class GlFieldError {
+    constructor({ input, formErrors }) {
+      this.inputElement = $(input);
+      this.inputDomElement = this.inputElement.get(0);
+      this.form = formErrors;
+      this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
+      this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${ this.errorMessage }</p>`);
+
+      this.state = {
+        valid: false,
+        empty: true
+      };
+
+      this.initFieldValidation();
+    }
+
+    initFieldValidation() {
+      // hidden when injected into DOM
+      this.inputElement.after(this.fieldErrorElement);
+      this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
+      this.scopedSiblings = this.safelySelectSiblings();
+    }
+
+    safelySelectSiblings() {
+      // Apply `ignoreSelector` in markup to siblings whose visibility should not be toggled with input validity
+      const ignoreSelector = '.validation-ignore';
+      const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreSelector})`);
+      const parentContainer = this.inputElement.parent('.form-group');
+
+      // Only select siblings when they're scoped within a form-group with one input
+      const safelyScoped = parentContainer.length && parentContainer.find('input').length === 1;
+
+      return safelyScoped ? unignoredSiblings : this.fieldErrorElement;
+    }
+
+    renderValidity() {
+      this.renderClear();
+
+      if (this.state.valid) {
+        return this.renderValid();
+      }
+
+      if (this.state.empty) {
+        return this.renderEmpty();
+      }
+
+      if (!this.state.valid) {
+        return this.renderInvalid();
+      }
+
+    }
+
+    handleInvalidSubmit(event) {
+      event.preventDefault();
+      const currentValue = this.accessCurrentValue();
+      this.state.valid = false;
+      this.state.empty = currentValue === '';
+
+      this.renderValidity();
+      this.form.focusOnFirstInvalid.apply(this.form);
+      // For UX, wait til after first invalid submission to check each keyup
+      this.inputElement.off('keyup.field_validator')
+        .on('keyup.field_validator', this.updateValidity.bind(this));
+
+    }
+
+    /* Get or set current input value */
+    accessCurrentValue(newVal) {
+      return newVal ? this.inputElement.val(newVal) : this.inputElement.val();
+    }
+
+    getInputValidity() {
+      return this.inputDomElement.validity.valid;
+    }
+
+    updateValidity() {
+      const inputVal = this.accessCurrentValue();
+      this.state.empty = !inputVal.length;
+      this.state.valid = this.getInputValidity();
+      this.renderValidity();
+    }
+
+    renderValid() {
+      return this.renderClear();
+    }
+
+    renderEmpty() {
+      return this.renderInvalid();
+    }
+
+    renderInvalid() {
+      this.inputElement.addClass(inputErrorClass);
+      this.scopedSiblings.hide();
+      return this.fieldErrorElement.show();
+    }
+
+    renderClear() {
+      const inputVal = this.accessCurrentValue();
+      if (!inputVal.split(' ').length) {
+        const trimmedInput = inputVal.trim();
+        this.accessCurrentValue(trimmedInput);
+      }
+      this.inputElement.removeClass(inputErrorClass);
+      this.scopedSiblings.hide();
+      this.fieldErrorElement.hide();
+    }
+  }
+
+  const customValidationFlag = 'no-gl-field-errors';
+
+  class GlFieldErrors {
+    constructor(form) {
+      this.form = $(form);
+      this.state = {
+        inputs: [],
+        valid: false
+      };
+      this.initValidators();
+    }
+
+    initValidators () {
+      // select all non-hidden inputs in form
+      this.state.inputs = this.form.find(':input:not([type=hidden])').toArray()
+        .filter((input) => !input.classList.contains(customValidationFlag))
+        .map((input) => new GlFieldError({ input, formErrors: this }));
+
+      this.form.on('submit', this.catchInvalidFormSubmit);
+    }
+
+    /* Neccessary to prevent intercept and override invalid form submit
+     * because Safari & iOS quietly allow form submission when form is invalid
+     * and prevents disabling of invalid submit button by application.js */
+
+    catchInvalidFormSubmit (event) {
+      if (!event.currentTarget.checkValidity()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+
+    focusOnFirstInvalid () {
+      const firstInvalid = this.state.inputs.filter((input) => !input.inputDomElement.validity.valid)[0];
+      firstInvalid.inputElement.focus();
+    }
+  }
+
+  global.GlFieldErrors = GlFieldErrors;
+
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/groups.js b/app/assets/javascripts/groups.js
deleted file mode 100644
index 4382dd6860f..00000000000
--- a/app/assets/javascripts/groups.js
+++ /dev/null
@@ -1,13 +0,0 @@
-(function() {
-  this.GroupMembers = (function() {
-    function GroupMembers() {
-      $('li.group_member').bind('ajax:success', function() {
-        return $(this).fadeOut();
-      });
-    }
-
-    return GroupMembers;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/issues-bulk-assignment.js.es6 b/app/assets/javascripts/issues_bulk_assignment.js.es6
index 0808f538f01..0808f538f01 100644
--- a/app/assets/javascripts/issues-bulk-assignment.js.es6
+++ b/app/assets/javascripts/issues_bulk_assignment.js.es6
diff --git a/app/assets/javascripts/LabelManager.js.es6 b/app/assets/javascripts/label_manager.js.es6
index bc68e53504f..bc68e53504f 100644
--- a/app/assets/javascripts/LabelManager.js.es6
+++ b/app/assets/javascripts/label_manager.js.es6
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index e356872624a..f1e719937c7 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -292,7 +292,7 @@
               return;
             }
 
-            if (page === 'projects:boards:show') {
+            if ($('html').hasClass('issue-boards-page')) {
               return;
             }
             if ($dropdown.hasClass('js-multiselect')) {
@@ -334,7 +334,7 @@
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = page === 'projects:merge_requests:index';
-            if (page === 'projects:boards:show') {
+            if ($('html').hasClass('issue-boards-page')) {
               if (label.isAny) {
                 gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
               }
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 9299d0eabd2..b170e26eebf 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -38,6 +38,11 @@
     gl.utils.getPagePath = function() {
       return $('body').data('page').split(':')[0];
     };
+    gl.utils.parseUrl = function (url) {
+      var parser = document.createElement('a');
+      parser.href = url;
+      return parser;
+    };
     return jQuery.timefor = function(time, suffix, expiredLabel) {
       var suffixFromNow, timefor;
       if (!time) {
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index 1935af491f7..e1532fd9ec4 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -14,14 +14,18 @@
     inputs.datepicker({
       dateFormat: 'yy-mm-dd',
       minDate: 1,
-      onSelect: toggleClearInput
+      onSelect: function () {
+        $(this).trigger('change');
+        toggleClearInput.call(this);
+      }
     });
 
     inputs.next('.js-clear-input').on('click', function(event) {
       event.preventDefault();
 
       var input = $(this).closest('.clearable-input').find('.js-access-expiration-date');
-      input.datepicker('setDate', null);
+      input.datepicker('setDate', null)
+        .trigger('change');
       toggleClearInput.call(input);
     });
 
diff --git a/app/assets/javascripts/members.js.es6 b/app/assets/javascripts/members.js.es6
new file mode 100644
index 00000000000..a0cd20f21e8
--- /dev/null
+++ b/app/assets/javascripts/members.js.es6
@@ -0,0 +1,36 @@
+((w) => {
+  w.gl = w.gl || {};
+
+  class Members {
+    constructor() {
+      this.addListeners();
+    }
+
+    addListeners() {
+      $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
+      $('.js-member-update-control').off('change').on('change', this.formSubmit);
+      $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess);
+    }
+
+    removeRow(e) {
+      const $target = $(e.target);
+
+      if ($target.hasClass('btn-remove')) {
+        $target.closest('.member')
+          .fadeOut(function () {
+            $(this).remove();
+          });
+      }
+    }
+
+    formSubmit() {
+      $(this).closest('form').trigger("submit.rails").end().disable();
+    }
+
+    formSuccess() {
+      $(this).find('.js-member-update-control').enable();
+    }
+  }
+
+  gl.Members = Members;
+})(window);
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index bec11a198a1..fd21aa1fefa 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -61,6 +61,9 @@
     function MergeRequestTabs(opts) {
       this.opts = opts != null ? opts : {};
       this.opts.setUrl = this.opts.setUrl !== undefined ? this.opts.setUrl : true;
+
+      this.buildsLoaded = this.opts.buildsLoaded || false;
+
       this.setCurrentAction = bind(this.setCurrentAction, this);
       this.tabShown = bind(this.tabShown, this);
       this.showTab = bind(this.showTab, this);
@@ -68,6 +71,7 @@
       this._location = location;
       this.bindEvents();
       this.activateTab(this.opts.action);
+      this.initAffix();
     }
 
     MergeRequestTabs.prototype.bindEvents = function() {
@@ -93,7 +97,7 @@
         this.loadCommits($target.attr('href'));
         this.expandView();
         this.resetViewContainer();
-      } else if (action === 'diffs') {
+      } else if (this.isDiffAction(action)) {
         this.loadDiff($target.attr('href'));
         if ((typeof bp !== "undefined" && bp !== null) && bp.getBreakpointSize() !== 'lg') {
           this.shrinkView();
@@ -170,8 +174,9 @@
         action = 'notes';
       }
       this.currentAction = action;
-      // Remove a trailing '/commits' or '/diffs'
-      new_state = this._location.pathname.replace(/\/(commits|diffs|builds|pipelines)(\.html)?\/?$/, '');
+      // Remove a trailing '/commits' '/diffs' '/builds' '/pipelines' '/new' '/new/diffs'
+      new_state = this._location.pathname.replace(/\/(commits|diffs|builds|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
+
       // Append the new action if we're on a tab other than 'notes'
       if (action !== 'notes') {
         new_state += "/" + action;
@@ -210,8 +215,13 @@
       if (this.diffsLoaded) {
         return;
       }
+
+      // We extract pathname for the current Changes tab anchor href
+      // some pages like MergeRequestsController#new has query parameters on that anchor
+      var url = gl.utils.parseUrl(source);
+
       return this._get({
-        url: (source + ".json") + this._location.search,
+        url: (url.pathname + ".json") + this._location.search,
         success: (function(_this) {
           return function(data) {
             $('#diffs').html(data.html);
@@ -223,7 +233,7 @@
             gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
             $('#diffs .js-syntax-highlight').syntaxHighlight();
             $('#diffs .diff-file').singleFileDiff();
-            if (_this.diffViewType() === 'parallel' && _this.currentAction === 'diffs') {
+            if (_this.diffViewType() === 'parallel' && (_this.isDiffAction(_this.currentAction)) ) {
               _this.expandViewContainer();
             }
             _this.diffsLoaded = true;
@@ -324,6 +334,10 @@
       return $('.inline-parallel-buttons a.active').data('view-type');
     };
 
+    MergeRequestTabs.prototype.isDiffAction = function(action) {
+      return action === 'diffs' || action === 'new/diffs'
+    };
+
     MergeRequestTabs.prototype.expandViewContainer = function() {
       var $wrapper = $('.content-wrapper .container-fluid');
       if (this.fixedLayoutPref === null) {
@@ -367,6 +381,46 @@
     // Only when sidebar is collapsed
     };
 
+    MergeRequestTabs.prototype.initAffix = function () {
+      var $tabs = $('.js-tabs-affix');
+
+      // Screen space on small screens is usually very sparse
+      // So we dont affix the tabs on these
+      if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
+
+      var tabsWidth = $tabs.outerWidth(),
+        $diffTabs = $('#diff-notes-app'),
+        offsetTop = $tabs.offset().top - ($('.navbar-fixed-top').height() + $('.layout-nav').height());
+
+      $tabs.off('affix.bs.affix affix-top.bs.affix')
+        .affix({
+          offset: {
+            top: offsetTop
+          }
+        }).on('affix.bs.affix', function () {
+          $tabs.css({
+            left: $tabs.offset().left,
+            width: tabsWidth
+          });
+          $diffTabs.css({
+            marginTop: $tabs.height()
+          });
+        }).on('affix-top.bs.affix', function () {
+          $tabs.css({
+            left: '',
+            width: ''
+          });
+          $diffTabs.css({
+            marginTop: ''
+          });
+        });
+
+      // Fix bug when reloading the page already scrolling
+      if ($tabs.hasClass('affix')) {
+        $tabs.trigger('affix.bs.affix');
+      }
+    };
+
     return MergeRequestTabs;
 
   })();
diff --git a/app/assets/javascripts/merge_request_widget.js b/app/assets/javascripts/merge_request_widget.js.es6
index 7bbcdf59838..fcadc4bc515 100644
--- a/app/assets/javascripts/merge_request_widget.js
+++ b/app/assets/javascripts/merge_request_widget.js.es6
@@ -1,7 +1,26 @@
-(function() {
+ ((global) => {
   var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
-  this.MergeRequestWidget = (function() {
+  const DEPLOYMENT_TEMPLATE = `<div class="mr-widget-heading" id="<%- id %>">
+       <div class="ci_widget ci-success">
+         <%= ci_success_icon %>
+         <span>
+           Deployed to
+           <a href="<%- url %>" target="_blank" class="environment">
+             <%- name %>
+           </a>
+           <span class="js-environment-timeago" data-toggle="tooltip" data-placement="top" data-title="<%- deployed_at_formatted %>">
+             <%- deployed_at %>
+           </span>
+           <a class="js-environment-link" href="<%- external_url %>" target="_blank">
+             <i class="fa fa-external-link"></i>
+             View on <%- external_url_formatted %>
+           </a>
+         </span>
+       </div>
+     </div>`;
+
+   global.MergeRequestWidget = (function() {
     function MergeRequestWidget(opts) {
       // Initialize MergeRequestWidget behavior
       //
@@ -10,17 +29,23 @@
       //   ci_status_url        - String, URL to use to check CI status
       //
       this.opts = opts;
+      this.$widgetBody = $('.mr-widget-body');
       $('#modal_merge_info').modal({
         show: false
       });
       this.firstCICheck = true;
       this.readyForCICheck = false;
+      this.readyForCIEnvironmentCheck = false;
       this.cancel = false;
       clearInterval(this.fetchBuildStatusInterval);
+      clearInterval(this.fetchBuildEnvironmentStatusInterval);
       this.clearEventListeners();
       this.addEventListeners();
       this.getCIStatus(false);
+      this.getCIEnvironmentsStatus();
+      this.retrieveSuccessIcon();
       this.pollCIStatus();
+      this.pollCIEnvironmentsStatus();
       notifyPermissions();
     }
 
@@ -41,6 +66,7 @@
           page = $('body').data('page').split(':').last();
           if (allowedPages.indexOf(page) < 0) {
             clearInterval(_this.fetchBuildStatusInterval);
+            clearInterval(_this.fetchBuildEnvironmentStatusInterval);
             _this.cancelPolling();
             return _this.clearEventListeners();
           }
@@ -48,6 +74,12 @@
       })(this));
     };
 
+    MergeRequestWidget.prototype.retrieveSuccessIcon = function() {
+       const $ciSuccessIcon = $('.js-success-icon');
+       this.$ciSuccessIcon = $ciSuccessIcon.html();
+       $ciSuccessIcon.remove();
+     }
+
     MergeRequestWidget.prototype.mergeInProgress = function(deleteSourceBranch) {
       if (deleteSourceBranch == null) {
         deleteSourceBranch = false;
@@ -62,7 +94,7 @@
               urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
               return window.location.href = window.location.pathname + urlSuffix;
             } else if (data.merge_error) {
-              return $('.mr-widget-body').html("<h4>" + data.merge_error + "</h4>");
+              return this.$widgetBody.html("<h4>" + data.merge_error + "</h4>");
             } else {
               callback = function() {
                 return merge_request_widget.mergeInProgress(deleteSourceBranch);
@@ -118,6 +150,7 @@
           if (data.status === '') {
             return;
           }
+          if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
           if (_this.firstCICheck || data.status !== _this.opts.ci_status && (data.status != null)) {
             _this.opts.ci_status = data.status;
             _this.showCIStatus(data.status);
@@ -150,6 +183,41 @@
       })(this));
     };
 
+    MergeRequestWidget.prototype.pollCIEnvironmentsStatus = function() {
+      this.fetchBuildEnvironmentStatusInterval = setInterval(() => {
+        if (!this.readyForCIEnvironmentCheck) return;
+        this.getCIEnvironmentsStatus();
+        this.readyForCIEnvironmentCheck = false;
+      }, 300000);
+    };
+
+    MergeRequestWidget.prototype.getCIEnvironmentsStatus = function() {
+      $.getJSON(this.opts.ci_environments_status_url, (environments) => {
+        if (this.cancel) return;
+        this.readyForCIEnvironmentCheck = true;
+        if (environments && environments.length) this.renderEnvironments(environments);
+      });
+    };
+
+    MergeRequestWidget.prototype.renderEnvironments = function(environments) {
+      for (let i = 0; i < environments.length; i++) {
+        const environment = environments[i];
+        if ($(`.mr-state-widget #${ environment.id }`).length) return;
+        const $template = $(DEPLOYMENT_TEMPLATE);
+        if (!environment.external_url || !environment.external_url_formatted) $('.js-environment-link', $template).remove();
+        if (environment.deployed_at && environment.deployed_at_formatted) {
+          environment.deployed_at = $.timeago(environment.deployed_at) + '.';
+        } else {
+          $('.js-environment-timeago', $template).remove();
+          environment.name += '.';
+        }
+        environment.ci_success_icon = this.$ciSuccessIcon;
+        const templateString = _.unescape($template[0].outerHTML);
+        const template = _.template(templateString)(environment)
+        this.$widgetBody.before(template);
+      }
+     };
+
     MergeRequestWidget.prototype.showCIStatus = function(state) {
       var allowed_states;
       if (state == null) {
@@ -190,4 +258,4 @@
 
   })();
 
-}).call(this);
+ })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 26cc6eb0e96..cee42633c79 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -110,7 +110,7 @@
               e.preventDefault();
               return;
             }
-            if (page === 'projects:boards:show') {
+            if ($('html').hasClass('issue-boards-page')) {
               gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
               gl.issueBoards.BoardsStore.updateFiltersUrl();
               e.preventDefault();
diff --git a/app/assets/javascripts/network/branch-graph.js b/app/assets/javascripts/network/branch_graph.js
index 91132af273a..91132af273a 100644
--- a/app/assets/javascripts/network/branch-graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
deleted file mode 100644
index bf33eb10100..00000000000
--- a/app/assets/javascripts/pipeline.js.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-(function() {
-  function toggleGraph() {
-    const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
-    const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
-    const $btnText = $(this).find('.toggle-btn-text');
-
-    $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
-
-    const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
-
-    graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
-  }
-
-  $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
-})();
diff --git a/app/assets/javascripts/pipelines.js.es6 b/app/assets/javascripts/pipelines.js.es6
new file mode 100644
index 00000000000..6bf63ee6979
--- /dev/null
+++ b/app/assets/javascripts/pipelines.js.es6
@@ -0,0 +1,40 @@
+((global) => {
+
+  class Pipelines {
+    constructor() {
+      $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
+      this.addMarginToBuildColumns();
+    }
+
+    toggleGraph() {
+      const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
+      const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
+      const $btnText = $(this).find('.toggle-btn-text');
+      const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
+
+      $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
+
+
+      graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+    }
+
+    addMarginToBuildColumns() {
+      const $secondChildBuildNode = $('.build:nth-child(2)');
+      if ($secondChildBuildNode.length) {
+        const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+        const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
+        const $previousColumn = $multiBuildColumn.prev('.stage-column');
+        $multiBuildColumn.addClass('left-margin');
+        $firstChildBuildNode.addClass('left-connector');
+        $previousColumn.each(function() {
+          $this = $(this);
+          if ($('.build', $this).length === 1) $this.addClass('no-margin');
+        });
+      }
+      $('.pipeline-graph').removeClass('hidden');
+    }
+  }
+
+  global.Pipelines = Pipelines;
+
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/project_members.js b/app/assets/javascripts/project_members.js
deleted file mode 100644
index 78f7b48bc7d..00000000000
--- a/app/assets/javascripts/project_members.js
+++ /dev/null
@@ -1,10 +0,0 @@
-(function() {
-  this.ProjectMembers = (function() {
-    function ProjectMembers() {
-      $('li.project_member').bind('ajax:success', function() {
-        return $(this).fadeOut();
-      });
-    }
-    return ProjectMembers;
-  })();
-}).call(this);
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index a787b11f2a9..3cf41505814 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -4,7 +4,9 @@
   this.ProjectNew = (function() {
     function ProjectNew() {
       this.toggleSettings = bind(this.toggleSettings, this);
-      this.$selects = $('.features select');
+      this.$selects = $('.features select').filter(function () {
+        return $(this).data('field');
+      });
 
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js.es6 b/app/assets/javascripts/templates/issuable_template_selector.js.es6
index 2ecf3b18975..bd4e3c3d00d 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js.es6
+++ b/app/assets/javascripts/templates/issuable_template_selector.js.es6
@@ -16,7 +16,13 @@
       if (initialQuery.name) this.requestFile(initialQuery);
 
       $('.reset-template', this.dropdown.parent()).on('click', () => {
-        if (this.currentTemplate) this.setInputValueToTemplateContent(false);
+        this.setInputValueToTemplateContent();
+      });
+
+      $('.no-template', this.dropdown.parent()).on('click', () => {
+        this.currentTemplate = '';
+        this.setInputValueToTemplateContent();
+        $('.dropdown-toggle-text', this.dropdown).text('Choose a template');
       });
     }
 
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
index 63bce0a6f6f..dfdfa1e7f75 100644
--- a/app/assets/javascripts/user_tabs.js.es6
+++ b/app/assets/javascripts/user_tabs.js.es6
@@ -89,7 +89,7 @@ content on the Users#show page.
       const action = $target.data('action');
       const source = $target.attr('href');
       this.setTab(source, action);
-      return this.setCurrentAction(action);
+      return this.setCurrentAction(source, action);
     }
 
     activateTab(action) {
@@ -142,14 +142,9 @@ content on the Users#show page.
         .toggle(status);
     }
 
-    setCurrentAction(action) {
-      const regExp = new RegExp(`\/(${this.actions.join('|')})(\.html)?\/?$`);
-      let new_state = this._location.pathname;
+    setCurrentAction(source, action) {
+      let new_state = source
       new_state = new_state.replace(/\/+$/, '');
-      new_state = new_state.replace(regExp, '');
-      if (action !== this.defaultAction) {
-        new_state += `/${action}`;
-      }
       new_state += this._location.search + this._location.hash;
       history.replaceState({
         turbolinks: true,
diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6
new file mode 100644
index 00000000000..2517f778365
--- /dev/null
+++ b/app/assets/javascripts/username_validator.js.es6
@@ -0,0 +1,133 @@
+((global) => {
+  const debounceTimeoutDuration = 1000;
+  const invalidInputClass = 'gl-field-error-outline';
+  const successInputClass = 'gl-field-success-outline';
+  const unavailableMessageSelector = '.username .validation-error';
+  const successMessageSelector = '.username .validation-success';
+  const pendingMessageSelector = '.username .validation-pending';
+  const invalidMessageSelector = '.username .gl-field-error';
+
+  class UsernameValidator {
+    constructor() {
+      this.inputElement = $('#new_user_username');
+      this.inputDomElement = this.inputElement.get(0);
+      this.state = {
+        available: false,
+        valid: false,
+        pending: false,
+        empty: true
+      };
+
+      const debounceTimeout = _.debounce((username) => {
+        this.validateUsername(username);
+      }, debounceTimeoutDuration);
+
+      this.inputElement.on('keyup.username_check', () => {
+        const username = this.inputElement.val();
+
+        this.state.valid = this.inputDomElement.validity.valid;
+        this.state.empty = !username.length;
+
+        if (this.state.valid) {
+          return debounceTimeout(username);
+        }
+
+        this.renderState();
+      });
+
+      // Override generic field validation
+      this.inputElement.on('invalid', this.interceptInvalid.bind(this));
+    }
+
+    renderState() {
+      // Clear all state
+      this.clearFieldValidationState();
+
+      if (this.state.valid && this.state.available) {
+        return this.setSuccessState();
+      }
+
+      if (this.state.empty) {
+        return this.clearFieldValidationState();
+      }
+
+      if (this.state.pending) {
+        return this.setPendingState();
+      }
+
+      if (!this.state.available) {
+        return this.setUnavailableState();
+      }
+
+      if (!this.state.valid) {
+        return this.setInvalidState();
+      }
+    }
+
+    interceptInvalid(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    validateUsername(username) {
+      if (this.state.valid) {
+        this.state.pending = true;
+        this.state.available = false;
+        this.renderState();
+        return $.ajax({
+          type: 'GET',
+          url: `/u/${username}/exists`,
+          dataType: 'json',
+          success: (res) => this.setAvailabilityState(res.exists)
+        });
+      }
+    }
+
+    setAvailabilityState(usernameTaken) {
+      if (usernameTaken) {
+        this.state.valid = false;
+        this.state.available = false;
+      } else {
+        this.state.available = true;
+      }
+      this.state.pending = false;
+      this.renderState();
+    }
+
+    clearFieldValidationState() {
+      this.inputElement.siblings('p').hide();
+
+      this.inputElement.removeClass(invalidInputClass)
+        .removeClass(successInputClass);
+    }
+
+    setUnavailableState() {
+      const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $usernameUnavailableMessage.show();
+    }
+
+    setSuccessState() {
+      const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
+      this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
+      $usernameSuccessMessage.show();
+    }
+
+    setPendingState() {
+      const $usernamePendingMessage = $(pendingMessageSelector);
+      if (this.state.pending) {
+        $usernamePendingMessage.show();
+      } else {
+        $usernamePendingMessage.hide();
+      }
+    }
+
+    setInvalidState() {
+      const $inputErrorMessage = $(invalidMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $inputErrorMessage.show();
+    }
+  }
+
+  global.UsernameValidator = UsernameValidator;
+})(window);
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 05056a73aaf..3020b7cc239 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -71,8 +71,8 @@
               return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
             });
           };
-          collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/u/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-          assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/u/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
+          collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author_link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
+          assigneeTemplate = _.template('<% if (username) { %> <a class="author_link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
           return $dropdown.glDropdown({
             showMenuAbove: showMenuAbove,
             data: function(term, callback) {
@@ -160,7 +160,7 @@
                 selectedId = user.id;
                 return;
               }
-              if (page === 'projects:boards:show') {
+              if ($('html').hasClass('issue-boards-page')) {
                 selectedId = user.id;
                 gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
                 gl.issueBoards.BoardsStore.updateFiltersUrl();
@@ -261,10 +261,11 @@
                   }
                 }
                 if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+                  var trimmed = query.term.trim();
                   emailUser = {
                     name: "Invite \"" + query.term + "\"",
-                    username: query.term,
-                    id: query.term
+                    username: trimmed,
+                    id: trimmed
                   };
                   data.results.unshift(emailUser);
                 }
@@ -324,6 +325,10 @@
     };
 
     UsersSelect.prototype.user = function(user_id, callback) {
+      if(!/^\d+$/.test(user_id)) {
+        return false;
+      }
+
       var url;
       url = this.buildUrl(this.userPath);
       url = url.replace(':id', user_id);
diff --git a/app/assets/stylesheets/behaviors.scss b/app/assets/stylesheets/behaviors.scss
index 897bc49e7df..e3ca7f6373a 100644
--- a/app/assets/stylesheets/behaviors.scss
+++ b/app/assets/stylesheets/behaviors.scss
@@ -5,6 +5,7 @@
     display: none;
     &.hide { display: block; }
   }
+
   &.open .content {
     display: block;
     &.hide { display: none; }
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index c79b22d4d21..98e301d3799 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -4,7 +4,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  @include border-radius($avatar_radius);
+  border-radius: $avatar_radius;
   border: 1px solid rgba(0, 0, 0, .1);
 
   &.avatar-inline {
@@ -17,7 +17,7 @@
   }
 
   &.avatar-tile {
-    @include border-radius(0);
+    border-radius: 0;
     border: none;
   }
 
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index d315db4cb32..df2e2ea8d2c 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -19,6 +19,7 @@
 
   &.diff-collapsed {
     padding: 5px;
+
     .click-to-expand {
       cursor: pointer;
     }
@@ -133,7 +134,7 @@
     }
 
     .identicon {
-      @include border-radius(50%);
+      border-radius: 50%;
     }
   }
 
@@ -203,6 +204,7 @@
       }
     }
   }
+
   &.user-cover-block {
     padding: 24px 0 0;
   }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ce489f7c3de..e6656c2d69a 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,5 +1,5 @@
 @mixin btn-default {
-  @include border-radius(3px);
+  border-radius: 3px;
   font-size: $gl-font-size;
   font-weight: 500;
   padding: $gl-vert-padding $gl-btn-padding;
@@ -8,7 +8,7 @@
   &:active {
     outline: none;
     background-color: $btn-active-gray;
-    @include box-shadow($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
   }
 }
 
@@ -25,7 +25,7 @@
   &:focus {
     background-color: $hover-background;
     color: $hover-text;
-    border-color: $hover-border;;
+    border-color: $hover-border;
   }
 }
 
@@ -43,7 +43,7 @@
 
   &:active,
   &.active {
-    @include box-shadow ($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
 
     background-color: $dark;
     border-color: $border-dark;
@@ -152,7 +152,8 @@
     @include btn-blue-medium;
   }
 
-  &.btn-info {
+  &.btn-info,
+  &.btn-register {
     @include btn-blue;
   }
 
@@ -194,10 +195,17 @@
     pointer-events: none !important;
   }
 
-  .caret {
+  .fa-caret-down,
+  .fa-caret-up {
     margin-left: 5px;
   }
 
+  &.dropdown-toggle {
+    .fa-caret-down {
+      margin-left: 3px;
+    }
+  }
+
   svg {
     height: 15px;
     width: 15px;
@@ -233,6 +241,7 @@
   width: 100%;
   margin: 0;
   margin-bottom: 15px;
+
   &.btn {
     padding: 6px 0;
   }
@@ -272,7 +281,7 @@
   }
 
   .active {
-    @include box-shadow($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
 
     border: 1px solid #c6cacf !important;
     background-color: #e4e7ed !important;
@@ -314,6 +323,7 @@
 
 .btn-build {
   margin-left: 10px;
+
   i {
     color: $gl-icon-color;
   }
@@ -321,6 +331,7 @@
 
 .clone-dropdown-btn a {
   color: $dropdown-link-color;
+
   &:hover {
     text-decoration: none;
   }
@@ -330,6 +341,7 @@
   background-color: $background-color !important;
   border: 1px solid lightgrey;
   cursor: default;
+
   &:active {
     -moz-box-shadow: inset 0 0 0 white;
     -webkit-box-shadow: inset 0 0 0 white;
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index da7bab74a32..f3b6ad88ad6 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -13,10 +13,12 @@
   color: $text-color;
   background: $background-color;
 }
+
 .bs-callout h4 {
   margin-top: 0;
   margin-bottom: 5px;
 }
+
 .bs-callout p:last-child {
   margin-bottom: 0;
 }
@@ -27,16 +29,19 @@
   border-color: #eed3d7;
   color: #b94a48;
 }
+
 .bs-callout-warning {
   background-color: #faf8f0;
   border-color: #faebcc;
   color: #8a6d3b;
 }
+
 .bs-callout-info {
   background-color: #f4f8fa;
   border-color: #bce8f1;
   color: #34789a;
 }
+
 .bs-callout-success {
   background-color: #dff0d8;
   border-color: #5ca64d;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5957dce89bc..81e4e264560 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -1,31 +1,31 @@
 /** COLORS **/
 .cgray { color: $gl-gray; }
-.clgray { color: #bbb }
+.clgray { color: #bbb; }
 .cred { color: $gl-text-red; }
 .cgreen { color: $gl-text-green; }
-.cdark { color: #444 }
+.cdark { color: #444; }
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-5 { margin-top: 5px; }
-.prepend-top-10 { margin-top: 10px }
+.prepend-top-10 { margin-top: 10px; }
 .prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-20 { margin-top: 20px }
-.prepend-left-5 { margin-left: 5px }
-.prepend-left-10 { margin-left: 10px }
+.prepend-top-20 { margin-top: 20px; }
+.prepend-left-5 { margin-left: 5px; }
+.prepend-left-10 { margin-left: 10px; }
 .prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px }
-.append-right-5 { margin-right: 5px }
-.append-right-10 { margin-right: 10px }
+.prepend-left-20 { margin-left: 20px; }
+.append-right-5 { margin-right: 5px; }
+.append-right-10 { margin-right: 10px; }
 .append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px }
-.append-bottom-0 { margin-bottom: 0 }
-.append-bottom-10 { margin-bottom: 10px }
-.append-bottom-15 { margin-bottom: 15px }
-.append-bottom-20 { margin-bottom: 20px }
+.append-right-20 { margin-right: 20px; }
+.append-bottom-0 { margin-bottom: 0; }
+.append-bottom-10 { margin-bottom: 10px; }
+.append-bottom-15 { margin-bottom: 15px; }
+.append-bottom-20 { margin-bottom: 20px; }
 .append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block }
-.center { text-align: center }
+.inline { display: inline-block; }
+.center { text-align: center; }
 
 .underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: #999; }
@@ -97,6 +97,7 @@ span.update-author {
   color: #999;
   font-weight: normal;
   font-style: italic;
+
   strong {
     font-weight: bold;
     font-style: normal;
@@ -128,7 +129,7 @@ p.time {
 
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
-  img { max-width: 100% }
+  img { max-width: 100%; }
   .note-title {
     li {
       border-bottom: none !important;
@@ -172,6 +173,7 @@ li.note {
   @extend .col-md-6;
   text-align: left;
   margin-top: 40px;
+
   pre {
     background: white;
     border: none;
@@ -197,6 +199,7 @@ li.note {
   background: #c67;
   color: #fff;
   font-weight: bold;
+
   a {
     color: #fff;
     text-decoration: underline;
@@ -227,6 +230,7 @@ li.note {
   &.milestone-closed {
     background: $gray-light;
   }
+
   .progress {
     margin-bottom: 0;
     margin-top: 4px;
@@ -286,6 +290,7 @@ table {
 
 .footer-links {
   margin-bottom: 20px;
+
   a {
     margin-right: 15px;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 4a87a73a68a..a839371a6f2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -1,20 +1,3 @@
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top: $caret-width-base dashed;
-  border-right: $caret-width-base solid transparent;
-  border-left: $caret-width-base solid transparent;
-}
-
-.btn-group {
-  .caret {
-    margin-left: 0;
-  }
-}
-
 .dropdown {
   position: relative;
 
@@ -29,6 +12,7 @@
   .dropdown-menu,
   .dropdown-menu-nav {
     display: block;
+
     @media (max-width: $screen-xs-max) {
       width: 100%;
     }
@@ -65,6 +49,7 @@
     margin-top: -6px;
     color: $dropdown-toggle-icon-color;
     font-size: 10px;
+
     &.fa-spinner {
       font-size: 16px;
       margin-top: -8px;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 81520500594..13c1bbf0359 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -26,15 +26,6 @@
     padding: 10px $gl-padding;
     word-wrap: break-word;
     border-radius: 3px 3px 0 0;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $dark-background-color;
-    }
-
-    .diff-toggle-caret {
-      padding-right: 6px; 
-    }
 
     &.file-title-clear {
       padding-left: 0;
@@ -66,6 +57,7 @@
       margin-top: -3px;
     }
   }
+
   .file-content {
     background: #fff;
 
@@ -105,22 +97,27 @@
         border: none;
         margin: 0;
       }
+
       tr {
         border-bottom: 1px solid #eee;
       }
+
       td {
         &:first-child {
           border-left: none;
         }
+
         &:last-child {
           border-right: none;
         }
       }
+
       td.blame-commit {
         padding: 0 10px;
         min-width: 400px;
         background: $gray-light;
       }
+
       td.line-numbers {
         float: none;
         border-left: 1px solid #ddd;
@@ -130,6 +127,7 @@
           margin-right: 0;
         }
       }
+
       td.lines {
         padding: 0;
       }
@@ -146,8 +144,10 @@
         border-left: 1px solid $border-color;
         margin-bottom: 0;
         background: white;
+
         li {
           color: #888;
+
           p {
             margin: 0;
             color: #333;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 37ff7e22ed1..761c07384f4 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -9,7 +9,7 @@ input {
 input[type='text'].danger {
   background: #f2dede!important;
   border-color: #d66;
-  text-shadow: 0 1px 1px #fff
+  text-shadow: 0 1px 1px #fff;
 }
 
 .datetime-controls {
@@ -74,17 +74,17 @@ label {
 
 .form-control {
   @include box-shadow(none);
-  border-radius: 3px;
+  border-radius: 2px;
   padding: $gl-vert-padding $gl-input-padding;
 }
 
 .select-wrapper {
   position: relative;
 
-  .caret {
+  .fa-caret-down {
     position: absolute;
     right: 10px;
-    top: $gl-padding;
+    top: 10px;
     color: $gray-darkest;
     pointer-events: none;
   }
@@ -117,9 +117,11 @@ label {
     display: table-cell;
     width: 200px !important;
   }
+
   .input-group-addon {
     background-color: #f7f8fa;
   }
+
   .input-group-addon:not(:first-child):not(:last-child) {
     border-left: 0;
     border-right: 0;
@@ -129,3 +131,8 @@ label {
 .help-block {
   margin-bottom: 0;
 }
+
+.gl-field-error {
+  color: $red-normal;
+}
+
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 3673b81f183..fe834f4e2f6 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -62,7 +62,7 @@
         }
 
         i {
-          color: $white-light
+          color: $white-light;
         }
 
         path,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index c748f856501..3a4fdd0da22 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -57,6 +57,10 @@ header {
         &:hover, &:focus, &:active {
           background-color: $background-color;
         }
+
+        .fa-caret-down {
+          font-size: 15px;
+        }
       }
 
       .navbar-toggle {
@@ -164,6 +168,7 @@ header {
 
       a {
         color: $gl-text-color;
+
         &:hover {
           text-decoration: underline;
         }
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 8bfc0d583c5..ba3930e03bd 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -16,7 +16,7 @@
     margin-top: 5px;
   }
 
-  @include border-radius(3px);
+  border-radius: 3px;
   display: block;
   float: left;
   margin-right: 10px;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index efc348214c2..4b2627c1b87 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -60,6 +60,7 @@
       padding-top: 1px;
       margin: 0;
       color: $gray-dark;
+
       img {
         position: relative;
         top: 3px;
@@ -128,6 +129,10 @@ ul.content-list {
       color: $gl-dark-link-color;
     }
 
+    .member-group-link {
+      color: $blue-normal;
+    }
+
     .description {
       p {
         @include str-truncated;
@@ -168,6 +173,14 @@ ul.content-list {
       }
     }
 
+    .member-controls {
+      float: none;
+
+      @media (min-width: $screen-sm-min) {
+        float: right;
+      }
+    }
+
     // When dragging a list item
     &.ui-sortable-helper {
       border-bottom: none;
diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss
index 3ee3fb4cee5..a90e45bb5f4 100644
--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
@@ -1,15 +1,3 @@
-@mixin unique-keyframes {
-  $animation-name: unique-id();
-  @include webkit-prefix(animation-name, $animation-name);
-
-  @-webkit-keyframes #{$animation-name} {
-    @content;
-  }
-  @keyframes #{$animation-name} {
-    @content;
-  }
-}
-
 @mixin tanuki-logo-colors($path-color) {
   fill: $path-color;
   transition: all 0.8s;
@@ -20,28 +8,6 @@
   }
 }
 
-@mixin tanuki-second-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    10%, 80% {
-      fill: #{$tanuki-color}
-    }
-    20%, 90% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
-@mixin tanuki-forth-highlight-animations($tanuki-color) {
-  @include unique-keyframes {
-    30%, 60% {
-      fill: #{$tanuki-color};
-    }
-    40%, 70% {
-      fill: lighten($tanuki-color, 25%);
-    }
-  }
-}
-
 .tanuki-logo {
 
   .tanuki-left-ear,
@@ -67,10 +33,11 @@
     }
 
     .tanuki-left-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-left-cheek) {
         0%, 10%, 100% {
           fill: lighten($tanuki-yellow, 25%);
         }
+
         90% {
           fill: $tanuki-yellow;
         }
@@ -78,18 +45,35 @@
     }
 
     .tanuki-left-eye {
-      @include tanuki-second-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-left-eye) {
+        10%, 80% {
+          fill: $tanuki-orange;
+        }
+
+        20%, 90% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
 
     .tanuki-left-ear {
-      @include tanuki-second-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-left-ear) {
+        10%, 80% {
+          fill: $tanuki-red;
+        }
+ 
+        20%, 90% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
 
     .tanuki-nose {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-nose) {
         20%, 70% {
           fill: $tanuki-red;
         }
+
         30%, 80% {
           fill: lighten($tanuki-red, 25%);
         }
@@ -97,22 +81,39 @@
     }
 
     .tanuki-right-eye {
-      @include tanuki-forth-highlight-animations($tanuki-orange);
+      @include include-keyframes(animate-tanuki-right-eye) {
+        30%, 60% {
+          fill: $tanuki-orange;
+        }
+
+        40%, 70% {
+          fill: lighten($tanuki-orange, 25%);
+        }
+      }
     }
 
     .tanuki-right-ear {
-      @include tanuki-forth-highlight-animations($tanuki-red);
+      @include include-keyframes(animate-tanuki-right-ear) {
+        30%, 60% {
+          fill: $tanuki-red;
+        }
+
+        40%, 70% {
+          fill: lighten($tanuki-red, 25%);
+        }
+      }
     }
 
     .tanuki-right-cheek {
-      @include unique-keyframes {
+      @include include-keyframes(animate-tanuki-right-cheek) {
         40% {
           fill: $tanuki-yellow;
         }
+
         60% {
           fill: lighten($tanuki-yellow, 25%);
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index edea4ad00eb..6d28d98b283 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -86,7 +86,7 @@
 }
 
 .markdown-area {
-  @include border-radius(0);
+  border-radius: 0;
   background: #fff;
   border: 1px solid #ddd;
   min-height: 140px;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 1ec08cdef23..f84ca36d10f 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -1,15 +1,4 @@
 /**
- * Generic mixins
- */
-@mixin box-shadow($shadow) {
-  box-shadow: $shadow;
-}
-
-@mixin border-radius($radius) {
-  border-radius: $radius;
-}
-
-/**
  * Prefilled mixins
  * Mixins with fixed values
  */
@@ -45,6 +34,7 @@
 
     &.active {
       background: $gray-light;
+
       a {
         font-weight: 600;
       }
@@ -95,3 +85,10 @@
     @content;
   }
 }
+
+@mixin include-keyframes($animation-name) {
+  @include webkit-prefix(animation-name, $animation-name);
+  @include keyframes($animation-name) {
+    @content;
+  }
+}
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 76b93b23b95..9fe390eb09d 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -133,5 +133,5 @@
   font-size: 20px;
   color: #777;
   z-index: 100;
-  @include box-shadow(0 1px 2px #ddd);
+  box-shadow: 0 1px 2px #ddd;
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ea43f4afc37..899db045b74 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -210,6 +210,7 @@
     @media (max-width: $screen-xs-max) {
       padding-bottom: 0;
       width: 100%;
+
       .btn, form, .dropdown, .dropdown-menu-toggle, .form-control {
         margin: 0 0 10px;
         display: block;
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index c6f30e144fd..5ba0486177f 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -13,6 +13,11 @@
     .dropdown-menu-toggle {
       line-height: 20px;
     }
+
+    .badge {
+      margin-top: -2px;
+      margin-left: 5px;
+    }
   }
 
   .panel-body {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index c75dacf95d9..e0708c65695 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -21,7 +21,14 @@
       padding-right: 10px;
 
       b {
-        @extend .caret;
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-left: 2px;
+        vertical-align: middle;
+        border-top: $caret-width-base dashed;
+        border-right: $caret-width-base solid transparent;
+        border-left: $caret-width-base solid transparent;
         color: $gray-darkest;
       }
     }
@@ -39,8 +46,8 @@
 }
 
 .select2-drop {
-  @include box-shadow(rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0);
-  @include border-radius ($border-radius-default);
+  box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0;
+  border-radius: $border-radius-default;
   border: none;
   min-width: 175px;
 }
@@ -65,7 +72,7 @@
 
 .select2-container-active {
   .select2-choice, .select2-choices {
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 
@@ -75,18 +82,18 @@
     outline: 0;
     background-image: none;
     background-color: $white-dark;
-    @include box-shadow($gl-btn-active-gradient);
+    box-shadow: $gl-btn-active-gradient;
   }
 }
 
 .select2-container-multi {
   .select2-choices {
-    @include border-radius($border-radius-default);
+    border-radius: $border-radius-default;
     border-color: $input-border;
     background: none;
 
     .select2-search-field input {
-      padding: $gl-padding / 2;
+      padding: 5px $gl-padding / 2;
       font-size: 13px;
       height: auto;
       font-family: inherit;
@@ -94,7 +101,7 @@
     }
 
     .select2-search-choice {
-      margin: 8px 0 0 8px;
+      margin: 5px 0 0 8px;
       box-shadow: none;
       border-color: $input-border;
       color: $gl-text-color;
@@ -116,7 +123,7 @@
   &.select2-container-active .select2-choices,
   &.select2-dropdown-open .select2-choices {
     border-color: $border-white-normal;
-    @include box-shadow($gl-btn-active-gradient);
+    box-shadow: $gl-btn-active-gradient;
   }
 }
 
@@ -130,6 +137,7 @@
 
   .select2-results {
     max-height: 350px;
+
     .select2-highlighted {
       background: $gl-primary;
     }
@@ -150,7 +158,7 @@
   background-repeat: no-repeat;
   background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
-  @include border-radius($border-radius-default);
+  border-radius: $border-radius-default;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
   &:focus {
@@ -205,9 +213,11 @@
   .group-image {
     float: left;
   }
+
   .group-name {
     font-weight: bold;
   }
+
   .group-path {
     color: #999;
   }
@@ -232,6 +242,7 @@
     color: #aaa;
     font-weight: normal;
   }
+
   .namespace-path {
     margin-left: 10px;
     font-weight: bolder;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 557ef7291cf..ec52f326eb9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -4,7 +4,7 @@
 
   &.page-sidebar-pinned {
     .sidebar-wrapper {
-      @include box-shadow(none);
+      box-shadow: none;
     }
   }
 
@@ -17,7 +17,7 @@
     width: 0;
     overflow: hidden;
     transition: width $sidebar-transition-duration;
-    @include box-shadow(2px 0 16px 0 $black-transparent);
+    box-shadow: 2px 0 16px 0 $black-transparent;
   }
 }
 
@@ -100,7 +100,7 @@
   .count {
     float: right;
     padding: 0 8px;
-    @include border-radius(6px);
+    border-radius: 6px;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 0b0bd80c326..eb63a9f214b 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -48,6 +48,7 @@
     &:before {
       background: none;
     }
+
     .timeline-entry .timeline-entry-inner {
       .timeline-icon {
         display: none;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index e3154657c54..f4106641269 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -48,31 +48,40 @@
 .clearfix {
   @include clearfix();
 }
+
 .center-block {
   @include center-block();
 }
+
 .pull-right {
   float: right !important;
 }
+
 .pull-left {
   float: left !important;
 }
+
 .hide {
   display: none;
 }
+
 .show {
   display: block !important;
 }
+
 .invisible {
   visibility: hidden;
 }
+
 .text-hide {
   @include text-hide();
 }
+
 .hidden {
   display: none !important;
   visibility: hidden !important;
 }
+
 .affix {
   position: fixed;
 }
@@ -146,6 +155,7 @@
       padding: 6px 15px;
       font-size: 13px;
       font-weight: normal;
+
       a {
         color: #777;
       }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9f2d53d5206..8df0067fac1 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -106,6 +106,7 @@
     @extend .table-bordered;
     margin: 12px 0;
     color: #5c5d5e;
+
     th {
       background: #f8fafc;
     }
@@ -116,7 +117,7 @@
     font-size: 13px;
     line-height: 1.6em;
     overflow-x: auto;
-    @include border-radius(2px);
+    border-radius: 2px;
   }
 
   p > code {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 14ec310de2d..4c34ed3ebf7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -17,8 +17,10 @@ $white-normal: #ededed;
 $white-dark: #ececec;
 
 $gray-light: #fafafa;
+$gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
 $gray-dark: #ededed;
+$gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
@@ -33,6 +35,8 @@ $blue-medium-light: #3498cb;
 $blue-medium: #2f8ebf;
 $blue-medium-dark: #2d86b4;
 
+$blue-light-transparent: rgba(44, 159, 216, 0.05);
+
 $orange-light: #fc8a51;
 $orange-normal: #e75e40;
 $orange-dark: #ce5237;
@@ -91,6 +95,7 @@ $table-text-gray:       #8f8f8f;
 $gl-font-size:         15px;
 $gl-title-color:       #333;
 $gl-text-color:        #5c5c5c;
+$gl-text-color-light:  #8c8c8c;
 $gl-text-green:        #4a2;
 $gl-text-red:          #d12f19;
 $gl-text-orange:       #d90;
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 16ffbe57a99..a3acee299e3 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -55,68 +55,68 @@
     color: #000 !important;
   }
 
-  .hll { background-color: #373b41 }
-  .c { color: #969896 } /* Comment */
-  .err { color: #c66 } /* Error */
-  .k { color: #b294bb } /* Keyword */
-  .l { color: #de935f } /* Literal */
-  .n { color: #c5c8c6 } /* Name */
-  .o { color: #8abeb7 } /* Operator */
-  .p { color: #c5c8c6 } /* Punctuation */
-  .cm { color: #969896 } /* Comment.Multiline */
-  .cp { color: #969896 } /* Comment.Preproc */
-  .c1 { color: #969896 } /* Comment.Single */
-  .cs { color: #969896 } /* Comment.Special */
-  .gd { color: #c66 } /* Generic.Deleted */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gh { color: #c5c8c6; font-weight: bold } /* Generic.Heading */
-  .gi { color: #b5bd68 } /* Generic.Inserted */
-  .gp { color: #969896; font-weight: bold } /* Generic.Prompt */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .gu { color: #8abeb7; font-weight: bold } /* Generic.Subheading */
-  .kc { color: #b294bb } /* Keyword.Constant */
-  .kd { color: #b294bb } /* Keyword.Declaration */
-  .kn { color: #8abeb7 } /* Keyword.Namespace */
-  .kp { color: #b294bb } /* Keyword.Pseudo */
-  .kr { color: #b294bb } /* Keyword.Reserved */
-  .kt { color: #f0c674 } /* Keyword.Type */
-  .ld { color: #b5bd68 } /* Literal.Date */
-  .m { color: #de935f } /* Literal.Number */
-  .s { color: #b5bd68 } /* Literal.String */
-  .na { color: #81a2be } /* Name.Attribute */
-  .nb { color: #c5c8c6 } /* Name.Builtin */
-  .nc { color: #f0c674 } /* Name.Class */
-  .no { color: #c66 } /* Name.Constant */
-  .nd { color: #8abeb7 } /* Name.Decorator */
-  .ni { color: #c5c8c6 } /* Name.Entity */
-  .ne { color: #c66 } /* Name.Exception */
-  .nf { color: #81a2be } /* Name.Function */
-  .nl { color: #c5c8c6 } /* Name.Label */
-  .nn { color: #f0c674 } /* Name.Namespace */
-  .nx { color: #81a2be } /* Name.Other */
-  .py { color: #c5c8c6 } /* Name.Property */
-  .nt { color: #8abeb7 } /* Name.Tag */
-  .nv { color: #c66 } /* Name.Variable */
-  .ow { color: #8abeb7 } /* Operator.Word */
-  .w { color: #c5c8c6 } /* Text.Whitespace */
-  .mf { color: #de935f } /* Literal.Number.Float */
-  .mh { color: #de935f } /* Literal.Number.Hex */
-  .mi { color: #de935f } /* Literal.Number.Integer */
-  .mo { color: #de935f } /* Literal.Number.Oct */
-  .sb { color: #b5bd68 } /* Literal.String.Backtick */
-  .sc { color: #c5c8c6 } /* Literal.String.Char */
-  .sd { color: #969896 } /* Literal.String.Doc */
-  .s2 { color: #b5bd68 } /* Literal.String.Double */
-  .se { color: #de935f } /* Literal.String.Escape */
-  .sh { color: #b5bd68 } /* Literal.String.Heredoc */
-  .si { color: #de935f } /* Literal.String.Interpol */
-  .sx { color: #b5bd68 } /* Literal.String.Other */
-  .sr { color: #b5bd68 } /* Literal.String.Regex */
-  .s1 { color: #b5bd68 } /* Literal.String.Single */
-  .ss { color: #b5bd68 } /* Literal.String.Symbol */
-  .bp { color: #c5c8c6 } /* Name.Builtin.Pseudo */
-  .vc { color: #c66 } /* Name.Variable.Class */
-  .vg { color: #c66 } /* Name.Variable.Global */
-  .vi { color: #c66 } /* Name.Variable.Instance */
-  .il { color: #de935f } /* Literal.Number.Integer.Long */
+  .hll { background-color: #373b41; }
+  .c { color: #969896; } /* Comment */
+  .err { color: #c66; } /* Error */
+  .k { color: #b294bb; } /* Keyword */
+  .l { color: #de935f; } /* Literal */
+  .n { color: #c5c8c6; } /* Name */
+  .o { color: #8abeb7; } /* Operator */
+  .p { color: #c5c8c6; } /* Punctuation */
+  .cm { color: #969896; } /* Comment.Multiline */
+  .cp { color: #969896; } /* Comment.Preproc */
+  .c1 { color: #969896; } /* Comment.Single */
+  .cs { color: #969896; } /* Comment.Special */
+  .gd { color: #c66; } /* Generic.Deleted */
+  .ge { font-style: italic; } /* Generic.Emph */
+  .gh { color: #c5c8c6; font-weight: bold; } /* Generic.Heading */
+  .gi { color: #b5bd68; } /* Generic.Inserted */
+  .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */
+  .gs { font-weight: bold; } /* Generic.Strong */
+  .gu { color: #8abeb7; font-weight: bold; } /* Generic.Subheading */
+  .kc { color: #b294bb; } /* Keyword.Constant */
+  .kd { color: #b294bb; } /* Keyword.Declaration */
+  .kn { color: #8abeb7; } /* Keyword.Namespace */
+  .kp { color: #b294bb; } /* Keyword.Pseudo */
+  .kr { color: #b294bb; } /* Keyword.Reserved */
+  .kt { color: #f0c674; } /* Keyword.Type */
+  .ld { color: #b5bd68; } /* Literal.Date */
+  .m { color: #de935f; } /* Literal.Number */
+  .s { color: #b5bd68; } /* Literal.String */
+  .na { color: #81a2be; } /* Name.Attribute */
+  .nb { color: #c5c8c6; } /* Name.Builtin */
+  .nc { color: #f0c674; } /* Name.Class */
+  .no { color: #c66; } /* Name.Constant */
+  .nd { color: #8abeb7; } /* Name.Decorator */
+  .ni { color: #c5c8c6; } /* Name.Entity */
+  .ne { color: #c66; } /* Name.Exception */
+  .nf { color: #81a2be; } /* Name.Function */
+  .nl { color: #c5c8c6; } /* Name.Label */
+  .nn { color: #f0c674; } /* Name.Namespace */
+  .nx { color: #81a2be; } /* Name.Other */
+  .py { color: #c5c8c6; } /* Name.Property */
+  .nt { color: #8abeb7; } /* Name.Tag */
+  .nv { color: #c66; } /* Name.Variable */
+  .ow { color: #8abeb7; } /* Operator.Word */
+  .w { color: #c5c8c6; } /* Text.Whitespace */
+  .mf { color: #de935f; } /* Literal.Number.Float */
+  .mh { color: #de935f; } /* Literal.Number.Hex */
+  .mi { color: #de935f; } /* Literal.Number.Integer */
+  .mo { color: #de935f; } /* Literal.Number.Oct */
+  .sb { color: #b5bd68; } /* Literal.String.Backtick */
+  .sc { color: #c5c8c6; } /* Literal.String.Char */
+  .sd { color: #969896; } /* Literal.String.Doc */
+  .s2 { color: #b5bd68; } /* Literal.String.Double */
+  .se { color: #de935f; } /* Literal.String.Escape */
+  .sh { color: #b5bd68; } /* Literal.String.Heredoc */
+  .si { color: #de935f; } /* Literal.String.Interpol */
+  .sx { color: #b5bd68; } /* Literal.String.Other */
+  .sr { color: #b5bd68; } /* Literal.String.Regex */
+  .s1 { color: #b5bd68; } /* Literal.String.Single */
+  .ss { color: #b5bd68; } /* Literal.String.Symbol */
+  .bp { color: #c5c8c6; } /* Name.Builtin.Pseudo */
+  .vc { color: #c66; } /* Name.Variable.Class */
+  .vg { color: #c66; } /* Name.Variable.Global */
+  .vi { color: #c66; } /* Name.Variable.Instance */
+  .il { color: #de935f; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 7de920e074b..e9228c94db9 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -55,65 +55,65 @@
     color: #000 !important;
   }
 
-  .hll { background-color: #49483e }
-  .c { color: #75715e } /* Comment */
-  .err { color: #960050; background-color: #1e0010 } /* Error */
-  .k { color: #66d9ef } /* Keyword */
-  .l { color: #ae81ff } /* Literal */
-  .n { color: #f8f8f2 } /* Name */
-  .o { color: #f92672 } /* Operator */
-  .p { color: #f8f8f2 } /* Punctuation */
-  .cm { color: #75715e } /* Comment.Multiline */
-  .cp { color: #75715e } /* Comment.Preproc */
-  .c1 { color: #75715e } /* Comment.Single */
-  .cs { color: #75715e } /* Comment.Special */
-  .ge { font-style: italic } /* Generic.Emph */
-  .gs { font-weight: bold } /* Generic.Strong */
-  .kc { color: #66d9ef } /* Keyword.Constant */
-  .kd { color: #66d9ef } /* Keyword.Declaration */
-  .kn { color: #f92672 } /* Keyword.Namespace */
-  .kp { color: #66d9ef } /* Keyword.Pseudo */
-  .kr { color: #66d9ef } /* Keyword.Reserved */
-  .kt { color: #66d9ef } /* Keyword.Type */
-  .ld { color: #e6db74 } /* Literal.Date */
-  .m { color: #ae81ff } /* Literal.Number */
-  .s { color: #e6db74 } /* Literal.String */
-  .na { color: #a6e22e } /* Name.Attribute */
-  .nb { color: #f8f8f2 } /* Name.Builtin */
-  .nc { color: #a6e22e } /* Name.Class */
-  .no { color: #66d9ef } /* Name.Constant */
-  .nd { color: #a6e22e } /* Name.Decorator */
-  .ni { color: #f8f8f2 } /* Name.Entity */
-  .ne { color: #a6e22e } /* Name.Exception */
-  .nf { color: #a6e22e } /* Name.Function */
-  .nl { color: #f8f8f2 } /* Name.Label */
-  .nn { color: #f8f8f2 } /* Name.Namespace */
-  .nx { color: #a6e22e } /* Name.Other */
-  .py { color: #f8f8f2 } /* Name.Property */
-  .nt { color: #f92672 } /* Name.Tag */
-  .nv { color: #f8f8f2 } /* Name.Variable */
-  .ow { color: #f92672 } /* Operator.Word */
-  .w { color: #f8f8f2 } /* Text.Whitespace */
-  .mf { color: #ae81ff } /* Literal.Number.Float */
-  .mh { color: #ae81ff } /* Literal.Number.Hex */
-  .mi { color: #ae81ff } /* Literal.Number.Integer */
-  .mo { color: #ae81ff } /* Literal.Number.Oct */
-  .sb { color: #e6db74 } /* Literal.String.Backtick */
-  .sc { color: #e6db74 } /* Literal.String.Char */
-  .sd { color: #e6db74 } /* Literal.String.Doc */
-  .s2 { color: #e6db74 } /* Literal.String.Double */
-  .se { color: #ae81ff } /* Literal.String.Escape */
-  .sh { color: #e6db74 } /* Literal.String.Heredoc */
-  .si { color: #e6db74 } /* Literal.String.Interpol */
-  .sx { color: #e6db74 } /* Literal.String.Other */
-  .sr { color: #e6db74 } /* Literal.String.Regex */
-  .s1 { color: #e6db74 } /* Literal.String.Single */
-  .ss { color: #e6db74 } /* Literal.String.Symbol */
-  .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-  .vc { color: #f8f8f2 } /* Name.Variable.Class */
-  .vg { color: #f8f8f2 } /* Name.Variable.Global */
-  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-  .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+  .hll { background-color: #49483e; }
+  .c { color: #75715e; } /* Comment */
+  .err { color: #960050; background-color: #1e0010; } /* Error */
+  .k { color: #66d9ef; } /* Keyword */
+  .l { color: #ae81ff; } /* Literal */
+  .n { color: #f8f8f2; } /* Name */
+  .o { color: #f92672; } /* Operator */
+  .p { color: #f8f8f2; } /* Punctuation */
+  .cm { color: #75715e; } /* Comment.Multiline */
+  .cp { color: #75715e; } /* Comment.Preproc */
+  .c1 { color: #75715e; } /* Comment.Single */
+  .cs { color: #75715e; } /* Comment.Special */
+  .ge { font-style: italic; } /* Generic.Emph */
+  .gs { font-weight: bold; } /* Generic.Strong */
+  .kc { color: #66d9ef; } /* Keyword.Constant */
+  .kd { color: #66d9ef; } /* Keyword.Declaration */
+  .kn { color: #f92672; } /* Keyword.Namespace */
+  .kp { color: #66d9ef; } /* Keyword.Pseudo */
+  .kr { color: #66d9ef; } /* Keyword.Reserved */
+  .kt { color: #66d9ef; } /* Keyword.Type */
+  .ld { color: #e6db74; } /* Literal.Date */
+  .m { color: #ae81ff; } /* Literal.Number */
+  .s { color: #e6db74; } /* Literal.String */
+  .na { color: #a6e22e; } /* Name.Attribute */
+  .nb { color: #f8f8f2; } /* Name.Builtin */
+  .nc { color: #a6e22e; } /* Name.Class */
+  .no { color: #66d9ef; } /* Name.Constant */
+  .nd { color: #a6e22e; } /* Name.Decorator */
+  .ni { color: #f8f8f2; } /* Name.Entity */
+  .ne { color: #a6e22e; } /* Name.Exception */
+  .nf { color: #a6e22e; } /* Name.Function */
+  .nl { color: #f8f8f2; } /* Name.Label */
+  .nn { color: #f8f8f2; } /* Name.Namespace */
+  .nx { color: #a6e22e; } /* Name.Other */
+  .py { color: #f8f8f2; } /* Name.Property */
+  .nt { color: #f92672; } /* Name.Tag */
+  .nv { color: #f8f8f2; } /* Name.Variable */
+  .ow { color: #f92672; } /* Operator.Word */
+  .w { color: #f8f8f2; } /* Text.Whitespace */
+  .mf { color: #ae81ff; } /* Literal.Number.Float */
+  .mh { color: #ae81ff; } /* Literal.Number.Hex */
+  .mi { color: #ae81ff; } /* Literal.Number.Integer */
+  .mo { color: #ae81ff; } /* Literal.Number.Oct */
+  .sb { color: #e6db74; } /* Literal.String.Backtick */
+  .sc { color: #e6db74; } /* Literal.String.Char */
+  .sd { color: #e6db74; } /* Literal.String.Doc */
+  .s2 { color: #e6db74; } /* Literal.String.Double */
+  .se { color: #ae81ff; } /* Literal.String.Escape */
+  .sh { color: #e6db74; } /* Literal.String.Heredoc */
+  .si { color: #e6db74; } /* Literal.String.Interpol */
+  .sx { color: #e6db74; } /* Literal.String.Other */
+  .sr { color: #e6db74; } /* Literal.String.Regex */
+  .s1 { color: #e6db74; } /* Literal.String.Single */
+  .ss { color: #e6db74; } /* Literal.String.Symbol */
+  .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
+  .vc { color: #f8f8f2; } /* Name.Variable.Class */
+  .vg { color: #f8f8f2; } /* Name.Variable.Global */
+  .vi { color: #f8f8f2; } /* Name.Variable.Instance */
+  .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
   .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
   .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index b11499c71ee..c3c7773b9e2 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -72,72 +72,72 @@
   green     #859900  operators, other keywords
   */
 
-  .c { color: #586e75 } /* Comment */
-  .err { color: #93a1a1 } /* Error */
-  .g { color: #93a1a1 } /* Generic */
-  .k { color: #859900 } /* Keyword */
-  .l { color: #93a1a1 } /* Literal */
-  .n { color: #93a1a1 } /* Name */
-  .o { color: #859900 } /* Operator */
-  .x { color: #cb4b16 } /* Other */
-  .p { color: #93a1a1 } /* Punctuation */
-  .cm { color: #586e75 } /* Comment.Multiline */
-  .cp { color: #859900 } /* Comment.Preproc */
-  .c1 { color: #586e75 } /* Comment.Single */
-  .cs { color: #859900 } /* Comment.Special */
-  .gd { color: #2aa198 } /* Generic.Deleted */
-  .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
-  .gr { color: #dc322f } /* Generic.Error */
-  .gh { color: #cb4b16 } /* Generic.Heading */
-  .gi { color: #859900 } /* Generic.Inserted */
-  .go { color: #93a1a1 } /* Generic.Output */
-  .gp { color: #93a1a1 } /* Generic.Prompt */
-  .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
-  .gu { color: #cb4b16 } /* Generic.Subheading */
-  .gt { color: #93a1a1 } /* Generic.Traceback */
-  .kc { color: #cb4b16 } /* Keyword.Constant */
-  .kd { color: #268bd2 } /* Keyword.Declaration */
-  .kn { color: #859900 } /* Keyword.Namespace */
-  .kp { color: #859900 } /* Keyword.Pseudo */
-  .kr { color: #268bd2 } /* Keyword.Reserved */
-  .kt { color: #dc322f } /* Keyword.Type */
-  .ld { color: #93a1a1 } /* Literal.Date */
-  .m { color: #2aa198 } /* Literal.Number */
-  .s { color: #2aa198 } /* Literal.String */
-  .na { color: #93a1a1 } /* Name.Attribute */
-  .nb { color: #b58900 } /* Name.Builtin */
-  .nc { color: #268bd2 } /* Name.Class */
-  .no { color: #cb4b16 } /* Name.Constant */
-  .nd { color: #268bd2 } /* Name.Decorator */
-  .ni { color: #cb4b16 } /* Name.Entity */
-  .ne { color: #cb4b16 } /* Name.Exception */
-  .nf { color: #268bd2 } /* Name.Function */
-  .nl { color: #93a1a1 } /* Name.Label */
-  .nn { color: #93a1a1 } /* Name.Namespace */
-  .nx { color: #93a1a1 } /* Name.Other */
-  .py { color: #93a1a1 } /* Name.Property */
-  .nt { color: #268bd2 } /* Name.Tag */
-  .nv { color: #268bd2 } /* Name.Variable */
-  .ow { color: #859900 } /* Operator.Word */
-  .w { color: #93a1a1 } /* Text.Whitespace */
-  .mf { color: #2aa198 } /* Literal.Number.Float */
-  .mh { color: #2aa198 } /* Literal.Number.Hex */
-  .mi { color: #2aa198 } /* Literal.Number.Integer */
-  .mo { color: #2aa198 } /* Literal.Number.Oct */
-  .sb { color: #586e75 } /* Literal.String.Backtick */
-  .sc { color: #2aa198 } /* Literal.String.Char */
-  .sd { color: #93a1a1 } /* Literal.String.Doc */
-  .s2 { color: #2aa198 } /* Literal.String.Double */
-  .se { color: #cb4b16 } /* Literal.String.Escape */
-  .sh { color: #93a1a1 } /* Literal.String.Heredoc */
-  .si { color: #2aa198 } /* Literal.String.Interpol */
-  .sx { color: #2aa198 } /* Literal.String.Other */
-  .sr { color: #dc322f } /* Literal.String.Regex */
-  .s1 { color: #2aa198 } /* Literal.String.Single */
-  .ss { color: #2aa198 } /* Literal.String.Symbol */
-  .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
-  .vc { color: #268bd2 } /* Name.Variable.Class */
-  .vg { color: #268bd2 } /* Name.Variable.Global */
-  .vi { color: #268bd2 } /* Name.Variable.Instance */
-  .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+  .c { color: #586e75; } /* Comment */
+  .err { color: #93a1a1; } /* Error */
+  .g { color: #93a1a1; } /* Generic */
+  .k { color: #859900; } /* Keyword */
+  .l { color: #93a1a1; } /* Literal */
+  .n { color: #93a1a1; } /* Name */
+  .o { color: #859900; } /* Operator */
+  .x { color: #cb4b16; } /* Other */
+  .p { color: #93a1a1; } /* Punctuation */
+  .cm { color: #586e75; } /* Comment.Multiline */
+  .cp { color: #859900; } /* Comment.Preproc */
+  .c1 { color: #586e75; } /* Comment.Single */
+  .cs { color: #859900; } /* Comment.Special */
+  .gd { color: #2aa198; } /* Generic.Deleted */
+  .ge { color: #93a1a1; font-style: italic; } /* Generic.Emph */
+  .gr { color: #dc322f; } /* Generic.Error */
+  .gh { color: #cb4b16; } /* Generic.Heading */
+  .gi { color: #859900; } /* Generic.Inserted */
+  .go { color: #93a1a1; } /* Generic.Output */
+  .gp { color: #93a1a1; } /* Generic.Prompt */
+  .gs { color: #93a1a1; font-weight: bold; } /* Generic.Strong */
+  .gu { color: #cb4b16; } /* Generic.Subheading */
+  .gt { color: #93a1a1; } /* Generic.Traceback */
+  .kc { color: #cb4b16; } /* Keyword.Constant */
+  .kd { color: #268bd2; } /* Keyword.Declaration */
+  .kn { color: #859900; } /* Keyword.Namespace */
+  .kp { color: #859900; } /* Keyword.Pseudo */
+  .kr { color: #268bd2; } /* Keyword.Reserved */
+  .kt { color: #dc322f; } /* Keyword.Type */
+  .ld { color: #93a1a1; } /* Literal.Date */
+  .m { color: #2aa198; } /* Literal.Number */
+  .s { color: #2aa198; } /* Literal.String */
+  .na { color: #93a1a1; } /* Name.Attribute */
+  .nb { color: #b58900; } /* Name.Builtin */
+  .nc { color: #268bd2; } /* Name.Class */
+  .no { color: #cb4b16; } /* Name.Constant */
+  .nd { color: #268bd2; } /* Name.Decorator */
+  .ni { color: #cb4b16; } /* Name.Entity */
+  .ne { color: #cb4b16; } /* Name.Exception */
+  .nf { color: #268bd2; } /* Name.Function */
+  .nl { color: #93a1a1; } /* Name.Label */
+  .nn { color: #93a1a1; } /* Name.Namespace */
+  .nx { color: #93a1a1; } /* Name.Other */
+  .py { color: #93a1a1; } /* Name.Property */
+  .nt { color: #268bd2; } /* Name.Tag */
+  .nv { color: #268bd2; } /* Name.Variable */
+  .ow { color: #859900; } /* Operator.Word */
+  .w { color: #93a1a1; } /* Text.Whitespace */
+  .mf { color: #2aa198; } /* Literal.Number.Float */
+  .mh { color: #2aa198; } /* Literal.Number.Hex */
+  .mi { color: #2aa198; } /* Literal.Number.Integer */
+  .mo { color: #2aa198; } /* Literal.Number.Oct */
+  .sb { color: #586e75; } /* Literal.String.Backtick */
+  .sc { color: #2aa198; } /* Literal.String.Char */
+  .sd { color: #93a1a1; } /* Literal.String.Doc */
+  .s2 { color: #2aa198; } /* Literal.String.Double */
+  .se { color: #cb4b16; } /* Literal.String.Escape */
+  .sh { color: #93a1a1; } /* Literal.String.Heredoc */
+  .si { color: #2aa198; } /* Literal.String.Interpol */
+  .sx { color: #2aa198; } /* Literal.String.Other */
+  .sr { color: #dc322f; } /* Literal.String.Regex */
+  .s1 { color: #2aa198; } /* Literal.String.Single */
+  .ss { color: #2aa198; } /* Literal.String.Symbol */
+  .bp { color: #268bd2; } /* Name.Builtin.Pseudo */
+  .vc { color: #268bd2; } /* Name.Variable.Class */
+  .vg { color: #268bd2; } /* Name.Variable.Global */
+  .vi { color: #268bd2; } /* Name.Variable.Instance */
+  .il { color: #2aa198; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 657bb5e3cd9..5956a28cafe 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -78,72 +78,72 @@
   green     #859900  operators, other keywords
   */
 
-  .c { color: #93a1a1 } /* Comment */
-  .err { color: #586e75 } /* Error */
-  .g { color: #586e75 } /* Generic */
-  .k { color: #859900 } /* Keyword */
-  .l { color: #586e75 } /* Literal */
-  .n { color: #586e75 } /* Name */
-  .o { color: #859900 } /* Operator */
-  .x { color: #cb4b16 } /* Other */
-  .p { color: #586e75 } /* Punctuation */
-  .cm { color: #93a1a1 } /* Comment.Multiline */
-  .cp { color: #859900 } /* Comment.Preproc */
-  .c1 { color: #93a1a1 } /* Comment.Single */
-  .cs { color: #859900 } /* Comment.Special */
-  .gd { color: #2aa198 } /* Generic.Deleted */
-  .ge { color: #586e75; font-style: italic } /* Generic.Emph */
-  .gr { color: #dc322f } /* Generic.Error */
-  .gh { color: #cb4b16 } /* Generic.Heading */
-  .gi { color: #859900 } /* Generic.Inserted */
-  .go { color: #586e75 } /* Generic.Output */
-  .gp { color: #586e75 } /* Generic.Prompt */
-  .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
-  .gu { color: #cb4b16 } /* Generic.Subheading */
-  .gt { color: #586e75 } /* Generic.Traceback */
-  .kc { color: #cb4b16 } /* Keyword.Constant */
-  .kd { color: #268bd2 } /* Keyword.Declaration */
-  .kn { color: #859900 } /* Keyword.Namespace */
-  .kp { color: #859900 } /* Keyword.Pseudo */
-  .kr { color: #268bd2 } /* Keyword.Reserved */
-  .kt { color: #dc322f } /* Keyword.Type */
-  .ld { color: #586e75 } /* Literal.Date */
-  .m { color: #2aa198 } /* Literal.Number */
-  .s { color: #2aa198 } /* Literal.String */
-  .na { color: #586e75 } /* Name.Attribute */
-  .nb { color: #b58900 } /* Name.Builtin */
-  .nc { color: #268bd2 } /* Name.Class */
-  .no { color: #cb4b16 } /* Name.Constant */
-  .nd { color: #268bd2 } /* Name.Decorator */
-  .ni { color: #cb4b16 } /* Name.Entity */
-  .ne { color: #cb4b16 } /* Name.Exception */
-  .nf { color: #268bd2 } /* Name.Function */
-  .nl { color: #586e75 } /* Name.Label */
-  .nn { color: #586e75 } /* Name.Namespace */
-  .nx { color: #586e75 } /* Name.Other */
-  .py { color: #586e75 } /* Name.Property */
-  .nt { color: #268bd2 } /* Name.Tag */
-  .nv { color: #268bd2 } /* Name.Variable */
-  .ow { color: #859900 } /* Operator.Word */
-  .w { color: #586e75 } /* Text.Whitespace */
-  .mf { color: #2aa198 } /* Literal.Number.Float */
-  .mh { color: #2aa198 } /* Literal.Number.Hex */
-  .mi { color: #2aa198 } /* Literal.Number.Integer */
-  .mo { color: #2aa198 } /* Literal.Number.Oct */
-  .sb { color: #93a1a1 } /* Literal.String.Backtick */
-  .sc { color: #2aa198 } /* Literal.String.Char */
-  .sd { color: #586e75 } /* Literal.String.Doc */
-  .s2 { color: #2aa198 } /* Literal.String.Double */
-  .se { color: #cb4b16 } /* Literal.String.Escape */
-  .sh { color: #586e75 } /* Literal.String.Heredoc */
-  .si { color: #2aa198 } /* Literal.String.Interpol */
-  .sx { color: #2aa198 } /* Literal.String.Other */
-  .sr { color: #dc322f } /* Literal.String.Regex */
-  .s1 { color: #2aa198 } /* Literal.String.Single */
-  .ss { color: #2aa198 } /* Literal.String.Symbol */
-  .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
-  .vc { color: #268bd2 } /* Name.Variable.Class */
-  .vg { color: #268bd2 } /* Name.Variable.Global */
-  .vi { color: #268bd2 } /* Name.Variable.Instance */
-  .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+  .c { color: #93a1a1; } /* Comment */
+  .err { color: #586e75; } /* Error */
+  .g { color: #586e75; } /* Generic */
+  .k { color: #859900; } /* Keyword */
+  .l { color: #586e75; } /* Literal */
+  .n { color: #586e75; } /* Name */
+  .o { color: #859900; } /* Operator */
+  .x { color: #cb4b16; } /* Other */
+  .p { color: #586e75; } /* Punctuation */
+  .cm { color: #93a1a1; } /* Comment.Multiline */
+  .cp { color: #859900; } /* Comment.Preproc */
+  .c1 { color: #93a1a1; } /* Comment.Single */
+  .cs { color: #859900; } /* Comment.Special */
+  .gd { color: #2aa198; } /* Generic.Deleted */
+  .ge { color: #586e75; font-style: italic; } /* Generic.Emph */
+  .gr { color: #dc322f; } /* Generic.Error */
+  .gh { color: #cb4b16; } /* Generic.Heading */
+  .gi { color: #859900; } /* Generic.Inserted */
+  .go { color: #586e75; } /* Generic.Output */
+  .gp { color: #586e75; } /* Generic.Prompt */
+  .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */
+  .gu { color: #cb4b16; } /* Generic.Subheading */
+  .gt { color: #586e75; } /* Generic.Traceback */
+  .kc { color: #cb4b16; } /* Keyword.Constant */
+  .kd { color: #268bd2; } /* Keyword.Declaration */
+  .kn { color: #859900; } /* Keyword.Namespace */
+  .kp { color: #859900; } /* Keyword.Pseudo */
+  .kr { color: #268bd2; } /* Keyword.Reserved */
+  .kt { color: #dc322f; } /* Keyword.Type */
+  .ld { color: #586e75; } /* Literal.Date */
+  .m { color: #2aa198; } /* Literal.Number */
+  .s { color: #2aa198; } /* Literal.String */
+  .na { color: #586e75; } /* Name.Attribute */
+  .nb { color: #b58900; } /* Name.Builtin */
+  .nc { color: #268bd2; } /* Name.Class */
+  .no { color: #cb4b16; } /* Name.Constant */
+  .nd { color: #268bd2; } /* Name.Decorator */
+  .ni { color: #cb4b16; } /* Name.Entity */
+  .ne { color: #cb4b16; } /* Name.Exception */
+  .nf { color: #268bd2; } /* Name.Function */
+  .nl { color: #586e75; } /* Name.Label */
+  .nn { color: #586e75; } /* Name.Namespace */
+  .nx { color: #586e75; } /* Name.Other */
+  .py { color: #586e75; } /* Name.Property */
+  .nt { color: #268bd2; } /* Name.Tag */
+  .nv { color: #268bd2; } /* Name.Variable */
+  .ow { color: #859900; } /* Operator.Word */
+  .w { color: #586e75; } /* Text.Whitespace */
+  .mf { color: #2aa198; } /* Literal.Number.Float */
+  .mh { color: #2aa198; } /* Literal.Number.Hex */
+  .mi { color: #2aa198; } /* Literal.Number.Integer */
+  .mo { color: #2aa198; } /* Literal.Number.Oct */
+  .sb { color: #93a1a1; } /* Literal.String.Backtick */
+  .sc { color: #2aa198; } /* Literal.String.Char */
+  .sd { color: #586e75; } /* Literal.String.Doc */
+  .s2 { color: #2aa198; } /* Literal.String.Double */
+  .se { color: #cb4b16; } /* Literal.String.Escape */
+  .sh { color: #586e75; } /* Literal.String.Heredoc */
+  .si { color: #2aa198; } /* Literal.String.Interpol */
+  .sx { color: #2aa198; } /* Literal.String.Other */
+  .sr { color: #dc322f; } /* Literal.String.Regex */
+  .s1 { color: #2aa198; } /* Literal.String.Single */
+  .ss { color: #2aa198; } /* Literal.String.Symbol */
+  .bp { color: #268bd2; } /* Name.Builtin.Pseudo */
+  .vc { color: #268bd2; } /* Name.Variable.Class */
+  .vg { color: #268bd2; } /* Name.Variable.Global */
+  .vi { color: #268bd2; } /* Name.Variable.Instance */
+  .il { color: #2aa198; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 36a80a916b2..6f31a5235c0 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -86,7 +86,7 @@
     background-color: #fafe3d !important;
   }
 
-  .hll { background-color: #f8f8f8 }
+  .hll { background-color: #f8f8f8; }
   .c { color: #998; font-style: italic; }
   .err { color: #a61717; background-color: #e3d2d2; }
   .k { font-weight: bold; }
diff --git a/app/assets/stylesheets/mailers/repository_push_email.scss b/app/assets/stylesheets/mailers/repository_push_email.scss
index 5bfe9bcb443..8d1a6020ca4 100644
--- a/app/assets/stylesheets/mailers/repository_push_email.scss
+++ b/app/assets/stylesheets/mailers/repository_push_email.scss
@@ -78,7 +78,7 @@ span.highlight_word {
   background-color: #fafe3d !important;
 }
 
-.hll { background-color: #f8f8f8 }
+.hll { background-color: #f8f8f8; }
 .c { color: #998; font-style: italic; }
 .err { color: #a61717; background-color: #e3d2d2; }
 .k { font-weight: bold; }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index fc12964872d..ced8c4a9907 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -2,22 +2,28 @@ img {
   max-width: 100%;
   height: auto;
 }
+
 p.details {
   font-style: italic;
-  color: #777
+  color: #777;
 }
+
 .footer > p {
   font-size: small;
-  color: #777
+  color: #777;
 }
+
 pre.commit-message {
   white-space: pre-wrap;
 }
+
 .file-stats > a {
   text-decoration: none;
+
   > .new-file {
     color: #090;
   }
+
   > .deleted-file {
     color: #b00;
   }
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
index 8f71381f5c4..140d589024b 100644
--- a/app/assets/stylesheets/pages/admin.scss
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -22,7 +22,7 @@
 
 .admin-filter form {
   .select2-container {
-    width: 100%
+    width: 100%;
   }
 
   .controls {
@@ -31,7 +31,7 @@
 
   .form-actions {
     padding-left: 130px;
-    background: #fff
+    background: #fff;
    }
 
   .visibility-levels {
@@ -106,26 +106,33 @@
   .table {
     table-layout: fixed;
   }
+
   .subheading {
     padding-bottom: $gl-padding;
   }
+
   .message {
     word-wrap: break-word;
   }
+
   .btn {
     white-space: normal;
     padding: $gl-btn-padding;
   }
+
   th {
     width: 15%;
+
     &.wide {
       width: 55%;
     }
   }
+
   @media (max-width: $screen-sm-max) {
     th {
       width: 100%;
     }
+
     td {
       width: 100%;
       float: left;
@@ -137,6 +144,7 @@
       margin-left: $btn-side-margin;
       margin-top: 3px;
     }
+
     span {
       font-size: 19px;
     }
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ecc5b24e360..6e81c12aa55 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -162,6 +162,10 @@ lex
   list-style: none;
   overflow-y: scroll;
   overflow-x: hidden;
+
+  &.is-smaller {
+    height: calc(100% - 185px);
+  }
 }
 
 .board-list-loading {
@@ -233,3 +237,31 @@ lex
     margin-right: 5px;
   }
 }
+
+.board-new-issue-form {
+  margin: 5px;
+}
+
+.board-issue-count-holder {
+  margin-top: -3px;
+
+  .btn {
+    line-height: 12px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.board-issue-count {
+  padding-right: 10px;
+  padding-left: 10px;
+  line-height: 21px;
+  border-radius: $border-radius-base;
+  border: 1px solid $border-color;
+
+  &.has-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-width: 1px 0 1px 1px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 194a39a8377..2fbf0cf34bf 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -137,6 +137,7 @@
 
   .retry-link {
     color: $gl-link-color;
+
     &:hover {
       text-decoration: underline;
     }
@@ -218,6 +219,7 @@
 
 .build-detail-row {
   margin-bottom: 5px;
+
   &:last-of-type {
     margin-bottom: 0;
   }
@@ -233,3 +235,9 @@
   right: 0;
   margin-top: -17px;
 }
+
+@media (min-width: $screen-md-min) {
+  .sub-nav.build {
+    width: calc(100% + #{$gutter_width});
+  }
+}
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
index 53ec0002afe..264e7e01a34 100644
--- a/app/assets/stylesheets/pages/commit.scss
+++ b/app/assets/stylesheets/pages/commit.scss
@@ -51,6 +51,7 @@
       margin-left: 4px;
     }
   }
+
   .commit-committer-link,
   .commit-author-link {
     color: $gl-gray;
@@ -108,21 +109,25 @@
       line-height: 20px;
     }
   }
+
   .new-file {
     a {
       color: $gl-text-green;
     }
   }
+
   .renamed-file {
     a {
       color: $gl-text-orange;
     }
   }
+
   .deleted-file {
     a {
       color: $gl-text-red;
     }
   }
+
   .edit-file {
     a {
       color: $gl-text-color;
@@ -158,6 +163,7 @@
     position: absolute;
     z-index: 1;
   }
+
   > textarea {
     background-color: rgba(0, 0, 0, 0.0);
     font-family: inherit;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index dc57a837155..2b5621e20d6 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -161,6 +161,7 @@
 
 .branch-commit {
   color: $gl-gray;
+
   .commit-id, .commit-row-message {
     color: $gl-gray;
   }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 778471a34d7..d732008de3d 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -50,7 +50,7 @@
 
   .bordered-box {
     border: 1px solid $border-color;
-    @include border-radius($border-radius-default);
+    border-radius: $border-radius-default;
   
   }
 
diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss
index 42928ee279c..76225ed8d06 100644
--- a/app/assets/stylesheets/pages/dashboard.scss
+++ b/app/assets/stylesheets/pages/dashboard.scss
@@ -5,6 +5,7 @@
         background: $background-color;
         border-top-left-radius: 0;
       }
+
       border-top-left-radius: 0;
     }
   }
@@ -17,6 +18,7 @@
     float: left;
     @extend .col-md-2;
   }
+
   .btn {
     margin-left: 5px;
     float: left;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index b8ef76cc74e..bdc82a8f0f5 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -33,6 +33,19 @@
       font-size: smaller;
     }
   }
+
+  .file-title {
+    cursor: pointer;
+
+    &:hover {
+      background-color: $dark-background-color;
+    }
+
+    .diff-toggle-caret {
+      padding-right: 6px;
+    }
+  }
+
   .diff-content {
     overflow: auto;
     overflow-y: hidden;
@@ -123,15 +136,18 @@
       max-width: 50px;
       width: 35px;
       @include user-select(none);
+
       a {
         float: left;
         width: 35px;
         font-weight: normal;
+
         &:hover {
           text-decoration: underline;
         }
       }
     }
+
     .line_content {
       display: block;
       margin: 0;
@@ -151,10 +167,12 @@
       white-space: pre-wrap;
     }
   }
+
   .image {
     background: #ddd;
     text-align: center;
     padding: 30px;
+
     .wrap {
       display: inline-block;
     }
@@ -163,6 +181,7 @@
       display: inline-block;
       background-color: #fff;
       line-height: 0;
+
       img {
         border: 1px solid #fff;
         background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%),
@@ -171,6 +190,7 @@
         background-position: 0 0, 5px 5px;
         max-width: 100%;
       }
+
       &.deleted {
         border: 1px solid $deleted;
       }
@@ -179,6 +199,7 @@
         border: 1px solid $added;
       }
     }
+
     .image-info {
       font-size: 12px;
       margin: 5px 0 0;
@@ -193,6 +214,7 @@
         margin: auto;
         position: relative;
       }
+
       .swipe-wrap {
         overflow: hidden;
         border-left: 1px solid #999;
@@ -201,10 +223,12 @@
         top: 13px;
         right: 7px;
       }
+ 
       .frame {
         top: 0;
         right: 0;
         position: absolute;
+ 
         &.deleted {
           margin: 0;
           display: block;
@@ -212,6 +236,7 @@
           right: 7px;
         }
       }
+
       .swipe-bar {
         display: block;
         height: 100%;
@@ -219,14 +244,17 @@
         z-index: 100;
         position: absolute;
         cursor: pointer;
+
         &:hover {
           .top-handle {
             background-position: -15px 3px;
           }
+
           .bottom-handle {
             background-position: -15px -11px;
           }
         }
+
         .top-handle {
           display: block;
           height: 14px;
@@ -235,6 +263,7 @@
           top: 0;
           background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
         }
+
         .bottom-handle {
           display: block;
           height: 14px;
@@ -252,12 +281,14 @@
         margin: auto;
         position: relative;
       }
+
       .frame.added, .frame.deleted {
         position: absolute;
         display: block;
         top: 0;
         left: 0;
       }
+
       .controls {
         display: block;
         height: 14px;
@@ -311,6 +342,7 @@
     }
     //.view.onion-skin
   }
+
   .view-modes {
     padding: 10px;
     text-align: center;
@@ -328,19 +360,24 @@
       border-left: 1px solid #c1c1c1;
       padding: 0 12px 0 16px;
       cursor: pointer;
+
       &:first-child {
         border-left: none;
       }
+
       &:hover {
         text-decoration: underline;
       }
+
       &.active {
         &:hover {
           text-decoration: none;
         }
+
         cursor: default;
         color: #333;
       }
+
       &.disabled {
         display: none;
       }
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index e1304335271..029dabd2138 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -1,7 +1,7 @@
 .file-editor {
   #editor {
     border: none;
-    @include border-radius(0);
+    border-radius: 0;
     height: 500px;
     margin: 0;
     padding: 0;
@@ -15,6 +15,7 @@
 
   .cancel-btn {
     color: #b94a48;
+
     &:hover {
       color: #b94a48;
     }
@@ -70,16 +71,20 @@
 
   .soft-wrap-toggle {
     margin: 0 $btn-side-margin;
+
     .soft-wrap {
       display: block;
     }
+
     .no-wrap {
       display: none;
     }
+
     &.soft-wrap-active {
       .soft-wrap {
         display: none;
       }
+
       .no-wrap {
         display: block;
       }
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 2e14bdb0eb3..9d3492abfb5 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -1,4 +1,15 @@
+.environments-container,
+.deployments-container {
+  width: 100%;
+  overflow: auto;
+}
+
 .environments {
+  .deployment-column {
+    .avatar {
+      float: none;
+    }
+  }
 
   .commit-title {
     margin: 0;
@@ -9,6 +20,7 @@
     width: 12px;
   }
 
+  .external-url,
   .dropdown-new {
     color: $table-text-gray;
   }
@@ -21,6 +33,7 @@
     }
   }
 
+  .build-link,
   .branch-name {
     color: $gl-dark-link-color;
   }
@@ -32,13 +45,31 @@
       font-size: 14px;
     }
   }
+
+  .deployment {
+    .build-column {
+    
+      .build-link {
+        color: $gl-dark-link-color;
+      }
+      
+      .avatar {
+        float: none;
+      }
+    }
+  }
 }
 
-.table.builds.environments {
-  min-width: 500px;
+.table.ci-table.environments {
 
   .icon-container {
     width: 20px;
     text-align: center;
   }
+
+  .branch-commit {
+    .commit-id {
+      margin-right: 0;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 1d00da1266c..5d9a76dac05 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -78,6 +78,7 @@
         margin-bottom: 0;
       }
     }
+
     .event-note-icon {
       color: #777;
       float: left;
@@ -86,21 +87,23 @@
       margin-right: 5px;
     }
   }
+
   .event_icon {
     position: relative;
     float: right;
     border: 1px solid #eee;
     padding: 5px;
-    @include border-radius(5px);
+    border-radius: 5px;
     background: $gray-light;
     margin-left: 10px;
     top: -6px;
+
     img {
       width: 20px;
     }
   }
 
-  &:last-child { border: none }
+  &:last-child { border: none; }
 
   .event_commits {
     li {
@@ -109,6 +112,7 @@
         padding: 3px;
         padding-left: 0;
         border: none;
+
         .commit-row-title {
           font-size: $gl-font-size;
         }
@@ -117,6 +121,7 @@
       &.commits-stat {
         display: block;
         padding: 0 3px 0 0;
+
         &:hover {
           background: none;
         }
@@ -158,6 +163,7 @@
       overflow: visible;
       max-width: 100%;
     }
+
     .avatar {
       display: none;
     }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 185ce970e71..ee2a398f031 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -1,17 +1,3 @@
-.member-search-form {
-  float: left;
-
-  input[type='search'] {
-    width: 225px;
-    vertical-align: bottom;
-
-    @media (max-width: $screen-xs-max) {
-      width: 100px;
-      vertical-align: bottom;
-    }
-  }
-}
-
 .milestone-row {
   @include str-truncated(90%);
 }
@@ -48,6 +34,7 @@
   .group-right-buttons {
     position: absolute;
     right: 16px;
+
     .btn {
       @include btn-gray;
       padding: 3px 10px;
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 00ab42bec5c..a48b4c65db8 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -23,28 +23,28 @@
   color: #555;
 
   tbody:first-child tr:first-child {
-    padding-top: 0
+    padding-top: 0;
   }
 
   th {
     padding-top: 15px;
     line-height: 1.5;
     color: #333;
-    text-align: left
+    text-align: left;
   }
 
   td {
     padding-top: 3px;
     padding-bottom: 3px;
     vertical-align: top;
-    line-height: 20px
+    line-height: 20px;
   }
 
   .shortcut {
     padding-right: 10px;
     color: #999;
     text-align: right;
-    white-space: nowrap
+    white-space: nowrap;
   }
 
   .key {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 41079b6eeb5..230b927a17d 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -27,6 +27,7 @@
     margin-right: 5px;
     margin-bottom: 5px;
     display: inline-block;
+
     .color-label {
       padding: 6px 10px;
     }
@@ -128,7 +129,7 @@
   }
 
   .selectbox {
-    display: none
+    display: none;
   }
 
   .btn-clipboard {
@@ -199,7 +200,7 @@
     display: none;
     /* Small devices (tablets, 768px and up) */
     @media (min-width: $screen-sm-min) {
-      display: block
+      display: block;
     }
 
     width: $sidebar_collapsed_width;
@@ -276,7 +277,7 @@
     }
 
     &.btn-primary {
-      @extend .btn-primary
+      @extend .btn-primary;
     }
   }
 
@@ -400,6 +401,7 @@
   .js-issuable-selector {
     width: 100%;
   }
+
   @media (max-width: $screen-sm-max) {
     margin-bottom: $gl-padding;
   }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 3ac34cbc829..623da67a239 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -37,6 +37,7 @@ ul.related-merge-requests > li {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
+
   .merge-request-id {
     flex-shrink: 0;
   }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 38c7cd98e41..9bac6d46355 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -1,7 +1,8 @@
 .suggest-colors {
   margin-top: 5px;
+
   a {
-    @include border-radius(4px);
+    border-radius: 4px;
     width: 30px;
     height: 30px;
     display: inline-block;
@@ -17,7 +18,7 @@
     overflow: hidden;
 
     a {
-      @include border-radius(0);
+      border-radius: 0;
       width: (100% / 7);
       margin-right: 0;
       margin-bottom: -5px;
@@ -59,6 +60,13 @@
       width: 200px;
       margin-bottom: 0;
     }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+      max-width: 100%;
+    }    
   }
 
   .label-description {
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index 6926448519e..8290519dc25 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/app/assets/stylesheets/pages/lint.scss
@@ -3,6 +3,7 @@
     font-size: 19px;
     color: red;
   }
+
   .correct-syntax {
     font-size: 19px;
     color: #47a447;
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 403171d4532..4c0c0839fe2 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -17,6 +17,7 @@
     line-height: 1.5;
 
     p {
+      font-size: 18px;
       color: #888;
     }
 
@@ -36,10 +37,14 @@
     }
   }
 
-  .login-box {
-    background: #fafafa;
-    border-radius: 10px;
-    box-shadow: 0 0 2px #ccc;
+  p {
+    font-size: 13px;
+  }
+
+  .login-box, .omniauth-container {
+    box-shadow: 0 0 0 1px $border-color;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
     padding: 15px;
 
     .login-heading h3 {
@@ -58,42 +63,127 @@
 
     a.forgot {
       float: right;
-      padding-top: 6px
+      padding-top: 6px;
     }
 
     .nav .active a {
       background: transparent;
     }
-  }
 
-  .form-control {
-    font-size: 14px;
-    padding: 10px 8px;
-    width: 100%;
-    height: auto;
-
-    &.top {
-      @include border-radius(5px 5px 0 0);
-      margin-bottom: 0;
+    // Styles the glowing border of focused input for username async validation
+    .login-body {
+      font-size: 13px;
+
+
+      input + p {
+        margin-top: 5px;
+      }
+
+      .gl-field-success-outline {
+        border: 1px solid $green-normal;
+
+        &:focus {
+          box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+          border: 0 none;
+        }
+      }
+
+      .gl-field-error-outline {
+        border: 1px solid $red-normal;
+
+        &:focus {
+          box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
+          border: 0 none;
+        }
+      }
+
+      .username .validation-success,
+      .gl-field-success-message {
+        color: $green-normal;
+      }
+
+      .username .validation-error,
+      .gl-field-error-message {
+        color: $red-normal;
+      }
+
+      .gl-field-hint {
+        color: $gl-text-color;
+      }
+
     }
+  }
 
-    &.bottom {
-      @include border-radius(0 0 5px 5px);
-      border-top: 0;
-      margin-bottom: 20px;
+  .omniauth-container {
+    p {
+      margin: 0;
     }
+  }
+
+  .new-session-tabs {
+    display: -webkit-flex;
+    display: flex;
+    box-shadow: 0 0 0 1px $border-color;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+
+    li {
+      flex: 1;
+      text-align: center;
+
+      &:last-of-type {
+        border-left: 1px solid $border-color;
+      }
+
+      &:not(.active) {
+        background-color: $gray-light;
+      }
+
+      a {
+        width: 100%;
+        font-size: 18px;
 
-    &.middle {
-      border-top: 0;
-      margin-bottom: 0;
-      @include border-radius(0);
+        &:hover {
+          border: 1px solid transparent;
+        }
+      }
+
+      &.active {
+        border-bottom: 1px solid $border-color;
+
+        a {
+          border: none;
+          border-bottom: 2px solid $link-underline-blue;
+          color: $black;
+
+          &:hover {
+            border-bottom: 2px solid $link-underline-blue;
+          }
+        }
+      }
     }
+  }
 
+
+  .form-control {
     &:active, &:focus {
       background-color: #fff;
     }
   }
 
+  label {
+    font-weight: normal;
+  }
+
+  .submit-container {
+    margin-top: 16px;
+  }
+
+  input[type="submit"] {
+    @extend .btn-block;
+    margin-bottom: 0;
+  }
+
   .devise-errors {
     h2 {
       margin-top: 0;
@@ -101,14 +191,6 @@
       color: #a00;
     }
   }
-
-  .remember-me {
-    margin-top: -10px;
-
-    label {
-      font-weight: normal;
-    }
-  }
 }
 
 @media (max-width: $screen-xs-max) {
@@ -127,3 +209,35 @@
     height: 32px;
   }
 }
+
+.devise-layout-html {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+// Fixes footer container to bottom of viewport
+.devise-layout-html body {
+  // offset height of fixed header + 1 to avoid scroll
+  height: calc(100% - 51px);
+  margin: 0;
+  padding: 0;
+
+  .page-wrap {
+    min-height: 100%;
+    position: relative;
+  }
+
+  .footer-container, hr.footer-fixed {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    background: $white-light;
+  }
+
+  .navless-container {
+    padding: 65px; // height of footer + bottom padding of email confirmation link
+  }
+}
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
new file mode 100644
index 00000000000..756efa9c7fa
--- /dev/null
+++ b/app/assets/stylesheets/pages/members.scss
@@ -0,0 +1,98 @@
+.project-members-title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid $border-color;
+}
+
+.member {
+  .list-item-name {
+    @media (min-width: $screen-sm-min) {
+      float: left;
+      width: 50%;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+  }
+
+  .controls {
+    @media (min-width: $screen-sm-min) {
+      display: -webkit-flex;
+      display: flex;
+      width: 400px;
+      max-width: 50%;
+    }
+  }
+
+  .form-horizontal {
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      display: -webkit-flex;
+      display: flex;
+      width: 100%;
+      margin-top: 3px;
+    }
+  }
+
+  .btn-remove {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+    }
+  }
+}
+
+.member-form-control {
+  @media (max-width: $screen-xs-max) {
+    padding: 5px 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    width: 50%;
+  }
+}
+
+.member-access-text {
+  margin-left: auto;
+  line-height: 43px;
+}
+
+.member.existing-title {
+  @media (min-width: $screen-sm-min) {
+    float: left;
+  }
+}
+
+.member-search-form {
+  position: relative;
+
+  @media (min-width: $screen-sm-min) {
+    float: right;
+  }
+
+  .form-control {
+    width: 100%;
+    padding-right: 35px;
+
+    @media (min-width: $screen-sm-min) {
+      width: 350px;
+    }
+  }
+}
+
+.member-search-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 35px;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: $gray-darkest;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 5ec660799e3..49013d7cac9 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -131,6 +131,7 @@ $colors: (
         }
       }
     }
+
     &.head {
       background-color: map-get($colors, #{$color}_header_head_neutral);
       border-color: map-get($colors, #{$color}_header_head_neutral);
@@ -174,6 +175,7 @@ $colors: (
         background-color: map-get($colors, #{$color}_line_not_chosen);
       }
     }
+
     &.head {
       background-color: map-get($colors, #{$color}_line_head_neutral);
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f2c2e06ad3e..f14f13494e0 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -6,10 +6,11 @@
   background: $background-color;
   color: $gl-gray;
   border: 1px solid $border-color;
-  @include border-radius(2px);
+  border-radius: 2px;
 
   form {
     margin-bottom: 0;
+
     .clearfix {
       margin-bottom: 0;
     }
@@ -46,6 +47,7 @@
 
       &.right {
         float: right;
+
         a {
           color: $gl-gray;
         }
@@ -121,6 +123,10 @@
     color: #5c5d5e;
   }
 
+  .js-deployment-link {
+    display: inline-block;
+  }
+
   .mr-widget-body {
     h4 {
       font-weight: 600;
@@ -197,6 +203,7 @@
     padding-top: 2px;
     padding-bottom: 2px;
     list-style: none;
+
     &:hover {
       background: none;
     }
@@ -213,6 +220,19 @@
   word-break: break-all;
 }
 
+.commits-empty {
+  text-align: center;
+
+  h4 {
+    padding-top: 20px;
+    padding-bottom: 10px;
+  }
+
+  svg {
+    width: 230px;
+  }
+}
+
 .mr-list {
   .merge-request {
     padding: 10px 15px;
@@ -273,12 +293,6 @@
   line-height: 31px;
 }
 
-.builds {
-  .table-holder {
-    overflow-x: auto;
-  }
-}
-
 .panel-new-merge-request {
   .panel-heading {
     padding: 5px 10px;
@@ -366,7 +380,7 @@
 }
 
 .table-holder {
-  .builds {
+  .ci-table {
 
     th {
       background-color: $white-light;
@@ -398,8 +412,12 @@
     padding: 16px;
   }
 
+  .content-block {
+    border-top: 1px solid $border-color;
+    padding: $gl-padding-top $gl-padding;
+  }
+
   .comments-disabled-notif {
-    padding: 10px 16px;
     .btn {
       margin-left: 5px;
     }
@@ -410,10 +428,6 @@
     margin: 0 7px;
   }
 
-  .comments-disabled-notif {
-    border-top: 1px solid $border-color;
-  }
-
   .dropdown-title {
     color: $gl-text-color;
   }
@@ -430,3 +444,12 @@
     margin-bottom: 20px;
   }
 }
+
+.merge-request-tabs {
+  background-color: #fff;
+
+  &.affix {
+    top: 100px;
+    z-index: 9;
+  }
+}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 8c2ba3ed58c..dd6d1783667 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -59,6 +59,7 @@
       color: $gl-placeholder-color;
       margin-right: 5px;
     }
+
     .avatar {
       float: none;
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index bd875b9823f..17f28959414 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -11,6 +11,7 @@
     filter: alpha(opacity=100);
   }
 }
+
 .diff-file,
 .discussion {
   .new-note {
@@ -194,6 +195,7 @@
     min-height: 140px;
     max-height: 500px;
   }
+
   .note-form-actions {
     background: transparent;
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 54124a3d658..fffcdc812a7 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -147,9 +147,18 @@ ul.notes {
 
 // Diff code in discussion view
 .discussion-body .diff-file {
+  .file-title {
+    cursor: default;
+
+    &:hover {
+      background-color: $gray-light;
+    }
+  }
+
   .diff-header > span {
     margin-right: 10px;
   }
+
   .line_content {
     white-space: pre-wrap;
   }
@@ -334,7 +343,7 @@ ul.notes {
 
   .add-diff-note {
     margin-top: -4px;
-    @include border-radius(40px);
+    border-radius: 40px;
     background: #fff;
     padding: 4px;
     font-size: 16px;
@@ -345,6 +354,7 @@ ul.notes {
     width: 32px;
     // "hide" it by default
     display: none;
+
     &:hover {
       background: $gl-info;
       color: #fff;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 68fc6da6c1b..7b71876b822 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -20,7 +20,7 @@
     margin: 4px;
   }
 
-  .table.builds {
+  .table.ci-table {
     min-width: 1200px;
 
     .branch-commit {
@@ -44,13 +44,20 @@
   overflow: auto;
 }
 
-.table.builds {
+.table.ci-table {
   min-width: 900px;
 
   &.pipeline {
     min-width: 650px;
   }
 
+  &.builds-page {
+
+    tr {
+      height: 71px;
+    }
+  }
+
   tr {
     th {
       padding: 16px 8px;
@@ -176,7 +183,7 @@
         &::after {
           content: '';
           width: 8px;
-          position: absolute;;
+          position: absolute;
           right: -7px;
           bottom: 8px;
           border-bottom: 2px solid $border-color;
@@ -229,9 +236,12 @@
 
       .fa {
         color: $table-text-gray;
-        margin-right: 6px;
         font-size: 14px;
       }
+
+      svg, .fa {
+        margin-right: 0;
+      }
     }
 
     .btn-remove {
@@ -272,18 +282,8 @@
 .toggle-pipeline-btn {
   background-color: $gray-dark;
 
-  .caret {
-    border-top: none;
-    border-bottom: 4px solid;
-  }
-
   &.graph-collapsed {
     background-color: $white-light;
-
-    .caret {
-      border-bottom: none;
-      border-top: 4px solid;
-    }
   }
 }
 
@@ -310,16 +310,41 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 65px;
+
+  &:not(:last-child) {
+    margin-right: 44px;
+  }
+
+  &.left-margin {
+    &:not(:first-child) {
+      margin-left: 44px;
+
+      .left-connector {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 48%;
+          left: -48px;
+          border-top: 2px solid $border-color;
+          width: 48px;
+          height: 1px;
+        }
+      }
+    }
+  }
+
+  &.no-margin {
+    margin: 0;
+  }
 
   li {
     list-style: none;
   }
 
   .stage-name {
-    margin-bottom: 15px;
+    margin: 0 0 15px 10px;
     font-weight: bold;
-    width: 150px;
+    width: 176px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -328,17 +353,24 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 6px 10px;
+    padding: 7px 10px 8px;
     border-radius: 30px;
-    width: 150px;
+    width: 186px;
     margin-bottom: 10px;
 
+    &:hover {
+      background-color: $gray-lighter;
+
+      .dropdown-menu-toggle {
+        background-color: transparent;
+      }
+    }
+
     &.playable {
-      background-color: $gray-light;
 
       svg {
-        height: 12px;
-        width: 12px;
+        height: 13px;
+        width: 20px;
         position: relative;
         top: 1px;
 
@@ -349,10 +381,20 @@
     }
 
     .build-content {
-      width: 130px;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      width: 164px;
+
+      .ci-status-icon {
+        svg {
+          height: 20px;
+          width: 20px;
+        }
+      }
 
       .ci-status-text {
-        width: 110px;
+        width: 135px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -363,44 +405,56 @@
       }
 
       a {
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
         text-decoration: none;
-
-        &:hover {
-          .ci-status-text {
-            text-decoration: underline;
-          }
-        }
       }
 
       .dropdown-menu-toggle {
         border: none;
         width: auto;
         padding: 0;
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
+        flex-grow: 1;
 
         .ci-status-text {
-          width: 80px;
+          max-width: 112px;
+          width: auto;
         }
       }
 
       .grouped-pipeline-dropdown {
         padding: 8px 0;
-        width: 200px;
+        width: 186px;
         left: auto;
-        right: -214px;
+        right: -197px;
         top: -9px;
-        max-height: 245px;
-        overflow-y: scroll;
 
-        a:hover {
-          .ci-status-text {
-            text-decoration: none;
+        ul {
+          max-height: 245px;
+          overflow: auto;
+        }
+
+        a {
+          color: $gl-text-color;
+          padding: 7px 8px 8px;
+
+          &:hover {
+            background-color: $blue-light-transparent;
+            border-radius: 3px;
+
+            .ci-status-text {
+              text-decoration: none;
+            }
           }
         }
 
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+
         .ci-status-text {
-          width: 145px;
+          width: 112px;
         }
 
         .arrow {
@@ -433,9 +487,10 @@
       }
 
       .badge {
-        background-color: $gray-dark;
-        color: $layout-link-gray;
+        background-color: $gray-darker;
+        color: $gl-text-color-light;
         font-weight: normal;
+        margin-left: $btn-xs-side-margin;
       }
     }
 
@@ -449,10 +504,10 @@
       &::after {
         content: '';
         position: absolute;
-        top: 50%;
-        right: -69px;
+        top: 48%;
+        right: -48px;
         border-top: 2px solid $border-color;
-        width: 69px;
+        width: 48px;
         height: 1px;
       }
     }
@@ -461,25 +516,25 @@
     &:not(:first-child) {
       &::after, &::before {
         content: '';
-        top: -47px;
+        top: -49px;
         position: absolute;
         border-bottom: 2px solid $border-color;
-        width: 20px;
-        height: 65px;
+        width: 25px;
+        height: 69px;
       }
 
       // Right connecting curves
       &::after {
-        right: -20px;
+        right: -25px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 15px;
+        border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
-        left: -20px;
+        left: -25px;
         border-left: 2px solid $border-color;
-        border-radius: 0 0 0 15px;
+        border-radius: 0 0 0 20px;
       }
     }
 
@@ -487,8 +542,9 @@
     &:nth-child(2) {
       &::after, &::before {
         height: 29px;
-        top: -10px;
+        top: -9px;
       }
+
       .curve {
         display: block;
       }
@@ -545,20 +601,20 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -29px;
+      top: -32px;
       border-top: 2px solid $border-color;
     }
 
     &::after {
-      left: -39px;
+      left: -44px;
       border-right: 2px solid $border-color;
-      border-radius: 0 15px;
+      border-radius: 0 20px;
     }
 
     &::before {
-      right: -39px;
+      right: -44px;
       border-left: 2px solid $border-color;
-      border-radius: 15px 0 0;
+      border-radius: 20px 0 0;
     }
   }
 }
@@ -574,19 +630,31 @@
   }
 }
 
-.pipelines.tab-pane {
+.tab-pane {
 
-  .content-list.pipelines {
-    overflow: auto;
-  }
+  &.pipelines {
 
-  .stage {
-    max-width: 100px;
-    width: 100px;
+    .content-list.pipelines {
+      overflow: auto;
+    }
+
+    .stage {
+      max-width: 100px;
+      width: 100px;
+    }
+
+    .pipeline-actions {
+      min-width: initial;
+    }
   }
 
-  .pipeline-actions {
-    min-width: initial;
+  &.builds {
+
+    .ci-table {
+      tr {
+        height: 71px;
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 0fcdaf94a21..ed80d2beec2 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -94,7 +94,7 @@
 .profile-user-bio {
   // Limits the width of the user bio for readability.
   max-width: 600px;
-  margin: 15px auto 0;
+  margin: 10px auto;
   padding: 0 16px;
 }
 
@@ -213,29 +213,22 @@
 }
 
 .user-profile {
+
   .cover-controls a {
     margin-left: 5px;
   }
+
   .profile-header {
     margin: 0 auto;
+
     .avatar-holder {
       width: 90px;
-      display: inline-block;
-    }
-    .user-info {
-      display: inline-block;
-      text-align: left;
-      vertical-align: middle;
-      margin-left: 15px;
-      .handle {
-        color: $gl-gray-light;
-      }
-      .member-date {
-        margin-bottom: 4px;
-      }
+      margin: 0 auto 10px;
     }
   }
+
   @media (max-width: $screen-xs-max) {
+
     .cover-block {
       padding-top: 20px;
     }
@@ -250,6 +243,7 @@
       .btn {
         -webkit-flex-grow: 1;
         flex-grow: 1;
+
         &:first-child {
           margin-left: 0;
         }
@@ -258,10 +252,6 @@
   }
 }
 
-.user-profile-nav {
-  margin-top: 15px;
-}
-
 table.u2f-registrations {
   th:not(:last-child), td:not(:last-child) {
     border-right: solid 1px transparent;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index e5859fe7384..f8da0983b77 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -4,7 +4,7 @@
     text-align: center;
 
     .preview {
-      @include border-radius(4px);
+      border-radius: 4px;
 
       height: 80px;
       margin-bottom: 10px;
@@ -47,7 +47,7 @@
       width: 160px;
 
       img {
-        @include border-radius(4px);
+        border-radius: 4px;
 
         max-width: 100%;
       }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 87548dcb590..d30f02340b9 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -17,34 +17,43 @@
     &.features .control-label {
       font-weight: normal;
     }
+
     .form-group {
       margin-bottom: 5px;
     }
+
     &> .form-group {
       padding-left: 0;
     }
   }
+
   .help-block {
     margin-bottom: 10px;
   }
+
   .project-path {
     padding-right: 0;
+
     .form-control {
       border-radius: $border-radius-base;
     }
   }
+
   .input-group > div {
     &:last-child {
       padding-right: 0;
     }
   }
+
   @media (max-width: $screen-xs-max) {
     .input-group > div {
       margin-bottom: 14px;
+
       &:last-child {
         margin-bottom: 0;
       }
     }
+
     fieldset > .form-group:first-child {
       padding-right: 0;
     }
@@ -56,6 +65,7 @@
       border-radius: 3px;
       border: 1px solid #e5e5e5;
     }
+
     &+ .select2 a {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
@@ -201,6 +211,7 @@
         pointer-events: none;
       }
     }
+
     .count {
       @include btn-gray;
       display: inline-block;
@@ -354,35 +365,40 @@ a.deploy-project-label {
     justify-content: flex-start;
 
     .fork-thumbnail {
-      @include border-radius($border-radius-base);
+      border-radius: $border-radius-base;
       background-color: $white-light;
       border: 1px solid $border-white-light;
       height: 202px;
       margin: $gl-padding;
       text-align: center;
       width: 169px;
+
       &:hover, &.forked {
         background-color: $row-hover;
         border-color: $row-hover-border;
       }
+
       .no-avatar {
         width: 100px;
         height: 100px;
         background-color: $gray-light;
         border: 1px solid $gray-dark;
         margin: 0 auto;
-        @include border-radius(50%);
+        border-radius: 50%;
+
         i {
           font-size: 100px;
           color: $gray-dark;
         }
       }
+
       a {
         display: block;
         width: 100%;
         height: 100%;
         padding-top: $gl-padding;
         color: $gl-gray;
+
         .caption {
           min-height: 30px;
           padding: $gl-padding 0;
@@ -390,7 +406,7 @@ a.deploy-project-label {
       }
 
       img {
-        @include border-radius(50%);
+        border-radius: 50%;
         max-width: 100px;
       }
     }
@@ -496,7 +512,7 @@ pre.light-well {
   }
 
   .light-well {
-    @include border-radius (2px);
+    border-radius: 2px;
 
     color: #5b6169;
     font-size: 13px;
@@ -644,6 +660,7 @@ pre.light-well {
 
   .clone-options {
     display: table-cell;
+
     a.btn {
       width: 100%;
     }
@@ -832,6 +849,7 @@ pre.light-well {
   .form-control {
     min-width: 100px;
   }
+
   .select2-choice {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index eec22c5dc96..7b3878c91df 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -6,6 +6,7 @@
   &.runner-state-shared {
     background: #32b186;
   }
+
   &.runner-state-specific {
     background: #3498db;
   }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 0ee7ceecae5..f1d53c7b8bc 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -4,7 +4,7 @@
     margin-right: 10px;
     border: 1px solid #eee;
     white-space: nowrap;
-    @include border-radius(4px);
+    border-radius: 4px;
 
     &:hover {
       text-decoration: none;
@@ -65,6 +65,7 @@
   .ci-status-icon-success {
     color: $gl-success;
   }
+
   .ci-status-icon-failed {
     color: $gl-danger;
   }
@@ -77,6 +78,7 @@
   .ci-status-icon-running {
     color: $blue-normal;
   }
+
   .ci-status-icon-canceled,
   .ci-status-icon-disabled,
   .ci-status-icon-not-found,
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 41ad10f07bd..99c0f6362d0 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -5,6 +5,7 @@
 
   .file-finder {
     width: 50%;
+
     .file-finder-input {
       width: 95%;
       display: inline-block;
diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss
index c9846103762..3fa7fa3d7e3 100644
--- a/app/assets/stylesheets/pages/xterm.scss
+++ b/app/assets/stylesheets/pages/xterm.scss
@@ -23,15 +23,19 @@
   .term-bold {
     font-weight: bold;
   }
+
   .term-italic {
     font-style: italic;
   }
+
   .term-conceal {
     visibility: hidden;
   }
+
   .term-underline {
     text-decoration: underline;
   }
+
   .term-cross {
     text-decoration: line-through;
   }
@@ -39,48 +43,63 @@
   .term-fg-black {
     color: $black;
   }
+
   .term-fg-red {
     color: $red;
   }
+
   .term-fg-green {
     color: $green;
   }
+
   .term-fg-yellow {
     color: $yellow;
   }
+
   .term-fg-blue {
     color: $blue;
   }
+
   .term-fg-magenta {
     color: $magenta;
   }
+
   .term-fg-cyan {
     color: $cyan;
   }
+
   .term-fg-white {
     color: $white;
   }
+
   .term-fg-l-black {
     color: $l-black;
   }
+
   .term-fg-l-red {
     color: $l-red;
   }
+
   .term-fg-l-green {
     color: $l-green;
   }
+
   .term-fg-l-yellow {
     color: $l-yellow;
   }
+
   .term-fg-l-blue {
     color: $l-blue;
   }
+
   .term-fg-l-magenta {
     color: $l-magenta;
   }
+
   .term-fg-l-cyan {
     color: $l-cyan;
   }
+
   .term-fg-l-white {
     color: $l-white;
   }
@@ -88,818 +107,1087 @@
   .term-bg-black {
     background-color: $black;
   }
+
   .term-bg-red {
     background-color: $red;
   }
+
   .term-bg-green {
     background-color: $green;
   }
+
   .term-bg-yellow {
     background-color: $yellow;
   }
+
   .term-bg-blue {
     background-color: $blue;
   }
+
   .term-bg-magenta {
     background-color: $magenta;
   }
+
   .term-bg-cyan {
     background-color: $cyan;
   }
+
   .term-bg-white {
     background-color: $white;
   }
+
   .term-bg-l-black {
     background-color: $l-black;
   }
+
   .term-bg-l-red {
     background-color: $l-red;
   }
+
   .term-bg-l-green {
     background-color: $l-green;
   }
+
   .term-bg-l-yellow {
     background-color: $l-yellow;
   }
+
   .term-bg-l-blue {
     background-color: $l-blue;
   }
+
   .term-bg-l-magenta {
     background-color: $l-magenta;
   }
+
   .term-bg-l-cyan {
     background-color: $l-cyan;
   }
+
   .term-bg-l-white {
     background-color: $l-white;
   }
 
-
   .xterm-fg-0 {
     color: #000;
   }
+
   .xterm-fg-1 {
     color: #800000;
   }
+
   .xterm-fg-2 {
     color: #008000;
   }
+
   .xterm-fg-3 {
     color: #808000;
   }
+
   .xterm-fg-4 {
     color: #000080;
   }
+
   .xterm-fg-5 {
     color: #800080;
   }
+
   .xterm-fg-6 {
     color: #008080;
   }
+
   .xterm-fg-7 {
     color: #c0c0c0;
   }
+
   .xterm-fg-8 {
     color: #808080;
   }
+
   .xterm-fg-9 {
     color: #f00;
   }
+
   .xterm-fg-10 {
     color: #0f0;
   }
+
   .xterm-fg-11 {
     color: #ff0;
   }
+
   .xterm-fg-12 {
     color: #00f;
   }
+
   .xterm-fg-13 {
     color: #f0f;
   }
+
   .xterm-fg-14 {
     color: #0ff;
   }
+
   .xterm-fg-15 {
     color: #fff;
   }
+
   .xterm-fg-16 {
     color: #000;
   }
+
   .xterm-fg-17 {
     color: #00005f;
   }
+
   .xterm-fg-18 {
     color: #000087;
   }
+
   .xterm-fg-19 {
     color: #0000af;
   }
+
   .xterm-fg-20 {
     color: #0000d7;
   }
+
   .xterm-fg-21 {
     color: #00f;
   }
+
   .xterm-fg-22 {
     color: #005f00;
   }
+
   .xterm-fg-23 {
     color: #005f5f;
   }
+
   .xterm-fg-24 {
     color: #005f87;
   }
+
   .xterm-fg-25 {
     color: #005faf;
   }
+
   .xterm-fg-26 {
     color: #005fd7;
   }
+
   .xterm-fg-27 {
     color: #005fff;
   }
+
   .xterm-fg-28 {
     color: #008700;
   }
+
   .xterm-fg-29 {
     color: #00875f;
   }
+
   .xterm-fg-30 {
     color: #008787;
   }
+
   .xterm-fg-31 {
     color: #0087af;
   }
+
   .xterm-fg-32 {
     color: #0087d7;
   }
+
   .xterm-fg-33 {
     color: #0087ff;
   }
+
   .xterm-fg-34 {
     color: #00af00;
   }
+
   .xterm-fg-35 {
     color: #00af5f;
   }
+
   .xterm-fg-36 {
     color: #00af87;
   }
+
   .xterm-fg-37 {
     color: #00afaf;
   }
+
   .xterm-fg-38 {
     color: #00afd7;
   }
+
   .xterm-fg-39 {
     color: #00afff;
   }
+
   .xterm-fg-40 {
     color: #00d700;
   }
+
   .xterm-fg-41 {
     color: #00d75f;
   }
+
   .xterm-fg-42 {
     color: #00d787;
   }
+
   .xterm-fg-43 {
     color: #00d7af;
   }
+
   .xterm-fg-44 {
     color: #00d7d7;
   }
+
   .xterm-fg-45 {
     color: #00d7ff;
   }
+
   .xterm-fg-46 {
     color: #0f0;
   }
+
   .xterm-fg-47 {
     color: #00ff5f;
   }
+
   .xterm-fg-48 {
     color: #00ff87;
   }
+
   .xterm-fg-49 {
     color: #00ffaf;
   }
+
   .xterm-fg-50 {
     color: #00ffd7;
   }
+
   .xterm-fg-51 {
     color: #0ff;
   }
+
   .xterm-fg-52 {
     color: #5f0000;
   }
+
   .xterm-fg-53 {
     color: #5f005f;
   }
+
   .xterm-fg-54 {
     color: #5f0087;
   }
+
   .xterm-fg-55 {
     color: #5f00af;
   }
+
   .xterm-fg-56 {
     color: #5f00d7;
   }
+
   .xterm-fg-57 {
     color: #5f00ff;
   }
+
   .xterm-fg-58 {
     color: #5f5f00;
   }
+
   .xterm-fg-59 {
     color: #5f5f5f;
   }
+
   .xterm-fg-60 {
     color: #5f5f87;
   }
+
   .xterm-fg-61 {
     color: #5f5faf;
   }
+
   .xterm-fg-62 {
     color: #5f5fd7;
   }
+
   .xterm-fg-63 {
     color: #5f5fff;
   }
+
   .xterm-fg-64 {
     color: #5f8700;
   }
+
   .xterm-fg-65 {
     color: #5f875f;
   }
+
   .xterm-fg-66 {
     color: #5f8787;
   }
+
   .xterm-fg-67 {
     color: #5f87af;
   }
+
   .xterm-fg-68 {
     color: #5f87d7;
   }
+
   .xterm-fg-69 {
     color: #5f87ff;
   }
+
   .xterm-fg-70 {
     color: #5faf00;
   }
+
   .xterm-fg-71 {
     color: #5faf5f;
   }
+
   .xterm-fg-72 {
     color: #5faf87;
   }
+
   .xterm-fg-73 {
     color: #5fafaf;
   }
+
   .xterm-fg-74 {
     color: #5fafd7;
   }
+
   .xterm-fg-75 {
     color: #5fafff;
   }
+
   .xterm-fg-76 {
     color: #5fd700;
   }
+
   .xterm-fg-77 {
     color: #5fd75f;
   }
+
   .xterm-fg-78 {
     color: #5fd787;
   }
+
   .xterm-fg-79 {
     color: #5fd7af;
   }
+
   .xterm-fg-80 {
     color: #5fd7d7;
   }
+
   .xterm-fg-81 {
     color: #5fd7ff;
   }
+
   .xterm-fg-82 {
     color: #5fff00;
   }
+
   .xterm-fg-83 {
     color: #5fff5f;
   }
+
   .xterm-fg-84 {
     color: #5fff87;
   }
+
   .xterm-fg-85 {
     color: #5fffaf;
   }
+
   .xterm-fg-86 {
     color: #5fffd7;
   }
+
   .xterm-fg-87 {
     color: #5fffff;
   }
+
   .xterm-fg-88 {
     color: #870000;
   }
+
   .xterm-fg-89 {
     color: #87005f;
   }
+
   .xterm-fg-90 {
     color: #870087;
   }
+
   .xterm-fg-91 {
     color: #8700af;
   }
+
   .xterm-fg-92 {
     color: #8700d7;
   }
+
   .xterm-fg-93 {
     color: #8700ff;
   }
+
   .xterm-fg-94 {
     color: #875f00;
   }
+
   .xterm-fg-95 {
     color: #875f5f;
   }
+
   .xterm-fg-96 {
     color: #875f87;
   }
+
   .xterm-fg-97 {
     color: #875faf;
   }
+
   .xterm-fg-98 {
     color: #875fd7;
   }
+
   .xterm-fg-99 {
     color: #875fff;
   }
+
   .xterm-fg-100 {
     color: #878700;
   }
+
   .xterm-fg-101 {
     color: #87875f;
   }
+
   .xterm-fg-102 {
     color: #878787;
   }
+
   .xterm-fg-103 {
     color: #8787af;
   }
+
   .xterm-fg-104 {
     color: #8787d7;
   }
+
   .xterm-fg-105 {
     color: #8787ff;
   }
+
   .xterm-fg-106 {
     color: #87af00;
   }
+
   .xterm-fg-107 {
     color: #87af5f;
   }
+
   .xterm-fg-108 {
     color: #87af87;
   }
+
   .xterm-fg-109 {
     color: #87afaf;
   }
+
   .xterm-fg-110 {
     color: #87afd7;
   }
+
   .xterm-fg-111 {
     color: #87afff;
   }
+
   .xterm-fg-112 {
     color: #87d700;
   }
+
   .xterm-fg-113 {
     color: #87d75f;
   }
+
   .xterm-fg-114 {
     color: #87d787;
   }
+
   .xterm-fg-115 {
     color: #87d7af;
   }
+
   .xterm-fg-116 {
     color: #87d7d7;
   }
+
   .xterm-fg-117 {
     color: #87d7ff;
   }
+
   .xterm-fg-118 {
     color: #87ff00;
   }
+
   .xterm-fg-119 {
     color: #87ff5f;
   }
+
   .xterm-fg-120 {
     color: #87ff87;
   }
+
   .xterm-fg-121 {
     color: #87ffaf;
   }
+
   .xterm-fg-122 {
     color: #87ffd7;
   }
+
   .xterm-fg-123 {
     color: #87ffff;
   }
+
   .xterm-fg-124 {
     color: #af0000;
   }
+
   .xterm-fg-125 {
     color: #af005f;
   }
+
   .xterm-fg-126 {
     color: #af0087;
   }
+
   .xterm-fg-127 {
     color: #af00af;
   }
+
   .xterm-fg-128 {
     color: #af00d7;
   }
+
   .xterm-fg-129 {
     color: #af00ff;
   }
+
   .xterm-fg-130 {
     color: #af5f00;
   }
+
   .xterm-fg-131 {
     color: #af5f5f;
   }
+
   .xterm-fg-132 {
     color: #af5f87;
   }
+
   .xterm-fg-133 {
     color: #af5faf;
   }
+
   .xterm-fg-134 {
     color: #af5fd7;
   }
+
   .xterm-fg-135 {
     color: #af5fff;
   }
+
   .xterm-fg-136 {
     color: #af8700;
   }
+
   .xterm-fg-137 {
     color: #af875f;
   }
+
   .xterm-fg-138 {
     color: #af8787;
   }
+
   .xterm-fg-139 {
     color: #af87af;
   }
+
   .xterm-fg-140 {
     color: #af87d7;
   }
+
   .xterm-fg-141 {
     color: #af87ff;
   }
+
   .xterm-fg-142 {
     color: #afaf00;
   }
+
   .xterm-fg-143 {
     color: #afaf5f;
   }
+
   .xterm-fg-144 {
     color: #afaf87;
   }
+
   .xterm-fg-145 {
     color: #afafaf;
   }
+
   .xterm-fg-146 {
     color: #afafd7;
   }
+
   .xterm-fg-147 {
     color: #afafff;
   }
+
   .xterm-fg-148 {
     color: #afd700;
   }
+
   .xterm-fg-149 {
     color: #afd75f;
   }
+
   .xterm-fg-150 {
     color: #afd787;
   }
+
   .xterm-fg-151 {
     color: #afd7af;
   }
+
   .xterm-fg-152 {
     color: #afd7d7;
   }
+
   .xterm-fg-153 {
     color: #afd7ff;
   }
+
   .xterm-fg-154 {
     color: #afff00;
   }
+
   .xterm-fg-155 {
     color: #afff5f;
   }
+
   .xterm-fg-156 {
     color: #afff87;
   }
+
   .xterm-fg-157 {
     color: #afffaf;
   }
+
   .xterm-fg-158 {
     color: #afffd7;
   }
+
   .xterm-fg-159 {
     color: #afffff;
   }
+
   .xterm-fg-160 {
     color: #d70000;
   }
+
   .xterm-fg-161 {
     color: #d7005f;
   }
+
   .xterm-fg-162 {
     color: #d70087;
   }
+
   .xterm-fg-163 {
     color: #d700af;
   }
+
   .xterm-fg-164 {
     color: #d700d7;
   }
+
   .xterm-fg-165 {
     color: #d700ff;
   }
+
   .xterm-fg-166 {
     color: #d75f00;
   }
+
   .xterm-fg-167 {
     color: #d75f5f;
   }
+
   .xterm-fg-168 {
     color: #d75f87;
   }
+
   .xterm-fg-169 {
     color: #d75faf;
   }
+
   .xterm-fg-170 {
     color: #d75fd7;
   }
+
   .xterm-fg-171 {
     color: #d75fff;
   }
+
   .xterm-fg-172 {
     color: #d78700;
   }
+
   .xterm-fg-173 {
     color: #d7875f;
   }
+
   .xterm-fg-174 {
     color: #d78787;
   }
+
   .xterm-fg-175 {
     color: #d787af;
   }
+
   .xterm-fg-176 {
     color: #d787d7;
   }
+
   .xterm-fg-177 {
     color: #d787ff;
   }
+
   .xterm-fg-178 {
     color: #d7af00;
   }
+
   .xterm-fg-179 {
     color: #d7af5f;
   }
+
   .xterm-fg-180 {
     color: #d7af87;
   }
+
   .xterm-fg-181 {
     color: #d7afaf;
   }
+
   .xterm-fg-182 {
     color: #d7afd7;
   }
+
   .xterm-fg-183 {
     color: #d7afff;
   }
+
   .xterm-fg-184 {
     color: #d7d700;
   }
+
   .xterm-fg-185 {
     color: #d7d75f;
   }
+
   .xterm-fg-186 {
     color: #d7d787;
   }
+
   .xterm-fg-187 {
     color: #d7d7af;
   }
+
   .xterm-fg-188 {
     color: #d7d7d7;
   }
+
   .xterm-fg-189 {
     color: #d7d7ff;
   }
+
   .xterm-fg-190 {
     color: #d7ff00;
   }
+
   .xterm-fg-191 {
     color: #d7ff5f;
   }
+
   .xterm-fg-192 {
     color: #d7ff87;
   }
+
   .xterm-fg-193 {
     color: #d7ffaf;
   }
+
   .xterm-fg-194 {
     color: #d7ffd7;
   }
+
   .xterm-fg-195 {
     color: #d7ffff;
   }
+
   .xterm-fg-196 {
     color: #f00;
   }
+
   .xterm-fg-197 {
     color: #ff005f;
   }
+
   .xterm-fg-198 {
     color: #ff0087;
   }
+
   .xterm-fg-199 {
     color: #ff00af;
   }
+
   .xterm-fg-200 {
     color: #ff00d7;
   }
+
   .xterm-fg-201 {
     color: #f0f;
   }
+
   .xterm-fg-202 {
     color: #ff5f00;
   }
+
   .xterm-fg-203 {
     color: #ff5f5f;
   }
+
   .xterm-fg-204 {
     color: #ff5f87;
   }
+
   .xterm-fg-205 {
     color: #ff5faf;
   }
+
   .xterm-fg-206 {
     color: #ff5fd7;
   }
+
   .xterm-fg-207 {
     color: #ff5fff;
   }
+
   .xterm-fg-208 {
     color: #ff8700;
   }
+
   .xterm-fg-209 {
     color: #ff875f;
   }
+
   .xterm-fg-210 {
     color: #ff8787;
   }
+
   .xterm-fg-211 {
     color: #ff87af;
   }
+
   .xterm-fg-212 {
     color: #ff87d7;
   }
+
   .xterm-fg-213 {
     color: #ff87ff;
   }
+
   .xterm-fg-214 {
     color: #ffaf00;
   }
+
   .xterm-fg-215 {
     color: #ffaf5f;
   }
+
   .xterm-fg-216 {
     color: #ffaf87;
   }
+
   .xterm-fg-217 {
     color: #ffafaf;
   }
+
   .xterm-fg-218 {
     color: #ffafd7;
   }
+
   .xterm-fg-219 {
     color: #ffafff;
   }
+
   .xterm-fg-220 {
     color: #ffd700;
   }
+
   .xterm-fg-221 {
     color: #ffd75f;
   }
+
   .xterm-fg-222 {
     color: #ffd787;
   }
+
   .xterm-fg-223 {
     color: #ffd7af;
   }
+
   .xterm-fg-224 {
     color: #ffd7d7;
   }
+
   .xterm-fg-225 {
     color: #ffd7ff;
   }
+
   .xterm-fg-226 {
     color: #ff0;
   }
+
   .xterm-fg-227 {
     color: #ffff5f;
   }
+
   .xterm-fg-228 {
     color: #ffff87;
   }
+
   .xterm-fg-229 {
     color: #ffffaf;
   }
+
   .xterm-fg-230 {
     color: #ffffd7;
   }
+
   .xterm-fg-231 {
     color: #fff;
   }
+
   .xterm-fg-232 {
     color: #080808;
   }
+
   .xterm-fg-233 {
     color: #121212;
   }
+
   .xterm-fg-234 {
     color: #1c1c1c;
   }
+
   .xterm-fg-235 {
     color: #262626;
   }
+
   .xterm-fg-236 {
     color: #303030;
   }
+
   .xterm-fg-237 {
     color: #3a3a3a;
   }
+
   .xterm-fg-238 {
     color: #444;
   }
+
   .xterm-fg-239 {
     color: #4e4e4e;
   }
+
   .xterm-fg-240 {
     color: #585858;
   }
+
   .xterm-fg-241 {
     color: #626262;
   }
+
   .xterm-fg-242 {
     color: #6c6c6c;
   }
+
   .xterm-fg-243 {
     color: #767676;
   }
+
   .xterm-fg-244 {
     color: #808080;
   }
+
   .xterm-fg-245 {
     color: #8a8a8a;
   }
+
   .xterm-fg-246 {
     color: #949494;
   }
+
   .xterm-fg-247 {
     color: #9e9e9e;
   }
+
   .xterm-fg-248 {
     color: #a8a8a8;
   }
+
   .xterm-fg-249 {
     color: #b2b2b2;
   }
+
   .xterm-fg-250 {
     color: #bcbcbc;
   }
+
   .xterm-fg-251 {
     color: #c6c6c6;
   }
+
   .xterm-fg-252 {
     color: #d0d0d0;
   }
+
   .xterm-fg-253 {
     color: #dadada;
   }
+
   .xterm-fg-254 {
     color: #e4e4e4;
   }
+
   .xterm-fg-255 {
     color: #eee;
   }