Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce into feature/project-export

.csscomb.json

@@ -0,0 +1,20 @@
+{
+  "exclude": [
+    "app/assets/stylesheets/framework/tw_bootstrap_variables.scss",
+    "app/assets/stylesheets/framework/fonts.scss"
+  ],
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-before-closing-brace": "\n",
+  "unitless-zero": true
+}

.gitlab-ci.yml

@@ -2,7 +2,6 @@ image: "ruby:2.1"
 
 services:
   - mysql:latest
-  - postgres:latest
   - redis:latest
 
 cache:
@@ -35,126 +34,86 @@ spec:feature:
   script:
     - RAILS_ENV=test bundle exec rake assets:precompile 2>/dev/null
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:feature
-  tags:
-    - ruby
-    - mysql
 
 spec:api:
   stage: test
   script:
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:api
-  tags:
-    - ruby
-    - mysql
 
 spec:models:
   stage: test
   script:
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:models
-  tags:
-    - ruby
-    - mysql
 
 spec:lib:
   stage: test
   script:
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:lib
-  tags:
-    - ruby
-    - mysql
 
 spec:services:
   stage: test
   script:
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:services
-  tags:
-    - ruby
-    - mysql
 
 spec:other:
   stage: test
   script:
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:other
-  tags:
-    - ruby
-    - mysql
 
 spinach:project:half:
   stage: test
   script:
     - RAILS_ENV=test bundle exec rake assets:precompile 2>/dev/null
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spinach:project:half
-  tags:
-    - ruby
-    - mysql
 
 spinach:project:rest:
   stage: test
   script:
     - RAILS_ENV=test bundle exec rake assets:precompile 2>/dev/null
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spinach:project:rest
-  tags:
-    - ruby
-    - mysql
 
 spinach:other:
   stage: test
   script:
     - RAILS_ENV=test bundle exec rake assets:precompile 2>/dev/null
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spinach:other
-  tags:
-    - ruby
-    - mysql
 
 teaspoon:
   stage: test
   script:
     - RAILS_ENV=test bundle exec teaspoon
-  tags:
-    - ruby
-    - mysql
 
 rubocop:
   stage: test
   script:
     - bundle exec rubocop
-  tags:
-    - ruby
-    - mysql
+
+scss-lint:
+  stage: test
+  script:
+    - bundle exec rake scss_lint
 
 brakeman:
   stage: test
   script:
     - bundle exec rake brakeman
-  tags:
-    - ruby
-    - mysql
 
 flog:
   stage: test
   script:
     - bundle exec rake flog
-  tags:
-    - ruby
-    - mysql
 
 flay:
   stage: test
   script:
     - bundle exec rake flay
-  tags:
-    - ruby
-    - mysql
 
 bundler:audit:
   stage: test
+  only:
+    - master
   script:
-    - "bundle exec bundle-audit update"
-    - "bundle exec bundle-audit check"
-  tags:
-    - ruby
-    - mysql
-  allow_failure: true
+    - "bundle exec bundle-audit check --update --ignore OSVDB-115941"
 
 # Ruby 2.2 jobs
 
@@ -162,7 +121,7 @@ spec:feature:ruby22:
   stage: test
   image: ruby:2.2
   only:
-  - master
+    - master
   script:
     - RAILS_ENV=test bundle exec rake assets:precompile 2>/dev/null
     - RAILS_ENV=test SIMPLECOV=true bundle exec rake spec:feature
@@ -170,9 +129,6 @@ spec:feature:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spec:api:ruby22:
   stage: test
@@ -185,9 +141,6 @@ spec:api:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spec:models:ruby22:
   stage: test
@@ -200,9 +153,6 @@ spec:models:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spec:lib:ruby22:
   stage: test
@@ -215,9 +165,6 @@ spec:lib:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spec:services:ruby22:
   stage: test
@@ -230,9 +177,6 @@ spec:services:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spec:other:ruby22:
   stage: test
@@ -245,9 +189,6 @@ spec:other:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spinach:project:half:ruby22:
   stage: test
@@ -261,9 +202,6 @@ spinach:project:half:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spinach:project:rest:ruby22:
   stage: test
@@ -277,9 +215,6 @@ spinach:project:rest:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
 
 spinach:other:ruby22:
   stage: test
@@ -293,10 +228,6 @@ spinach:other:ruby22:
     key: "ruby22"
     paths:
     - vendor
-  tags:
-    - ruby
-    - mysql
-
 
 notify:slack:
   stage: notifications

.scss-lint.yml

@@ -0,0 +1,264 @@
+# Linter Documentation:
+# https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md
+
+scss_files: 'app/assets/stylesheets/**/*.scss'
+
+exclude:
+  - 'app/assets/stylesheets/pages/emojis.scss'
+
+linters:
+  # Reports when you use improper spacing around ! (the "bang") in !default,
+  # !global, !important, and !optional flags.
+  BangFormat:
+    enabled: false
+  
+  # Whether or not to prefer `border: 0` over `border: none`.
+  BorderZero:
+    enabled: false
+  
+  # Reports when you define a rule set using a selector with chained classes
+  # (a.k.a. adjoining classes).
+  ChainedClasses:
+    enabled: false
+
+  # Prefer hexadecimal color codes over color keywords.
+  # (e.g. `color: green` is a color keyword)
+  ColorKeyword:
+    enabled: false
+  
+  # Prefer color literals (keywords or hexadecimal codes) to be used only in
+  # variable declarations. They should be referred to via variables everywhere
+  # else.
+  ColorVariable:
+    enabled: false
+  
+  # Which form of comments to prefer in CSS.
+  Comment:
+    enabled: false
+
+  # Reports @debug statements (which you probably left behind accidentally).
+  DebugStatement:
+    enabled: false
+  
+  # Rule sets should be ordered as follows:
+  # - @extend declarations
+  # - @include declarations without inner @content
+  # - properties, @include declarations with inner @content
+  # - nested rule sets.
+  DeclarationOrder:
+    enabled: false
+
+  # `scss-lint:disable` control comments should be preceded by a comment
+  # explaining why these linters are being disabled for this file.
+  # See https://github.com/brigade/scss-lint#disabling-linters-via-source for
+  # more information.
+  DisableLinterReason:
+    enabled: true
+  
+  # Reports when you define the same property twice in a single rule set.
+  DuplicateProperty:
+    enabled: false
+  
+  # Separate rule, function, and mixin declarations with empty lines.
+  EmptyLineBetweenBlocks:
+    enabled: false
+  
+  # Reports when you have an empty rule set.
+  EmptyRule:
+    enabled: false
+  
+  # Reports when you have an @extend directive.
+  ExtendDirective:
+    enabled: false
+
+  # Files should always have a final newline. This results in better diffs
+  # when adding lines to the file, since SCM systems such as git won't
+  # think that you touched the last line.
+  FinalNewline:
+    enabled: false
+  
+  # HEX colors should use three-character values where possible.
+  HexLength:
+    enabled: true
+  
+  # HEX color values should use lower-case colors to differentiate between
+  # letters and numbers, e.g. `#E3E3E3` vs. `#e3e3e3`.
+  HexNotation:
+    enabled: true
+  
+  # Avoid using ID selectors.
+  IdSelector:
+    enabled: false
+  
+  # The basenames of @imported SCSS partials should not begin with an
+  # underscore and should not include the filename extension.
+  ImportPath:
+    enabled: false
+  
+  # Avoid using !important in properties. It is usually indicative of a
+  # misunderstanding of CSS specificity and can lead to brittle code.
+  ImportantRule:
+    enabled: false
+  
+  # Indentation should always be done in increments of 2 spaces.
+  Indentation:
+    enabled: true
+    width: 2
+  
+  # Don't write leading zeros for numeric values with a decimal point.
+  LeadingZero:
+    enabled: false
+  
+  # Reports when you define the same selector twice in a single sheet.
+  MergeableSelector:
+    enabled: false
+  
+  # Functions, mixins, variables, and placeholders should be declared
+  # with all lowercase letters and hyphens instead of underscores.
+  NameFormat:
+    enabled: false
+  
+  # Avoid nesting selectors too deeply.
+  NestingDepth:
+    enabled: false
+
+  # Always use placeholder selectors in @extend.
+  PlaceholderInExtend:
+    enabled: false
+
+  # Sort properties in a strict order.
+  PropertySortOrder:
+    enabled: false
+  
+  # Reports when you use an unknown or disabled CSS property
+  # (ignoring vendor-prefixed properties).
+  PropertySpelling:
+    enabled: false
+  
+  # Configure which units are allowed for property values.
+  PropertyUnits:
+    enabled: false
+
+  # Pseudo-elements, like ::before, and ::first-letter, should be declared
+  # with two colons. Pseudo-classes, like :hover and :first-child, should
+  # be declared with one colon.
+  PseudoElement:
+    enabled: false
+  
+  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
+  QualifyingElement:
+    enabled: false
+  
+  # Don't write selectors with a depth of applicability greater than 3.
+  SelectorDepth:
+    enabled: false
+  
+  # Selectors should always use hyphenated-lowercase, rather than camelCase or
+  # snake_case.
+  SelectorFormat:
+    enabled: false
+    convention: hyphenated_lowercase
+  
+  # Prefer the shortest shorthand form possible for properties that support it.
+  Shorthand:
+    enabled: true
+  
+  # Each property should have its own line, except in the special case of
+  # single line rulesets.
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  # Split selectors onto separate lines after each comma, and have each
+  # individual selector occupy a single line.
+  SingleLinePerSelector:
+    enabled: false
+  
+  # Commas in lists should be followed by a space.
+  SpaceAfterComma:
+    enabled: false
+  
+  # Properties should be formatted with a single space separating the colon
+  # from the property's value.
+  SpaceAfterPropertyColon:
+    enabled: true
+
+  # Properties should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterPropertyName:
+    enabled: true
+
+  # Variables should be formatted with a single space separating the colon
+  # from the variable's value.
+  SpaceAfterVariableColon:
+    enabled: false
+
+  # Variables should be formatted with no space between the name and the
+  # colon.
+  SpaceAfterVariableName:
+    enabled: false
+  
+  # Operators should be formatted with a single space on both sides of an
+  # infix operator.
+  SpaceAroundOperator:
+    enabled: false
+  
+  # Opening braces should be preceded by a single space.
+  SpaceBeforeBrace:
+    enabled: true
+
+  # Parentheses should not be padded with spaces.
+  SpaceBetweenParens:
+    enabled: false
+  
+  # Enforces that string literals should be written with a consistent form
+  # of quotes (single or double).
+  StringQuotes:
+    enabled: false
+
+  # Property values, @extend, @include, and @import directives, and variable
+  # declarations should always end with a semicolon.
+  TrailingSemicolon:
+    enabled: false
+
+  # Reports lines containing trailing whitespace.
+  TrailingWhitespace:
+    enabled: false
+
+  # Don't write trailing zeros for numeric values with a decimal point.
+  TrailingZero:
+    enabled: false
+
+  # Don't use the `all` keyword to specify transition properties.
+  TransitionAll:
+    enabled: false
+
+  # Numeric values should not contain unnecessary fractional portions.
+  UnnecessaryMantissa:
+    enabled: false
+
+  # Do not use parent selector references (&) when they would otherwise
+  # be unnecessary.
+  UnnecessaryParentReference:
+    enabled: false
+  
+  # URLs should be valid and not contain protocols or domain names.
+  UrlFormat:
+    enabled: false
+
+  # URLs should always be enclosed within quotes.
+  UrlQuotes:
+    enabled: false
+
+  # Properties, like color and font, are easier to read and maintain
+  # when defined using variables rather than literals.
+  VariableForProperty:
+    enabled: false
+
+  # Avoid vendor prefixes. Or rather: don't write them yourself.
+  VendorPrefix:
+    enabled: false
+
+  # Omit length units on zero values, e.g. `0px` vs. `0`.
+  ZeroUnit:
+    enabled: true

CHANGELOG

@@ -1,42 +1,169 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
-v 8.6.0 (unreleased)
+v 8.7.0 (unreleased)
+  - All images in discussions and wikis now link to their source files !3464 (Connor Shea).
+  - Improved Markdown rendering performance !3389 (Yorick Peterse)
+  - Don't attempt to look up an avatar in repo if repo directory does not exist (Stan Hu)
+  - Preserve time notes/comments have been updated at when moving issue
+  - Make HTTP(s) label consistent on clone bar (Stan Hu)
+  - Expose label description in API (Mariusz Jachimowicz)
+  - Allow back dating on issues when created through the API
+  - Fix Error 500 after renaming a project path (Stan Hu)
+  - Fix avatar stretching by providing a cropping feature
+  - Add endpoints to archive or unarchive a project !3372
+  - Add links to CI setup documentation from project settings and builds pages
+  - Handle nil descriptions in Slack issue messages (Stan Hu)
+  - Add default scope to projects to exclude projects pending deletion
+  - Ensure empty recipients are rejected in BuildsEmailService
+  - Implement 'Groups View' as an option for dashboard preferences !3379 (Elias W.)
+  - Implement 'TODOs View' as an option for dashboard preferences !3379 (Elias W.)
+  - Gracefully handle notes on deleted commits in merge requests (Stan Hu)
+  - Fix creation of merge requests for orphaned branches (Stan Hu)
+  - Fall back to `In-Reply-To` and `References` headers when sub-addressing is not available (David Padilla)
+  - Remove "Congratulations!" tweet button on newly-created project. (Connor Shea)
+  - Improved UX of the navigation sidebar
+  - Build status notifications
+  - API: Ability to retrieve a specific tag (Robert Schilling)
+  - API: Expose user location (Robert Schilling)
+
+v 8.6.5 (unreleased)
+  - Check permissions when user attempts to import members from another project
+
+v 8.6.4
+  - Don't attempt to fetch any tags from a forked repo (Stan Hu)
+
+v 8.6.3
+  - Mentions on confidential issues doesn't create todos for non-members. !3374
+  - Destroy related todos when an Issue/MR is deleted. !3376
+  - Fix error 500 when target is nil on todo list. !3376
+  - Fix copying uploads when moving issue to another project. !3382
+  - Ensuring Merge Request API returns boolean values for work_in_progress (Abhi Rao). !3432
+  - Fix raw/rendered diff producing different results on merge requests. !3450
+  - Fix commit comment alignment (Stan Hu). !3466
+  - Fix Error 500 when searching for a comment in a project snippet. !3468
+  - Allow temporary email as notification email. !3477
+  - Fix issue with dropdowns not selecting values. !3478
+  - Update gitlab-shell version and doc to 2.6.12. gitlab-org/gitlab-ee!280
+
+v 8.6.2
+  - Fix dropdown alignment. !3298
+  - Fix issuable sidebar overlaps on tablet. !3299
+  - Make dropdowns pixel perfect. !3337
+  - Fix order of steps to prevent PostgreSQL errors when running migration. !3355
+  - Fix bold text in issuable sidebar. !3358
+  - Fix error with anonymous token in applications settings. !3362
+  - Fix the milestone 'upcoming' filter. !3364 + !3368
+  - Fix comments on confidential issues showing up in activity feed to non-members. !3375
+  - Fix `NoMethodError` when visiting CI root path at `/ci`. !3377
+  - Add a tooltip to new branch button in issue page. !3380
+  - Fix an issue hiding the password form when signed-in with a linked account. !3381
+  - Add links to CI setup documentation from project settings and builds pages. !3384
+  - Fix an issue with width of project select dropdown. !3386
+  - Remove redundant `require`s from Banzai files. !3391
+  - Fix error 500 with cancel button on issuable edit form. !3392 + !3417
+  - Fix background when editing a highlighted note. !3423
+  - Remove tabstop from the WIP toggle links. !3426
+  - Ensure private project snippets are not viewable by unauthorized people.
+  - Gracefully handle notes on deleted commits in merge requests (Stan Hu). !3402
+  - Fixed issue with notification settings not saving. !3452
+
+v 8.6.1
+  - Add option to reload the schema before restoring a database backup. !2807
+  - Display navigation controls on mobile. !3214
+  - Fixed bug where participants would not work correctly on merge requests. !3329
+  - Fix sorting issues by votes on the groups issues page results in SQL errors. !3333
+  - Restrict notifications for confidential issues. !3334
+  - Do not allow to move issue if it has not been persisted. !3340
+  - Add a confirmation step before deleting an issuable. !3341
+  - Fixes issue with signin button overflowing on mobile. !3342
+  - Auto collapses the navigation sidebar when resizing. !3343
+  - Fix build dependencies, when the dependency is a string. !3344
+  - Shows error messages when trying to create label in dropdown menu. !3345
+  - Fixes issue with assign milestone not loading milestone list. !3346
+  - Fix an issue causing the Dashboard/Milestones page to be blank. !3348
+
+v 8.6.0
+  - Add ability to move issue to another project
+  - Prevent tokens in the import URL to be showed by the UI
+  - Fix bug where wrong commit ID was being used in a merge request diff to show old image (Stan Hu)
+  - Add confidential issues
+  - Bump gitlab_git to 9.0.3 (Stan Hu)
+  - Fix diff image view modes (2-up, swipe, onion skin) not working (Stan Hu)
   - Support Golang subpackage fetching (Stan Hu)
+  - Bump Capybara gem to 2.6.2 (Stan Hu)
+  - New branch button appears on issues where applicable
   - Contributions to forked projects are included in calendar
   - Improve the formatting for the user page bio (Connor Shea)
+  - Easily (un)mark merge request as WIP using link
+  - Use specialized system notes when MR is (un)marked as WIP
   - Removed the default password from the initial admin account created during
     setup. A password can be provided during setup (see installation docs), or
     GitLab will ask the user to create a new one upon first visit.
   - Fix issue when pushing to projects ending in .wiki
-  - Fix avatar stretching by providing a cropping feature (Johann Pardanaud)
+  - Properly display YAML front matter in Markdown
+  - Add support for wiki with UTF-8 page names (Hiroyuki Sato)
+  - Fix wiki search results point to raw source (Hiroyuki Sato)
   - Don't load all of GitLab in mail_room
+  - Add information about `image` and `services` field at `job` level in the `.gitlab-ci.yml` documentation (Pat Turner)
+  - HTTP error pages work independently from location and config (Artem Sidorenko)
   - Update `omniauth-saml` to 1.5.0 to allow for custom response attributes to be set
   - Memoize @group in Admin::GroupsController (Yatish Mehta)
   - Indicate how much an MR diverged from the target branch (Pierre de La Morinerie)
+  - Added omniauth-auth0 Gem (Daniel Carraro)
+  - Add label description in tooltip to labels in issue index and sidebar
   - Strip leading and trailing spaces in URL validator (evuez)
   - Add "last_sign_in_at" and "confirmed_at" to GET /users/* API endpoints for admins (evuez)
   - Return empty array instead of 404 when commit has no statuses in commit status API
   - Decrease the font size and the padding of the `.anchor` icons used in the README (Roberto Dip)
   - Rewrite logo to simplify SVG code (Sean Lang)
+  - Allow to use YAML anchors when parsing the `.gitlab-ci.yml` (Pascal Bach)
+  - Ignore jobs that start with `.` (hidden jobs)
+  - Hide builds from project's settings when the feature is disabled
+  - Allow to pass name of created artifacts archive in `.gitlab-ci.yml`
   - Refactor and greatly improve search performance
   - Add support for cross-project label references
+  - Ensure "new SSH key" email do not ends up as dead Sidekiq jobs
   - Update documentation to reflect Guest role not being enforced on internal projects
   - Allow search for logged out users
+  - Allow to define on which builds the current one depends on
+  - Allow user subscription to a label: get notified for issues/merge requests related to that label (Timothy Andrew)
   - Fix bug where Bitbucket `closed` issues were imported as `opened` (Iuri de Silvio)
   - Don't show Issues/MRs from archived projects in Groups view
+  - Fix wrong "iid of max iid" in Issuable sidebar for some merged MRs
+  - Fix empty source_sha on Merge Request when there is no diff (Pierre de La Morinerie)
   - Increase the notes polling timeout over time (Roberto Dip)
   - Add shortcut to toggle markdown preview (Florent Baldino)
   - Show labels in dashboard and group milestone views
+  - Fix an issue when the target branch of a MR had been deleted
   - Add main language of a project in the list of projects (Tiago Botelho)
+  - Add #upcoming filter to Milestone filter (Tiago Botelho)
   - Add ability to show archived projects on dashboard, explore and group pages
+  - Remove fork link closes all merge requests opened on source project (Florent Baldino)
   - Move group activity to separate page
+  - Create external users which are excluded of internal and private projects unless access was explicitly granted
+  - Continue parameters are checked to ensure redirection goes to the same instance
+  - User deletion is now done in the background so the request can not time out
+  - Canceled builds are now ignored in compound build status if marked as `allowed to fail`
+  - Trigger a todo for mentions on commits page
+  - Let project owners and admins soft delete issues and merge requests
+
+v 8.5.9
+  - Don't attempt to fetch any tags from a forked repo (Stan Hu).
+
+v 8.5.8
+  - Bump Git version requirement to 2.7.4
+
+v 8.5.7
+  - Bump Git version requirement to 2.7.3
+
+v 8.5.6
+  - Obtain a lease before querying LDAP
 
 v 8.5.5
   - Ensure removing a project removes associated Todo entries
   - Prevent a 500 error in Todos when author was removed
   - Fix pagination for filtered dashboard and explore pages
   - Fix "Show all" link behavior
-  - Add #upcoming filter to Milestone filter (Tiago Botelho)
 
 v 8.5.4
   - Do not cache requests for badges (including builds badge)
@@ -164,6 +291,12 @@ v 8.5.0
   - Show label row when filtering issues or merge requests by label (Nuttanart Pornprasitsakul)
   - Add Todos
 
+v 8.4.7
+  - Don't attempt to fetch any tags from a forked repo (Stan Hu).
+
+v 8.4.6
+  - Bump Git version requirement to 2.7.4
+
 v 8.4.5
   - No CE-specific changes
 
@@ -277,6 +410,12 @@ v 8.4.0
   - Add IP check against DNSBLs at account sign-up
   - Added cache:key to .gitlab-ci.yml allowing to fine tune the caching
 
+v 8.3.6
+  - Don't attempt to fetch any tags from a forked repo (Stan Hu).
+
+v 8.3.5
+  - Bump Git version requirement to 2.7.4
+
 v 8.3.4
   - Use gitlab-workhorse 0.5.4 (fixes API routing bug)
 

CONTRIBUTING.md

@@ -16,6 +16,7 @@
         - [Issue tracker guidelines](#issue-tracker-guidelines)
         - [Issue weight](#issue-weight)
         - [Regression issues](#regression-issues)
+        - [Technical debt](#technical-debt)
     - [Merge requests](#merge-requests)
         - [Merge request guidelines](#merge-request-guidelines)
         - [Merge request description format](#merge-request-description-format)
@@ -242,6 +243,28 @@ addressed.
 [8.3 Regressions]: https://gitlab.com/gitlab-org/gitlab-ce/issues/4127
 [update the notes]: https://gitlab.com/gitlab-org/release-tools/blob/master/doc/pro-tips.md#update-the-regression-issue
 
+### Technical debt
+
+In order to track things that can be improved in GitLab's codebase, we created
+the ~"technical debt" label in [GitLab's issue tracker][ce-tracker].
+
+This label should be added to issues that describe things that can be improved,
+shortcuts that have been taken, code that needs refactoring, features that need
+additional attention, and all other things that have been left behind due to
+high velocity of development.
+
+Everyone can create an issue, though you may need to ask for adding a specific
+label, if you do not have permissions to do it by yourself. Additional labels
+can be combined with the `technical debt` label, to make it easier to schedule
+the improvements for a release.
+
+Issues tagged with the `technical debt` label have the same priority like issues
+that describe a new feature to be introduced in GitLab, and should be scheduled
+for a release by the appropriate person.
+
+Make sure to mention the merge request that the `technical debt` issue is
+associated with in the description of the issue.
+
 ## Merge requests
 
 We welcome merge requests with fixes and improvements to GitLab code, tests,
@@ -427,6 +450,7 @@ merge request:
 1.  [Rails](https://github.com/bbatsov/rails-style-guide)
 1.  [Testing](https://github.com/thoughtbot/guides/tree/master/style/testing)
 1.  [CoffeeScript](https://github.com/thoughtbot/guides/tree/master/style/coffeescript)
+1.  [SCSS styleguide][scss-styleguide]
 1.  [Shell commands](doc/development/shell_commands.md) created by GitLab
     contributors to enhance security
 1.  [Database Migrations](doc/development/migration_style_guide.md)
@@ -494,6 +518,7 @@ available at [http://contributor-covenant.org/version/1/1/0/](http://contributor
 [rss-source]: https://github.com/bbatsov/ruby-style-guide/blob/master/README.md#source-code-layout
 [rss-naming]: https://github.com/bbatsov/ruby-style-guide/blob/master/README.md#naming
 [doc-styleguide]: doc/development/doc_styleguide.md "Documentation styleguide"
+[scss-styleguide]: doc/development/scss_styleguide.md "SCSS styleguide"
 [gitlab-design]: https://gitlab.com/gitlab-org/gitlab-design
 [free Antetype viewer (Mac OSX only)]: https://itunes.apple.com/us/app/antetype-viewer/id824152298?mt=12
 [`gitlab1.atype` file]: https://gitlab.com/gitlab-org/gitlab-design/tree/master/gitlab1.atype/

GITLAB_SHELL_VERSION

@@ -1 +1 @@
-2.6.10
+2.7.0

GITLAB_WORKHORSE_VERSION

@@ -1 +1 @@
-0.6.5
+0.7.1

Gemfile

@@ -22,6 +22,7 @@ gem 'devise',                 '~> 3.5.4'
 gem 'devise-async',           '~> 0.9.0'
 gem 'doorkeeper',             '~> 2.2.0'
 gem 'omniauth',               '~> 1.3.1'
+gem 'omniauth-auth0',         '~> 1.4.1'
 gem 'omniauth-azure-oauth2',  '~> 0.0.6'
 gem 'omniauth-bitbucket',     '~> 0.0.2'
 gem 'omniauth-cas3',          '~> 1.1.2'
@@ -50,7 +51,7 @@ gem "browser", '~> 1.0.0'
 
 # Extracting information from a git repository
 # Provide access to Gitlab::Git library
-gem "gitlab_git", '~> 9.0'
+gem "gitlab_git", '~> 10.0'
 
 # LDAP Auth
 # GitLab fork with several improvements to original library. For full list of changes
@@ -58,7 +59,9 @@ gem "gitlab_git", '~> 9.0'
 gem 'gitlab_omniauth-ldap', '~> 1.2.1', require: "omniauth-ldap"
 
 # Git Wiki
-gem 'gollum-lib', '~> 4.1.0'
+# Required manually in config/initializers/gollum.rb to control load order
+gem 'gollum-lib', '~> 4.1.0', require: false
+gem 'gollum-rugged_adapter', '~> 0.4.2', require: false
 
 # Language detection
 gem "github-linguist", "~> 4.7.0", require: "linguist"
@@ -77,9 +80,6 @@ gem "haml-rails", '~> 0.9.0'
 # Files attachments
 gem "carrierwave", '~> 0.10.0'
 
-# Image editing
-gem "mini_magick", '~> 4.4.0'
-
 # Drag and Drop UI
 gem 'dropzonejs-rails', '~> 0.7.1'
 
@@ -214,7 +214,7 @@ gem 'jquery-rails',       '~> 4.0.0'
 gem 'jquery-scrollto-rails', '~> 1.4.3'
 gem 'jquery-ui-rails',    '~> 5.0.0'
 gem 'raphael-rails',      '~> 2.1.2'
-gem 'request_store',      '~> 1.2.0'
+gem 'request_store',      '~> 1.3.0'
 gem 'select2-rails',      '~> 3.5.9'
 gem 'virtus',             '~> 1.0.1'
 gem 'net-ssh',            '~> 3.0.1'
@@ -222,6 +222,8 @@ gem 'net-ssh',            '~> 3.0.1'
 # Sentry integration
 gem 'sentry-raven', '~> 0.15'
 
+gem 'premailer-rails', '~> 1.9.0'
+
 # Metrics
 group :metrics do
   gem 'allocations', '~> 1.0', require: false, platform: :mri
@@ -232,7 +234,7 @@ end
 
 group :development do
   gem "foreman"
-  gem 'brakeman', '~> 3.1.0', require: false
+  gem 'brakeman', '~> 3.2.0', require: false
 
   gem "annotate", "~> 2.6.0"
   gem "letter_opener", '~> 1.1.2'
@@ -273,11 +275,11 @@ group :development, :test do
   # Generate Fake data
   gem 'ffaker', '~> 2.0.0'
 
-  gem 'capybara',            '~> 2.4.0'
+  gem 'capybara',            '~> 2.6.2'
   gem 'capybara-screenshot', '~> 1.0.0'
   gem 'poltergeist',         '~> 1.9.0'
 
-  gem 'teaspoon', '~> 1.0.0'
+  gem 'teaspoon', '~> 1.1.0'
   gem 'teaspoon-jasmine', '~> 2.2.0'
 
   gem 'spring', '~> 1.6.4'
@@ -285,7 +287,8 @@ group :development, :test do
   gem 'spring-commands-spinach',  '~> 1.0.0'
   gem 'spring-commands-teaspoon', '~> 0.0.2'
 
-  gem 'rubocop', '~> 0.35.0', require: false
+  gem 'rubocop', '~> 0.38.0', require: false
+  gem 'scss_lint', '~> 0.47.0', require: false
   gem 'coveralls',  '~> 0.8.2', require: false
   gem 'simplecov', '~> 0.10.0', require: false
   gem 'flog', require: false

Gemfile.lock

@@ -61,9 +61,7 @@ GEM
       faraday_middleware-multi_json (~> 0.0)
       oauth2 (~> 1.0)
     asciidoctor (1.5.3)
-    ast (2.1.0)
-    astrolabe (1.3.1)
-      parser (~> 2.2)
+    ast (2.2.0)
     attr_encrypted (1.3.4)
       encryptor (>= 1.3.0)
     attr_required (1.0.0)
@@ -86,29 +84,28 @@ GEM
     bootstrap-sass (3.3.6)
       autoprefixer-rails (>= 5.2.1)
       sass (>= 3.3.4)
-    brakeman (3.1.4)
+    brakeman (3.2.1)
       erubis (~> 2.6)
-      fastercsv (~> 1.5)
       haml (>= 3.0, < 5.0)
       highline (>= 1.6.20, < 2.0)
-      multi_json (~> 1.2)
-      ruby2ruby (>= 2.1.1, < 2.3.0)
-      ruby_parser (~> 3.7.0)
+      ruby2ruby (~> 2.3.0)
+      ruby_parser (~> 3.8.1)
       safe_yaml (>= 1.0)
       sass (~> 3.0)
       slim (>= 1.3.6, < 4.0)
       terminal-table (~> 1.4)
     browser (1.0.1)
     builder (3.2.2)
-    bullet (4.14.10)
+    bullet (5.0.0)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.9.0)
-    bundler-audit (0.4.0)
+    bundler-audit (0.5.0)
       bundler (~> 1.2)
       thor (~> 0.18)
     byebug (8.2.1)
     cal-heatmap-rails (3.5.1)
-    capybara (2.4.4)
+    capybara (2.6.2)
+      addressable
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
@@ -129,9 +126,9 @@ GEM
     coderay (1.1.0)
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
-    coffee-rails (4.1.0)
+    coffee-rails (4.1.1)
       coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.0)
+      railties (>= 4.0.0, < 5.1.x)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
@@ -149,6 +146,8 @@ GEM
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
     creole (0.5.0)
+    css_parser (1.3.7)
+      addressable
     d3_rails (3.5.11)
       railties (>= 3.1.0)
     daemons (1.2.3)
@@ -207,7 +206,6 @@ GEM
     faraday_middleware-multi_json (0.0.6)
       faraday_middleware
       multi_json
-    fastercsv (1.5.5)
     ffaker (2.0.0)
     ffi (1.9.10)
     fission (0.5.0)
@@ -327,8 +325,8 @@ GEM
     fog-xml (0.1.2)
       fog-core
       nokogiri (~> 1.5, >= 1.5.11)
-    font-awesome-rails (4.5.0.0)
-      railties (>= 3.2, < 5.0)
+    font-awesome-rails (4.5.0.1)
+      railties (>= 3.2, < 5.1)
     foreman (0.78.0)
       thor (~> 0.19.1)
     formatador (0.2.5)
@@ -358,11 +356,11 @@ GEM
       posix-spawn (~> 0.3)
     gitlab_emoji (0.3.1)
       gemojione (~> 2.2, >= 2.2.1)
-    gitlab_git (9.0.1)
+    gitlab_git (10.0.0)
       activesupport (~> 4.0)
       charlock_holmes (~> 0.7.3)
       github-linguist (~> 4.7.0)
-      rugged (~> 0.24.0b13)
+      rugged (~> 0.24.0)
     gitlab_meta (7.0)
     gitlab_omniauth-ldap (1.2.1)
       net-ldap (~> 0.9)
@@ -380,6 +378,9 @@ GEM
       rouge (~> 1.9)
       sanitize (~> 2.1.0)
       stringex (~> 2.5.1)
+    gollum-rugged_adapter (0.4.2)
+      mime-types (>= 1.15)
+      rugged (~> 0.24.0, >= 0.21.3)
     gon (6.0.1)
       actionpack (>= 3.0)
       json
@@ -419,6 +420,7 @@ GEM
       haml (~> 4.0.0)
       nokogiri (~> 1.6.0)
       ruby_parser (~> 3.5)
+    htmlentities (4.3.4)
     http-cookie (1.0.2)
       domain_name (~> 0.5)
     http_parser.rb (0.5.3)
@@ -468,7 +470,6 @@ GEM
     method_source (0.8.2)
     mime-types (1.25.1)
     mimemagic (0.3.0)
-    mini_magick (4.4.0)
     mini_portile2 (2.0.0)
     minitest (5.7.0)
     mousetrap-rails (1.4.6)
@@ -495,6 +496,8 @@ GEM
     omniauth (1.3.1)
       hashie (>= 1.2, < 4)
       rack (>= 1.0, < 3)
+    omniauth-auth0 (1.4.1)
+      omniauth-oauth2 (~> 1.1)
     omniauth-azure-oauth2 (0.0.6)
       jwt (~> 1.0)
       omniauth (~> 1.0)
@@ -549,8 +552,8 @@ GEM
     orm_adapter (0.5.0)
     paranoia (2.1.4)
       activerecord (~> 4.0)
-    parser (2.2.3.0)
-      ast (>= 1.1, < 3.0)
+    parser (2.3.0.6)
+      ast (~> 2.2)
     pg (0.18.4)
     poltergeist (1.9.0)
       capybara (~> 2.1)
@@ -559,6 +562,12 @@ GEM
       websocket-driver (>= 0.2.0)
     posix-spawn (0.3.11)
     powerpack (0.1.1)
+    premailer (1.8.6)
+      css_parser (>= 1.3.6)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.9.0)
+      actionmailer (>= 3, < 5)
+      premailer (~> 1.7, >= 1.7.9)
     pry (0.10.3)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
@@ -610,7 +619,7 @@ GEM
       activesupport (= 4.2.5.2)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rainbow (2.0.0)
+    rainbow (2.1.0)
     raindrops (0.15.0)
     rake (10.5.0)
     raphael-rails (2.1.2)
@@ -643,7 +652,7 @@ GEM
       redis-store (~> 1.1.0)
     redis-store (1.1.7)
       redis (>= 2.2)
-    request_store (1.2.1)
+    request_store (1.3.0)
     rerun (0.11.0)
       listen (~> 3.0)
     responders (2.1.1)
@@ -682,32 +691,31 @@ GEM
     rspec-retry (0.4.5)
       rspec-core
     rspec-support (3.3.0)
-    rubocop (0.35.1)
-      astrolabe (~> 1.3)
-      parser (>= 2.2.3.0, < 3.0)
+    rubocop (0.38.0)
+      parser (>= 2.3.0.6, < 3.0)
       powerpack (~> 0.1)
       rainbow (>= 1.99.1, < 3.0)
       ruby-progressbar (~> 1.7)
-      tins (<= 1.6.0)
+      unicode-display_width (~> 1.0, >= 1.0.1)
     ruby-fogbugz (0.2.1)
       crack (~> 0.4)
     ruby-progressbar (1.7.5)
     ruby-saml (1.1.2)
       nokogiri (>= 1.5.10)
       uuid (~> 2.3)
-    ruby2ruby (2.2.0)
+    ruby2ruby (2.3.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.0)
-    ruby_parser (3.7.2)
+    ruby_parser (3.8.1)
       sexp_processor (~> 4.1)
     rubyntlm (0.5.2)
     rubypants (0.2.0)
     rufus-scheduler (3.1.10)
-    rugged (0.24.0b13)
+    rugged (0.24.0)
     safe_yaml (1.0.4)
     sanitize (2.1.0)
       nokogiri (>= 1.4.4)
-    sass (3.4.20)
+    sass (3.4.21)
     sass-rails (5.0.4)
       railties (>= 4.0.0, < 5.0)
       sass (~> 3.1)
@@ -717,6 +725,9 @@ GEM
     sawyer (0.6.0)
       addressable (~> 2.3.5)
       faraday (~> 0.8, < 0.10)
+    scss_lint (0.47.1)
+      rake (>= 0.9, < 11)
+      sass (~> 3.4.15)
     sdoc (0.3.20)
       json (>= 1.1.3)
       rdoc (~> 3.10)
@@ -728,7 +739,7 @@ GEM
     sentry-raven (0.15.6)
       faraday (>= 0.7.6)
     settingslogic (2.0.9)
-    sexp_processor (4.6.0)
+    sexp_processor (4.7.0)
     sham_rack (1.3.6)
       rack
     shoulda-matchers (2.8.0)
@@ -792,8 +803,8 @@ GEM
     systemu (2.6.5)
     task_list (1.0.2)
       html-pipeline
-    teaspoon (1.0.2)
-      railties (>= 3.2.5, < 5)
+    teaspoon (1.1.5)
+      railties (>= 3.2.5, < 6)
     teaspoon-jasmine (2.2.0)
       teaspoon (>= 1.0.0)
     temple (0.7.6)
@@ -835,6 +846,7 @@ GEM
     unf (0.1.4)
       unf_ext
     unf_ext (0.0.7.1)
+    unicode-display_width (1.0.2)
     unicorn (4.9.0)
       kgio (~> 2.6)
       rack
@@ -853,7 +865,7 @@ GEM
       equalizer (~> 0.0, >= 0.0.9)
     warden (1.2.4)
       rack (>= 1.0)
-    web-console (2.2.1)
+    web-console (2.3.0)
       activemodel (>= 4.0)
       binding_of_caller (>= 0.7.2)
       railties (>= 4.0)
@@ -895,13 +907,13 @@ DEPENDENCIES
   better_errors (~> 1.0.1)
   binding_of_caller (~> 0.7.2)
   bootstrap-sass (~> 3.3.0)
-  brakeman (~> 3.1.0)
+  brakeman (~> 3.2.0)
   browser (~> 1.0.0)
   bullet
   bundler-audit
   byebug
   cal-heatmap-rails (~> 3.5.0)
-  capybara (~> 2.4.0)
+  capybara (~> 2.6.2)
   capybara-screenshot (~> 1.0.0)
   carrierwave (~> 0.10.0)
   charlock_holmes (~> 0.7.3)
@@ -934,10 +946,11 @@ DEPENDENCIES
   github-markup (~> 1.3.1)
   gitlab-flowdock-git-hook (~> 1.0.1)
   gitlab_emoji (~> 0.3.0)
-  gitlab_git (~> 9.0)
+  gitlab_git (~> 10.0)
   gitlab_meta (= 7.0)
   gitlab_omniauth-ldap (~> 1.2.1)
   gollum-lib (~> 4.1.0)
+  gollum-rugged_adapter (~> 0.4.2)
   gon (~> 6.0.1)
   grape (~> 0.13.0)
   grape-entity (~> 0.4.2)
@@ -956,7 +969,6 @@ DEPENDENCIES
   loofah (~> 2.0.3)
   mail_room (~> 0.6.1)
   method_source (~> 0.8)
-  mini_magick (~> 4.4.0)
   minitest (~> 5.7.0)
   mousetrap-rails (~> 1.4.6)
   mysql2 (~> 0.3.16)
@@ -967,6 +979,7 @@ DEPENDENCIES
   oauth2 (~> 1.0.0)
   octokit (~> 3.8.0)
   omniauth (~> 1.3.1)
+  omniauth-auth0 (~> 1.4.1)
   omniauth-azure-oauth2 (~> 0.0.6)
   omniauth-bitbucket (~> 0.0.2)
   omniauth-cas3 (~> 1.1.2)
@@ -983,6 +996,7 @@ DEPENDENCIES
   paranoia (~> 2.0)
   pg (~> 0.18.2)
   poltergeist (~> 1.9.0)
+  premailer-rails (~> 1.9.0)
   pry-rails
   quiet_assets (~> 1.0.2)
   rack-attack (~> 4.3.1)
@@ -997,17 +1011,18 @@ DEPENDENCIES
   redcarpet (~> 3.3.3)
   redis-namespace
   redis-rails (~> 4.0.0)
-  request_store (~> 1.2.0)
+  request_store (~> 1.3.0)
   rerun (~> 0.11.0)
   responders (~> 2.0)
   rouge (~> 1.10.1)
   rqrcode-rails3 (~> 0.1.7)
   rspec-rails (~> 3.3.0)
   rspec-retry
-  rubocop (~> 0.35.0)
+  rubocop (~> 0.38.0)
   ruby-fogbugz (~> 0.2.1)
   sanitize (~> 2.0)
   sass-rails (~> 5.0.0)
+  scss_lint (~> 0.47.0)
   sdoc (~> 0.3.20)
   seed-fu (~> 2.3.5)
   select2-rails (~> 3.5.9)
@@ -1030,7 +1045,7 @@ DEPENDENCIES
   sprockets (~> 3.3.5)
   state_machines-activerecord (~> 0.3.0)
   task_list (~> 1.0.2)
-  teaspoon (~> 1.0.0)
+  teaspoon (~> 1.1.0)
   teaspoon-jasmine (~> 2.2.0)
   test_after_commit (~> 0.4.2)
   thin (~> 1.6.1)

README.md

@@ -68,7 +68,7 @@ GitLab is a Ruby on Rails application that runs on the following software:
 
 - Ubuntu/Debian/CentOS/RHEL
 - Ruby (MRI) 2.1
-- Git 1.7.10+
+- Git 2.7.4+
 - Redis 2.8+
 - MySQL or PostgreSQL
 

VERSION

@@ -1 +1 @@
-8.6.0-pre
+8.7.0-pre

app/assets/javascripts/api.js.coffee

@@ -74,6 +74,8 @@
       dataType: "json"
     ).done (label) ->
       callback(label)
+    .error (message) ->
+      callback(message.responseJSON)
 
   # Return group projects list. Filtered by query
   groupProjects: (group_id, query, callback) ->

app/assets/javascripts/application.js.coffee

@@ -7,6 +7,7 @@
 #= require jquery
 #= require jquery-ui/autocomplete
 #= require jquery-ui/datepicker
+#= require jquery-ui/draggable
 #= require jquery-ui/effect-highlight
 #= require jquery-ui/sortable
 #= require jquery_ujs
@@ -42,7 +43,7 @@
 #= require jquery.nicescroll
 #= require_tree .
 #= require fuzzaldrin-plus
-#= require cropper.js
+#= require cropper
 
 window.slugify = (text) ->
   text.replace(/[^-a-zA-Z0-9]+/g, '_').toLowerCase()
@@ -108,6 +109,8 @@ window.onload = ->
     setTimeout shiftWindow, 100
 
 $ ->
+  bootstrapBreakpoint = bp.getBreakpointSize()
+
   $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF")
 
   # Click a .js-select-on-focus field, select the contents
@@ -137,7 +140,7 @@ $ ->
 
   # Initialize tooltips
   $('body').tooltip(
-    selector: '.has_tooltip, [data-toggle="tooltip"]'
+    selector: '.has-tooltip, [data-toggle="tooltip"]'
     placement: (_, el) ->
       $el = $(el)
       $el.data('placement') || 'bottom'
@@ -216,13 +219,20 @@ $ ->
       $this = $(this)
       $this.attr 'value', $this.val()
 
+  $sidebarGutterToggle = $('.js-sidebar-toggle')
+  $navIconToggle = $('.toggle-nav-collapse')
+
   $(document)
     .off 'breakpoint:change'
     .on 'breakpoint:change', (e, breakpoint) ->
       if breakpoint is 'sm' or breakpoint is 'xs'
-        $gutterIcon = $('.js-sidebar-toggle').find('i')
+        $gutterIcon = $sidebarGutterToggle.find('i')
         if $gutterIcon.hasClass('fa-angle-double-right')
-          $gutterIcon.closest('a').trigger('click')
+          $sidebarGutterToggle.trigger('click')
+
+        $navIcon = $navIconToggle.find('.fa')
+        if $navIcon.hasClass('fa-angle-left')
+          $navIconToggle.trigger('click')
 
   $(document)
     .off 'click', '.js-sidebar-toggle'
@@ -256,35 +266,14 @@ $ ->
           $('.right-sidebar')
             .hasClass('right-sidebar-collapsed'), { path: '/' })
 
-  bootstrapBreakpoint = undefined;
-  checkBootstrapBreakpoints = ->
-    if $('.device-xs').is(':visible')
-      bootstrapBreakpoint = "xs"
-    else if $('.device-sm').is(':visible')
-      bootstrapBreakpoint = "sm"
-    else if $('.device-md').is(':visible')
-      bootstrapBreakpoint = "md"
-    else if $('.device-lg').is(':visible')
-      bootstrapBreakpoint = "lg"
-
-  setBootstrapBreakpoints = ->
-    if $('.device-xs').length
-      return
-
-    $("body")
-      .append('<div class="device-xs visible-xs"></div>'+
-        '<div class="device-sm visible-sm"></div>'+
-        '<div class="device-md visible-md"></div>'+
-        '<div class="device-lg visible-lg"></div>')
-    checkBootstrapBreakpoints()
-
   fitSidebarForSize = ->
     oldBootstrapBreakpoint = bootstrapBreakpoint
-    checkBootstrapBreakpoints()
+    bootstrapBreakpoint = bp.getBreakpointSize()
     if bootstrapBreakpoint != oldBootstrapBreakpoint
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
   checkInitialSidebarSize = ->
+    bootstrapBreakpoint = bp.getBreakpointSize()
     if bootstrapBreakpoint is "xs" or "sm"
       $(document).trigger('breakpoint:change', [bootstrapBreakpoint])
 
@@ -293,6 +282,5 @@ $ ->
     .on "resize", (e) ->
       fitSidebarForSize()
 
-  setBootstrapBreakpoints()
   checkInitialSidebarSize()
   new Aside()

app/assets/javascripts/aside.js.coffee

@@ -5,7 +5,6 @@ class @Aside
       e.preventDefault()
       btn = $(e.currentTarget)
       icon = btn.find('i')
-      console.log('1')
 
       if icon.hasClass('fa-angle-left')
         btn.parent().find('section').hide()

app/assets/javascripts/awards_handler.coffee

@@ -1,5 +1,5 @@
 class @AwardsHandler
-  constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
+  constructor: (@get_emojis_url, @post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
     $(".js-add-award").on "click", (event) =>
       event.stopPropagation()
       event.preventDefault()
@@ -34,7 +34,7 @@ class @AwardsHandler
         $("#emoji_search").focus()
     else
       $('.js-add-award').addClass "is-loading"
-      $.get "/emojis", (response) =>
+      $.get @get_emojis_url, (response) =>
         $('.js-add-award').removeClass "is-loading"
         $(".js-award-holder").append response
         setTimeout =>
@@ -122,7 +122,7 @@ class @AwardsHandler
 
     nodes = []
     nodes.push(
-      "<button class='btn award-control js-emoji-btn has_tooltip active' title='me'>",
+      "<button class='btn award-control js-emoji-btn has-tooltip active' title='me'>",
       "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>",
       "<span class='award-control-text js-counter'>1</span>",
       "</button>"

app/assets/javascripts/breakpoints.coffee

@@ -0,0 +1,37 @@
+class @Breakpoints
+  instance = null;
+
+  class BreakpointInstance
+    BREAKPOINTS = ["xs", "sm", "md", "lg"]
+
+    constructor: ->
+      @setup()
+
+    setup: ->
+      allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
+        ".device-#{breakpoint}"
+      return if $(allDeviceSelector.join(",")).length
+
+      # Create all the elements
+      els = $.map BREAKPOINTS, (breakpoint) ->
+        "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>"
+      $("body").append els.join('')
+
+    visibleDevice: ->
+      allDeviceSelector = BREAKPOINTS.map (breakpoint) ->
+        ".device-#{breakpoint}"
+      $(allDeviceSelector.join(",")).filter(":visible")
+
+    getBreakpointSize: ->
+      $visibleDevice = @visibleDevice
+      # the page refreshed via turbolinks
+      if not $visibleDevice().length
+        @setup()
+      $visibleDevice = @visibleDevice()
+      return $visibleDevice.attr("class").split("visible-")[1]
+
+  @get: ->
+    return instance ?= new BreakpointInstance
+
+$ =>
+  @bp = Breakpoints.get()

app/assets/javascripts/dispatcher.js.coffee

@@ -14,7 +14,6 @@ class Dispatcher
 
     path = page.split(':')
     shortcut_handler = null
-
     switch page
       when 'projects:issues:index'
         Issues.init()
@@ -25,6 +24,8 @@ class Dispatcher
         new ZenMode()
       when 'projects:milestones:show', 'groups:milestones:show', 'dashboard:milestones:show'
         new Milestone()
+      when 'dashboard:todos:index'
+        new Todos()
       when 'projects:milestones:new', 'projects:milestones:edit'
         new ZenMode()
         new DropzoneInput($('.milestone-form'))
@@ -104,6 +105,8 @@ class Dispatcher
         new ProjectFork()
       when 'projects:artifacts:browse'
         new BuildArtifacts()
+      when 'projects:group_links:index'
+        new GroupsSelect()
 
     switch path.first()
       when 'admin'
@@ -143,15 +146,11 @@ class Dispatcher
           when 'project_members', 'deploy_keys', 'hooks', 'services', 'protected_branches'
             shortcut_handler = new ShortcutsNavigation()
 
-
     # If we haven't installed a custom shortcut handler, install the default one
     if not shortcut_handler
       new Shortcuts()
 
   initSearch: ->
-    opts = $('.search-autocomplete-opts')
-    path = opts.data('autocomplete-path')
-    project_id = opts.data('autocomplete-project-id')
-    project_ref = opts.data('autocomplete-project-ref')
 
-    new SearchAutocomplete(path, project_id, project_ref)
+    # Only when search form is present
+    new SearchAutocomplete() if $('.search').length

app/assets/javascripts/gl_crop.js.coffee

@@ -0,0 +1,152 @@
+class GitLabCrop
+  # Matches everything but the file name
+  FILENAMEREGEX = /^.*[\\\/]/
+
+  constructor: (input, opts = {}) ->
+    @fileInput = $(input)
+
+    # We should rename to avoid spec to fail
+    # Form will submit the proper input filed with a file using FormData
+    @fileInput
+      .attr('name', "#{@fileInput.attr('name')}-trigger")
+      .attr('id', "#{@fileInput.attr('id')}-trigger")
+
+    # Set defaults
+    {
+      @exportWidth = 200
+      @exportHeight = 200
+      @cropBoxWidth = 200
+      @cropBoxHeight = 200
+      @form = @fileInput.parents('form')
+
+      # Required params
+      @filename
+      @previewImage
+      @modalCrop
+      @pickImageEl
+      @uploadImageBtn
+      @modalCropImg
+    } = opts
+
+    # Ensure needed elements are jquery objects
+    # If selector is provided we will convert them to a jQuery Object
+    @filename = @getElement(@filename)
+    @previewImage = @getElement(@previewImage)
+    @pickImageEl = @getElement(@pickImageEl)
+
+    # Modal elements usually are outside the @form element
+    @modalCrop = if _.isString(@modalCrop) then $(@modalCrop) else @modalCrop
+    @uploadImageBtn = if _.isString(@uploadImageBtn) then $(@uploadImageBtn) else @uploadImageBtn
+    @modalCropImg = if _.isString(@modalCropImg) then $(@modalCropImg) else @modalCropImg
+
+    @cropActionsBtn = @modalCrop.find('[data-method]')
+
+    @bindEvents()
+
+  getElement: (selector) ->
+    $(selector, @form)
+
+  bindEvents: ->
+    _this = @
+    @fileInput.on 'change', (e) ->
+      _this.onFileInputChange(e, @)
+
+    @pickImageEl.on 'click', @onPickImageClick
+    @modalCrop.on 'shown.bs.modal', @onModalShow
+    @modalCrop.on 'hidden.bs.modal', @onModalHide
+    @uploadImageBtn.on 'click', @onUploadImageBtnClick
+    @cropActionsBtn.on 'click', (e) ->
+      btn = @
+      _this.onActionBtnClick(btn)
+    @croppedImageBlob = null
+
+  onPickImageClick: =>
+    @fileInput.trigger('click')
+
+  onModalShow: =>
+    _this = @
+    @modalCropImg.cropper(
+      viewMode: 1
+      center: false
+      aspectRatio: 1
+      modal: true
+      scalable: false
+      rotatable: false
+      zoomable: true
+      dragMode: 'move'
+      guides: false
+      zoomOnTouch: false
+      zoomOnWheel: false
+      cropBoxMovable: false
+      cropBoxResizable: false
+      toggleDragModeOnDblclick: false
+      built: ->
+        $image = $(@)
+        container = $image.cropper 'getContainerData'
+        cropBoxWidth = _this.cropBoxWidth;
+        cropBoxHeight = _this.cropBoxHeight;
+
+        $image.cropper('setCropBoxData',
+          width: cropBoxWidth,
+          height: cropBoxHeight,
+          left: (container.width - cropBoxWidth) / 2,
+          top: (container.height - cropBoxHeight) / 2
+        )
+    )
+
+
+  onModalHide: =>
+    @modalCropImg
+      .attr('src', '') # Remove attached image
+      .cropper('destroy') # Destroy cropper instance
+
+  onUploadImageBtnClick: (e) =>
+    e.preventDefault()
+    @setBlob()
+    @setPreview()
+    @modalCrop.modal('hide')
+    @fileInput.val('')
+
+  onActionBtnClick: (btn) ->
+    data = $(btn).data()
+
+    if @modalCropImg.data('cropper') && data.method
+      result = @modalCropImg.cropper data.method, data.option
+
+  onFileInputChange: (e, input) ->
+    @readFile(input)
+
+  readFile: (input) ->
+    _this = @
+    reader = new FileReader
+    reader.onload = ->
+      _this.modalCropImg.attr('src', reader.result)
+      _this.modalCrop.modal('show')
+
+    reader.readAsDataURL(input.files[0])
+
+  dataURLtoBlob: (dataURL) ->
+    binary = atob(dataURL.split(',')[1])
+    array = []
+    for v, k in  binary
+      array.push(binary.charCodeAt(k))
+    new Blob([new Uint8Array(array)], type: 'image/png')
+
+  setPreview: ->
+    @previewImage.attr('src', @dataURL)
+    filename = @fileInput.val().replace(FILENAMEREGEX, '')
+    @filename.text(filename)
+
+  setBlob: ->
+    @dataURL = @modalCropImg.cropper('getCroppedCanvas',
+        width: 200
+        height: 200
+      ).toDataURL('image/png')
+    @croppedImageBlob = @dataURLtoBlob(@dataURL)
+
+  getBlob: ->
+    @croppedImageBlob
+
+$.fn.glCrop = (opts) ->
+  return @.each ->
+    $(@).data('glcrop', new GitLabCrop(@, opts))

app/assets/javascripts/gl_dropdown.js.coffee

@@ -1,23 +1,48 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
+  ARROW_KEY_CODES = [38, 40]
+  HAS_VALUE_CLASS = "has-value"
 
-  constructor: (@dropdown, @options) ->
-    @input = @dropdown.find(".dropdown-input .dropdown-input-field")
+  constructor: (@input, @options) ->
+    {
+      @filterInputBlur = true
+    } = @options
+
+    $inputContainer = @input.parent()
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
+
+    # Clear click
+    $clearButton.on 'click', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+      @input
+        .val('')
+        .trigger('keyup')
+        .focus()
 
     # Key events
     timeout = ""
     @input.on "keyup", (e) =>
-      if e.keyCode is 13 && @input.val() isnt ""
+      keyCode = e.which
+
+      return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
+
+      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.addClass HAS_VALUE_CLASS
+      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.removeClass HAS_VALUE_CLASS
+
+      if keyCode is 13 and @input.val() isnt ""
         if @options.enterCallback
           @options.enterCallback()
         return
 
       clearTimeout timeout
       timeout = setTimeout =>
-        blur_field = @shouldBlur e.keyCode
+        blur_field = @shouldBlur keyCode
         search_text = @input.val()
 
-        if blur_field
+        if blur_field and @filterInputBlur
           @input.blur()
 
         if @options.remote
@@ -76,39 +101,67 @@ class GitLabDropdown
   LOADING_CLASS = "is-loading"
   PAGE_TWO_CLASS = "is-page-two"
   ACTIVE_CLASS = "is-active"
+  currentIndex = -1
+
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field'
 
   constructor: (@el, @options) ->
-    self = @
     @dropdown = $(@el).parent()
+
+    # Set Defaults
+    {
+      # If no input is passed create a default one
+      @filterInput = @getElement(FILTER_INPUT)
+      @highlight = false
+      @filterInputBlur = true
+      @enterCallback = true
+    } = @options
+
+    self = @
+
+    # If selector was passed
+    if _.isString(@filterInput)
+      @filterInput = @getElement(@filterInput)
+
     search_fields = if @options.search then @options.search.fields else [];
 
     if @options.data
-      # Remote data
-      @remote = new GitLabDropdownRemote @options.data, {
-        dataType: @options.dataType,
-        beforeSend: @toggleLoading.bind(@)
-        success: (data) =>
-          @fullData = data
+      # If data is an array
+      if _.isArray @options.data
+        @fullData = @options.data
+        @parseData @options.data
+      else
+        # Remote data
+        @remote = new GitLabDropdownRemote @options.data, {
+          dataType: @options.dataType,
+          beforeSend: @toggleLoading.bind(@)
+          success: (data) =>
+            @fullData = data
 
-          @parseData @fullData
-      }
+            @parseData @fullData
+        }
 
-    # Init filiterable
+    # Init filterable
     if @options.filterable
-      @filter = new GitLabDropdownFilter @dropdown,
+      @filter = new GitLabDropdownFilter @filterInput,
+        filterInputBlur: @filterInputBlur
         remote: @options.filterRemote
         query: @options.data
         keys: @options.search.fields
         data: =>
           return @fullData
         callback: (data) =>
+          currentIndex = -1
           @parseData data
         enterCallback: =>
-          @selectFirstRow()
+          if @enterCallback
+            @selectRowAtIndex 0
 
     # Event listeners
+
     @dropdown.on "shown.bs.dropdown", @opened
     @dropdown.on "hidden.bs.dropdown", @hidden
+    @dropdown.on "click", ".dropdown-menu, .dropdown-menu-close", @shouldPropagate
 
     if @dropdown.find(".dropdown-toggle-page").length
       @dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on "click", (e) =>
@@ -124,10 +177,14 @@ class GitLabDropdown
         selector = ".dropdown-page-one .dropdown-content a"
 
       @dropdown.on "click", selector, (e) ->
-        self.rowClicked $(@)
+        selected = self.rowClicked $(@)
 
         if self.options.clicked
-          self.options.clicked()
+          self.options.clicked(selected)
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @dropdown.find selector
 
   toggleLoading: ->
     $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
@@ -157,21 +214,44 @@ class GitLabDropdown
 
     @appendMenu(full_html)
 
+  shouldPropagate: (e) =>
+    if @options.multiSelect
+      $target = $(e.target)
+      if not $target.hasClass('dropdown-menu-close') and not $target.hasClass('dropdown-menu-close-icon')
+        e.stopPropagation()
+        return false
+      else
+        return true
+
   opened: =>
+    @addArrowKeyEvent()
+
     contentHtml = $('.dropdown-content', @dropdown).html()
     if @remote && contentHtml is ""
       @remote.execute()
 
     if @options.filterable
-      @dropdown.find(".dropdown-input-field").focus()
+      @filterInput.focus()
 
-  hidden: =>
+    @dropdown.trigger('shown.gl.dropdown')
+
+  hidden: (e) =>
+    @removeArrayKeyEvent()
     if @options.filterable
-      @dropdown.find(".dropdown-input-field").blur().val("")
+      @dropdown
+        .find(".dropdown-input-field")
+        .blur()
+        .val("")
+        .trigger("keyup")
 
     if @dropdown.find(".dropdown-toggle-page").length
       $('.dropdown-menu', @dropdown).removeClass PAGE_TWO_CLASS
 
+    if @options.hidden
+      @options.hidden.call(@,e)
+
+    @dropdown.trigger('hidden.gl.dropdown')
+
 
   # Render the full menu
   renderMenu: (html) ->
@@ -196,75 +276,192 @@ class GitLabDropdown
   renderItem: (data) ->
     html = ""
 
+    # Divider
     return "<li class='divider'></li>" if data is "divider"
 
+    # Separator is a full-width divider
+    return "<li class='separator'></li>" if data is "separator"
+
+    # Header
+    return "<li class='dropdown-header'>#{data.header}</li>" if data.header?
+
     if @options.renderRow
       # Call the render function
       html = @options.renderRow(data)
     else
-      selected = if @options.isSelected then @options.isSelected(data) else false
-      url = if @options.url then @options.url(data) else "#"
-      text = if @options.text then @options.text(data) else ""
+      if not selected
+        value = if @options.id then @options.id(data) else data.id
+        fieldName = @options.fieldName
+        field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+        if field.length
+          selected = true
+
+      # Set URL
+      if @options.url?
+        url = @options.url(data)
+      else
+        url = if data.url? then data.url else '#'
+
+      # Set Text
+      if @options.text?
+        text = @options.text(data)
+      else
+        text = if data.text? then data.text else ''
+
       cssClass = "";
 
       if selected
         cssClass = "is-active"
 
-      html = "<li>"
-      html += "<a href='#{url}' class='#{cssClass}'>"
-      html += text
-      html += "</a>"
-      html += "</li>"
+      if @highlight
+        text = @highlightTextMatches(text, @filterInput.val())
+
+      html = "<li>
+        <a href='#{url}' class='#{cssClass}'>
+          #{text}
+        </a>
+      </li>"
 
     return html
 
+  highlightTextMatches: (text, term) ->
+    occurrences = fuzzaldrinPlus.match(text, term)
+    text.split('').map((character, i) ->
+      if i in occurrences then "<b>#{character}</b>" else character
+    ).join('')
+
   noResults: ->
-    html = "<li>"
-    html += "<a href='#' class='is-focused'>"
-    html += "No matching results."
-    html += "</a>"
-    html += "</li>"
+    html = "<li class='dropdown-menu-empty-link'>
+      <a href='#' class='is-focused'>
+        No matching results.
+      </a>
+    </li>"
+
+  highlightRow: (index) ->
+    if @filterInput.val() isnt ""
+      selector = '.dropdown-content li:first-child a'
+      if @dropdown.find(".dropdown-toggle-page").length
+        selector = ".dropdown-page-one .dropdown-content li:first-child a"
+
+      @getElement(selector).addClass 'is-focused'
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
-    field = @dropdown.parent().find("input[name='#{fieldName}']")
+    selectedIndex = el.parent().index()
+    if @renderedData
+      selectedObject = @renderedData[selectedIndex]
+    value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
+    field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
 
     if el.hasClass(ACTIVE_CLASS)
+      el.removeClass(ACTIVE_CLASS)
       field.remove()
-    else
-      fieldName = @options.fieldName
-      selectedIndex = el.parent().index()
-      if @renderedData
-        selectedObject = @renderedData[selectedIndex]
-      value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
 
-      if @options.multiSelect
-        oldValue = field.val()
-        if oldValue
-          value = "#{oldValue},#{value}"
-      else
-        @dropdown.find(ACTIVE_CLASS).removeClass ACTIVE_CLASS
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel
+    else
+      if !value?
         field.remove()
 
-      # Toggle active class for the tick mark
-      el.toggleClass "is-active"
+      if not @options.multiSelect
+        @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
+        @dropdown.parent().find("input[name='#{fieldName}']").remove()
 
-      if value
+      # Toggle active class for the tick mark
+      el.addClass ACTIVE_CLASS
+
+      # Toggle the dropdown label
+      if @options.toggleLabel
+        $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
+      if value?
         if !field.length
           # Create hidden input for form
-          input = "<input type='hidden' name='#{fieldName}' />"
+          input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
+          if @options.inputId?
+            input = $(input)
+                      .attr('id', @options.inputId)
           @dropdown.before input
+        else
+          field.val value
 
-        @dropdown.parent().find("input[name='#{fieldName}']").val value
+      return selectedObject
+
+  selectRowAtIndex: (index) ->
+    selector = ".dropdown-content li:not(.divider):eq(#{index}) a"
 
-  selectFirstRow: ->
-    selector = '.dropdown-content li:first-child a'
     if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one .dropdown-content li:first-child a"
+      selector = ".dropdown-page-one #{selector}"
 
-    # similute a click on the first link
+    # simulate a click on the first link
     $(selector).trigger "click"
 
+  addArrowKeyEvent: ->
+    ARROW_KEY_CODES = [38, 40]
+    $input = @dropdown.find(".dropdown-input-field")
+
+    selector = '.dropdown-content li:not(.divider)'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one #{selector}"
+
+    $('body').on 'keydown', (e) =>
+      currentKeyCode = e.which
+
+      if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        PREV_INDEX = currentIndex
+        $listItems = $(selector, @dropdown)
+
+        # if @options.filterable
+        #   $input.blur()
+
+        if currentKeyCode is 40
+          # Move down
+          currentIndex += 1 if currentIndex < ($listItems.length - 1)
+        else if currentKeyCode is 38
+          # Move up
+          currentIndex -= 1 if currentIndex > 0
+
+        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
+
+        return false
+
+      if currentKeyCode is 13
+        @selectRowAtIndex currentIndex
+
+  removeArrayKeyEvent: ->
+    $('body').off 'keydown'
+
+  highlightRowAtIndex: ($listItems, index) ->
+    # Remove the class for the previously focused row
+    $('.is-focused', @dropdown).removeClass 'is-focused'
+
+    # Update the class for the row at the specific index
+    $listItem = $listItems.eq(index)
+    $listItem.find('a:first-child').addClass "is-focused"
+
+    # Dropdown content scroll area
+    $dropdownContent = $listItem.closest('.dropdown-content')
+    dropdownScrollTop = $dropdownContent.scrollTop()
+    dropdownContentHeight = $dropdownContent.outerHeight()
+    dropdownContentTop = $dropdownContent.prop('offsetTop')
+    dropdownContentBottom = dropdownContentTop + dropdownContentHeight
+
+    # Get the offset bottom of the list item
+    listItemHeight = $listItem.outerHeight()
+    listItemTop = $listItem.prop('offsetTop')
+    listItemBottom = listItemTop + listItemHeight
+
+    if listItemBottom > dropdownContentBottom + dropdownScrollTop
+      # Scroll the dropdown content down
+      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom)
+    else if listItemTop < dropdownContentTop + dropdownScrollTop
+      # Scroll the dropdown content up
+      $dropdownContent.scrollTop(listItemTop - dropdownContentTop)
+
 $.fn.glDropdown = (opts) ->
   return @.each ->
-    new GitLabDropdown @, opts
+    if (!$.data @, 'glDropdown')
+      $.data(@, 'glDropdown', new GitLabDropdown @, opts)

app/assets/javascripts/issuable_context.js.coffee

@@ -1,8 +1,7 @@
-#= require jquery.waitforimages
-
 class @IssuableContext
-  constructor: ->
-    new UsersSelect()
+  constructor: (currentUser) ->
+    @initParticipants()
+    new UsersSelect(currentUser)
     $('select.select2').select2({width: 'resolve', dropdownAutoWidth: true})
 
     $(".issuable-sidebar .inline-update").on "change", "select", ->
@@ -10,10 +9,44 @@ class @IssuableContext
     $(".issuable-sidebar .inline-update").on "change", ".js-assignee", ->
       $(this).submit()
 
-    $(document).on "click",".edit-link", (e) ->
-      block = $(@).parents('.block')
-      block.find('.selectbox').show()
-      block.find('.value').hide()
-      block.find('.js-select2').select2("open")
+    $(document).off("click", ".edit-link").on "click",".edit-link", (e) ->
+      $block = $(@).parents('.block')
+      $selectbox = $block.find('.selectbox')
+      if $selectbox.is(':visible')
+        $selectbox.hide()
+        $block.find('.value').show()
+      else
+        $selectbox.show()
+        $block.find('.value').hide()
+
+      if $selectbox.is(':visible')
+        setTimeout (->
+          $block.find('.dropdown-menu-toggle').trigger 'click'
+        ), 0
+      
 
     $(".right-sidebar").niceScroll()
+
+  initParticipants: ->
+    _this = @
+    $(document).on "click", ".js-participants-more", @toggleHiddenParticipants
+
+    $(".js-participants-author").each (i) ->
+      if i >= _this.PARTICIPANTS_ROW_COUNT
+        $(@)
+          .addClass "js-participants-hidden"
+          .hide()
+
+  toggleHiddenParticipants: (e) ->
+    e.preventDefault()
+
+    currentText = $(this).text().trim()
+    lessText = $(this).data("less-text")
+    originalText = $(this).data("original-text")
+
+    if currentText is originalText
+      $(this).text(lessText)
+    else
+      $(this).text(originalText)
+
+    $(".js-participants-hidden").toggle()

app/assets/javascripts/issuable_form.js.coffee

@@ -1,4 +1,7 @@
 class @IssuableForm
+  issueMoveConfirmMsg: 'Are you sure you want to move this issue to another project?'
+  wipRegex: /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i
+
   constructor: (@form) ->
     GitLab.GfmAutoComplete.setup()
     new UsersSelect()
@@ -6,14 +9,17 @@ class @IssuableForm
 
     @titleField       = @form.find("input[name*='[title]']")
     @descriptionField = @form.find("textarea[name*='[description]']")
+    @issueMoveField   = @form.find("#move_to_project_id")
 
     return unless @titleField.length && @descriptionField.length
 
     @initAutosave()
 
-    @form.on "submit", @resetAutosave
+    @form.on "submit", @handleSubmit
     @form.on "click", ".btn-cancel", @resetAutosave
 
+    @initWip()
+
   initAutosave: ->
     new Autosave @titleField, [
       document.location.pathname,
@@ -27,6 +33,50 @@ class @IssuableForm
       "description"
     ]
 
+  handleSubmit: =>
+    if (parseInt(@issueMoveField?.val()) ? 0) > 0
+      return false unless confirm(@issueMoveConfirmMsg)
+
+    @resetAutosave()
+
   resetAutosave: =>
     @titleField.data("autosave").reset()
     @descriptionField.data("autosave").reset()
+
+  initWip: ->
+    @$wipExplanation = @form.find(".js-wip-explanation")
+    @$noWipExplanation = @form.find(".js-no-wip-explanation")
+    return unless @$wipExplanation.length and @$noWipExplanation.length
+
+    @form.on "click", ".js-toggle-wip", @toggleWip
+
+    @titleField.on "keyup blur", @renderWipExplanation
+
+    @renderWipExplanation()
+
+  workInProgress: ->
+    @wipRegex.test @titleField.val()
+
+  renderWipExplanation: =>
+    if @workInProgress()
+      @$wipExplanation.show()
+      @$noWipExplanation.hide()
+    else
+      @$wipExplanation.hide()
+      @$noWipExplanation.show()
+
+  toggleWip: (event) =>
+    event.preventDefault()
+
+    if @workInProgress()
+      @removeWip()
+    else
+      @addWip()
+
+    @renderWipExplanation()
+
+  removeWip: ->
+    @titleField.val @titleField.val().replace(@wipRegex, "")
+
+  addWip: ->
+    @titleField.val "WIP: #{@titleField.val()}"

app/assets/javascripts/issue.js.coffee

@@ -6,25 +6,10 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
@@ -49,7 +34,7 @@ class @Issue
           issueStatus = if isClose then 'close' else 'open'
           new Flash(issueFailMessage, 'alert')
         success: (data, textStatus, jqXHR) ->
-          if data.saved
+          if 'id' of data
             $(document).trigger('issuable:change');
             if isClose
               $('a.btn-close').addClass('hidden')

app/assets/javascripts/issues.js.coffee

@@ -1,7 +1,6 @@
 @Issues =
   init: ->
     Issues.initSearch()
-    Issues.initSelects()
     Issues.initChecks()
 
     $("body").on "ajax:success", ".close_issue, .reopen_issue", ->
@@ -17,18 +16,9 @@
           $(this).html totalIssues - 1
 
   reload: ->
-    Issues.initSelects()
     Issues.initChecks()
     $('#filter_issue_search').val($('#issue_search').val())
 
-  initSelects: ->
-    $("select#update_state_event").select2(width: 'resolve', dropdownAutoWidth: true)
-    $("select#update_assignee_id").select2(width: 'resolve', dropdownAutoWidth: true)
-    $("select#update_milestone_id").select2(width: 'resolve', dropdownAutoWidth: true)
-    $("select#label_name").select2(width: 'resolve', dropdownAutoWidth: true)
-    $("#milestone_id, #assignee_id, #label_name").on "change", ->
-      $(this).closest("form").submit()
-
   initChecks: ->
     $(".check_all_issues").click ->
       $(".selected_issue").prop("checked", @checked)
@@ -41,24 +31,28 @@
     @timer = null
     $("#issue_search").keyup ->
       clearTimeout(@timer)
-      @timer = setTimeout(Issues.filterResults, 500)
+      @timer = setTimeout( ->
+        Issues.filterResults $("#issue_search_form")
+      , 500)
 
-  filterResults: =>
-    form = $("#issue_search_form")
-    search = $("#issue_search").val()
-    $('.issues-holder').css("opacity", '0.5')
-    issues_url = form.attr('action') + '?' + form.serialize()
+  filterResults: (form) =>
+    $('.issues-holder, .merge-requests-holder').css("opacity", '0.5')
+    formAction = form.attr('action')
+    formData = form.serialize()
+    issuesUrl = formAction
+    issuesUrl += ("#{if formAction.indexOf("?") < 0 then '?' else '&'}")
+    issuesUrl += formData
 
     $.ajax
       type: "GET"
-      url: form.attr('action')
-      data: form.serialize()
+      url: formAction
+      data: formData
       complete: ->
-        $('.issues-holder').css("opacity", '1.0')
+        $('.issues-holder, .merge-requests-holder').css("opacity", '1.0')
       success: (data) ->
-        $('.issues-holder').html(data.html)
+        $('.issues-holder, .merge-requests-holder').html(data.html)
         # Change url so if user reload a page - search results are saved
-        history.replaceState {page: issues_url}, document.title, issues_url
+        history.replaceState {page: issuesUrl}, document.title, issuesUrl
         Issues.reload()
       dataType: "json"
 

app/assets/javascripts/labels_select.js.coffee

@@ -1,30 +1,86 @@
 class @LabelsSelect
   constructor: ->
     $('.js-label-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      labelUrl = $(dropdown).data("labels")
-      selectedLabel = $(dropdown).data('selected')
-      if selectedLabel
-        selectedLabel = selectedLabel.split(",")
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      labelUrl = $dropdown.data('labels')
+      issueUpdateURL = $dropdown.data('issueUpdate')
+      selectedLabel = $dropdown.data('selected')
+      if selectedLabel?
+        selectedLabel = selectedLabel.split(',')
       newLabelField = $('#new_label_name')
       newColorField = $('#new_label_color')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      defaultLabel = $dropdown.data('default-label')
+      abilityName = $dropdown.data('ability-name')
+      $selectbox = $dropdown.closest('.selectbox')
+      $block = $selectbox.closest('.block')
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon span')
+      $value = $block.find('.value')
+      $loading = $block.find('.block-loading').fadeOut()
 
       if newLabelField.length
+        $newLabelCreateButton = $('.js-new-label-btn')
+        $colorPreview = $('.js-dropdown-label-color-preview')
+        $newLabelError = $dropdown.parent().find('.js-label-error')
+        $newLabelError.hide()
+
+        # Suggested colors in the dropdown to chose from pre-chosen colors
+        $('.suggest-colors-dropdown a').on 'click', (e) ->
+
+      issueURLSplit = issueUpdateURL.split('/') if issueUpdateURL?
+      if issueUpdateURL
+        labelHTMLTemplate = _.template(
+            '<% _.each(labels, function(label){ %>
+            <a href="<%= ["",issueURLSplit[1], issueURLSplit[2],""].join("/") %>issues?label_name=<%= label.title %>">
+            <span class="label color-label" style="background-color: <%= label.color %>;">
+            <%= label.title %>
+            </span>
+            </a>
+            <% }); %>'
+        );
+        labelNoneHTMLTemplate = _.template('<div class="light">None</div>')
+
+      if newLabelField.length and $dropdown.hasClass 'js-extra-options'
         $('.suggest-colors-dropdown a').on "click", (e) ->
           e.preventDefault()
           e.stopPropagation()
-          newColorField.val $(this).data("color")
-          $('.js-dropdown-label-color-preview')
-            .css 'background-color', $(this).data("color")
+          newColorField
+            .val($(this).data('color'))
+            .trigger('change')
+          $colorPreview
+            .css 'background-color', $(this).data('color')
+            .parent()
             .addClass 'is-active'
 
-        $('.js-new-label-btn').on "click", (e) ->
+        # Cancel button takes back to first page
+        resetForm = ->
+          newLabelField
+            .val ''
+            .trigger 'change'
+          newColorField
+            .val ''
+            .trigger 'change'
+          $colorPreview
+            .css 'background-color', ''
+            .parent()
+            .removeClass 'is-active'
+
+        $('.dropdown-menu-back').on 'click', ->
+          resetForm()
+
+        $('.js-cancel-label-btn').on 'click', (e) ->
           e.preventDefault()
           e.stopPropagation()
+          resetForm()
+          $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
 
-          if newLabelField.val() isnt "" && newColorField.val() isnt ""
+        # Listen for change and keyup events on label and color field
+        # This allows us to enable the button when ready
+        enableLabelCreateButton = ->
+          if newLabelField.val() isnt '' and newColorField.val() isnt ''
+            $newLabelError.hide()
             $('.js-new-label-btn').disable()
 
             # Create new label with API
@@ -33,49 +89,126 @@ class @LabelsSelect
               color: newColorField.val()
             }, (label) ->
               $('.js-new-label-btn').enable()
-              $('.dropdown-menu-back', $(dropdown).parent()).trigger "click"
 
-      $(dropdown).glDropdown(
+              if label.message?
+                $newLabelError
+                  .text label.message
+                  .show()
+              else
+                $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
+            $newLabelCreateButton.enable()
+          else
+            $newLabelCreateButton.disable()
+
+        newLabelField.on 'keyup change', enableLabelCreateButton
+
+        newColorField.on 'keyup change', enableLabelCreateButton
+
+        # Send the API call to create the label
+        $newLabelCreateButton
+          .disable()
+          .on 'click', (e) ->
+            e.preventDefault()
+            e.stopPropagation()
+
+            if newLabelField.val() isnt '' and newColorField.val() isnt ''
+              $newLabelError.hide()
+              $('.js-new-label-btn').disable()
+
+              # Create new label with API
+              Api.newLabel projectId, {
+                name: newLabelField.val()
+                color: newColorField.val()
+              }, (label) ->
+                $('.js-new-label-btn').enable()
+
+                if label.message?
+                  $newLabelError
+                    .text label.message
+                    .show()
+                else
+                  $('.dropdown-menu-back', $dropdown.parent()).trigger 'click'
+
+      saveLabelData = ->
+        selected = $dropdown
+          .closest('.selectbox')
+          .find("input[name='#{$dropdown.data('field-name')}']")
+          .map(->
+            @value
+          ).get()
+        data = {}
+        data[abilityName] = {}
+        data[abilityName].label_ids = selected
+        if not selected.length
+          data[abilityName].label_ids = ['']
+        $loading.fadeIn()
+        $dropdown.trigger('loading.gl.dropdown')
+        $.ajax(
+          type: 'PUT'
+          url: issueUpdateURL
+          dataType: 'JSON'
+          data: data
+        ).done (data) ->
+          $loading.fadeOut()
+          $dropdown.trigger('loaded.gl.dropdown')
+          $selectbox.hide()
+          data.issueURLSplit = issueURLSplit
+          labelCount = 0
+          if data.labels.length
+            template = labelHTMLTemplate(data)
+            labelCount = data.labels.length
+          else
+            template = labelNoneHTMLTemplate()
+          $value
+            .removeAttr('style')
+            .html(template)
+          $sidebarCollapsedValue.text(labelCount)
+
+          $value
+            .find('a')
+            .each((i) ->
+              setTimeout(=>
+                glAnimate($(@), 'pulse')
+              ,200 * i
+              )
+            )
+
+
+      $dropdown.glDropdown(
         data: (term, callback) ->
-          # We have to fetch the JS version of the labels list because there is no
-          # public facing JSON url for labels
           $.ajax(
             url: labelUrl
           ).done (data) ->
-            html = $(data)
-            data = []
-            html.find('.label-row a').each ->
-              data.push(
-                title: $(@).text().trim()
-              )
+            if $dropdown.hasClass 'js-extra-options'
+              if showNo
+                data.unshift(
+                  id: 0
+                  title: 'No Label'
+                )
 
-            if showNo
-              data.unshift(
-                id: "0"
-                title: 'No label'
-              )
-
-            if showAny
-              data.unshift(
-                title: 'Any label'
-              )
-
-            if data.length > 2
-              data.splice 2, 0, "divider"
+              if showAny
+                data.unshift(
+                  isAny: true
+                  title: 'Any Label'
+                )
 
+              if data.length > 2
+                data.splice 2, 0, 'divider'
             callback data
+
         renderRow: (label) ->
-          if $.isArray(selectedLabel)
-            selected = ""
-            $.each selectedLabel, (i, selectedLbl) ->
-              selectedLbl = selectedLbl.trim()
-              if selected is "" && label.title is selectedLbl
-                selected = "is-active"
-          else
-            selected = if label.title is selectedLabel then "is-active" else ""
+          selectedClass = ''
+          if $selectbox.find("input[type='hidden']\
+            [name='#{$dropdown.data('field-name')}']\
+            [value='#{label.id}']").length
+            selectedClass = 'is-active'
+
+          color = if label.color? then "<span class='dropdown-label-box' style='background-color: #{label.color}'></span>" else ""
 
           "<li>
-            <a href='#' class='#{selected}'>
+            <a href='#' class='#{selectedClass}'>
+              #{color}
               #{label.title}
             </a>
           </li>"
@@ -83,10 +216,43 @@ class @LabelsSelect
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+
+        toggleLabel: (selected) ->
+          if selected and selected.title isnt 'Any Label'
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         id: (label) ->
-          label.title
-        clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          if label.isAny?
+            ''
+          else if $dropdown.hasClass "js-filter-submit"
+            label.title
+          else
+            label.id
+
+        hidden: ->
+          $selectbox.hide()
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
+          if $dropdown.hasClass 'js-multiselect'
+            saveLabelData()
+
+        multiSelect: $dropdown.hasClass 'js-multiselect'
+        clicked: (label) ->
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            selectedLabel = label.title
+
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
+          else
+            if $dropdown.hasClass 'js-multiselect'
+              return
+            else
+              saveLabelData()
       )

app/assets/javascripts/lib/animate.js.coffee

@@ -0,0 +1,13 @@
+((w) -> 
+
+  w.glAnimate = ($el, animation, done) ->
+    $el
+      .removeClass()
+      .addClass(animation + ' animated')
+      .one 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', ->
+        $(this).removeClass()
+        return
+    return
+  return
+
+) window

app/assets/javascripts/lib/notify.js.coffee

@@ -0,0 +1,30 @@
+((w) ->
+  notificationGranted = (message, opts, onclick) ->
+    notification = new Notification(message, opts)
+
+    if onclick
+      notification.onclick = onclick
+
+  notifyPermissions = ->
+    if 'Notification' of window
+      Notification.requestPermission()
+
+  notifyMe = (message, body, icon, onclick) ->
+    opts =
+      body: body
+      icon: icon
+    # Let's check if the browser supports notifications
+    if !('Notification' of window)
+      # do nothing
+    else if Notification.permission == 'granted'
+      # If it's okay let's create a notification
+      notificationGranted message, opts, onclick
+    else if Notification.permission != 'denied'
+      Notification.requestPermission (permission) ->
+        # If the user accepts, let's create a notification
+        if permission == 'granted'
+          notificationGranted message, opts, onclick
+
+  w.notify = notifyMe
+  w.notifyPermissions = notifyPermissions
+) window

app/assets/javascripts/merge_request.js.coffee

@@ -15,8 +15,6 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
-    @fixAffixScroll();
-
     @initTabs()
 
     # Prevent duplicate event bindings
@@ -30,20 +28,6 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior

app/assets/javascripts/merge_request_tabs.js.coffee

@@ -3,6 +3,8 @@
 # Handles persisting and restoring the current tab selection and lazily-loading
 # content on the MergeRequests#show page.
 #
+#= require jquery.cookie
+#
 # ### Example Markup
 #
 #   <ul class="nav-links merge-request-tabs">
@@ -68,11 +70,15 @@ class @MergeRequestTabs
 
     if action == 'commits'
       @loadCommits($target.attr('href'))
+      @expandView()
     else if action == 'diffs'
       @loadDiff($target.attr('href'))
       @shrinkView()
     else if action == 'builds'
       @loadBuilds($target.attr('href'))
+      @expandView()
+    else
+      @expandView()
 
     @setCurrentAction(action)
 
@@ -189,11 +195,24 @@ class @MergeRequestTabs
     $('.container-fluid').removeClass('container-limited')
 
   shrinkView: ->
-    $gutterIcon = $('.js-sidebar-toggle i')
+    $gutterIcon = $('.js-sidebar-toggle i:visible')
+
+    # Wait until listeners are set
+    setTimeout( ->
+      # Only when sidebar is expanded
+      if $gutterIcon.is('.fa-angle-double-right')
+        $gutterIcon.closest('a').trigger('click', [true])
+    , 0)
+
+  # Expand the issuable sidebar unless the user explicitly collapsed it
+  expandView: ->
+    return if $.cookie('collapsed_gutter') == 'true'
+
+    $gutterIcon = $('.js-sidebar-toggle i:visible')
 
     # Wait until listeners are set
     setTimeout( ->
       # Only when sidebar is collapsed
-      if $gutterIcon.is('.fa-angle-double-right')
-        $gutterIcon.closest('a').trigger('click',[true])
+      if $gutterIcon.is('.fa-angle-double-left')
+        $gutterIcon.closest('a').trigger('click', [true])
     , 0)

app/assets/javascripts/merge_request_widget.js.coffee

@@ -2,13 +2,18 @@ class @MergeRequestWidget
   # Initialize MergeRequestWidget behavior
   #
   #   check_enable           - Boolean, whether to check automerge status
-  #   url_to_automerge_check - String, URL to use to check automerge status
-  #   current_status         - String, current automerge status
-  #   ci_enable              - Boolean, whether a CI service is enabled
-  #   url_to_ci_check        - String, URL to use to check CI status
+  #   merge_check_url - String, URL to use to check automerge status
+  #   ci_status_url        - String, URL to use to check CI status
   #
+
   constructor: (@opts) ->
-    modal = $('#modal_merge_info').modal(show: false)
+    $('#modal_merge_info').modal(show: false)
+    @firstCICheck = true
+    @readyForCICheck = true
+    clearInterval @fetchBuildStatusInterval
+
+    @pollCIStatus()
+    notifyPermissions()
 
   mergeInProgress: (deleteSourceBranch = false)->
     $.ajax
@@ -27,18 +32,57 @@ class @MergeRequestWidget
       dataType: 'json'
 
   getMergeStatus: ->
-    $.get @opts.url_to_automerge_check, (data) ->
+    $.get @opts.merge_check_url, (data) ->
       $('.mr-state-widget').replaceWith(data)
 
-  getCiStatus: ->
-    if @opts.ci_enable
-      $.get @opts.url_to_ci_check, (data) =>
-        this.showCiState data.status
-        if data.coverage
-          this.showCiCoverage data.coverage
-      , 'json'
+  ciLabelForStatus: (status) ->
+    if status == 'success'
+      'passed'
+    else
+      status
 
-  showCiState: (state) ->
+  pollCIStatus: ->
+    @fetchBuildStatusInterval = setInterval ( =>
+      return if not @readyForCICheck
+
+      @getCIStatus(true)
+
+      @readyForCICheck = false
+    ), 5000
+
+  getCIStatus: (showNotification) ->
+    _this = @
+    $('.ci-widget-fetching').show()
+
+    $.getJSON @opts.ci_status_url, (data) =>
+      @readyForCICheck = true
+
+      if @firstCICheck
+        @firstCICheck = false
+        @opts.ci_status = data.status
+
+      if data.status isnt @opts.ci_status
+        @showCIStatus data.status
+        if data.coverage
+          @showCICoverage data.coverage
+
+        if showNotification
+          message = @opts.ci_message.replace('{{status}}', @ciLabelForStatus(data.status))
+          message = message.replace('{{sha}}', data.sha)
+          message = message.replace('{{title}}', data.title)
+
+          notify(
+            "Build #{@ciLabelForStatus(data.status)}",
+            message,
+            @opts.gitlab_icon,
+            ->
+              @close()
+              Turbolinks.visit _this.opts.builds_path
+          )
+
+        @opts.ci_status = data.status
+
+  showCIStatus: (state) ->
     $('.ci_widget').hide()
     allowed_states = ["failed", "canceled", "running", "pending", "success", "skipped", "not_found"]
     if state in allowed_states
@@ -52,7 +96,7 @@ class @MergeRequestWidget
       $('.ci_widget.ci-error').show()
       @setMergeButtonClass('btn-danger')
 
-  showCiCoverage: (coverage) ->
+  showCICoverage: (coverage) ->
     text = 'Coverage ' + coverage + '%'
     $('.ci_widget:visible .ci-coverage').text(text)
 

app/assets/javascripts/milestone_select.js.coffee

@@ -1,60 +1,124 @@
 class @MilestoneSelect
-  constructor: ->
+  constructor: (currentProject) ->
+    if currentProject?
+      _this = @
+      @currentProject = JSON.parse(currentProject)
     $('.js-milestone-select').each (i, dropdown) ->
-      projectId = $(dropdown).data('project-id')
-      milestonesUrl = $(dropdown).data('milestones')
-      selectedMilestone = $(dropdown).data('selected')
-      showNo = $(dropdown).data('show-no')
-      showAny = $(dropdown).data('show-any')
-      useId = $(dropdown).data('use-id')
+      $dropdown = $(dropdown)
+      projectId = $dropdown.data('project-id')
+      milestonesUrl = $dropdown.data('milestones')
+      issueUpdateURL = $dropdown.data('issueUpdate')
+      selectedMilestone = $dropdown.data('selected')
+      showNo = $dropdown.data('show-no')
+      showAny = $dropdown.data('show-any')
+      showUpcoming = $dropdown.data('show-upcoming')
+      useId = $dropdown.data('use-id')
+      defaultLabel = $dropdown.data('default-label')
+      issuableId = $dropdown.data('issuable-id')
+      abilityName = $dropdown.data('ability-name')
+      $selectbox = $dropdown.closest('.selectbox')
+      $block = $selectbox.closest('.block')
+      $sidebarCollapsedValue = $block.find('.sidebar-collapsed-icon')
+      $value = $block.find('.value')
+      $loading = $block.find('.block-loading').fadeOut()
 
-      $(dropdown).glDropdown(
+      if issueUpdateURL
+        milestoneLinkTemplate = _.template(
+          '<a href="/<%= namespace %>/<%= path %>/milestones/<%= iid %>"><%= title %></a>'
+        )
+
+        milestoneLinkNoneTemplate = '<div class="light">None</div>'
+
+      $dropdown.glDropdown(
         data: (term, callback) ->
           $.ajax(
             url: milestonesUrl
           ).done (data) ->
-            html = $(data)
-            data = []
-            html.find('.milestone strong a').each ->
-              link = $(@).attr("href").split("/")
-              data.push(
-                id: link[link.length - 1]
-                title: $(@).text().trim()
-              )
-
-            if showNo
-              data.unshift(
-                id: "0"
-                title: 'No Milestone'
-              )
-
+            extraOptions = []
             if showAny
-              data.unshift(
+              extraOptions.push(
+                id: 0
+                name: ''
                 title: 'Any Milestone'
               )
 
-            if data.length > 2
-              data.splice 2, 0, "divider"
+            if showNo
+              extraOptions.push(
+                id: -1
+                name: 'No Milestone'
+                title: 'No Milestone'
+              )
 
-            callback(data)
+            if showUpcoming
+              extraOptions.push(
+                id: -2
+                name: '#upcoming'
+                title: 'Upcoming'
+              )
+
+            if extraOptions.length > 2
+              extraOptions.push 'divider'
+
+            callback(extraOptions.concat(data))
         filterable: true
         search:
           fields: ['title']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.title
+          else
+            defaultLabel
+        fieldName: $dropdown.data('field-name')
         text: (milestone) ->
           milestone.title
         id: (milestone) ->
           if !useId
-            if milestone.title isnt "Any milestone"
-              milestone.title
-            else
-              ""
+            milestone.name
           else
             milestone.id
         isSelected: (milestone) ->
-          milestone.title is selectedMilestone
-        clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+          milestone.name is selectedMilestone
+        hidden: ->
+          $selectbox.hide()
+
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
+        clicked: (selected) ->
+          if $dropdown.hasClass 'js-filter-bulk-update'
+            return
+
+          if $dropdown.hasClass('js-filter-submit')
+            if selected.name?
+              selectedMilestone = selected.name
+            else
+              selectedMilestone = ''
+            Issues.filterResults $dropdown.closest('form')
+          else
+            selected = $selectbox
+              .find('input[type="hidden"]')
+              .val()
+            data = {}
+            data[abilityName] = {}
+            data[abilityName].milestone_id = selected
+            $loading
+              .fadeIn()
+            $dropdown.trigger('loading.gl.dropdown')
+            $.ajax(
+              type: 'PUT'
+              url: issueUpdateURL
+              data: data
+            ).done (data) ->
+              $dropdown.trigger('loaded.gl.dropdown')
+              $loading.fadeOut()
+              $selectbox.hide()
+              $value.removeAttr('style')
+              if data.milestone?
+                data.milestone.namespace = _this.currentProject.namespace
+                data.milestone.path = _this.currentProject.path
+                $value.html(milestoneLinkTemplate(data.milestone))
+                $sidebarCollapsedValue.find('span').text(data.milestone.title)
+              else
+                $value.html(milestoneLinkNoneTemplate)
+                $sidebarCollapsedValue.find('span').text('No')
       )

app/assets/javascripts/notes.js.coffee

@@ -251,13 +251,11 @@ class @Notes
   Sets some hidden fields in the form.
   ###
   setupMainTargetNoteForm: ->
-
     # find the form
     form = $(".js-new-note-form")
 
-    # insert the form after the button
-    form.clone().replaceAll $(".js-main-target-form")
-    form = form.prev("form")
+    # Set a global clone of the form for later cloning
+    @formClone = form.clone()
 
     # show the form
     @setupNoteForm(form)
@@ -266,9 +264,7 @@ class @Notes
     form.removeClass "js-new-note-form"
     form.addClass "js-main-target-form"
 
-    # remove unnecessary fields and buttons
     form.find("#note_line_code").remove()
-    form.find(".js-close-discussion-note-form").remove()
 
   ###
   General note form setup.
@@ -297,7 +293,14 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    textarea.on 'focus', ->
+      $(this).closest('.md-area').addClass 'is-focused'
+
+    textarea.on 'blur', ->
+      $(this).closest('.md-area').removeClass 'is-focused'
+
     autosize(textarea)
+
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -307,7 +310,6 @@ class @Notes
     ]
 
     # remove notify commit author checkbox for non-commit notes
-    form.find(".js-notify-commit-author").remove()  if form.find("#note_noteable_type").val() isnt "Commit"
     GitLab.GfmAutoComplete.setup()
     new DropzoneInput(form)
     form.show()
@@ -343,6 +345,7 @@ class @Notes
   updateNote: (_xhr, note, _status) =>
     # Convert returned HTML to a jQuery object so we can modify it further
     $html = $(note.html)
+    $('.js-timeago', $html).timeago()
     $html.syntaxHighlight()
     $html.find('.js-task-list-container').taskList('enable')
 
@@ -360,14 +363,12 @@ class @Notes
   showEditForm: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-body > .note-text").hide()
-    note.find(".note-header").hide()
+    note.addClass "is-editting"
     form = note.find(".note-edit-form")
     isNewForm = form.is(':not(.gfm-form)')
     if isNewForm
       form.addClass('gfm-form')
     form.addClass('current-note-edit-form')
-    form.show()
 
     # Show the attachment delete link
     note.find(".js-note-attachment-delete").show()
@@ -401,11 +402,9 @@ class @Notes
   cancelEdit: (e) ->
     e.preventDefault()
     note = $(this).closest(".note")
-    note.find(".note-body > .note-text").show()
-    note.find(".note-header").show()
+    note.removeClass "is-editting"
     note.find(".current-note-edit-form")
       .removeClass("current-note-edit-form")
-      .hide()
 
   ###
   Called in response to deleting a note of any kind.
@@ -458,15 +457,15 @@ class @Notes
   Shows the note form below the notes.
   ###
   replyToDiscussionNote: (e) =>
-    form = $(".js-new-note-form")
+    form = @formClone.clone()
     replyLink = $(e.target).closest(".js-discussion-reply-button")
     replyLink.hide()
 
     # insert the form after the button
-    form.clone().insertAfter replyLink
+    replyLink.after form
 
     # show the form
-    @setupDiscussionNoteForm(replyLink, replyLink.next("form"))
+    @setupDiscussionNoteForm(replyLink, form)
 
   ###
   Shows the diff or discussion form and does some setup on it.
@@ -491,7 +490,9 @@ class @Notes
         .text(form.find('.js-close-discussion-note-form').data('cancel-text'))
     @setupNoteForm form
     form.find(".js-note-text").focus()
-    form.addClass "js-discussion-note-form"
+    form
+      .removeClass('js-main-target-form')
+      .addClass("discussion-form js-discussion-note-form")
 
   ###
   Called when clicking on the "add a comment" button on the side of a diff line.
@@ -501,9 +502,8 @@ class @Notes
   ###
   addDiffNote: (e) =>
     e.preventDefault()
-    link = e.currentTarget
-    form = $(".js-new-note-form")
-    row = $(link).closest("tr")
+    $link = $(e.currentTarget)
+    row = $link.closest("tr")
     nextRow = row.next()
     hasNotes = nextRow.is(".notes_holder")
     addForm = false
@@ -512,7 +512,7 @@ class @Notes
 
     # In parallel view, look inside the correct left/right pane
     if @isParallelView()
-      lineType = $(link).data("lineType")
+      lineType = $link.data("lineType")
       targetContent += "." + lineType
       rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\"></td><td class=\"notes_content parallel old\"></td><td class=\"notes_line\"></td><td class=\"notes_content parallel new\"></td></tr>"
 
@@ -534,11 +534,11 @@ class @Notes
       addForm = true
 
     if addForm
-      newForm = form.clone()
+      newForm = @formClone.clone()
       newForm.appendTo row.next().find(targetContent)
 
       # show the form
-      @setupDiscussionNoteForm $(link), newForm
+      @setupDiscussionNoteForm $link, newForm
 
   ###
   Called in response to "cancel" on a diff note form.
@@ -563,7 +563,6 @@ class @Notes
 
   cancelDiscussionForm: (e) =>
     e.preventDefault()
-    form = $(".js-new-note-form")
     form = $(e.target).closest(".js-discussion-note-form")
     @removeDiscussionNoteForm(form)
 
@@ -626,10 +625,10 @@ class @Notes
       if closebtn.text() isnt closetext
         closebtn.text(closetext)
 
-      if reopenbtn.is(':not(.btn-comment-and-reopen)')
+      if reopenbtn.is('.btn-comment-and-reopen')
         reopenbtn.removeClass('btn-comment-and-reopen')
 
-      if closebtn.is(':not(.btn-comment-and-close)')
+      if closebtn.is('.btn-comment-and-close')
         closebtn.removeClass('btn-comment-and-close')
 
       if discardbtn.is(':visible')

app/assets/javascripts/profile.js.coffee

@@ -1,5 +1,9 @@
 class @Profile
-  constructor: ->
+  constructor: (opts = {}) ->
+    {
+      @form = $('.edit-user')
+    } = opts
+
     # Automatically submit the Preferences form when any of its radio buttons change
     $('.js-preferences-form').on 'change.preference', 'input[type=radio]', ->
       $(this).parents('form').submit()
@@ -17,52 +21,46 @@ class @Profile
     $('.update-notifications').on 'ajax:complete', ->
       $(this).find('.btn-save').enable()
 
-    # Avatar management
+    @bindEvents()
 
-    $avatarInput = $('.js-user-avatar-input')
-    $filename = $('.js-avatar-filename')
-    $modalCrop = $('.modal-profile-crop')
-    $modalCropImg = $('.modal-profile-crop-image')
+    cropOpts =
+      filename: '.js-avatar-filename'
+      previewImage: '.avatar-image .avatar'
+      modalCrop: '.modal-profile-crop'
+      pickImageEl: '.js-choose-user-avatar-button'
+      uploadImageBtn: '.js-upload-user-avatar'
+      modalCropImg: '.modal-profile-crop-image'
 
-    $('.js-choose-user-avatar-button').on "click", ->
-      $form = $(this).closest("form")
-      $form.find(".js-user-avatar-input").click()
+    @avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data 'glcrop'
 
-    $modalCrop.on 'shown.bs.modal', ->
-      setTimeout ( -> # The cropper must be asynchronously initialized
-        $modalCropImg.cropper
-          aspectRatio: 1
-          modal: false
-          scalable: false
-          rotatable: false
-          zoomable: false
+  bindEvents: ->
+    @form.on 'submit', @onSubmitForm
 
-          crop: (event) ->
-            ['x', 'y'].forEach (key) ->
-              $("#user_avatar_crop_#{key}").val(Math.floor(event[key]))
-            $("#user_avatar_crop_size").val(Math.floor(event.width))
-      ), 0
+  onSubmitForm: (e) =>
+    e.preventDefault()
+    @saveForm()
 
-    $modalCrop.on 'hidden.bs.modal', ->
-      $modalCropImg.attr('src', '').cropper('destroy')
-      $avatarInput.val('')
-      $filename.text($filename.data('label'))
+  saveForm: ->
+    self = @
 
-    $('.js-upload-user-avatar').on 'click', ->
-      $('.edit-user').submit()
+    formData = new FormData(@form[0])
+    formData.append('user[avatar]', @avatarGlCrop.getBlob(), 'avatar.png')
 
-    $avatarInput.on "change", ->
-      form = $(this).closest("form")
-      filename = $(this).val().replace(/^.*[\\\/]/, '')
-      $filename.data('label', $filename.text()).text(filename)
-
-      reader = new FileReader
-
-      reader.onload = (event) ->
-        $modalCrop.modal('show')
-        $modalCropImg.attr('src', event.target.result)
-
-      fileData = reader.readAsDataURL(this.files[0])
+    $.ajax
+      url: @form.attr('action')
+      type: @form.attr('method')
+      data: formData
+      dataType: "json"
+      processData: false
+      contentType: false
+      success: (response) ->
+        new Flash(response.message, 'notice')
+      error: (jqXHR) ->
+        new Flash(jqXHR.responseJSON.message, 'alert')
+      complete: ->
+        window.scrollTo 0, 0
+        # Enable submit button after requests ends
+        self.form.find(':input[disabled]').enable()
 
 $ ->
   # Extract the SSH Key title from its comment

app/assets/javascripts/project.js.coffee

@@ -11,7 +11,6 @@ class @Project
       $(@).toggleClass('active')
 
       url = $("#project_clone").val()
-      console.log("url",url)
 
       # Update the input field
       $('#project_clone').val(url)

app/assets/javascripts/project_new.js.coffee

@@ -3,3 +3,16 @@ class @ProjectNew
     $('.project-edit-container').on 'ajax:before', =>
       $('.project-edit-container').hide()
       $('.save-project-loader').show()
+    @toggleSettings()
+    @toggleSettingsOnclick()
+
+
+  toggleSettings: ->
+    checked = $("#project_builds_enabled").prop("checked")
+    if checked
+      $('.builds-feature').show()
+    else
+      $('.builds-feature').hide()
+
+  toggleSettingsOnclick: ->
+    $("#project_builds_enabled").on 'click', @toggleSettings

app/assets/javascripts/right_sidebar.js.coffee

@@ -0,0 +1,55 @@
+class @Sidebar
+  constructor: (currentUser) ->
+    @addEventListeners()
+
+  addEventListeners: ->
+    $('aside').on('click', '.sidebar-collapsed-icon', @sidebarCollapseClicked)
+    $('.dropdown').on('hidden.gl.dropdown', @sidebarDropdownHidden)
+    $('.dropdown').on('loading.gl.dropdown', @sidebarDropdownLoading)
+    $('.dropdown').on('loaded.gl.dropdown', @sidebarDropdownLoaded)
+
+  sidebarDropdownLoading: (e) ->
+    $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
+    img = $sidebarCollapsedIcon.find('img')
+    i = $sidebarCollapsedIcon.find('i')
+    $loading = $('<i class="fa fa-spinner fa-spin"></i>')
+    if img.length
+      img.before($loading)
+      img.hide()
+    else if i.length
+      i.before($loading)
+      i.hide()
+
+  sidebarDropdownLoaded: (e) ->
+    $sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
+    img = $sidebarCollapsedIcon.find('img')
+    $sidebarCollapsedIcon.find('i.fa-spin').remove()
+    i = $sidebarCollapsedIcon.find('i')
+    if img.length
+      img.show()
+    else
+      i.show()
+
+
+  sidebarCollapseClicked: (e) ->
+    e.preventDefault()
+    $block = $(@).closest('.block')
+
+    $('aside')
+      .find('.gutter-toggle')
+      .trigger('click')
+    $editLink = $block.find('.edit-link')
+
+    if $editLink.length
+      $editLink.trigger('click')
+      $block.addClass('collapse-after-update')
+      $('.page-with-sidebar').addClass('with-overlay')
+
+  sidebarDropdownHidden: (e) ->
+    $block = $(@).closest('.block')
+    if $block.hasClass('collapse-after-update')
+      $block.removeClass('collapse-after-update')
+      $('.page-with-sidebar').removeClass('with-overlay')
+      $('aside')
+        .find('.gutter-toggle')
+        .trigger('click')

app/assets/javascripts/search_autocomplete.js.coffee

@@ -1,11 +1,270 @@
 class @SearchAutocomplete
-  constructor: (search_autocomplete_path, project_id, project_ref) ->
-    project_id = '' unless project_id
-    project_ref = '' unless project_ref
-    query = "?project_id=" + project_id + "&project_ref=" + project_ref
 
-    $("#search").autocomplete
-      source: search_autocomplete_path + query
-      minLength: 1
-      select: (event, ui) ->
-        location.href = ui.item.url
+  KEYCODE =
+    ESCAPE: 27
+    BACKSPACE: 8
+    ENTER: 13
+
+  constructor: (opts = {}) ->
+    {
+      @wrap = $('.search')
+
+      @optsEl = @wrap.find('.search-autocomplete-opts')
+      @autocompletePath = @optsEl.data('autocomplete-path')
+      @projectId = @optsEl.data('autocomplete-project-id') || ''
+      @projectRef = @optsEl.data('autocomplete-project-ref') || ''
+
+    } = opts
+
+    # Dropdown Element
+    @dropdown = @wrap.find('.dropdown')
+    @dropdownContent = @dropdown.find('.dropdown-content')
+
+    @locationBadgeEl = @getElement('.search-location-badge')
+    @locationText = @getElement('.location-text')
+    @scopeInputEl = @getElement('#scope')
+    @searchInput = @getElement('.search-input')
+    @projectInputEl = @getElement('#search_project_id')
+    @groupInputEl = @getElement('#group_id')
+    @searchCodeInputEl = @getElement('#search_code')
+    @repositoryInputEl = @getElement('#repository_ref')
+    @clearInput = @getElement('.js-clear-input')
+
+    @saveOriginalState()
+
+    # Only when user is logged in
+    @createAutocomplete() if gon.current_user_id
+
+    @searchInput.addClass('disabled')
+
+    @saveTextLength()
+
+    @bindEvents()
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @wrap.find(selector)
+
+  saveOriginalState: ->
+    @originalState = @serializeState()
+
+  saveTextLength: ->
+    @lastTextLength = @searchInput.val().length
+
+  createAutocomplete: ->
+    @searchInput.glDropdown
+        filterInputBlur: false
+        filterable: true
+        filterRemote: true
+        highlight: true
+        enterCallback: false
+        filterInput: 'input#search'
+        search:
+          fields: ['text']
+        data: @getData.bind(@)
+
+  getData: (term, callback) ->
+    _this = @
+
+    # Do not trigger request if input is empty
+    return if @searchInput.val() is ''
+
+    # Prevent multiple ajax calls
+    return if @loadingSuggestions
+
+    @loadingSuggestions = true
+
+    jqXHR = $.get(@autocompletePath, {
+        project_id: @projectId
+        project_ref: @projectRef
+        term: term
+      }, (response) ->
+        # Hide dropdown menu if no suggestions returns
+        if !response.length
+          _this.disableAutocomplete()
+          return
+
+        data = []
+
+        # List results
+        firstCategory = true
+        for suggestion in response
+
+          # Add group header before list each group
+          if lastCategory isnt suggestion.category
+            data.push 'separator' if !firstCategory
+
+            firstCategory = false if firstCategory
+
+            data.push
+              header: suggestion.category
+
+            lastCategory = suggestion.category
+
+          data.push
+            text: suggestion.label
+            url: suggestion.url
+
+        # Add option to proceed with the search
+        if data.length
+          data.push('separator')
+          data.push
+            text: "Result name contains \"#{term}\""
+            url: "/search?\
+                  search=#{term}\
+                  &project_id=#{_this.projectInputEl.val()}\
+                  &group_id=#{_this.groupInputEl.val()}"
+
+        callback(data)
+    ).always ->
+      _this.loadingSuggestions = false
+
+  serializeState: ->
+    {
+      # Search Criteria
+      search_project_id: @projectInputEl.val()
+      group_id: @groupInputEl.val()
+      search_code: @searchCodeInputEl.val()
+      repository_ref: @repositoryInputEl.val()
+      scope: @scopeInputEl.val()
+
+      # Location badge
+      _location: @locationText.text()
+    }
+
+  bindEvents: ->
+    @searchInput.on 'keydown', @onSearchInputKeyDown
+    @searchInput.on 'keyup', @onSearchInputKeyUp
+    @searchInput.on 'click', @onSearchInputClick
+    @searchInput.on 'focus', @onSearchInputFocus
+    @searchInput.on 'blur', @onSearchInputBlur
+    @clearInput.on 'click', @onRemoveLocationClick
+
+  enableAutocomplete: ->
+    # No need to enable anything if user is not logged in
+    return if !gon.current_user_id
+
+    _this = @
+    @loadingSuggestions = false
+
+    @dropdown.addClass('open')
+    @searchInput.removeClass('disabled')
+
+  onSearchInputKeyDown: =>
+    # Saves last length of the entered text
+    @saveTextLength()
+
+  onSearchInputKeyUp: (e) =>
+    switch e.keyCode
+      when KEYCODE.BACKSPACE
+        # when trying to remove the location badge
+        if @lastTextLength is 0 and @badgePresent()
+            @removeLocationBadge()
+
+        # When removing the last character and no badge is present
+        if @lastTextLength is 1
+          @disableAutocomplete()
+
+        # When removing any character from existin value
+        if @lastTextLength > 1
+          @enableAutocomplete()
+
+      when KEYCODE.ESCAPE
+        @restoreOriginalState()
+
+      else
+        # Handle the case when deleting the input value other than backspace
+        # e.g. Pressing ctrl + backspace or ctrl + x
+        if @searchInput.val() is ''
+          @disableAutocomplete()
+        else
+          # We should display the menu only when input is not empty
+          @enableAutocomplete()
+
+    # Avoid falsy value to be returned
+    return
+
+  onSearchInputClick: (e) =>
+    # Prevents closing the dropdown menu
+    e.stopImmediatePropagation()
+
+  onSearchInputFocus: =>
+    @wrap.addClass('search-active')
+
+  onRemoveLocationClick: (e) =>
+    e.preventDefault()
+    @removeLocationBadge()
+    @searchInput.val('').focus()
+    @skipBlurEvent = true
+
+  onSearchInputBlur: (e) =>
+    @skipBlurEvent = false
+
+    # We should wait to make sure we are not clearing the input instead
+    setTimeout( =>
+      return if @skipBlurEvent
+
+      @wrap.removeClass('search-active')
+
+      # If input is blank then restore state
+      if @searchInput.val() is ''
+        @restoreOriginalState()
+    , 150)
+
+  addLocationBadge: (item) ->
+    category = if item.category? then "#{item.category}: " else ''
+    value = if item.value? then item.value else ''
+
+    html = "<span class='location-badge'>
+              <i class='location-text'>#{category}#{value}</i>
+            </span>"
+    @locationBadgeEl.html(html)
+    @wrap.addClass('has-location-badge')
+
+  restoreOriginalState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+      @getElement("##{input}").val(@originalState[input])
+
+
+    if @originalState._location is ''
+      @locationBadgeEl.empty()
+    else
+      @addLocationBadge(
+        value: @originalState._location
+      )
+
+    @dropdown.removeClass 'open'
+
+  badgePresent: ->
+    @locationBadgeEl.children().length
+
+  resetSearchState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+
+      # _location isnt a input
+      break if input is '_location'
+
+      @getElement("##{input}").val('')
+
+  removeLocationBadge: ->
+    @locationBadgeEl.empty()
+
+    # Reset state
+    @resetSearchState()
+
+    @wrap.removeClass('has-location-badge')
+
+  disableAutocomplete: ->
+    @searchInput.addClass('disabled')
+    @dropdown.removeClass('open')
+    @restoreMenu()
+
+  restoreMenu: ->
+    html = "<ul>
+              <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
+            </ul>"
+    @dropdownContent.html(html)

app/assets/javascripts/sidebar.js.coffee

@@ -1,12 +1,9 @@
-$(document).on("click", '.toggle-nav-collapse', (e) ->
-  e.preventDefault()
-  collapsed = 'page-sidebar-collapsed'
-  expanded = 'page-sidebar-expanded'
+collapsed = 'page-sidebar-collapsed'
+expanded = 'page-sidebar-expanded'
 
+toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
-  $('.sidebar-wrapper').toggleClass("sidebar-collapsed sidebar-expanded")
-  $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->
@@ -14,4 +11,15 @@ $(document).on("click", '.toggle-nav-collapse', (e) ->
     niceScrollBars.updateScrollBar();
   ), 300
 
+$(document).on("click", '.toggle-nav-collapse', (e) ->
+  e.preventDefault()
+
+  toggleSidebar()
 )
+
+$ ->
+  size = bp.getBreakpointSize()
+
+  if size is "xs" or size is "sm"
+    if $('.page-with-sidebar').hasClass(expanded)
+      toggleSidebar()

app/assets/javascripts/stat_graph_contributors_util.js.coffee

@@ -95,4 +95,4 @@ window.ContributorsStatGraphUtil =
     if date_range is null || date_range[0] <= new Date(date) <= date_range[1]
       true
     else
-      false
+      false

app/assets/javascripts/subscription.js.coffee

@@ -1,17 +1,21 @@
 class @Subscription
-  constructor: (url) ->
-    $(".subscribe-button").unbind("click").click (event)=>
-      btn = $(event.currentTarget)
-      action = btn.find("span").text()
-      current_status = $(".subscription-status").attr("data-status")
-      btn.prop("disabled", true)
-      
-      $.post url, =>
-        btn.prop("disabled", false)
-        status = if current_status == "subscribed" then "unsubscribed" else "subscribed"
-        $(".subscription-status").attr("data-status", status)
-        action = if status == "subscribed" then "Unsubscribe" else "Subscribe"
-        btn.find("span").text(action)
-        $(".subscription-status>div").toggleClass("hidden")
+  constructor: (container) ->
+    $container = $(container)
+    @url = $container.attr('data-url')
+    @subscribe_button = $container.find('.subscribe-button')
+    @subscription_status = $container.find('.subscription-status')
+    @subscribe_button.unbind('click').click(@toggleSubscription)
 
-    
+  toggleSubscription: (event) =>
+    btn = $(event.currentTarget)
+    action = btn.find('span').text()
+    current_status = @subscription_status.attr('data-status')
+    btn.prop('disabled', true)
+
+    $.post @url, =>
+      btn.prop('disabled', false)
+      status = if current_status == 'subscribed' then 'unsubscribed' else 'subscribed'
+      @subscription_status.attr('data-status', status)
+      action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
+      btn.find('span').text(action)
+      @subscription_status.find('>div').toggleClass('hidden')

app/assets/javascripts/todos.js.coffee

@@ -0,0 +1,61 @@
+class @Todos
+  constructor: (@name) ->
+    @clearListeners()
+    @initBtnListeners()
+
+  clearListeners: ->
+    $('.done-todo').off('click')
+    $('.js-todos-mark-all').off('click')
+    $('.todo').off('click')
+
+  initBtnListeners: ->
+    $('.done-todo').on('click', @doneClicked)
+    $('.js-todos-mark-all').on('click', @allDoneClicked)
+    $('.todo').on('click', @goToTodoUrl)
+
+  doneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        @clearDone $this.closest('li')
+        @updateBadges data
+
+  allDoneClicked: (e) =>
+    e.preventDefault()
+    e.stopImmediatePropagation()
+
+    $this = $(e.currentTarget)
+    $this.disable()
+
+    $.ajax
+      type: 'POST'
+      url: $this.attr('href')
+      dataType: 'json'
+      data: '_method': 'delete'
+      success: (data) =>
+        $this.remove()
+        $('.js-todos-list').remove()
+        @updateBadges data
+
+  clearDone: ($row) ->
+    $ul = $row.closest('ul')
+    $row.remove()
+
+    if not $ul.find('li').length
+      $ul.parents('.panel').remove()
+
+  updateBadges: (data) ->
+    $('.todos-pending .badge, .todos-pending-count').text data.count
+    $('.todos-done .badge').text data.done_count
+
+  goToTodoUrl: ->
+    Turbolinks.visit($(this).data('url'))

app/assets/javascripts/users_select.js.coffee

@@ -1,17 +1,96 @@
 class @UsersSelect
-  constructor: ->
+  constructor: (currentUser) ->
     @usersPath = "/autocomplete/users.json"
     @userPath = "/autocomplete/users/:id.json"
+    if currentUser?
+      @currentUser = JSON.parse(currentUser)
 
     $('.js-user-search').each (i, dropdown) =>
-      @projectId = $(dropdown).data('project-id')
-      @showCurrentUser = $(dropdown).data('current-user')
-      showNullUser = $(dropdown).data('null-user')
-      showAnyUser = $(dropdown).data('any-user')
-      firstUser = $(dropdown).data('first-user')
-      selectedId = $(dropdown).data('selected')
+      $dropdown = $(dropdown)
+      @projectId = $dropdown.data('project-id')
+      @showCurrentUser = $dropdown.data('current-user')
+      showNullUser = $dropdown.data('null-user')
+      showAnyUser = $dropdown.data('any-user')
+      firstUser = $dropdown.data('first-user')
+      selectedId = $dropdown.data('selected')
+      defaultLabel = $dropdown.data('default-label')
+      issueURL = $dropdown.data('issueUpdate')
+      $selectbox = $dropdown.closest('.selectbox')
+      $block = $selectbox.closest('.block')
+      abilityName = $dropdown.data('ability-name')
+      $value = $block.find('.value')
+      $collapsedSidebar = $block.find('.sidebar-collapsed-user')
+      $loading = $block.find('.block-loading').fadeOut()
 
-      $(dropdown).glDropdown(
+      $block.on('click', '.js-assign-yourself', (e) =>
+        e.preventDefault()
+        assignTo(@currentUser.id)
+      )
+
+      assignTo = (selected) ->
+        data = {}
+        data[abilityName] = {}
+        data[abilityName].assignee_id = selected
+        $loading
+          .fadeIn()
+        $dropdown.trigger('loading.gl.dropdown')
+        $.ajax(
+          type: 'PUT'
+          dataType: 'json'
+          url: issueURL
+          data: data
+        ).done (data) ->
+          $dropdown.trigger('loaded.gl.dropdown')
+          $loading.fadeOut()
+          $selectbox.hide()
+
+          if data.assignee
+            user =
+              name: data.assignee.name
+              username: data.assignee.username
+              avatar: data.assignee.avatar_url
+          else
+            user =
+              name: 'Unassigned'
+              username: ''
+              avatar: ''
+          $value.html(assigneeTemplate(user))
+          $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 %>">
+          <span class="author">Toni Boehm</span>
+        </a>
+        <% } else { %>
+        <i class="fa fa-user"></i>
+        <% } %>'
+      )
+
+      assigneeTemplate = _.template(
+        '<% if (username) { %>
+        <a class="author_link " 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="assign-yourself">
+          No assignee -
+          <a href="#" class="js-assign-yourself">
+            assign yourself
+          </a>
+        </span>
+          <% } %>'
+      )
+
+      $dropdown.glDropdown(
         data: (term, callback) =>
           @users term, (users) =>
             if term.length is 0
@@ -28,6 +107,7 @@ class @UsersSelect
               if showNullUser
                 showDivider += 1
                 users.unshift(
+                  beforeDivider: true
                   name: 'Unassigned',
                   id: 0
                 )
@@ -37,6 +117,7 @@ class @UsersSelect
                 name = showAnyUser
                 name = 'Any User' if name == true
                 anyUser = {
+                  beforeDivider: true
                   name: name,
                   id: null
                 }
@@ -52,30 +133,74 @@ class @UsersSelect
         search:
           fields: ['name', 'username']
         selectable: true
-        fieldName: $(dropdown).data('field-name')
-        clicked: ->
-          if $(dropdown).hasClass "js-filter-submit"
-            $(dropdown).parents('form').submit()
+        fieldName: $dropdown.data('field-name')
+
+        toggleLabel: (selected) ->
+          if selected && 'id' of selected
+            selected.name
+          else
+            defaultLabel
+
+        inputId: 'issue_assignee_id'
+
+        hidden: (e) ->
+          $selectbox.hide()
+          # display:block overrides the hide-collapse rule
+          $value.removeAttr('style')
+
+        clicked: (user) ->
+          page = $('body').data 'page'
+          isIssueIndex = page is 'projects:issues:index'
+          isMRIndex = page is page is 'projects:merge_requests:index'
+          if $dropdown.hasClass('js-filter-bulk-update')
+            return
+
+          if $dropdown.hasClass('js-filter-submit') and (isIssueIndex or isMRIndex)
+            selectedId = user.id
+            Issues.filterResults $dropdown.closest('form')
+          else if $dropdown.hasClass 'js-filter-submit'
+            $dropdown.closest('form').submit()
+          else
+            selected = $dropdown
+              .closest('.selectbox')
+              .find("input[name='#{$dropdown.data('field-name')}']").val()
+            assignTo(selected)
+
         renderRow: (user) ->
           username = if user.username then "@#{user.username}" else ""
           avatar = if user.avatar_url then user.avatar_url else false
           selected = if user.id is selectedId then "is-active" else ""
           img = ""
 
-          if avatar
-            img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"
+          if user.beforeDivider?
+            "<li>
+              <a href='#' class='#{selected}'>
+                #{user.name}
+              </a>
+            </li>"
+          else
+            if avatar
+              img = "<img src='#{avatar}' class='avatar avatar-inline' width='30' />"
 
-          "<li>
+          # split into three parts so we can remove the username section if nessesary
+          listWithName = "<li>
             <a href='#' class='dropdown-menu-user-link #{selected}'>
               #{img}
               <strong class='dropdown-menu-user-full-name'>
                 #{user.name}
-              </strong>
-              <span class='dropdown-menu-user-username'>
+              </strong>"
+
+          listWithUserName = "<span class='dropdown-menu-user-username'>
                 #{username}
-              </span>
-            </a>
+              </span>"
+          listClosingTags = "</a>
           </li>"
+
+
+          if username is ''
+            listWithUserName = ''
+
+          listWithName + listWithUserName + listClosingTags
       )
 
     $('.ajax-users-select').each (i, select) =>

app/assets/javascripts/zen_mode.js.coffee

@@ -42,7 +42,7 @@ class @ZenMode
       $(e.currentTarget).trigger('zen_mode:leave')
 
     $(document).on 'zen_mode:enter', (e) =>
-      @enter(e.target.parentNode)
+      @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
     $(document).on 'zen_mode:leave', (e) =>
       @exit()
 

app/assets/stylesheets/application.scss

@@ -10,6 +10,7 @@
  *= require dropzone/basic
  *= require cal-heatmap
  *= require cropper.css
+ *= require animate
 */
 
 /*

app/assets/stylesheets/behaviors.scss

@@ -13,10 +13,10 @@
 
 // Toggle between two states.
 .js-toggler-container {
-  .turn-on  { display: block; }
+  .turn-on { display: block; }
   .turn-off { display: none; }
   &.on {
-    .turn-on  { display: none; }
+    .turn-on { display: none; }
     .turn-off { display: block; }
   }
 }

app/assets/stylesheets/framework/avatar.scss

@@ -16,7 +16,7 @@
   }
 
   &.group-avatar, &.project-avatar, &.avatar-tile {
-    @include border-radius(0px);
+    @include border-radius(0);
   }
 
   &.s16 { width: 16px; height: 16px; margin-right: 6px; }

app/assets/stylesheets/framework/blocks.scss

@@ -23,15 +23,11 @@
   margin-bottom: -$gl-padding;
   background-color: $background-color;
   padding: $gl-padding;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   border-top: 1px solid $border-color;
   border-bottom: 1px solid $border-color;
   color: $gl-gray;
 
-  a {
-    color: $md-link-color;
-  }
-
   &.oneline-block {
     line-height: 42px;
   }
@@ -111,15 +107,37 @@
     margin: 0;
     font-size: 23px;
     font-weight: normal;
-    margin: 16px 0 5px 0;
+    margin: 16px 0 5px;
     color: #4c4e54;
     font-size: 23px;
     line-height: 1.1;
+
+    h1 {
+      color: #313236;
+      margin-bottom: 6px;
+      font-size: 23px;
+    }
+
+    .visibility-icon {
+      display: inline-block;
+      margin-left: 5px;
+      font-size: 18px;
+      color: $gray;
+    }
+
+    p {
+      padding: 0 $gl-padding;
+      color: #5c5d5e;
+    }
   }
 
   .cover-desc {
     padding: 0 $gl-padding 3px;
     color: $gl-text-color;
+
+    &.username:last-child {
+      padding-bottom: $gl-padding;
+    }
   }
 
   .cover-controls {

app/assets/stylesheets/framework/buttons.scss

@@ -37,23 +37,23 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF);
+  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF);
+  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
 }
 
 @mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #FFFFFF);
+  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF);
+  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF);
+  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
 }
 
 @mixin btn-gray {
@@ -127,7 +127,7 @@
     margin-right: 7px;
     float: left;
     &:last-child {
-      margin-right: 0px;
+      margin-right: 0;
     }
     &.btn-xs {
       margin-right: 3px;
@@ -139,7 +139,6 @@
 
   .caret {
     margin-left: 5px;
-    color: $gray-darkest;
   }
 }
 
@@ -170,7 +169,7 @@
     margin-right: 7px;
     float: left;
     &:last-child {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 }
@@ -209,3 +208,13 @@
     background-color: #e4e7ed !important;
   }
 }
+
+.btn-loading {
+  &:not(.disabled) .fa {
+    display: none;
+  }
+
+  .fa {
+    margin-right: 5px;
+  }
+}

app/assets/stylesheets/framework/calendar.scss

@@ -1,3 +1,9 @@
+.calender-block {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
+    overflow-x: scroll;
+  }
+}
+
 .user-calendar-activities {
   .calendar_onclick_hr {
     padding: 0;
@@ -33,19 +39,19 @@
   }
 
   .q2 {
-    fill: #ACD5F2 !important;
+    fill: #acd5f2 !important;
   }
 
   .q3 {
-    fill: #7FA8D1 !important;
+    fill: #7fa8d1 !important;
   }
 
   .q4 {
-    fill: #49729B !important;
+    fill: #49729b !important;
   }
 
   .q5 {
-    fill: #254E77 !important;
+    fill: #254e77 !important;
   }
 
   .domain-background {

app/assets/stylesheets/framework/callout.scss

@@ -39,6 +39,6 @@
 }
 .bs-callout-success {
   background-color: #dff0d8;
-  border-color: #5cA64d;
+  border-color: #5ca64d;
   color: #3c763d;
 }

app/assets/stylesheets/framework/common.scss

@@ -1,6 +1,6 @@
 /** COLORS **/
 .cgray { color: $gl-gray; }
-.clgray { color: #BBB }
+.clgray { color: #bbb }
 .cred { color: $gl-text-red; }
 .cgreen { color: $gl-text-green; }
 .cdark { color: #444 }
@@ -8,20 +8,20 @@
 /** 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-10 { margin-left:10px }
+.prepend-top-20 { margin-top: 20px }
+.prepend-left-10 { margin-left: 10px }
 .prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left:20px }
+.prepend-left-20 { margin-left: 20px }
 .append-right-5 { margin-right: 5px }
-.append-right-10 { margin-right:10px }
+.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 }
@@ -51,7 +51,7 @@ pre {
   }
 
   &.well-pre {
-    border: 1px solid #EEE;
+    border: 1px solid #eee;
     background: #f9f9f9;
     border-radius: 0;
     color: #555;
@@ -103,7 +103,7 @@ span.update-author {
 }
 
 .user-mention {
-  color: #2FA0BB;
+  color: #2fa0bb;
   font-weight: bold;
 }
 
@@ -121,23 +121,16 @@ p.time {
   text-shadow: none;
 }
 
-.thin_area{
+.thin_area {
   height: 150px;
 }
 
-// Fixes alignment on notes.
-.new_note {
-  label {
-    text-align: left;
-  }
-}
-
 // 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;
+      border-bottom: none !important;
     }
   }
 }
@@ -148,7 +141,7 @@ li.note {
   }
 }
 
-.wiki_content code, .readme code{
+.wiki_content code, .readme code {
   background-color: inherit;
 }
 
@@ -187,9 +180,9 @@ li.note {
 
 .error-message {
   padding: 10px;
-  background: #C67;
+  background: #c67;
   margin: 0;
-  color: #FFF;
+  color: #fff;
 
   a {
     color: #fff;
@@ -200,7 +193,7 @@ li.note {
 .browser-alert {
   padding: 10px;
   text-align: center;
-  background: #C67;
+  background: #c67;
   color: #fff;
   font-weight: bold;
   a {
@@ -271,7 +264,7 @@ img.emoji {
 
 table {
   td.permission-x {
-    background: #D9EDF7 !important;
+    background: #d9edf7 !important;
     text-align: center;
   }
 }
@@ -280,7 +273,7 @@ table {
   float: left;
   text-align: center;
   font-size: 32px;
-  color: #AAA;
+  color: #aaa;
   width: 60px;
 }
 
@@ -292,8 +285,11 @@ table {
 }
 
 .btn-sign-in {
-  margin-top: 10px;
   text-shadow: none;
+
+  @media (min-width: $screen-sm-min) {
+    margin-top: 11px;
+  }
 }
 
 .side-filters {
@@ -347,7 +343,7 @@ table {
 
   .profiler-button,
   .profiler-controls {
-    border-color: #EEE !important;
+    border-color: #eee !important;
   }
 }
 
@@ -375,7 +371,7 @@ table {
     position: absolute;
     top: 0;
     right: 0;
-    width: 250px !important;
+    min-width: 250px;
     visibility: hidden;
   }
 }

app/assets/stylesheets/framework/dropdowns.scss

@@ -4,11 +4,17 @@
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top: $caret-width-base dashed $dropdown-caret-color;
+  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;
 }
@@ -36,7 +42,7 @@
   font-size: 15px;
   text-align: left;
   border: 1px solid $dropdown-toggle-border-color;
-  border-radius: 2px;
+  border-radius: $dropdown-border-radius;
   outline: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -69,12 +75,12 @@
   width: 240px;
   margin-top: 2px;
   margin-bottom: 0;
-  padding: 10px 10px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: normal;
+  padding: 10px 0;
   background-color: $dropdown-bg;
   border: 1px solid $dropdown-border-color;
-  border-radius: $border-radius-base;
+  border-radius: $dropdown-border-radius;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
   &.is-loading {
@@ -95,9 +101,17 @@
   li {
     text-align: left;
     list-style: none;
+    padding: 0 10px;
   }
 
   .divider {
+    height: 1px;
+    margin: 8px 10px;
+    padding: 0;
+    background-color: $dropdown-divider-color;
+  }
+
+  .separator {
     width: 100%;
     height: 1px;
     margin-top: 8px;
@@ -124,6 +138,27 @@
       text-decoration: none;
       outline: 0;
     }
+
+    &.dropdown-menu-empty-link {
+      &.is-focused {
+        background-color: $dropdown-empty-row-bg;
+      }
+    }
+
+    &.dropdown-menu-user-link {
+      line-height: 16px;
+    }
+  }
+
+  .dropdown-header {
+    color: $dropdown-header-color;
+    font-size: 13px;
+    line-height: 22px;
+    padding: 0 10px 10px;
+  }
+
+  .separator + .dropdown-header {
+    padding-top: 2px;
   }
 }
 
@@ -142,6 +177,10 @@
     .dropdown-menu-back {
       display: block;
     }
+
+    .dropdown-content {
+      padding: 0 10px;
+    }
   }
 }
 
@@ -155,15 +194,14 @@
 }
 
 .dropdown-menu-user-link {
-  padding-top: 7px;
+  padding-top: 10px;
   padding-bottom: 7px;
 }
 
 .dropdown-menu-user-full-name {
   display: block;
-  margin-bottom: 2px;
-  font-weight: 600;
-  line-height: 1;
+  font-weight: 500;
+  line-height: 16px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -171,14 +209,14 @@
 
 .dropdown-menu-user-username {
   display: block;
-  line-height: 1;
+  line-height: 16px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 .dropdown-select {
-  width: 280px;
+  width: $dropdown-width;
 }
 
 .dropdown-menu-align-right {
@@ -207,20 +245,11 @@
   }
 }
 
-.dropdown-header {
-  padding-left: 5px;
-  padding-right: 5px;
-  color: $dropdown-header-color;
-  font-size: 13px;
-  line-height: 22px;
-}
 
 .dropdown-title {
   position: relative;
-  margin-bottom: 10px;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 10px;
+  padding: 0 0 15px;
+  margin: 0 10px 10px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
@@ -232,7 +261,7 @@
 
 .dropdown-title-button {
   position: absolute;
-  top: -1px;
+  top: 0;
   padding: 0;
   color: $dropdown-title-btn-color;
   font-size: 14px;
@@ -246,25 +275,49 @@
 }
 
 .dropdown-menu-close {
-  right: 0;
+  right: 7px;
+  width: 20px;
+  height: 20px;
+  top: -1px;
 }
 
 .dropdown-menu-back {
-  left: 0;
+  left: 7px;
+  top: 2px;
 }
 
 .dropdown-input {
   position: relative;
   margin-bottom: 10px;
+  padding: 0 10px;
 
   .fa {
     position: absolute;
     top: 10px;
-    right: 10px;
-    color: #C7C7C7;
+    right: 20px;
+    color: #c7c7c7;
     font-size: 12px;
     pointer-events: none;
   }
+
+  .dropdown-input-clear {
+    display: none;
+    cursor: pointer;
+    pointer-events: all;
+    right: 22px;
+    top: 9px;
+    font-size: 14px;
+  }
+
+  &.has-value {
+    .dropdown-input-clear {
+      display: block;
+    }
+
+    .dropdown-input-search {
+      display: none;
+    }
+  }
 }
 
 .dropdown-input-field {
@@ -281,13 +334,13 @@
     border-color: $dropdown-input-focus-border;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
-    + .fa {
+    ~ .fa {
       color: $dropdown-link-color;
     }
   }
 
   &:hover {
-    + .fa {
+    ~ .fa {
       color: $dropdown-link-color;
     }
   }
@@ -333,11 +386,12 @@
   }
 }
 
-.dropdown-menu-labels {
-  .label {
-    position: relative;
-    width: 30px;
-    margin-right: 5px;
-    text-indent: -99999px;
-  }
+.dropdown-label-box {
+  position: relative;
+  top: 3px;
+  margin-right: 5px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border-radius: $border-radius-base;
 }

app/assets/stylesheets/framework/files.scss

@@ -3,12 +3,10 @@
  *
  */
 .file-holder {
-  border: none;
   border: 1px solid $border-color;
 
   &.readme-holder {
-    margin-top: 10px;
-    border-bottom: 0;
+    margin: $gl-padding-top 0;
   }
 
   table {
@@ -30,7 +28,7 @@
       right: 15px;
 
       .btn {
-        padding: 0px 10px;
+        padding: 0 10px;
         font-size: 13px;
         line-height: 28px;
       }
@@ -50,6 +48,10 @@
       }
     }
 
+    a {
+      color: $gl-dark-link-color;
+    }
+
     .left-options {
       margin-top: -3px;
     }
@@ -84,7 +86,7 @@
 
     &.blob-no-preview {
       background: #eee;
-      text-shadow: 0 1px 2px #FFF;
+      text-shadow: 0 1px 2px #fff;
       padding: 100px 0;
     }
 
@@ -124,7 +126,7 @@
       }
       td.line-numbers {
         float: none;
-        border-left: 1px solid #DDD;
+        border-left: 1px solid #ddd;
       }
       td.lines {
         padding: 0;

app/assets/stylesheets/framework/filters.scss

@@ -3,22 +3,19 @@
   vertical-align: top;
 }
 
-@media (min-width: 800px)  {
+@media (min-width: $screen-sm-min) {
   .issues-filters,
   .issues_bulk_update {
-    select, .select2-container {
-      width: 120px !important;
-      display: inline-block;
+    .dropdown-menu-toggle {
+      width: 132px;
     }
   }
 }
 
-@media (min-width: 1200px) {
-  .issues-filters,
-  .issues_bulk_update {
-    select, .select2-container {
-      width: 150px !important;
-      display: inline-block;
-    }
+@media (max-width: $screen-xs-max) {
+  .filter-item {
+    display: block;
+    margin: 0 0 10px;
   }
 }
+

app/assets/stylesheets/framework/fonts.scss

@@ -1,3 +1,7 @@
+// Disabling "SpaceAfterPropertyColon" linter because the linter doesn't like
+// the way the `src` property is formatted in this file.
+// scss-lint:disable SpaceAfterPropertyColon
+
 /* latin-ext */
 @font-face {
   font-family: 'Source Sans Pro';

app/assets/stylesheets/framework/forms.scss

@@ -6,43 +6,9 @@ input {
   border-radius: $border-radius-base;
 }
 
-input[type='search'] {
-  background-color: white;
-  padding-left: 10px;
-}
-
-input[type='search'].search-input {
-  background-repeat: no-repeat;
-  background-position: 10px;
-  background-size: 16px;
-  background-position-x: 30%;
-  padding-left: 10px;
-  background-color: $gray-light;
-
-  &.search-input[value=""] {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAFu0lEQVRIia1WTahkVxH+quqce7vf6zdvJpHoIlkYJ2SiJiIokmQjgoGgIAaEIYuYXWICgojiwkmC4taFwhjcyIDusogEIwwiSSCKPwsdwzAg0SjJ9Izzk5n3+nXfe8+pqizOvd395scfsJqi6dPnnDr11Vc/NJ1OwUTosqJLCmYCHCAC2mSHs+ojZv6AO46Y+20AhIneJsafhPhXVZSXDk7qi+aOLhtQNuBmQtcarAKjTXpn2+l3u2yPunvZSABRucjcAV/eMZuM48/Go/g1d19kc4wq+e8MZjWkbI/P5t2P3RFFbv7SQdyBlBUx8N8OTuqjMcof+N94yMPrY2DMm/ytnb32J0QrY+6AqsHM4Q64O9SKDmerKDD3Oy/tNL9vk342CC8RuU6n0ymCMHb22scu7zQngtASOjUHE1BX4UUAv4b7Ow6qiXCXuz/UdvogAAweDY943/b4cAz0ZlYHXeMsnT07RVb7wMUr8ykI4H5HVkMd5Rcb4/jNURVOL5qErAaAUUdCCIJ5kx5q2nw8m39ImEAAsjpE6PStB0YfMcd1wqqG3Xn7A3PfZyyKnNjaqD4fmE/fCNKshirIyY1xvI+Av6g5QIAIIWX7cJPssboSiBBEeKmsZne0Sb8kzAUWNYyq8NvbDo0fZ6beqxuLmqOOMr/lwOh+YXpXtbjERGja9JyZ9+HxpXKb9Gj5oywRESbj+Cj1ENG1QViTGBl1FbC1We1tbVRfHWIoQkhqH9xbpE92XUbb6VJZ1R4crjRz1JWcDMJvLdoMcyAEhjuwHo8Bfndg3mbszhOY+adVlMtD3po51OwzIQiEaams7oeJhxRw1FFOVpFRRUYIhMBAFRnjOsC8IFHHUA4TQQhgAqpAiIFfGbxkIqj54ayGbL7UoOqHCniAEKHLNr26l+D9wQJzeUwMAnfHvEnLECzZRwRV++d60ptjW9VLZeolEJG6GwCCE0CFVNB+Ay0NEqoQYG4YYFu7B8IEVRt3uRzy/osIoLV9QZimWXGHUMFdmI6M64DUF2Je88R9VZqCSP+QlcF5k+4tCzSsXaqjINuK6UyE0+s/mk6/qFq8oAIL9pqMLhkGsNrOyoOIlszust3aJv0U9+kFdwjTGwWl1YdF+KWlQSZ0Se/psj8yGVdg5tJyfH96EBWmLtoEMwMzMFt031NzGWLLzKhC+KV7H5ZeeaMOPxemma2x68puc0LN3+/u6LJiePS6MKHvn4wu6cPzJj0hsioeMfDrEvjv5r6W9gBvjKJujuKzQ0URIZj75NylvT+mbHfXQa4rwAMaVRTMm/SFyzvNy0yF6+4AM+1ubcSnqkAIUjQKl1RKSbE5jt+vovx1MBqF0WW7/d1Z80ab9BtmuJ3Xk5cJKds9TZt/uLPXvtiTrQ+dIwqfAejUvM1os6FNikXKUHfQ+ekUsXT5u85enJ0CaBSkkGEo1syUQ+DfMdE/4GA1uzupf9zdbzhOmLsF4efHVXjaHHAzmDtGdQRd/Nc5wAEJjNki3XfhyvwVNz80xANrht3LsENY9cBBdN1L9GUyyvFRFZ42t75sBvCQRykbRlU4tT2pPxoCvzx09d4GmPs200M6wKdWSDGK8mppYSWdhAlt0qeaLv+IadXU9/Evq4FAZ8ej+LmtcTxaRX4NWI0Uag5Vg1p5MYg8BnlhXIdPHDow+vTWZvVMVttXDLqkTzZdPj6Qii6cP1cSvIdl3iQkNYyi9HH0I22y+93tY3DcQkTZgQtM+POoCr8x97eylkmtrgKuztrvXJ21x/aNKuqIkZ/fntRfCdcTfhUTAIhRzoDojJD0aSNLLwMzmpT7+JaLtyf1MwDo6qz9djFaUq3t9MlFmy/c1OCSceY9fMsVaL9mvH9ocXdkdWxv1scAePG0THAhMOaLdOw/Gvxfxb1w4eCapyIENUcV5M3/u8FitAxZ25P6GAHT3UX39Srw+QOb1ZffA98Dl2Wy1BYkAAAAAElFTkSuQmCC');
-  }
-
-  &.search-input::-webkit-input-placeholder {
-    text-align: center;
-  }
-
-  &.search-input:-moz-placeholder { /* Firefox 18- */
-    text-align: center;
-  }
-
-  &.search-input::-moz-placeholder {  /* Firefox 19+ */
-    text-align: center;
-  }
-
-  &.search-input:-ms-input-placeholder {
-    text-align: center;
-  }
-}
-
 input[type='text'].danger {
-  background: #F2DEDE!important;
-  border-color: #D66;
+  background: #f2dede!important;
+  border-color: #d66;
   text-shadow: 0 1px 1px #fff
 }
 
@@ -125,7 +91,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: #7f8fa4;
+  color: $gl-placeholder-color;
 }
 
 .input-group {

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -23,26 +23,31 @@
       &:hover {
         background-color: $color-darker;
         a {
-          color: #FFF;
+          color: #fff;
         }
       }
     }
 
     .collapse-nav a {
-      color: #FFF;
+      color: #fff;
       background: $color;
     }
 
+    .complex-sidebar .nav-primary {
+      border-right: 1px solid lighten($color, 3%);
+    }
+
     .sidebar-wrapper {
       background: $color-darker;
 
       .sidebar-user {
+        border-top: 1px solid lighten($color, 3%);
         background: $color-darker;
         color: $color-light;
 
         &:hover {
           background-color: $color-dark;
-          color: #FFF;
+          color: #fff;
           text-decoration: none;
         }
       }
@@ -62,7 +67,6 @@
 
         .count {
           color: $color-light;
-          background: $color-dark;
         }
       }
 
@@ -71,7 +75,7 @@
       }
 
       &.active a {
-        color: #FFF;
+        color: #fff;
         background: $color-dark;
 
         &.no-highlight {
@@ -79,42 +83,42 @@
         }
 
         i {
-          color: #FFF
+          color: #fff
         }
       }
     }
   }
 }
 
-$theme-blue: #2980B9;
+$theme-blue: #2980b9;
 $theme-charcoal: #333c47;
-$theme-graphite: #888888;
+$theme-graphite: #888;
 $theme-gray: #373737;
 $theme-green: #019875;
-$theme-violet: #554488;
+$theme-violet: #548;
 
 body {
   &.ui_blue {
-    @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099);
+    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
   }
 
   &.ui_charcoal {
-    @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D);
+    @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272d);
   }
 
   &.ui_graphite {
-    @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666);
+    @include gitlab-theme(#ccc, $theme-graphite, #777, #666);
   }
 
   &.ui_gray {
-    @include gitlab-theme(#979797, $theme-gray, #272727, #222222);
+    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
   }
 
   &.ui_green {
-    @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855);
+    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
   }
 
   &.ui_violet {
-    @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255);
+    @include gitlab-theme(#98c, $theme-violet, #436, #325);
   }
-}
+}

app/assets/stylesheets/framework/header.scss

@@ -7,8 +7,8 @@ header {
 
   &.navbar-empty {
     height: 58px;
-    background: #FFF;
-    border-bottom: 1px solid #EEE;
+    background: #fff;
+    border-bottom: 1px solid #eee;
 
     .center-logo {
       margin: 11px 0;
@@ -28,7 +28,7 @@ header {
     min-height: $header-height;
     background-color: #fff;
     border: none;
-    border-bottom: 1px solid #EEE;
+    border-bottom: 1px solid #eee;
 
     .container-fluid {
       width: 100% !important;
@@ -36,7 +36,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: #7f8fa4;
+        color: $gl-icon-color;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -47,7 +47,7 @@ header {
         text-align: center;
 
         &:hover, &:focus, &:active {
-          background-color: #FFF;
+          background-color: #fff;
         }
       }
 
@@ -59,10 +59,10 @@ header {
         right: 2px;
 
         &:hover {
-          background-color: #EEE;
+          background-color: #eee;
         }
         &.active {
-          color: #7f8fa4;
+          color: $gl-icon-color;
         }
       }
     }
@@ -70,20 +70,25 @@ header {
 
   .header-content {
     height: $header-height;
+    padding-right: 20px;
+
+    @media (min-width: $screen-sm-min) {
+      padding-right: 0;
+    }
 
     .title {
       margin: 0;
       font-size: 19px;
       line-height: $header-height;
       font-weight: normal;
-      color: #4c4e54;
+      color: $gl-text-color;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: top;
       white-space: nowrap;
 
       a {
-        color: #4c4e54;
+        color: $gl-text-color;
         &:hover {
           text-decoration: underline;
         }
@@ -112,51 +117,27 @@ header {
     }
   }
 
-  .search {
-    margin-right: 10px;
-    margin-left: 10px;
-    margin-top: ($header-height - 36) / 2;
-
-    form {
-      margin: 0;
-      padding: 0;
-    }
-
-    .search-input {
-      width: 220px;
-
-      &:focus {
-        @include box-shadow(none);
-        outline: none;
-      }
-    }
-  }
-
   .impersonation i {
     color: $red-normal;
   }
 }
 
 @mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 40px;
 }
 
-@media (max-width: $screen-md-max) {
-  .header-collapsed {
-    margin-left: $sidebar_collapsed_width;
-  }
+.header-collapsed {
+  margin-left: 40px;
 
- .header-expanded {
-    margin-left: $sidebar_width;
- }
-}
-
-@media(min-width: $screen-md-max) {
-  .header-collapsed {
+  @media (min-width: $screen-md-min) {
     @include collapsed-header;
   }
+}
 
-  .header-expanded {
+.header-expanded {
+  margin-left: $sidebar_collapsed_width;
+
+  @media (min-width: $screen-md-min) {
     margin-left: $sidebar_width;
   }
 }
@@ -166,7 +147,7 @@ header {
     font-size: 18px;
 
     .navbar-nav {
-      margin: 0px;
+      margin: 0;
       float: none !important;
 
       .visible-xs, .visable-sm {

app/assets/stylesheets/framework/highlight.scss

@@ -1,8 +1,8 @@
 .file-content.code {
   border: none;
   box-shadow: none;
-  margin: 0px;
-  padding: 0px;
+  margin: 0;
+  padding: 0;
   table-layout: fixed;
 
   pre {

app/assets/stylesheets/framework/issue_box.scss

@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: 10px;
-  color: #FFF;
+  color: #fff;
   font-size: $gl-font-size;
   line-height: 25px;
 

app/assets/stylesheets/framework/jquery.scss

@@ -3,13 +3,13 @@
   font-size: $font-size-base;
 
   &.ui-datepicker-inline {
-    border: 1px solid #DDD;
+    border: 1px solid #ddd;
     padding: 10px;
     width: 270px;
 
     .ui-datepicker-header {
-      background: #FFF;
-      border-color: #DDD;
+      background: #fff;
+      border-color: #ddd;
     }
 
     .ui-datepicker-calendar td a {
@@ -19,7 +19,7 @@
   }
 
   &.ui-autocomplete {
-    border-color: #DDD;
+    border-color: #ddd;
     padding: 0;
     margin-top: 2px;
     z-index: 1001;
@@ -30,20 +30,20 @@
   }
 
   .ui-state-default {
-    border: 1px solid #FFF;
-    background: #FFF;
+    border: 1px solid #fff;
+    background: #fff;
     color: #777;
   }
 
   .ui-state-highlight {
-    border: 1px solid #EEE;
-    background: #EEE;
+    border: 1px solid #eee;
+    background: #eee;
   }
 
   .ui-state-active {
     border: 1px solid $gl-primary;
     background: $gl-primary;
-    color: #FFF;
+    color: #fff;
   }
 
   .ui-state-hover,

app/assets/stylesheets/framework/layout.scss

@@ -16,7 +16,7 @@ body {
 }
 
 .container .content {
-  margin: 0 0;
+  margin: 0;
 }
 
 .navless-container {

app/assets/stylesheets/framework/lists.scss

@@ -111,14 +111,17 @@ ul.content-list {
 
   > li {
     border-color: $table-border-color;
-    color: $list-text-color;
     font-size: $list-font-size;
+    color: $list-text-color;
 
     .title {
-      color: $list-title-color;
       font-weight: 600;
     }
 
+    a {
+      color: $gl-dark-link-color;
+    }
+
     .description {
       p {
         @include str-truncated;
@@ -141,6 +144,10 @@ ul.content-list {
   }
 }
 
+.panel > .content-list > li {
+  padding: $gl-padding-top $gl-padding;
+}
+
 ul.controls {
   padding-top: 1px;
   float: right;

app/assets/stylesheets/framework/markdown_area.scss

@@ -1,9 +1,7 @@
 .div-dropzone-wrapper {
   .div-dropzone {
     position: relative;
-    padding: 0;
-    border: 0;
-    margin-bottom: 5px;
+    margin-bottom: -5px;
 
     .div-dropzone-focus {
       border-color: #66afe9 !important;
@@ -25,12 +23,10 @@
 
     .div-dropzone-spinner {
       position: absolute;
-      top: 100%;
-      left: 100%;
-      margin-top: -1.1em;
-      margin-left: -1.1em;
+      bottom: 10px;
+      right: 5px;
       opacity: 0;
-      font-size: 30px;
+      font-size: 20px;
       transition: opacity 200ms ease-in-out;
     }
 
@@ -65,22 +61,34 @@
   position: relative;
 }
 
+.md-header {
+  .nav-links {
+    .active {
+      a {
+        border-bottom-color: #000;
+      }
+    }
+
+    a {
+      padding-top: 0;
+      line-height: 1;
+    }
+  }
+}
+
 .referenced-users {
   color: #4c4e54;
   padding-top: 10px;
 }
 
 .md-preview-holder {
-  background: #FFF;
-  border: 1px solid #ddd;
-  min-height: 169px;
-  padding: 5px;
-  box-shadow: none;
+  min-height: 167px;
+  padding: 10px 0;
 }
 
 .markdown-area {
   @include border-radius(0);
-  background: #FFF;
+  background: #fff;
   border: 1px solid #ddd;
   min-height: 140px;
   max-height: 500px;

app/assets/stylesheets/framework/mixins.scss

@@ -1,7 +1,7 @@
 /**
  * Generic mixins
  */
- @mixin box-shadow($shadow) {
+@mixin box-shadow($shadow) {
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   -ms-box-shadow: $shadow;
@@ -41,12 +41,6 @@
   transition: $transition;
 }
 
-@mixin transform($transform) {
-  -webkit-transform: $transform;
-  -ms-transform: $transform;
-  transform: $transform;
-}
-
 /**
  * Prefilled mixins
  * Mixins with fixed values
@@ -73,17 +67,17 @@
  * Base mixin for lists in GitLab
  */
 @mixin basic-list {
-  margin: 5px 0px;
-  padding: 0px;
+  margin: 5px 0;
+  padding: 0;
   list-style: none;
 
   > li {
     @include clearfix;
 
     padding: 10px 0;
-    border-bottom: 1px solid #EEE;
+    border-bottom: 1px solid #eee;
     display: block;
-    margin: 0px;
+    margin: 0;
 
     &:last-child {
       border-bottom: none;

app/assets/stylesheets/framework/mobile.scss

@@ -107,7 +107,7 @@
   }
 
   .page-title {
-    .note_created_ago, .new-issue-link {
+    .note-created-ago, .new-issue-link {
       display: none;
     }
   }
@@ -116,7 +116,7 @@
     display: none;
   }
 
-  aside:not(.right-sidebar){
+  aside:not(.right-sidebar) {
     display: none;
   }
 
@@ -128,12 +128,12 @@
 .show-aside {
   display: none;
   position: fixed;
-  right: 0px;
+  right: 0;
   top: 30%;
   padding: 5px 15px;
-  background: #EEE;
+  background: #eee;
   font-size: 20px;
   color: #777;
   z-index: 100;
-  @include box-shadow(0 1px 2px #DDD);
+  @include box-shadow(0 1px 2px #ddd);
 }

app/assets/stylesheets/framework/nav.scss

@@ -26,7 +26,7 @@
     }
 
     &.active a {
-      color: #000000;
+      color: #000;
       border-bottom: 2px solid #4688f1;
     }
 
@@ -41,7 +41,7 @@
 .top-area {
   @include clearfix;
 
-  border-bottom: 1px solid #EEE;
+  border-bottom: 1px solid #eee;
 
   .nav-text {
     padding-top: 16px;
@@ -56,10 +56,21 @@
     }
   }
 
+  .nav-search {
+    display: inline-block;
+    width: 50%;
+    padding: 11px 0;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
+  }
+
   .nav-links {
     display: inline-block;
     width: 50%;
-    margin-bottom: 0px;
+    margin-bottom: 0;
     border-bottom: none;
 
     /* Small devices (phones, tablets, 768px and lower) */
@@ -74,7 +85,7 @@
     float: right;
     text-align: right;
     padding: 11px 0;
-    margin-bottom: 0px;
+    margin-bottom: 0;
 
     > .dropdown {
       margin-right: $gl-padding-top;
@@ -100,13 +111,18 @@
 
     > form {
       display: inline-block;
+      margin-top: -1px;
+    }
+
+    .icon-label {
+      display: none;
     }
 
     input {
       height: 34px;
       display: inline-block;
       position: relative;
-      top: 1px;
+      top: 2px;
       margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
@@ -124,9 +140,38 @@
       }
     }
 
-    /* Hide on extra small devices (phones) */
     @media (max-width: $screen-xs-max) {
-      display: none;
+      padding-bottom: 0;
+
+      .btn, form, .dropdown, .dropdown-menu-toggle, .form-control {
+        margin: 0 0 10px;
+        display: block;
+        width: 100%;
+      }
+
+      form {
+        display: block;
+        height: auto;
+
+        input {
+          width: 100%;
+          margin: 0 0 10px;
+        }
+      }
+
+      .input-short {
+        width: 100%;
+      }
+
+      .icon-label {
+        display: inline-block;
+      }
+
+      // Applies on /dashboard/issues
+      .project-item-select-holder {
+        display: block;
+        margin: 0;
+      }
     }
 
     /* Small devices (tablets, 768px and lower) */

app/assets/stylesheets/framework/selects.scss

@@ -41,16 +41,17 @@
 }
 
 .select2-drop {
-  @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
+  @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);
   border: none;
+  min-width: 175px;
 }
 
 .select2-results .select2-result-label {
   padding: 10px 15px;
 }
 
-.select2-drop{
+.select2-drop {
   color: #7f8fa4;
 }
 
@@ -151,7 +152,7 @@
   padding: 2px 25px 2px 5px;
   background: #fff image-url('select2.png');
   background-repeat: no-repeat;
-  background-position: right 0px bottom 6px;
+  background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
   @include border-radius($border-radius-default);
   @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
@@ -229,7 +230,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: #AAA;
+    color: #aaa;
     font-weight: normal;
   }
   .namespace-path {

app/assets/stylesheets/framework/sidebar.scss

@@ -1,3 +1,10 @@
+#logo {
+  z-index: 2;
+  position: absolute;
+  width: 58px;
+  cursor: pointer;
+}
+
 .page-with-sidebar {
   padding-top: $header-height;
   transition-duration: .3s;
@@ -16,30 +23,12 @@
   .gitlab-text-container-link {
     z-index: 1;
     position: absolute;
-    left: 0px;
-  }
-
-  #logo {
-    z-index: 2;
-    position: absolute;
-    width: 58px;
-    cursor: pointer;
-  }
-
-  &.right-sidebar-expanded {
-    /* Extra small devices (phones, less than 768px) */
-    /* No media query since this is the default in Bootstrap */
-    padding-right: 0;
-    /* Small devices (tablets, 768px and up) */
-    @media (min-width: $screen-sm-min) {
-      padding-right: $gutter_width;
-    }
-    
+    left: 0;
   }
 }
 
 .sidebar-wrapper {
-  z-index: 99;
+  z-index: 1000;
   background: $background-color;
 }
 
@@ -47,7 +36,7 @@
   width: 100%;
 
   .container-fluid {
-    background: #FFF;
+    background: #fff;
     padding: 0 $gl-padding;
 
     &.container-blank {
@@ -103,7 +92,7 @@
     }
 
     &:hover {
-      background-color: #EEE;
+      background-color: #eee;
     }
   }
 
@@ -143,7 +132,7 @@
   overflow: hidden;
 
   &.navbar-collapse {
-    padding: 0px !important;
+    padding: 0 !important;
   }
 
   li {
@@ -155,7 +144,7 @@
     }
 
     a {
-      padding: 7px 15px;
+      padding: 7px 12px;
       font-size: $gl-font-size;
       line-height: 24px;
       color: $gray;
@@ -180,10 +169,12 @@
       }
 
       .count {
-        float: right;
-        background: #eee;
-        padding: 0px 8px;
-        @include border-radius(6px);
+        &:before {
+          content: '(';
+        }
+        &:after {
+          content: ')';
+        }
       }
 
       &.back-link i {
@@ -194,98 +185,32 @@
 }
 
 .sidebar-subnav {
-  margin-left: 0px;
-  padding-left: 0px;
+  margin-left: 0;
+  padding-left: 0;
 
   li {
     list-style: none;
   }
 }
 
-@mixin expanded-sidebar {
-  padding-left: $sidebar_width;
+.expand-nav a {
+  color: $gl-icon-color;
+  width: 60px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 20px;
+  background: #fff;
+  height: 59px;
+  text-align: center;
+  line-height: 59px;
+  border-bottom: 1px solid #eee;
+  transition-duration: .3s;
+  outline: none;
+  z-index: 100;
 
-  &.right-sidebar-collapsed {
-    /* Extra small devices (phones, less than 768px) */
-    padding-right: 0;
-    /* Small devices (tablets, 768px and up) */
-    @media (min-width: $screen-sm-min) {
-      padding-right: $sidebar_collapsed_width;
-    }
-  }
-
-  .sidebar-wrapper {
-    width: $sidebar_width;
-
-    .nav-sidebar {
-      width: $sidebar_width;
-    }
-
-    .nav-sidebar li a{
-      width: 230px;
-
-      &.back-link {
-        i {
-          opacity: 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin collapsed-sidebar {
-  padding-left: $sidebar_collapsed_width;
-
-  &.right-sidebar-collapsed {
-    /* Extra small devices (phones, less than 768px) */
-    padding-right: 0;
-    /* Small devices (tablets, 768px and up) */
-    @media (min-width: $screen-sm-min) {
-      padding-right: $sidebar_collapsed_width;
-    }
-  }
-
-  .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    .header-logo {
-      width: $sidebar_collapsed_width;
-
-      a {
-        padding-left: ($sidebar_collapsed_width - 36) / 2;
-
-        .gitlab-text-container {
-          display: none;
-        }
-      }
-    }
-
-    .nav-sidebar {
-      width: $sidebar_collapsed_width;
-
-      li {
-        width: auto;
-
-        a {
-          span {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .collapse-nav a {
-      width: $sidebar_collapsed_width;
-    }
-
-    .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      .username {
-        display: none;
-      }
-    }
+  &:hover {
+    text-decoration: none;
   }
 }
 
@@ -301,23 +226,111 @@
   line-height: 40px;
   transition-duration: .3s;
   outline: none;
-}
 
-.collapse-nav a:hover {
-  text-decoration: none;
-  background: #f2f6f7;
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .page-sidebar-collapsed {
-  /* Extra small devices (phones, less than 768px) */
-  @include collapsed-sidebar;
-  padding-right: 0;
-  /* Small devices (tablets, 768px and up) */
-  @media (min-width: $screen-sm-min) {
-    @include collapsed-sidebar;
+  .sidebar-wrapper {
+    display: none;
   }
 }
 
 .page-sidebar-expanded {
-  @include expanded-sidebar;
+  @media (min-width: $screen-md-min) {
+    padding-left: $sidebar_width;
+  }
+
+  .sidebar-wrapper {
+    width: $sidebar_width;
+
+    .nav-sidebar {
+      width: $sidebar_width;
+    }
+
+    .nav-sidebar li a {
+      width: 230px;
+
+      &.back-link {
+        i {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+
+.right-sidebar-collapsed {
+  padding-right: 0;
+
+  @media (min-width: $screen-sm-min) {
+    padding-right: $sidebar_collapsed_width;
+  }
+
+  .sidebar-collapsed-icon {
+    cursor: pointer;
+  }
+}
+
+.right-sidebar-expanded {
+  padding-right: 0;
+
+  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+    padding-right: $sidebar_collapsed_width;
+  }
+
+  @media (min-width: $screen-md-min) {
+    padding-right: $gutter_width;
+  }
+
+  &.with-overlay {
+    padding-right: $sidebar_collapsed_width;
+  }
+}
+
+.complex-sidebar {
+  display: inline-block;
+
+  .nav-primary {
+    width: 61px;
+    float: left;
+    height: 100vh;
+
+    .nav-sidebar {
+      width: 60px;
+
+      li a {
+        width: 60px;
+
+        span {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .nav-secondary {
+    $nav-secondary-width: 168px;
+
+    float: left;
+    width: $nav-secondary-width;
+
+    .nav-sidebar {
+      width: $nav-secondary-width;
+
+      li {
+        width: $nav-secondary-width;
+
+        a {
+          width: $nav-secondary-width;
+
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -95,7 +95,7 @@
   }
 
   &.label-inverse {
-    background-color: #333333;
+    background-color: #333;
   }
 }
 
@@ -138,7 +138,7 @@
     }
 
     .btn-clipboard {
-      min-width: 0px;
+      min-width: 0;
     }
   }
 

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -56,8 +56,8 @@ $component-active-bg:       $brand-info;
 //##
 
 $input-color:                    $text-color;
-$input-border:                   #e7e9ed;
-$input-border-focus:             #7F8FA4;
+$input-border:                   $border-color;
+$input-border-focus:             $focus-border-color;
 $legend-color:                   $text-color;
 
 
@@ -125,8 +125,8 @@ $panel-inner-border:       $border-color;
 //
 //##
 
-$well-bg:                     #F9F9F9;
-$well-border:                 #EEE;
+$well-bg:                     #f9f9f9;
+$well-border:                 #eee;
 
 //== Code
 //

app/assets/stylesheets/framework/typography.scss

@@ -27,20 +27,20 @@
     line-height: 10px;
     color: #555;
     vertical-align: middle;
-    background-color: #FCFCFC;
+    background-color: #fcfcfc;
     border-width: 1px;
     border-style: solid;
-    border-color: #CCC #CCC #BBB;
+    border-color: #ccc #ccc #bbb;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0px -1px 0px #BBB inset;
+    box-shadow: 0 -1px 0 #bbb inset;
   }
 
   h1 {
     font-size: 1.3em;
     font-weight: 600;
-    margin: 24px 0 12px 0;
-    padding: 0 0 10px 0;
+    margin: 24px 0 12px;
+    padding: 0 0 10px;
     border-bottom: 1px solid #e7e9ed;
     color: #313236;
   }
@@ -48,27 +48,27 @@
   h2 {
     font-size: 1.2em;
     font-weight: 600;
-    margin: 24px 0 12px 0;
+    margin: 24px 0 12px;
     color: #313236;
   }
 
   h3 {
-    margin: 24px 0 12px 0;
+    margin: 24px 0 12px;
     font-size: 1.1em;
   }
 
   h4 {
-    margin: 24px 0 12px 0;
+    margin: 24px 0 12px;
     font-size: 0.98em;
   }
 
   h5 {
-    margin: 24px 0 12px 0;
+    margin: 24px 0 12px;
     font-size: 0.95em;
   }
 
   h6 {
-    margin: 24px 0 12px 0;
+    margin: 24px 0 12px;
     font-size: 0.90em;
   }
 
@@ -76,7 +76,7 @@
     color: #7f8fa4;
     font-size: inherit;
     padding: 8px 21px;
-    margin: 12px 0 12px;
+    margin: 12px 0;
     border-left: 3px solid #e7e9ed;
   }
 
@@ -88,13 +88,13 @@
 
   p {
     color: #5c5d5e;
-    margin: 6px 0 0 0;
+    margin: 6px 0 0;
   }
 
   table {
     @extend .table;
     @extend .table-bordered;
-    margin: 12px 0 12px 0;
+    margin: 12px 0;
     color: #5c5d5e;
     th {
       background: #f8fafc;
@@ -102,7 +102,7 @@
   }
 
   pre {
-    margin: 12px 0 12px 0;
+    margin: 12px 0;
     font-size: 13px;
     line-height: 1.6em;
     overflow-x: auto;
@@ -138,6 +138,12 @@
     }
   }
 
+  a.no-attachment-icon {
+    &:before {
+      display: none;
+    }
+  }
+
   /* Link to current header. */
   h1, h2, h3, h4, h5, h6 {
     position: relative;
@@ -187,11 +193,11 @@ body {
 }
 
 .page-title-empty {
-  margin-top: 0px;
+  margin-top: 0;
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: 600;
-  margin: 12px 7px 12px 7px;
+  margin: 12px 7px;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -244,7 +250,7 @@ a > code {
  * Textareas intended for GFM
  *
  */
-textarea.js-gfm-input {
+.js-gfm-input {
   font-family: $monospace_font;
   color: $gl-text-color;
 }

app/assets/stylesheets/framework/variables.scss

@@ -1,53 +1,85 @@
-$row-hover: #f4f8fe;
-$gl-text-color: #54565B;
-$gl-text-green: #4A2;
-$gl-text-red: #D12F19;
-$gl-text-orange: #D90;
-$gl-header-color: #323232;
-$gl-link-color: #333c48;
-$md-text-color: #444;
-$md-link-color: #3084bb;
-$progress-color: #c0392b;
-$gl-font-size: 15px;
-$list-font-size: 15px;
+/*
+ * Layout
+ */
 $sidebar_collapsed_width: 62px;
 $sidebar_width: 230px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
-$avatar_radius: 50%;
+
+/*
+ * UI elements
+ */
+$border-color:       #efeff1;
+$focus-border-color: #3aabf0;
+$table-border-color: #eef0f2;
+$background-color:   #faf9f9;
+
+/*
+ * Text
+ */
+$gl-font-size:         15px;
+$gl-title-color:       #333;
+$gl-text-color:        #555;
+$gl-text-green:        #4a2;
+$gl-text-red:          #d12f19;
+$gl-text-orange:       #d90;
+$gl-link-color:        #3084bb;
+$gl-dark-link-color:   #333;
+$gl-placeholder-color: #8f8f8f;
+$gl-icon-color:        $gl-placeholder-color;
+$gl-gray:              $gl-text-color;
+$gl-header-color:      $gl-title-color;
+
+/*
+ * Lists
+ */
+$list-font-size:   $gl-font-size;
+$list-title-color: $gl-title-color;
+$list-text-color:  $gl-text-color;
+
+/*
+ * Markdown
+ */
+$md-text-color: $gl-text-color;
+$md-link-color: $gl-link-color;
+
+/*
+ * Code
+ */
 $code_font_size: 13px;
 $code_line_height: 1.5;
-$border-color: #efeff1;
-$table-border-color: #eef0f2;
-$background-color: #faf9f9;
-$header-height: 58px;
-$fixed-layout-width: 1280px;
-$gl-gray: #5a5a5a;
+
+/*
+ * Padding
+ */
 $gl-padding: 16px;
 $gl-btn-padding: 10px;
 $gl-vert-padding: 6px;
-$gl-padding-top:10px;
+$gl-padding-top: 10px;
+
+/*
+ * Misc
+ */
+$row-hover: #f4f8fe;
+$progress-color: #c0392b;
+$avatar_radius: 50%;
+$header-height: 58px;
+$fixed-layout-width: 1280px;
 $gl-avatar-size: 40px;
-$secondary-text: #7f8fa4;
-$error-exclamation-point: #E62958;
-$border-radius-default: 3px;
-$list-title-color: #333333;
-$list-text-color: #555555;
-
-$btn-transparent-color: #8F8F8F;
-
-$ssh-key-icon-color: #8F8F8F;
+$error-exclamation-point: #e62958;
+$border-radius-default: 2px;
+$btn-transparent-color: #8f8f8f;
+$ssh-key-icon-color: #8f8f8f;
 $ssh-key-icon-size: 18px;
-
-$provider-btn-group-border: #E5E5E5;
-$provider-btn-not-active-color: #4688F1;
+$provider-btn-group-border: #e5e5e5;
+$provider-btn-not-active-color: #4688f1;
 
 /*
  * Color schema
  */
 
-$white-light: #FFFFFF;
+$white-light: #fff;
 $white-normal: #ededed;
 $white-dark: #ededed;
 
@@ -57,51 +89,55 @@ $gray-dark: #ededed;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
-$green-normal: #2FAA60;
-$green-dark: #2CA05B;
+$green-normal: #2faa60;
+$green-dark: #2ca05b;
 
-$blue-light: #2EA8E5;
-$blue-normal: #2D9FD8;
-$blue-dark: #2897CE;
+$blue-light: #2ea8e5;
+$blue-normal: #2d9fd8;
+$blue-dark: #2897ce;
 
-$blue-medium-light: #3498CB;
-$blue-medium: #2F8EBF;
-$blue-medium-dark: #2D86B4;
+$blue-medium-light: #3498cb;
+$blue-medium: #2f8ebf;
+$blue-medium-dark: #2d86b4;
 
 $orange-light: rgba(252, 109, 38, 0.80);
-$orange-normal: #E75E40;
-$orange-dark: #CE5237;
+$orange-normal: #e75e40;
+$orange-dark: #ce5237;
 
-$red-light: #F06559;
-$red-normal: #E52C5A;
-$red-dark: #D22852;
+$red-light: #f06559;
+$red-normal: #e52c5a;
+$red-dark: #d22852;
 
-$border-white-light: #F1F2F4;
-$border-white-normal: #D6DAE2;
-$border-white-dark: #C6CACF;
+$border-white-light: #f1f2f4;
+$border-white-normal: #d6dae2;
+$border-white-dark: #c6cacf;
 
 $border-gray-light: rgba(0, 0, 0, 0.06);
 $border-gray-normal: rgba(0, 0, 0, 0.10);;
-$border-gray-dark: #C6CACF;
+$border-gray-dark: #c6cacf;
 
-$border-green-light: #2FAA60;
-$border-green-normal: #2CA05B;
+$border-green-light: #2faa60;
+$border-green-normal: #2ca05b;
 $border-green-dark: #279654;
 
-$border-blue-light: #2D9FD8;
-$border-blue-normal: #2897CE;
-$border-blue-dark: #258DC1;
+$border-blue-light: #2d9fd8;
+$border-blue-normal: #2897ce;
+$border-blue-dark: #258dc1;
 
 $border-orange-light: #fc6d26;
-$border-orange-normal: #CE5237;
-$border-orange-dark: #C14E35;
+$border-orange-normal: #ce5237;
+$border-orange-dark: #c14e35;
 
-$border-red-light: #F24F41;
-$border-red-normal: #D22852;
-$border-red-dark: #CA264F;
+$border-red-light: #f24f41;
+$border-red-normal: #d22852;
+$border-red-dark: #ca264f;
 
-$help-well-bg: #FAFAFA;
-$help-well-border: #E5E5E5;
+$help-well-bg: #fafafa;
+$help-well-border: #e5e5e5;
+
+$warning-message-bg: #fbf2d9;
+$warning-message-color: #9e8e60;
+$warning-message-border: #f0e2bb;
 
 /* header */
 $light-grey-header: #faf9f9;
@@ -132,30 +168,58 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
 /*
 * Dropdowns
 */
+$dropdown-border-radius: 2px;
+$dropdown-width: 300px;
 $dropdown-bg: #fff;
 $dropdown-link-color: #555;
-$dropdown-link-hover-bg: rgba(#000, .04);
+$dropdown-link-hover-bg: $row-hover;
+$dropdown-empty-row-bg: rgba(#000, .04);
 $dropdown-border-color: rgba(#000, .1);
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
-$dropdown-caret-color: #54565B;
-$dropdown-title-btn-color: #BFBFBF;
-$dropdown-input-color: #C7C7C7;
-$dropdown-input-focus-border: rgb(58, 171, 240);
-$dropdown-input-focus-shadow: rgba(#000, .2);
+$dropdown-title-btn-color: #bfbfbf;
+$dropdown-input-color: #555;
+$dropdown-input-focus-border: $focus-border-color;
+$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
 
 $dropdown-toggle-bg: #fff;
 $dropdown-toggle-color: #626262;
-$dropdown-toggle-border-color: #EAEAEA;
+$dropdown-toggle-border-color: #eaeaea;
 $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
-$dropdown-toggle-icon-color: #C4C4C4;
+$dropdown-toggle-icon-color: #c4c4c4;
 $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
 
 /*
  *  Award emoji
  */
-$award-emoji-menu-bg: #FFF;
-$award-emoji-menu-border: #F1F2F4;
-$award-emoji-new-btn-icon-color: #DCDCDC;
+$award-emoji-menu-bg: #fff;
+$award-emoji-menu-border: #f1f2f4;
+$award-emoji-new-btn-icon-color: #dcdcdc;
+
+/*
+ * Search Box
+ */
+$search-input-border-color: $dropdown-input-focus-border;
+$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
+$search-input-width: $dropdown-width;
+$location-badge-color: #aaa;
+$location-badge-bg: $gray-normal;
+$location-icon-color: #e7e9ed;
+$location-active-color: $gl-text-color;
+$location-active-bg: $search-input-border-color;
+
+/*
+ *  Notes
+ */
+$notes-light-color: #8e8e8e;
+$notes-action-color: #c3c3c3;
+$notes-role-color: #8e8e8e;
+$notes-role-border-color: #e4e4e4;
+
+$note-disabled-comment-color: #b2b2b2;
+$note-form-border-color: #e5e5e5;
+$note-toolbar-color: #959494;
+
+$zen-control-hover-color: #111;

app/assets/stylesheets/framework/zen.scss

@@ -1,61 +1,62 @@
-.zennable {
-  a.js-zen-enter {
-    color: $gl-gray;
-    position: absolute;
-    top: 0px;
-    right: 4px;
-    line-height: 56px;
-  }
+.zen-backdrop {
+  &.fullscreen {
+    background-color: white;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1031;
 
-  a.js-zen-leave {
-    display: none;
-    color: $gl-text-color;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px;
-    font-size: 36px;
-
-    &:hover {
-      color: #111;
+    textarea {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      color: #000;
+      font-size: 20px;
+      line-height: 26px;
+      padding: 30px;
+      display: block;
+      outline: none;
+      resize: none;
+      height: 100vh;
+      max-width: 900px;
+      margin: 0 auto;
     }
-  }
 
-  .zen-backdrop {
-    &.fullscreen {
-      background-color: white;
-      position: fixed;
+    .zen-control-leave {
+      display: block;
+      position: absolute;
       top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1031;
-
-      textarea {
-        border: none;
-        box-shadow: none;
-        border-radius: 0;
-        color: #000;
-        font-size: 20px;
-        line-height: 26px;
-        padding: 30px;
-        display: block;
-        outline: none;
-        resize: none;
-        height: 100vh;
-        max-width: 900px;
-        margin: 0 auto;
-      }
-
-      a.js-zen-enter {
-        display: none;
-      }
-
-      a.js-zen-leave {
-        display: block;
-        position: absolute;
-        top: 0;
-      }
     }
   }
 }
+
+.zen-cotrol {
+  padding: 0;
+  color: #555;
+  background: none;
+  border: 0;
+}
+
+.zen-control-full {
+  color: $note-toolbar-color;
+
+  &:hover {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
+}
+
+.zen-control-leave {
+  display: none;
+  color: $gl-text-color;
+  position: absolute;
+  right: 10px;
+  padding: 5px;
+  font-size: 36px;
+
+  &:hover {
+    color: $zen-control-hover-color;
+  }
+}

app/assets/stylesheets/highlight/dark.scss

@@ -43,12 +43,12 @@
   // Search result highlight
   span.highlight_word {
     background-color: #ffe792 !important;
-    color: #000000 !important;
+    color: #000 !important;
   }
 
   .hll { background-color: #373b41 }
   .c { color: #969896 } /* Comment */
-  .err { color: #cc6666 } /* Error */
+  .err { color: #c66 } /* Error */
   .k { color: #b294bb } /* Keyword */
   .l { color: #de935f } /* Literal */
   .n { color: #c5c8c6 } /* Name */
@@ -58,7 +58,7 @@
   .cp { color: #969896 } /* Comment.Preproc */
   .c1 { color: #969896 } /* Comment.Single */
   .cs { color: #969896 } /* Comment.Special */
-  .gd { color: #cc6666 } /* Generic.Deleted */
+  .gd { color: #c66 } /* Generic.Deleted */
   .ge { font-style: italic } /* Generic.Emph */
   .gh { color: #c5c8c6; font-weight: bold } /* Generic.Heading */
   .gi { color: #b5bd68 } /* Generic.Inserted */
@@ -77,17 +77,17 @@
   .na { color: #81a2be } /* Name.Attribute */
   .nb { color: #c5c8c6 } /* Name.Builtin */
   .nc { color: #f0c674 } /* Name.Class */
-  .no { color: #cc6666 } /* Name.Constant */
+  .no { color: #c66 } /* Name.Constant */
   .nd { color: #8abeb7 } /* Name.Decorator */
   .ni { color: #c5c8c6 } /* Name.Entity */
-  .ne { color: #cc6666 } /* Name.Exception */
+  .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: #cc6666 } /* Name.Variable */
+  .nv { color: #c66 } /* Name.Variable */
   .ow { color: #8abeb7 } /* Operator.Word */
   .w { color: #c5c8c6 } /* Text.Whitespace */
   .mf { color: #de935f } /* Literal.Number.Float */
@@ -106,8 +106,8 @@
   .s1 { color: #b5bd68 } /* Literal.String.Single */
   .ss { color: #b5bd68 } /* Literal.String.Symbol */
   .bp { color: #c5c8c6 } /* Name.Builtin.Pseudo */
-  .vc { color: #cc6666 } /* Name.Variable.Class */
-  .vg { color: #cc6666 } /* Name.Variable.Global */
-  .vi { color: #cc6666 } /* Name.Variable.Instance */
+  .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 */
 }

app/assets/stylesheets/highlight/monokai.scss

@@ -43,7 +43,7 @@
   // Search result highlight
   span.highlight_word {
     background-color: #ffe792 !important;
-    color: #000000 !important;
+    color: #000 !important;
   }
 
   .hll { background-color: #49483e }

app/assets/stylesheets/highlight/solarized_dark.scss

@@ -96,7 +96,7 @@
   .m { color: #2aa198 } /* Literal.Number */
   .s { color: #2aa198 } /* Literal.String */
   .na { color: #93a1a1 } /* Name.Attribute */
-  .nb { color: #B58900 } /* Name.Builtin */
+  .nb { color: #b58900 } /* Name.Builtin */
   .nc { color: #268bd2 } /* Name.Class */
   .no { color: #cb4b16 } /* Name.Constant */
   .nd { color: #268bd2 } /* Name.Decorator */

app/assets/stylesheets/highlight/solarized_light.scss

@@ -96,7 +96,7 @@
   .m { color: #2aa198 } /* Literal.Number */
   .s { color: #2aa198 } /* Literal.String */
   .na { color: #586e75 } /* Name.Attribute */
-  .nb { color: #B58900 } /* Name.Builtin */
+  .nb { color: #b58900 } /* Name.Builtin */
   .nc { color: #268bd2 } /* Name.Class */
   .no { color: #cb4b16 } /* Name.Constant */
   .nd { color: #268bd2 } /* Name.Decorator */

app/assets/stylesheets/highlight/white.scss

@@ -23,7 +23,7 @@
   .line_holder {
     .diff-line-num {
       &.old {
-        background: #ffdddd;
+        background: #fdd;
         border-color: #f1c0c0;
       }
 
@@ -68,66 +68,66 @@
   }
 
   .hll { background-color: #f8f8f8 }
-  .c { color: #999988; font-style: italic; }
+  .c { color: #998; font-style: italic; }
   .err { color: #a61717; background-color: #e3d2d2; }
   .k { font-weight: bold; }
   .o { font-weight: bold; }
-  .cm { color: #999988; font-style: italic; }
-  .cp { color: #999999; font-weight: bold; }
-  .c1 { color: #999988; font-style: italic; }
-  .cs { color: #999999; font-weight: bold; font-style: italic; }
-  .gd { color: #000000; background-color: #ffdddd; }
-  .gd .x { color: #000000; background-color: #ffaaaa; }
+  .cm { color: #998; font-style: italic; }
+  .cp { color: #999; font-weight: bold; }
+  .c1 { color: #998; font-style: italic; }
+  .cs { color: #999; font-weight: bold; font-style: italic; }
+  .gd { color: #000; background-color: #fdd; }
+  .gd .x { color: #000; background-color: #faa; }
   .ge { font-style: italic; }
-  .gr { color: #aa0000; }
-  .gh { color: #999999; }
-  .gi { color: #000000; background-color: #ddffdd; }
-  .gi .x { color: #000000; background-color: #aaffaa; }
-  .go { color: #888888; }
-  .gp { color: #555555; }
+  .gr { color: #a00; }
+  .gh { color: #999; }
+  .gi { color: #000; background-color: #dfd; }
+  .gi .x { color: #000; background-color: #afa; }
+  .go { color: #888; }
+  .gp { color: #555; }
   .gs { font-weight: bold; }
   .gu { color: #800080; font-weight: bold; }
-  .gt { color: #aa0000; }
+  .gt { color: #a00; }
   .kc { font-weight: bold; }
   .kd { font-weight: bold; }
   .kn { font-weight: bold; }
   .kp { font-weight: bold; }
   .kr { font-weight: bold; }
-  .kt { color: #445588; font-weight: bold; }
-  .m { color: #009999; }
-  .s { color: #dd1144; }
-  .n { color: #333333; }
+  .kt { color: #458; font-weight: bold; }
+  .m { color: #099; }
+  .s { color: #d14; }
+  .n { color: #333; }
   .na { color: teal; }
   .nb { color: #0086b3; }
-  .nc { color: #445588; font-weight: bold; }
+  .nc { color: #458; font-weight: bold; }
   .no { color: teal; }
   .ni { color: purple; }
-  .ne { color: #990000; font-weight: bold; }
-  .nf { color: #990000; font-weight: bold; }
-  .nn { color: #555555; }
+  .ne { color: #900; font-weight: bold; }
+  .nf { color: #900; font-weight: bold; }
+  .nn { color: #555; }
   .nt { color: navy; }
   .nv { color: teal; }
   .ow { font-weight: bold; }
-  .w { color: #bbbbbb; }
-  .mf { color: #009999; }
-  .mh { color: #009999; }
-  .mi { color: #009999; }
-  .mo { color: #009999; }
-  .sb { color: #dd1144; }
-  .sc { color: #dd1144; }
-  .sd { color: #dd1144; }
-  .s2 { color: #dd1144; }
-  .se { color: #dd1144; }
-  .sh { color: #dd1144; }
-  .si { color: #dd1144; }
-  .sx { color: #dd1144; }
+  .w { color: #bbb; }
+  .mf { color: #099; }
+  .mh { color: #099; }
+  .mi { color: #099; }
+  .mo { color: #099; }
+  .sb { color: #d14; }
+  .sc { color: #d14; }
+  .sd { color: #d14; }
+  .s2 { color: #d14; }
+  .se { color: #d14; }
+  .sh { color: #d14; }
+  .si { color: #d14; }
+  .sx { color: #d14; }
   .sr { color: #009926; }
-  .s1 { color: #dd1144; }
+  .s1 { color: #d14; }
   .ss { color: #990073; }
-  .bp { color: #999999; }
+  .bp { color: #999; }
   .vc { color: teal; }
   .vg { color: teal; }
   .vi { color: teal; }
-  .il { color: #009999; }
-  .gc { color: #999; background-color: #EAF2F5; }
+  .il { color: #099; }
+  .gc { color: #999; background-color: #eaf2f5; }
 }

app/assets/stylesheets/notify.scss

@@ -0,0 +1,24 @@
+img {
+  max-width: 100%;
+  height: auto;
+}
+p.details {
+  font-style: italic;
+  color: #777
+}
+.footer p {
+  font-size: small;
+  color: #777
+}
+pre.commit-message {
+  white-space: pre-wrap;
+}
+.file-stats a {
+  text-decoration: none;
+}
+.file-stats .new-file {
+  color: #090;
+}
+.file-stats .deleted-file {
+  color: #b00;
+}

app/assets/stylesheets/pages/admin.scss

@@ -34,9 +34,9 @@
     background: #fff
    }
 
-   .visibility-levels {
-     .controls {
-       margin-bottom: 9px;
+  .visibility-levels {
+    .controls {
+      margin-bottom: 9px;
     }
 
     i {

app/assets/stylesheets/pages/appearances.scss

@@ -4,7 +4,7 @@
 }
 
 .appearance-light-logo-preview {
-  background-color:  $background-color;
+  background-color: $background-color;
   max-width: 72px;
   padding: 10px;
   margin-bottom: 10px;

app/assets/stylesheets/pages/awards.scss

@@ -37,7 +37,7 @@
     height: 300px;
     overflow-y: scroll;
 
-    input.emoji-search{
+    input.emoji-search {
       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAFu0lEQVRIia1WTahkVxH+quqce7vf6zdvJpHoIlkYJ2SiJiIokmQjgoGgIAaEIYuYXWICgojiwkmC4taFwhjcyIDusogEIwwiSSCKPwsdwzAg0SjJ9Izzk5n3+nXfe8+pqizOvd395scfsJqi6dPnnDr11Vc/NJ1OwUTosqJLCmYCHCAC2mSHs+ojZv6AO46Y+20AhIneJsafhPhXVZSXDk7qi+aOLhtQNuBmQtcarAKjTXpn2+l3u2yPunvZSABRucjcAV/eMZuM48/Go/g1d19kc4wq+e8MZjWkbI/P5t2P3RFFbv7SQdyBlBUx8N8OTuqjMcof+N94yMPrY2DMm/ytnb32J0QrY+6AqsHM4Q64O9SKDmerKDD3Oy/tNL9vk342CC8RuU6n0ymCMHb22scu7zQngtASOjUHE1BX4UUAv4b7Ow6qiXCXuz/UdvogAAweDY943/b4cAz0ZlYHXeMsnT07RVb7wMUr8ykI4H5HVkMd5Rcb4/jNURVOL5qErAaAUUdCCIJ5kx5q2nw8m39ImEAAsjpE6PStB0YfMcd1wqqG3Xn7A3PfZyyKnNjaqD4fmE/fCNKshirIyY1xvI+Av6g5QIAIIWX7cJPssboSiBBEeKmsZne0Sb8kzAUWNYyq8NvbDo0fZ6beqxuLmqOOMr/lwOh+YXpXtbjERGja9JyZ9+HxpXKb9Gj5oywRESbj+Cj1ENG1QViTGBl1FbC1We1tbVRfHWIoQkhqH9xbpE92XUbb6VJZ1R4crjRz1JWcDMJvLdoMcyAEhjuwHo8Bfndg3mbszhOY+adVlMtD3po51OwzIQiEaams7oeJhxRw1FFOVpFRRUYIhMBAFRnjOsC8IFHHUA4TQQhgAqpAiIFfGbxkIqj54ayGbL7UoOqHCniAEKHLNr26l+D9wQJzeUwMAnfHvEnLECzZRwRV++d60ptjW9VLZeolEJG6GwCCE0CFVNB+Ay0NEqoQYG4YYFu7B8IEVRt3uRzy/osIoLV9QZimWXGHUMFdmI6M64DUF2Je88R9VZqCSP+QlcF5k+4tCzSsXaqjINuK6UyE0+s/mk6/qFq8oAIL9pqMLhkGsNrOyoOIlszust3aJv0U9+kFdwjTGwWl1YdF+KWlQSZ0Se/psj8yGVdg5tJyfH96EBWmLtoEMwMzMFt031NzGWLLzKhC+KV7H5ZeeaMOPxemma2x68puc0LN3+/u6LJiePS6MKHvn4wu6cPzJj0hsioeMfDrEvjv5r6W9gBvjKJujuKzQ0URIZj75NylvT+mbHfXQa4rwAMaVRTMm/SFyzvNy0yF6+4AM+1ubcSnqkAIUjQKl1RKSbE5jt+vovx1MBqF0WW7/d1Z80ab9BtmuJ3Xk5cJKds9TZt/uLPXvtiTrQ+dIwqfAejUvM1os6FNikXKUHfQ+ekUsXT5u85enJ0CaBSkkGEo1syUQ+DfMdE/4GA1uzupf9zdbzhOmLsF4efHVXjaHHAzmDtGdQRd/Nc5wAEJjNki3XfhyvwVNz80xANrht3LsENY9cBBdN1L9GUyyvFRFZ42t75sBvCQRykbRlU4tT2pPxoCvzx09d4GmPs200M6wKdWSDGK8mppYSWdhAlt0qeaLv+IadXU9/Evq4FAZ8ej+LmtcTxaRX4NWI0Uag5Vg1p5MYg8BnlhXIdPHDow+vTWZvVMVttXDLqkTzZdPj6Qii6cP1cSvIdl3iQkNYyi9HH0I22y+93tY3DcQkTZgQtM+POoCr8x97eylkmtrgKuztrvXJ21x/aNKuqIkZ/fntRfCdcTfhUTAIhRzoDojJD0aSNLLwMzmpT7+JaLtyf1MwDo6qz9djFaUq3t9MlFmy/c1OCSceY9fMsVaL9mvH9ocXdkdWxv1scAePG0THAhMOaLdOw/Gvxfxb1w4eCapyIENUcV5M3/u8FitAxZ25P6GAHT3UX39Srw+QOb1ZffA98Dl2Wy1BYkAAAAAElFTkSuQmCC");
       background-repeat: no-repeat;
       background-position: right 5px center;

app/assets/stylesheets/pages/builds.scss

@@ -1,6 +1,6 @@
 .build-page {
   pre.trace {
-    background: #111111;
+    background: #111;
     color: #fff;
     font-family: $monospace_font;
     white-space: pre;

app/assets/stylesheets/pages/ci_projects.scss

@@ -42,7 +42,7 @@
     }
   }
 
-  .loading{
+  .loading {
     font-size: 20px;
   }
 

app/assets/stylesheets/pages/commit.scss

@@ -1,15 +1,15 @@
-.commit-title{
+.commit-title {
   display: block;
 }
 
-.commit-author, .commit-committer{
+.commit-author, .commit-committer {
   display: block;
   color: #999;
   font-weight: normal;
   font-style: italic;
 }
 
-.commit-author strong, .commit-committer strong{
+.commit-author strong, .commit-committer strong {
   font-weight: bold;
   font-style: normal;
 }
@@ -55,7 +55,7 @@
     padding: 10px 0;
 
     li {
-      padding: 3px 0px;
+      padding: 3px 0;
       line-height: 20px;
     }
   }
@@ -74,7 +74,7 @@
       color: $gl-text-red;
     }
   }
-  .edit-file{
+  .edit-file {
     a {
       color: $gl-text-color;
     }

app/assets/stylesheets/pages/commits.scss

@@ -1,4 +1,4 @@
-.commits-compare-switch{
+.commits-compare-switch {
   @include btn-default;
   @include btn-white;
   background: image-url("switch_icon.png") no-repeat center center;
@@ -9,7 +9,7 @@
 
 .lists-separator {
   margin: 10px 0;
-  border-color: #DDD;
+  border-color: #ddd;
 }
 
 .commits-row {
@@ -55,7 +55,7 @@ li.commit {
     }
 
     .commit-row-message {
-      color: $gl-link-color;
+      color: $gl-dark-link-color;
 
       &:hover {
         text-decoration: underline;
@@ -76,7 +76,7 @@ li.commit {
 
   .commit-row-description {
     font-size: 14px;
-    border-left: 1px solid #EEE;
+    border-left: 1px solid #eee;
     padding: 10px 15px;
     margin: 5px 0 10px 5px;
     background: #f9f9f9;
@@ -93,12 +93,15 @@ li.commit {
   .commit-row-info {
     color: $gl-gray;
     line-height: 24px;
-    font-size: 13px;
 
     a {
       color: $gl-gray;
     }
 
+    .avatar {
+      margin-right: 8px;
+    }
+
     .committed_ago {
       display: inline-block;
     }
@@ -152,7 +155,7 @@ li.commit {
 
     .count {
       padding-top: 6px;
-      padding-bottom: 0px;
+      padding-bottom: 0;
       font-size: 12px;
       color: #333;
       display: block;

app/assets/stylesheets/pages/dashboard.scss

@@ -11,15 +11,15 @@
 }
 
 .dashboard-search-filter {
-  padding:5px;
+  padding: 5px;
 
   .search-text-input {
-    float:left;
+    float: left;
     @extend .col-md-2;
   }
   .btn {
     margin-left: 5px;
-    float:left;
+    float: left;
   }
 }
 

app/assets/stylesheets/pages/diff.scss

@@ -1,7 +1,7 @@
 // Common
 .diff-file {
   border: 1px solid $border-color;
-  border-top: none;
+  margin-bottom: $gl-padding;
 
   .diff-header {
     position: relative;
@@ -29,7 +29,7 @@
   .diff-content {
     overflow: auto;
     overflow-y: hidden;
-    background: #FFF;
+    background: #fff;
     color: #333;
 
     .unfold {
@@ -57,8 +57,8 @@
       font-family: $monospace_font;
       border: none;
       border-collapse: separate;
-      margin: 0px;
-      padding: 0px;
+      margin: 0;
+      padding: 0;
       .line_holder td {
         line-height: $code_line_height;
         font-size: $code_font_size;
@@ -76,10 +76,10 @@
     }
 
     .old_line, .new_line {
-      margin: 0px;
-      padding: 0px;
+      margin: 0;
+      padding: 0;
       border: none;
-      padding: 0px 5px;
+      padding: 0 5px;
       border-right: 1px solid;
       text-align: right;
       min-width: 35px;
@@ -97,8 +97,8 @@
     }
     .line_content {
       display: block;
-      margin: 0px;
-      padding: 0px 0.5em;
+      margin: 0;
+      padding: 0 0.5em;
       border: none;
       &.parallel {
         display: table-cell;
@@ -118,7 +118,7 @@
       background-color: #fff;
       line-height: 0;
       img {
-        border: 1px solid #FFF;
+        border: 1px solid #fff;
         background: image-url('trans_bg.gif');
         max-width: 100%;
       }
@@ -132,7 +132,7 @@
     }
     .image-info {
       font-size: 12px;
-      margin: 5px 0 0 0;
+      margin: 5px 0 0;
       color: grey;
     }
 
@@ -183,7 +183,7 @@
           height: 14px;
           width: 15px;
           position: absolute;
-          top: 0px;
+          top: 0;
           background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
         }
         .bottom-handle {
@@ -191,7 +191,7 @@
           height: 14px;
           width: 15px;
           position: absolute;
-          bottom: 0px;
+          bottom: 0;
           background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
         }
       }
@@ -206,8 +206,8 @@
       .frame.added, .frame.deleted {
         position: absolute;
         display: block;
-        top: 0px;
-        left: 0px;
+        top: 0;
+        left: 0;
       }
       .controls {
         display: block;
@@ -215,7 +215,7 @@
         width: 300px;
         z-index: 100;
         position: absolute;
-        bottom: 0px;
+        bottom: 0;
         left: 50%;
         margin-left: -150px;
 
@@ -231,11 +231,11 @@
         .dragger {
           display: block;
           position: absolute;
-          left: 0px;
-          top: 0px;
+          left: 0;
+          top: 0;
           height: 14px;
           width: 14px;
-          background: image-url('onion_skin_sprites.gif') 0px -34px repeat-x;
+          background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x;
           cursor: pointer;
         }
 
@@ -243,17 +243,17 @@
           display: block;
           position: absolute;
           top: 2px;
-          right: 0px;
+          right: 0;
           height: 10px;
           width: 10px;
-          background: image-url('onion_skin_sprites.gif') -2px 0px no-repeat;
+          background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat;
         }
 
         .opaque {
           display: block;
           position: absolute;
           top: 2px;
-          left: 0px;
+          left: 0;
           height: 10px;
           width: 10px;
           background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
@@ -265,7 +265,7 @@
   .view-modes {
     padding: 10px;
     text-align: center;
-    background: #EEE;
+    background: #eee;
 
     ul, li {
       list-style: none;
@@ -361,3 +361,11 @@
     border-color: $border;
   }
 }
+
+.files {
+  margin-top: -1px;
+
+  .diff-file:last-child {
+    margin-bottom: 0;
+  }
+}

app/assets/stylesheets/pages/editor.scss

@@ -1,5 +1,5 @@
 .file-editor {
-  #editor{
+  #editor {
     border: none;
     @include border-radius(0);
     height: 500px;
@@ -14,9 +14,9 @@
   }
 
   .cancel-btn {
-    color: #B94A48;
+    color: #b94a48;
     &:hover {
-      color: #B94A48;
+      color: #b94a48;
     }
   }
 

app/assets/stylesheets/pages/emojis.scss

@@ -1,60 +1,60 @@
-.emoji-0023-20E3 { background-position: 0px 0px; }
-.emoji-002A-20E3 { background-position: -20px 0px; }
-.emoji-0030-20E3 { background-position: 0px -20px; }
+.emoji-0023-20E3 { background-position: 0 0; }
+.emoji-002A-20E3 { background-position: -20px 0; }
+.emoji-0030-20E3 { background-position: 0 -20px; }
 .emoji-0031-20E3 { background-position: -20px -20px; }
-.emoji-0032-20E3 { background-position: -40px 0px; }
+.emoji-0032-20E3 { background-position: -40px 0; }
 .emoji-0033-20E3 { background-position: -40px -20px; }
-.emoji-0034-20E3 { background-position: 0px -40px; }
+.emoji-0034-20E3 { background-position: 0 -40px; }
 .emoji-0035-20E3 { background-position: -20px -40px; }
 .emoji-0036-20E3 { background-position: -40px -40px; }
-.emoji-0037-20E3 { background-position: -60px 0px; }
+.emoji-0037-20E3 { background-position: -60px 0; }
 .emoji-0038-20E3 { background-position: -60px -20px; }
 .emoji-0039-20E3 { background-position: -60px -40px; }
-.emoji-00A9 { background-position: 0px -60px; }
+.emoji-00A9 { background-position: 0 -60px; }
 .emoji-00AE { background-position: -20px -60px; }
 .emoji-1F004 { background-position: -40px -60px; }
 .emoji-1F0CF { background-position: -60px -60px; }
-.emoji-1F170 { background-position: -80px 0px; }
+.emoji-1F170 { background-position: -80px 0; }
 .emoji-1F171 { background-position: -80px -20px; }
 .emoji-1F17E { background-position: -80px -40px; }
 .emoji-1F17F { background-position: -80px -60px; }
-.emoji-1F18E { background-position: 0px -80px; }
+.emoji-1F18E { background-position: 0 -80px; }
 .emoji-1F191 { background-position: -20px -80px; }
 .emoji-1F192 { background-position: -40px -80px; }
 .emoji-1F193 { background-position: -60px -80px; }
 .emoji-1F194 { background-position: -80px -80px; }
-.emoji-1F195 { background-position: -100px 0px; }
+.emoji-1F195 { background-position: -100px 0; }
 .emoji-1F196 { background-position: -100px -20px; }
 .emoji-1F197 { background-position: -100px -40px; }
 .emoji-1F198 { background-position: -100px -60px; }
 .emoji-1F199 { background-position: -100px -80px; }
-.emoji-1F19A { background-position: 0px -100px; }
+.emoji-1F19A { background-position: 0 -100px; }
 .emoji-1F1E6-1F1E8 { background-position: -20px -100px; }
 .emoji-1F1E6-1F1E9 { background-position: -40px -100px; }
 .emoji-1F1E6-1F1EA { background-position: -60px -100px; }
 .emoji-1F1E6-1F1EB { background-position: -80px -100px; }
 .emoji-1F1E6-1F1EC { background-position: -100px -100px; }
-.emoji-1F1E6-1F1EE { background-position: -120px 0px; }
+.emoji-1F1E6-1F1EE { background-position: -120px 0; }
 .emoji-1F1E6-1F1F1 { background-position: -120px -20px; }
 .emoji-1F1E6-1F1F2 { background-position: -120px -40px; }
 .emoji-1F1E6-1F1F4 { background-position: -120px -60px; }
 .emoji-1F1E6-1F1F6 { background-position: -120px -80px; }
 .emoji-1F1E6-1F1F7 { background-position: -120px -100px; }
-.emoji-1F1E6-1F1F8 { background-position: 0px -120px; }
+.emoji-1F1E6-1F1F8 { background-position: 0 -120px; }
 .emoji-1F1E6-1F1F9 { background-position: -20px -120px; }
 .emoji-1F1E6-1F1FA { background-position: -40px -120px; }
 .emoji-1F1E6-1F1FC { background-position: -60px -120px; }
 .emoji-1F1E6-1F1FD { background-position: -80px -120px; }
 .emoji-1F1E6-1F1FF { background-position: -100px -120px; }
 .emoji-1F1E7-1F1E6 { background-position: -120px -120px; }
-.emoji-1F1E7-1F1E7 { background-position: -140px 0px; }
+.emoji-1F1E7-1F1E7 { background-position: -140px 0; }
 .emoji-1F1E7-1F1E9 { background-position: -140px -20px; }
 .emoji-1F1E7-1F1EA { background-position: -140px -40px; }
 .emoji-1F1E7-1F1EB { background-position: -140px -60px; }
 .emoji-1F1E7-1F1EC { background-position: -140px -80px; }
 .emoji-1F1E7-1F1ED { background-position: -140px -100px; }
 .emoji-1F1E7-1F1EE { background-position: -140px -120px; }
-.emoji-1F1E7-1F1EF { background-position: 0px -140px; }
+.emoji-1F1E7-1F1EF { background-position: 0 -140px; }
 .emoji-1F1E7-1F1F1 { background-position: -20px -140px; }
 .emoji-1F1E7-1F1F2 { background-position: -40px -140px; }
 .emoji-1F1E7-1F1F3 { background-position: -60px -140px; }
@@ -62,7 +62,7 @@
 .emoji-1F1E7-1F1F6 { background-position: -100px -140px; }
 .emoji-1F1E7-1F1F7 { background-position: -120px -140px; }
 .emoji-1F1E7-1F1F8 { background-position: -140px -140px; }
-.emoji-1F1E7-1F1F9 { background-position: -160px 0px; }
+.emoji-1F1E7-1F1F9 { background-position: -160px 0; }
 .emoji-1F1E7-1F1FB { background-position: -160px -20px; }
 .emoji-1F1E7-1F1FC { background-position: -160px -40px; }
 .emoji-1F1E7-1F1FE { background-position: -160px -60px; }
@@ -70,7 +70,7 @@
 .emoji-1F1E8-1F1E6 { background-position: -160px -100px; }
 .emoji-1F1E8-1F1E8 { background-position: -160px -120px; }
 .emoji-1F1E8-1F1E9 { background-position: -160px -140px; }
-.emoji-1F1E8-1F1EB { background-position: 0px -160px; }
+.emoji-1F1E8-1F1EB { background-position: 0 -160px; }
 .emoji-1F1E8-1F1EC { background-position: -20px -160px; }
 .emoji-1F1E8-1F1ED { background-position: -40px -160px; }
 .emoji-1F1E8-1F1EE { background-position: -60px -160px; }
@@ -79,7 +79,7 @@
 .emoji-1F1E8-1F1F2 { background-position: -120px -160px; }
 .emoji-1F1E8-1F1F3 { background-position: -140px -160px; }
 .emoji-1F1E8-1F1F4 { background-position: -160px -160px; }
-.emoji-1F1E8-1F1F5 { background-position: -180px 0px; }
+.emoji-1F1E8-1F1F5 { background-position: -180px 0; }
 .emoji-1F1E8-1F1F7 { background-position: -180px -20px; }
 .emoji-1F1E8-1F1FA { background-position: -180px -40px; }
 .emoji-1F1E8-1F1FB { background-position: -180px -60px; }
@@ -88,7 +88,7 @@
 .emoji-1F1E8-1F1FE { background-position: -180px -120px; }
 .emoji-1F1E8-1F1FF { background-position: -180px -140px; }
 .emoji-1F1E9-1F1EA { background-position: -180px -160px; }
-.emoji-1F1E9-1F1EC { background-position: 0px -180px; }
+.emoji-1F1E9-1F1EC { background-position: 0 -180px; }
 .emoji-1F1E9-1F1EF { background-position: -20px -180px; }
 .emoji-1F1E9-1F1F0 { background-position: -40px -180px; }
 .emoji-1F1E9-1F1F2 { background-position: -60px -180px; }
@@ -98,7 +98,7 @@
 .emoji-1F1EA-1F1E8 { background-position: -140px -180px; }
 .emoji-1F1EA-1F1EA { background-position: -160px -180px; }
 .emoji-1F1EA-1F1EC { background-position: -180px -180px; }
-.emoji-1F1EA-1F1ED { background-position: -200px 0px; }
+.emoji-1F1EA-1F1ED { background-position: -200px 0; }
 .emoji-1F1EA-1F1F7 { background-position: -200px -20px; }
 .emoji-1F1EA-1F1F8 { background-position: -200px -40px; }
 .emoji-1F1EA-1F1F9 { background-position: -200px -60px; }
@@ -108,7 +108,7 @@
 .emoji-1F1EB-1F1F0 { background-position: -200px -140px; }
 .emoji-1F1EB-1F1F2 { background-position: -200px -160px; }
 .emoji-1F1EB-1F1F4 { background-position: -200px -180px; }
-.emoji-1F1EB-1F1F7 { background-position: 0px -200px; }
+.emoji-1F1EB-1F1F7 { background-position: 0 -200px; }
 .emoji-1F1EC-1F1E6 { background-position: -20px -200px; }
 .emoji-1F1EC-1F1E7 { background-position: -40px -200px; }
 .emoji-1F1EC-1F1E9 { background-position: -60px -200px; }
@@ -119,7 +119,7 @@
 .emoji-1F1EC-1F1EE { background-position: -160px -200px; }
 .emoji-1F1EC-1F1F1 { background-position: -180px -200px; }
 .emoji-1F1EC-1F1F2 { background-position: -200px -200px; }
-.emoji-1F1EC-1F1F3 { background-position: -220px 0px; }
+.emoji-1F1EC-1F1F3 { background-position: -220px 0; }
 .emoji-1F1EC-1F1F5 { background-position: -220px -20px; }
 .emoji-1F1EC-1F1F6 { background-position: -220px -40px; }
 .emoji-1F1EC-1F1F7 { background-position: -220px -60px; }
@@ -130,7 +130,7 @@
 .emoji-1F1EC-1F1FE { background-position: -220px -160px; }
 .emoji-1F1ED-1F1F0 { background-position: -220px -180px; }
 .emoji-1F1ED-1F1F2 { background-position: -220px -200px; }
-.emoji-1F1ED-1F1F3 { background-position: 0px -220px; }
+.emoji-1F1ED-1F1F3 { background-position: 0 -220px; }
 .emoji-1F1ED-1F1F7 { background-position: -20px -220px; }
 .emoji-1F1ED-1F1F9 { background-position: -40px -220px; }
 .emoji-1F1ED-1F1FA { background-position: -60px -220px; }
@@ -142,7 +142,7 @@
 .emoji-1F1EE-1F1F3 { background-position: -180px -220px; }
 .emoji-1F1EE-1F1F4 { background-position: -200px -220px; }
 .emoji-1F1EE-1F1F6 { background-position: -220px -220px; }
-.emoji-1F1EE-1F1F7 { background-position: -240px 0px; }
+.emoji-1F1EE-1F1F7 { background-position: -240px 0; }
 .emoji-1F1EE-1F1F8 { background-position: -240px -20px; }
 .emoji-1F1EE-1F1F9 { background-position: -240px -40px; }
 .emoji-1F1EF-1F1EA { background-position: -240px -60px; }
@@ -154,7 +154,7 @@
 .emoji-1F1F0-1F1ED { background-position: -240px -180px; }
 .emoji-1F1F0-1F1EE { background-position: -240px -200px; }
 .emoji-1F1F0-1F1F2 { background-position: -240px -220px; }
-.emoji-1F1F0-1F1F3 { background-position: 0px -240px; }
+.emoji-1F1F0-1F1F3 { background-position: 0 -240px; }
 .emoji-1F1F0-1F1F5 { background-position: -20px -240px; }
 .emoji-1F1F0-1F1F7 { background-position: -40px -240px; }
 .emoji-1F1F0-1F1FC { background-position: -60px -240px; }
@@ -167,7 +167,7 @@
 .emoji-1F1F1-1F1F0 { background-position: -200px -240px; }
 .emoji-1F1F1-1F1F7 { background-position: -220px -240px; }
 .emoji-1F1F1-1F1F8 { background-position: -240px -240px; }
-.emoji-1F1F1-1F1F9 { background-position: -260px 0px; }
+.emoji-1F1F1-1F1F9 { background-position: -260px 0; }
 .emoji-1F1F1-1F1FA { background-position: -260px -20px; }
 .emoji-1F1F1-1F1FB { background-position: -260px -40px; }
 .emoji-1F1F1-1F1FE { background-position: -260px -60px; }
@@ -180,7 +180,7 @@
 .emoji-1F1F2-1F1ED { background-position: -260px -200px; }
 .emoji-1F1F2-1F1F0 { background-position: -260px -220px; }
 .emoji-1F1F2-1F1F1 { background-position: -260px -240px; }
-.emoji-1F1F2-1F1F2 { background-position: 0px -260px; }
+.emoji-1F1F2-1F1F2 { background-position: 0 -260px; }
 .emoji-1F1F2-1F1F3 { background-position: -20px -260px; }
 .emoji-1F1F2-1F1F4 { background-position: -40px -260px; }
 .emoji-1F1F2-1F1F5 { background-position: -60px -260px; }
@@ -194,7 +194,7 @@
 .emoji-1F1F2-1F1FD { background-position: -220px -260px; }
 .emoji-1F1F2-1F1FE { background-position: -240px -260px; }
 .emoji-1F1F2-1F1FF { background-position: -260px -260px; }
-.emoji-1F1F3-1F1E6 { background-position: -280px 0px; }
+.emoji-1F1F3-1F1E6 { background-position: -280px 0; }
 .emoji-1F1F3-1F1E8 { background-position: -280px -20px; }
 .emoji-1F1F3-1F1EA { background-position: -280px -40px; }
 .emoji-1F1F3-1F1EB { background-position: -280px -60px; }
@@ -208,7 +208,7 @@
 .emoji-1F1F3-1F1FF { background-position: -280px -220px; }
 .emoji-1F1F4-1F1F2 { background-position: -280px -240px; }
 .emoji-1F1F5-1F1E6 { background-position: -280px -260px; }
-.emoji-1F1F5-1F1EA { background-position: 0px -280px; }
+.emoji-1F1F5-1F1EA { background-position: 0 -280px; }
 .emoji-1F1F5-1F1EB { background-position: -20px -280px; }
 .emoji-1F1F5-1F1EC { background-position: -40px -280px; }
 .emoji-1F1F5-1F1ED { background-position: -60px -280px; }
@@ -223,7 +223,7 @@
 .emoji-1F1F5-1F1FE { background-position: -240px -280px; }
 .emoji-1F1F6-1F1E6 { background-position: -260px -280px; }
 .emoji-1F1F7-1F1EA { background-position: -280px -280px; }
-.emoji-1F1F7-1F1F4 { background-position: -300px 0px; }
+.emoji-1F1F7-1F1F4 { background-position: -300px 0; }
 .emoji-1F1F7-1F1F8 { background-position: -300px -20px; }
 .emoji-1F1F7-1F1FA { background-position: -300px -40px; }
 .emoji-1F1F7-1F1FC { background-position: -300px -60px; }
@@ -238,7 +238,7 @@
 .emoji-1F1F8-1F1EF { background-position: -300px -240px; }
 .emoji-1F1F8-1F1F0 { background-position: -300px -260px; }
 .emoji-1F1F8-1F1F1 { background-position: -300px -280px; }
-.emoji-1F1F8-1F1F2 { background-position: 0px -300px; }
+.emoji-1F1F8-1F1F2 { background-position: 0 -300px; }
 .emoji-1F1F8-1F1F3 { background-position: -20px -300px; }
 .emoji-1F1F8-1F1F4 { background-position: -40px -300px; }
 .emoji-1F1F8-1F1F7 { background-position: -60px -300px; }
@@ -254,7 +254,7 @@
 .emoji-1F1F9-1F1EB { background-position: -260px -300px; }
 .emoji-1F1F9-1F1EC { background-position: -280px -300px; }
 .emoji-1F1F9-1F1ED { background-position: -300px -300px; }
-.emoji-1F1F9-1F1EF { background-position: -320px 0px; }
+.emoji-1F1F9-1F1EF { background-position: -320px 0; }
 .emoji-1F1F9-1F1F0 { background-position: -320px -20px; }
 .emoji-1F1F9-1F1F1 { background-position: -320px -40px; }
 .emoji-1F1F9-1F1F2 { background-position: -320px -60px; }
@@ -270,7 +270,7 @@
 .emoji-1F1FA-1F1F2 { background-position: -320px -260px; }
 .emoji-1F1FA-1F1F8 { background-position: -320px -280px; }
 .emoji-1F1FA-1F1FE { background-position: -320px -300px; }
-.emoji-1F1FA-1F1FF { background-position: 0px -320px; }
+.emoji-1F1FA-1F1FF { background-position: 0 -320px; }
 .emoji-1F1FB-1F1E6 { background-position: -20px -320px; }
 .emoji-1F1FB-1F1E8 { background-position: -40px -320px; }
 .emoji-1F1FB-1F1EA { background-position: -60px -320px; }
@@ -287,7 +287,7 @@
 .emoji-1F1FF-1F1F2 { background-position: -280px -320px; }
 .emoji-1F1FF-1F1FC { background-position: -300px -320px; }
 .emoji-1F201 { background-position: -320px -320px; }
-.emoji-1F202 { background-position: -340px 0px; }
+.emoji-1F202 { background-position: -340px 0; }
 .emoji-1F21A { background-position: -340px -20px; }
 .emoji-1F22F { background-position: -340px -40px; }
 .emoji-1F232 { background-position: -340px -60px; }
@@ -304,7 +304,7 @@
 .emoji-1F300 { background-position: -340px -280px; }
 .emoji-1F301 { background-position: -340px -300px; }
 .emoji-1F302 { background-position: -340px -320px; }
-.emoji-1F303 { background-position: 0px -340px; }
+.emoji-1F303 { background-position: 0 -340px; }
 .emoji-1F304 { background-position: -20px -340px; }
 .emoji-1F305 { background-position: -40px -340px; }
 .emoji-1F306 { background-position: -60px -340px; }
@@ -322,7 +322,7 @@
 .emoji-1F312 { background-position: -300px -340px; }
 .emoji-1F313 { background-position: -320px -340px; }
 .emoji-1F314 { background-position: -340px -340px; }
-.emoji-1F315 { background-position: -360px 0px; }
+.emoji-1F315 { background-position: -360px 0; }
 .emoji-1F316 { background-position: -360px -20px; }
 .emoji-1F317 { background-position: -360px -40px; }
 .emoji-1F318 { background-position: -360px -60px; }
@@ -340,7 +340,7 @@
 .emoji-1F326 { background-position: -360px -300px; }
 .emoji-1F327 { background-position: -360px -320px; }
 .emoji-1F328 { background-position: -360px -340px; }
-.emoji-1F329 { background-position: 0px -360px; }
+.emoji-1F329 { background-position: 0 -360px; }
 .emoji-1F32A { background-position: -20px -360px; }
 .emoji-1F32B { background-position: -40px -360px; }
 .emoji-1F32C { background-position: -60px -360px; }
@@ -359,7 +359,7 @@
 .emoji-1F339 { background-position: -320px -360px; }
 .emoji-1F33A { background-position: -340px -360px; }
 .emoji-1F33B { background-position: -360px -360px; }
-.emoji-1F33C { background-position: -380px 0px; }
+.emoji-1F33C { background-position: -380px 0; }
 .emoji-1F33D { background-position: -380px -20px; }
 .emoji-1F33E { background-position: -380px -40px; }
 .emoji-1F33F { background-position: -380px -60px; }
@@ -378,7 +378,7 @@
 .emoji-1F34C { background-position: -380px -320px; }
 .emoji-1F34D { background-position: -380px -340px; }
 .emoji-1F34E { background-position: -380px -360px; }
-.emoji-1F34F { background-position: 0px -380px; }
+.emoji-1F34F { background-position: 0 -380px; }
 .emoji-1F350 { background-position: -20px -380px; }
 .emoji-1F351 { background-position: -40px -380px; }
 .emoji-1F352 { background-position: -60px -380px; }
@@ -398,7 +398,7 @@
 .emoji-1F360 { background-position: -340px -380px; }
 .emoji-1F361 { background-position: -360px -380px; }
 .emoji-1F362 { background-position: -380px -380px; }
-.emoji-1F363 { background-position: -400px 0px; }
+.emoji-1F363 { background-position: -400px 0; }
 .emoji-1F364 { background-position: -400px -20px; }
 .emoji-1F365 { background-position: -400px -40px; }
 .emoji-1F366 { background-position: -400px -60px; }
@@ -418,7 +418,7 @@
 .emoji-1F374 { background-position: -400px -340px; }
 .emoji-1F375 { background-position: -400px -360px; }
 .emoji-1F376 { background-position: -400px -380px; }
-.emoji-1F377 { background-position: 0px -400px; }
+.emoji-1F377 { background-position: 0 -400px; }
 .emoji-1F378 { background-position: -20px -400px; }
 .emoji-1F379 { background-position: -40px -400px; }
 .emoji-1F37A { background-position: -60px -400px; }
@@ -439,7 +439,7 @@
 .emoji-1F385-1F3FE { background-position: -360px -400px; }
 .emoji-1F385-1F3FF { background-position: -380px -400px; }
 .emoji-1F386 { background-position: -400px -400px; }
-.emoji-1F387 { background-position: -420px 0px; }
+.emoji-1F387 { background-position: -420px 0; }
 .emoji-1F388 { background-position: -420px -20px; }
 .emoji-1F389 { background-position: -420px -40px; }
 .emoji-1F38A { background-position: -420px -60px; }
@@ -460,7 +460,7 @@
 .emoji-1F399 { background-position: -420px -360px; }
 .emoji-1F39A { background-position: -420px -380px; }
 .emoji-1F39B { background-position: -420px -400px; }
-.emoji-1F39C { background-position: 0px -420px; }
+.emoji-1F39C { background-position: 0 -420px; }
 .emoji-1F39D { background-position: -20px -420px; }
 .emoji-1F39E { background-position: -40px -420px; }
 .emoji-1F39F { background-position: -60px -420px; }
@@ -482,7 +482,7 @@
 .emoji-1F3AF { background-position: -380px -420px; }
 .emoji-1F3B0 { background-position: -400px -420px; }
 .emoji-1F3B1 { background-position: -420px -420px; }
-.emoji-1F3B2 { background-position: -440px 0px; }
+.emoji-1F3B2 { background-position: -440px 0; }
 .emoji-1F3B3 { background-position: -440px -20px; }
 .emoji-1F3B4 { background-position: -440px -40px; }
 .emoji-1F3B5 { background-position: -440px -60px; }
@@ -504,7 +504,7 @@
 .emoji-1F3C3-1F3FC { background-position: -440px -380px; }
 .emoji-1F3C3-1F3FD { background-position: -440px -400px; }
 .emoji-1F3C3-1F3FE { background-position: -440px -420px; }
-.emoji-1F3C3-1F3FF { background-position: 0px -440px; }
+.emoji-1F3C3-1F3FF { background-position: 0 -440px; }
 .emoji-1F3C4 { background-position: -20px -440px; }
 .emoji-1F3C4-1F3FB { background-position: -40px -440px; }
 .emoji-1F3C4-1F3FC { background-position: -60px -440px; }
@@ -527,7 +527,7 @@
 .emoji-1F3CA-1F3FD { background-position: -400px -440px; }
 .emoji-1F3CA-1F3FE { background-position: -420px -440px; }
 .emoji-1F3CA-1F3FF { background-position: -440px -440px; }
-.emoji-1F3CB { background-position: -460px 0px; }
+.emoji-1F3CB { background-position: -460px 0; }
 .emoji-1F3CB-1F3FB { background-position: -460px -20px; }
 .emoji-1F3CB-1F3FC { background-position: -460px -40px; }
 .emoji-1F3CB-1F3FD { background-position: -460px -60px; }
@@ -550,7 +550,7 @@
 .emoji-1F3DA { background-position: -460px -400px; }
 .emoji-1F3DB { background-position: -460px -420px; }
 .emoji-1F3DC { background-position: -460px -440px; }
-.emoji-1F3DD { background-position: 0px -460px; }
+.emoji-1F3DD { background-position: 0 -460px; }
 .emoji-1F3DE { background-position: -20px -460px; }
 .emoji-1F3DF { background-position: -40px -460px; }
 .emoji-1F3E0 { background-position: -60px -460px; }
@@ -574,7 +574,7 @@
 .emoji-1F3F2 { background-position: -420px -460px; }
 .emoji-1F3F3 { background-position: -440px -460px; }
 .emoji-1F3F4 { background-position: -460px -460px; }
-.emoji-1F3F5 { background-position: -480px 0px; }
+.emoji-1F3F5 { background-position: -480px 0; }
 .emoji-1F3F6 { background-position: -480px -20px; }
 .emoji-1F3F7 { background-position: -480px -40px; }
 .emoji-1F3F8 { background-position: -480px -60px; }
@@ -598,7 +598,7 @@
 .emoji-1F40A { background-position: -480px -420px; }
 .emoji-1F40B { background-position: -480px -440px; }
 .emoji-1F40C { background-position: -480px -460px; }
-.emoji-1F40D { background-position: 0px -480px; }
+.emoji-1F40D { background-position: 0 -480px; }
 .emoji-1F40E { background-position: -20px -480px; }
 .emoji-1F40F { background-position: -40px -480px; }
 .emoji-1F410 { background-position: -60px -480px; }
@@ -623,7 +623,7 @@
 .emoji-1F423 { background-position: -440px -480px; }
 .emoji-1F424 { background-position: -460px -480px; }
 .emoji-1F425 { background-position: -480px -480px; }
-.emoji-1F426 { background-position: -500px 0px; }
+.emoji-1F426 { background-position: -500px 0; }
 .emoji-1F427 { background-position: -500px -20px; }
 .emoji-1F428 { background-position: -500px -40px; }
 .emoji-1F429 { background-position: -500px -60px; }
@@ -648,7 +648,7 @@
 .emoji-1F43C { background-position: -500px -440px; }
 .emoji-1F43D { background-position: -500px -460px; }
 .emoji-1F43E { background-position: -500px -480px; }
-.emoji-1F43F { background-position: 0px -500px; }
+.emoji-1F43F { background-position: 0 -500px; }
 .emoji-1F440 { background-position: -20px -500px; }
 .emoji-1F441 { background-position: -40px -500px; }
 .emoji-1F441-1F5E8 { background-position: -60px -500px; }
@@ -674,7 +674,7 @@
 .emoji-1F446-1F3FF { background-position: -460px -500px; }
 .emoji-1F447 { background-position: -480px -500px; }
 .emoji-1F447-1F3FB { background-position: -500px -500px; }
-.emoji-1F447-1F3FC { background-position: -520px 0px; }
+.emoji-1F447-1F3FC { background-position: -520px 0; }
 .emoji-1F447-1F3FD { background-position: -520px -20px; }
 .emoji-1F447-1F3FE { background-position: -520px -40px; }
 .emoji-1F447-1F3FF { background-position: -520px -60px; }
@@ -700,7 +700,7 @@
 .emoji-1F44B-1F3FB { background-position: -520px -460px; }
 .emoji-1F44B-1F3FC { background-position: -520px -480px; }
 .emoji-1F44B-1F3FD { background-position: -520px -500px; }
-.emoji-1F44B-1F3FE { background-position: 0px -520px; }
+.emoji-1F44B-1F3FE { background-position: 0 -520px; }
 .emoji-1F44B-1F3FF { background-position: -20px -520px; }
 .emoji-1F44C { background-position: -40px -520px; }
 .emoji-1F44C-1F3FB { background-position: -60px -520px; }
@@ -727,7 +727,7 @@
 .emoji-1F44F-1F3FE { background-position: -480px -520px; }
 .emoji-1F44F-1F3FF { background-position: -500px -520px; }
 .emoji-1F450 { background-position: -520px -520px; }
-.emoji-1F450-1F3FB { background-position: -540px 0px; }
+.emoji-1F450-1F3FB { background-position: -540px 0; }
 .emoji-1F450-1F3FC { background-position: -540px -20px; }
 .emoji-1F450-1F3FD { background-position: -540px -40px; }
 .emoji-1F450-1F3FE { background-position: -540px -60px; }
@@ -754,7 +754,7 @@
 .emoji-1F464 { background-position: -540px -480px; }
 .emoji-1F465 { background-position: -540px -500px; }
 .emoji-1F466 { background-position: -540px -520px; }
-.emoji-1F466-1F3FB { background-position: 0px -540px; }
+.emoji-1F466-1F3FB { background-position: 0 -540px; }
 .emoji-1F466-1F3FC { background-position: -20px -540px; }
 .emoji-1F466-1F3FD { background-position: -40px -540px; }
 .emoji-1F466-1F3FE { background-position: -60px -540px; }
@@ -782,7 +782,7 @@
 .emoji-1F468-1F469-1F467-1F467 { background-position: -500px -540px; }
 .emoji-1F468-2764-1F468 { background-position: -520px -540px; }
 .emoji-1F468-2764-1F48B-1F468 { background-position: -540px -540px; }
-.emoji-1F469 { background-position: -560px 0px; }
+.emoji-1F469 { background-position: -560px 0; }
 .emoji-1F469-1F3FB { background-position: -560px -20px; }
 .emoji-1F469-1F3FC { background-position: -560px -40px; }
 .emoji-1F469-1F3FD { background-position: -560px -60px; }
@@ -810,7 +810,7 @@
 .emoji-1F470-1F3FB { background-position: -560px -500px; }
 .emoji-1F470-1F3FC { background-position: -560px -520px; }
 .emoji-1F470-1F3FD { background-position: -560px -540px; }
-.emoji-1F470-1F3FE { background-position: 0px -560px; }
+.emoji-1F470-1F3FE { background-position: 0 -560px; }
 .emoji-1F470-1F3FF { background-position: -20px -560px; }
 .emoji-1F471 { background-position: -40px -560px; }
 .emoji-1F471-1F3FB { background-position: -60px -560px; }
@@ -839,7 +839,7 @@
 .emoji-1F475 { background-position: -520px -560px; }
 .emoji-1F475-1F3FB { background-position: -540px -560px; }
 .emoji-1F475-1F3FC { background-position: -560px -560px; }
-.emoji-1F475-1F3FD { background-position: -580px 0px; }
+.emoji-1F475-1F3FD { background-position: -580px 0; }
 .emoji-1F475-1F3FE { background-position: -580px -20px; }
 .emoji-1F475-1F3FF { background-position: -580px -40px; }
 .emoji-1F476 { background-position: -580px -60px; }
@@ -868,7 +868,7 @@
 .emoji-1F47C-1F3FC { background-position: -580px -520px; }
 .emoji-1F47C-1F3FD { background-position: -580px -540px; }
 .emoji-1F47C-1F3FE { background-position: -580px -560px; }
-.emoji-1F47C-1F3FF { background-position: 0px -580px; }
+.emoji-1F47C-1F3FF { background-position: 0 -580px; }
 .emoji-1F47D { background-position: -20px -580px; }
 .emoji-1F47E { background-position: -40px -580px; }
 .emoji-1F47F { background-position: -60px -580px; }
@@ -898,7 +898,7 @@
 .emoji-1F485-1F3FD { background-position: -540px -580px; }
 .emoji-1F485-1F3FE { background-position: -560px -580px; }
 .emoji-1F485-1F3FF { background-position: -580px -580px; }
-.emoji-1F486 { background-position: -600px 0px; }
+.emoji-1F486 { background-position: -600px 0; }
 .emoji-1F486-1F3FB { background-position: -600px -20px; }
 .emoji-1F486-1F3FC { background-position: -600px -40px; }
 .emoji-1F486-1F3FD { background-position: -600px -60px; }
@@ -928,7 +928,7 @@
 .emoji-1F497 { background-position: -600px -540px; }
 .emoji-1F498 { background-position: -600px -560px; }
 .emoji-1F499 { background-position: -600px -580px; }
-.emoji-1F49A { background-position: 0px -600px; }
+.emoji-1F49A { background-position: 0 -600px; }
 .emoji-1F49B { background-position: -20px -600px; }
 .emoji-1F49C { background-position: -40px -600px; }
 .emoji-1F49D { background-position: -60px -600px; }
@@ -959,7 +959,7 @@
 .emoji-1F4B1 { background-position: -560px -600px; }
 .emoji-1F4B2 { background-position: -580px -600px; }
 .emoji-1F4B3 { background-position: -600px -600px; }
-.emoji-1F4B4 { background-position: -620px 0px; }
+.emoji-1F4B4 { background-position: -620px 0; }
 .emoji-1F4B5 { background-position: -620px -20px; }
 .emoji-1F4B6 { background-position: -620px -40px; }
 .emoji-1F4B7 { background-position: -620px -60px; }
@@ -990,7 +990,7 @@
 .emoji-1F4D0 { background-position: -620px -560px; }
 .emoji-1F4D1 { background-position: -620px -580px; }
 .emoji-1F4D2 { background-position: -620px -600px; }
-.emoji-1F4D3 { background-position: 0px -620px; }
+.emoji-1F4D3 { background-position: 0 -620px; }
 .emoji-1F4D4 { background-position: -20px -620px; }
 .emoji-1F4D5 { background-position: -40px -620px; }
 .emoji-1F4D6 { background-position: -60px -620px; }
@@ -1022,7 +1022,7 @@
 .emoji-1F4F0 { background-position: -580px -620px; }
 .emoji-1F4F1 { background-position: -600px -620px; }
 .emoji-1F4F2 { background-position: -620px -620px; }
-.emoji-1F4F3 { background-position: -640px 0px; }
+.emoji-1F4F3 { background-position: -640px 0; }
 .emoji-1F4F4 { background-position: -640px -20px; }
 .emoji-1F4F5 { background-position: -640px -40px; }
 .emoji-1F4F6 { background-position: -640px -60px; }
@@ -1054,7 +1054,7 @@
 .emoji-1F510 { background-position: -640px -580px; }
 .emoji-1F511 { background-position: -640px -600px; }
 .emoji-1F512 { background-position: -640px -620px; }
-.emoji-1F513 { background-position: 0px -640px; }
+.emoji-1F513 { background-position: 0 -640px; }
 .emoji-1F514 { background-position: -20px -640px; }
 .emoji-1F515 { background-position: -40px -640px; }
 .emoji-1F516 { background-position: -60px -640px; }
@@ -1087,7 +1087,7 @@
 .emoji-1F531 { background-position: -600px -640px; }
 .emoji-1F532 { background-position: -620px -640px; }
 .emoji-1F533 { background-position: -640px -640px; }
-.emoji-1F534 { background-position: -660px 0px; }
+.emoji-1F534 { background-position: -660px 0; }
 .emoji-1F535 { background-position: -660px -20px; }
 .emoji-1F536 { background-position: -660px -40px; }
 .emoji-1F537 { background-position: -660px -60px; }
@@ -1120,7 +1120,7 @@
 .emoji-1F55B { background-position: -660px -600px; }
 .emoji-1F55C { background-position: -660px -620px; }
 .emoji-1F55D { background-position: -660px -640px; }
-.emoji-1F55E { background-position: 0px -660px; }
+.emoji-1F55E { background-position: 0 -660px; }
 .emoji-1F55F { background-position: -20px -660px; }
 .emoji-1F560 { background-position: -40px -660px; }
 .emoji-1F561 { background-position: -60px -660px; }
@@ -1154,7 +1154,7 @@
 .emoji-1F578 { background-position: -620px -660px; }
 .emoji-1F579 { background-position: -640px -660px; }
 .emoji-1F57B { background-position: -660px -660px; }
-.emoji-1F57E { background-position: -680px 0px; }
+.emoji-1F57E { background-position: -680px 0; }
 .emoji-1F57F { background-position: -680px -20px; }
 .emoji-1F581 { background-position: -680px -40px; }
 .emoji-1F582 { background-position: -680px -60px; }
@@ -1188,7 +1188,7 @@
 .emoji-1F595-1F3FF { background-position: -680px -620px; }
 .emoji-1F596 { background-position: -680px -640px; }
 .emoji-1F596-1F3FB { background-position: -680px -660px; }
-.emoji-1F596-1F3FC { background-position: 0px -680px; }
+.emoji-1F596-1F3FC { background-position: 0 -680px; }
 .emoji-1F596-1F3FD { background-position: -20px -680px; }
 .emoji-1F596-1F3FE { background-position: -40px -680px; }
 .emoji-1F596-1F3FF { background-position: -60px -680px; }
@@ -1223,7 +1223,7 @@
 .emoji-1F5C4 { background-position: -640px -680px; }
 .emoji-1F5C6 { background-position: -660px -680px; }
 .emoji-1F5C7 { background-position: -680px -680px; }
-.emoji-1F5C9 { background-position: -700px 0px; }
+.emoji-1F5C9 { background-position: -700px 0; }
 .emoji-1F5CA { background-position: -700px -20px; }
 .emoji-1F5CE { background-position: -700px -40px; }
 .emoji-1F5CF { background-position: -700px -60px; }
@@ -1258,7 +1258,7 @@
 .emoji-1F5F8 { background-position: -700px -640px; }
 .emoji-1F5F9 { background-position: -700px -660px; }
 .emoji-1F5FA { background-position: -700px -680px; }
-.emoji-1F5FB { background-position: 0px -700px; }
+.emoji-1F5FB { background-position: 0 -700px; }
 .emoji-1F5FC { background-position: -20px -700px; }
 .emoji-1F5FD { background-position: -40px -700px; }
 .emoji-1F5FE { background-position: -60px -700px; }
@@ -1294,7 +1294,7 @@
 .emoji-1F61C { background-position: -660px -700px; }
 .emoji-1F61D { background-position: -680px -700px; }
 .emoji-1F61E { background-position: -700px -700px; }
-.emoji-1F61F { background-position: -720px 0px; }
+.emoji-1F61F { background-position: -720px 0; }
 .emoji-1F620 { background-position: -720px -20px; }
 .emoji-1F621 { background-position: -720px -40px; }
 .emoji-1F622 { background-position: -720px -60px; }
@@ -1330,7 +1330,7 @@
 .emoji-1F640 { background-position: -720px -660px; }
 .emoji-1F641 { background-position: -720px -680px; }
 .emoji-1F642 { background-position: -720px -700px; }
-.emoji-1F643 { background-position: 0px -720px; }
+.emoji-1F643 { background-position: 0 -720px; }
 .emoji-1F644 { background-position: -20px -720px; }
 .emoji-1F645 { background-position: -40px -720px; }
 .emoji-1F645-1F3FB { background-position: -60px -720px; }
@@ -1367,7 +1367,7 @@
 .emoji-1F64C-1F3FF { background-position: -680px -720px; }
 .emoji-1F64D { background-position: -700px -720px; }
 .emoji-1F64D-1F3FB { background-position: -720px -720px; }
-.emoji-1F64D-1F3FC { background-position: -740px 0px; }
+.emoji-1F64D-1F3FC { background-position: -740px 0; }
 .emoji-1F64D-1F3FD { background-position: -740px -20px; }
 .emoji-1F64D-1F3FE { background-position: -740px -40px; }
 .emoji-1F64D-1F3FF { background-position: -740px -60px; }
@@ -1404,7 +1404,7 @@
 .emoji-1F692 { background-position: -740px -680px; }
 .emoji-1F693 { background-position: -740px -700px; }
 .emoji-1F694 { background-position: -740px -720px; }
-.emoji-1F695 { background-position: 0px -740px; }
+.emoji-1F695 { background-position: 0 -740px; }
 .emoji-1F696 { background-position: -20px -740px; }
 .emoji-1F697 { background-position: -40px -740px; }
 .emoji-1F698 { background-position: -60px -740px; }
@@ -1442,7 +1442,7 @@
 .emoji-1F6B3 { background-position: -700px -740px; }
 .emoji-1F6B4 { background-position: -720px -740px; }
 .emoji-1F6B4-1F3FB { background-position: -740px -740px; }
-.emoji-1F6B4-1F3FC { background-position: -760px 0px; }
+.emoji-1F6B4-1F3FC { background-position: -760px 0; }
 .emoji-1F6B4-1F3FD { background-position: -760px -20px; }
 .emoji-1F6B4-1F3FE { background-position: -760px -40px; }
 .emoji-1F6B4-1F3FF { background-position: -760px -60px; }
@@ -1480,7 +1480,7 @@
 .emoji-1F6C5 { background-position: -760px -700px; }
 .emoji-1F6C6 { background-position: -760px -720px; }
 .emoji-1F6C7 { background-position: -760px -740px; }
-.emoji-1F6C8 { background-position: 0px -760px; }
+.emoji-1F6C8 { background-position: 0 -760px; }
 .emoji-1F6C9 { background-position: -20px -760px; }
 .emoji-1F6CA { background-position: -40px -760px; }
 .emoji-1F6CB { background-position: -60px -760px; }
@@ -1519,7 +1519,7 @@
 .emoji-1F918-1F3FC { background-position: -720px -760px; }
 .emoji-1F918-1F3FD { background-position: -740px -760px; }
 .emoji-1F918-1F3FE { background-position: -760px -760px; }
-.emoji-1F918-1F3FF { background-position: -780px 0px; }
+.emoji-1F918-1F3FF { background-position: -780px 0; }
 .emoji-1F980 { background-position: -780px -20px; }
 .emoji-1F981 { background-position: -780px -40px; }
 .emoji-1F982 { background-position: -780px -60px; }
@@ -1558,7 +1558,7 @@
 .emoji-24C2 { background-position: -780px -720px; }
 .emoji-25AA { background-position: -780px -740px; }
 .emoji-25AB { background-position: -780px -760px; }
-.emoji-25B6 { background-position: 0px -780px; }
+.emoji-25B6 { background-position: 0 -780px; }
 .emoji-25C0 { background-position: -20px -780px; }
 .emoji-25FB { background-position: -40px -780px; }
 .emoji-25FC { background-position: -60px -780px; }
@@ -1598,7 +1598,7 @@
 .emoji-264D { background-position: -740px -780px; }
 .emoji-264E { background-position: -760px -780px; }
 .emoji-264F { background-position: -780px -780px; }
-.emoji-2650 { background-position: -800px 0px; }
+.emoji-2650 { background-position: -800px 0; }
 .emoji-2651 { background-position: -800px -20px; }
 .emoji-2652 { background-position: -800px -40px; }
 .emoji-2653 { background-position: -800px -60px; }
@@ -1638,7 +1638,7 @@
 .emoji-26F0 { background-position: -800px -740px; }
 .emoji-26F1 { background-position: -800px -760px; }
 .emoji-26F2 { background-position: -800px -780px; }
-.emoji-26F3 { background-position: 0px -800px; }
+.emoji-26F3 { background-position: 0 -800px; }
 .emoji-26F4 { background-position: -20px -800px; }
 .emoji-26F5 { background-position: -40px -800px; }
 .emoji-26F7 { background-position: -60px -800px; }
@@ -1679,7 +1679,7 @@
 .emoji-270D-1F3FD { background-position: -760px -800px; }
 .emoji-270D-1F3FE { background-position: -780px -800px; }
 .emoji-270D-1F3FF { background-position: -800px -800px; }
-.emoji-270F { background-position: -820px 0px; }
+.emoji-270F { background-position: -820px 0; }
 .emoji-2712 { background-position: -820px -20px; }
 .emoji-2714 { background-position: -820px -40px; }
 .emoji-2716 { background-position: -820px -60px; }

app/assets/stylesheets/pages/events.scss

@@ -6,7 +6,7 @@
   font-size: $gl-font-size;
   padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
   border-bottom: 1px solid $table-border-color;
-  color: #7f8fa4;
+  color: $list-text-color;
 
   &.event-inline {
     .avatar {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: #4c4e54;
+    color: $gl-dark-link-color;
   }
 
   .avatar {
@@ -31,10 +31,7 @@
   .event-title {
     @include str-truncated(calc(100% - 174px));
     font-weight: 600;
-
-    .author_name {
-      color: #333;
-    }
+    color: $list-text-color;
   }
 
   .event-body {
@@ -46,10 +43,6 @@
       .md {
         color: #7f8fa4;
         font-size: $gl-font-size;
-
-        iframe.twitter-share-button {
-          vertical-align: bottom;
-        }
       }
 
       pre {
@@ -63,7 +56,7 @@
 
       .note-image-attach {
         margin-top: 4px;
-        margin-left: 0px;
+        margin-left: 0;
         max-width: 200px;
         float: none;
       }
@@ -83,10 +76,10 @@
   .event_icon {
     position: relative;
     float: right;
-    border: 1px solid #EEE;
+    border: 1px solid #eee;
     padding: 5px;
     @include border-radius(5px);
-    background: #F9F9F9;
+    background: #f9f9f9;
     margin-left: 10px;
     top: -6px;
     img {
@@ -94,7 +87,7 @@
     }
   }
 
-  &:last-child { border:none }
+  &:last-child { border: none }
 
   .event_commits {
     li {
@@ -138,7 +131,7 @@
     @include str-truncated(100%);
     padding: 5px 0;
     font-size: 13px;
-    float:left;
+    float: left;
     margin-right: -150px;
     padding-right: 150px;
     line-height: 20px;
@@ -160,7 +153,7 @@
 
     .event-body {
       margin: 0;
-      border-left: 2px solid #DDD;
+      border-left: 2px solid #ddd;
       padding-left: 10px;
     }
 

app/assets/stylesheets/pages/graph.scss

@@ -6,11 +6,11 @@
     font-size: 14px;
     padding: 5px;
     border-bottom: 1px solid $border-color;
-    background: #EEE;
+    background: #eee;
   }
 
   .network-graph {
-    background: #FFF;
+    background: #fff;
     height: 500px;
     overflow-y: scroll;
     overflow-x: hidden;

app/assets/stylesheets/pages/import.scss

@@ -1,6 +1,6 @@
 i.icon-gitorious {
   display: inline-block;
-  background-position: 0px 0px;
+  background-position: 0 0;
   background-size: contain;
   background-repeat: no-repeat;
 }

app/assets/stylesheets/pages/issuable.scss

@@ -1,34 +1,3 @@
-@media (max-width: $screen-sm-max) {
-  .issuable-affix {
-    margin-top: 20px;
-  }
-}
-
-@media (max-width: $screen-md-max) {
-  .issuable-affix {
-    position: static;
-  }
-}
-
-@media (min-width: $screen-md-max) {
-  .issuable-affix {
-    &.affix-top {
-      position: static;
-    }
-
-    &.affix {
-      position: fixed;
-      top: 70px;
-      margin-right: 35px;
-
-      &.no-affix {
-        position: relative;
-        top: 0;
-      }
-    }
-  }
-}
-
 .issuable-details {
   section {
     .issuable-discussion {
@@ -54,20 +23,29 @@
       padding: 6px 10px;
     }
   }
+
+  &.has-labels {
+    margin-bottom: -5px;
+  }
 }
 
 .issuable-sidebar {
+  a {
+    color: inherit;
+  }
+
   .block {
     @include clearfix;
-    padding:  $gl-padding 0;
+    padding: $gl-padding 0;
     border-bottom: 1px solid $border-gray-light;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter_inner_width;
     // --
 
-    &:first-child {
-      padding-top: 5px;
+    &.issuable-sidebar-header {
+      padding-top: 0;
+      padding-bottom: 10px;
     }
 
     &:last-child {
@@ -75,7 +53,6 @@
     }
 
     span {
-      margin-top: 7px;
       display: inline-block;
     }
 
@@ -84,7 +61,7 @@
     }
 
     .issuable-count {
-
+      margin-top: 7px;
     }
 
     .gutter-toggle {
@@ -99,24 +76,24 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
+    line-height: 1;
 
     .avatar {
       margin-left: 0;
     }
 
-    label {
-      font-weight: normal;
-      margin-right: 4px;
-    }
-
     .edit-link {
       color: $gl-gray;
+
+      &:hover {
+        color: $md-link-color;
+      }
     }
   }
 
   .cross-project-reference {
-    color: $gl-link-color;
+    color: inherit;
 
     span {
       white-space: nowrap;
@@ -144,11 +121,6 @@
   .btn-clipboard {
     color: $gl-gray;
   }
-
-  .participants .avatar {
-    margin-top: 6px;
-    margin-right: 2px;
-  }
 }
 
 .right-sidebar {
@@ -163,8 +135,18 @@
   &.right-sidebar-expanded {
     width: $gutter_width;
 
-    hr {
-      display: none;
+    .value {
+      line-height: 1;
+
+      .assign-yourself {
+        margin-top: 10px;
+        font-weight: normal;
+        display: block;
+      }
+    }
+
+    .bold {
+      font-weight: 600;
     }
 
     .sidebar-collapsed-icon {
@@ -172,8 +154,23 @@
     }
 
     .gutter-toggle {
+      margin-top: 7px;
       border-left: 1px solid $border-gray-light;
     }
+
+    .assignee .avatar {
+      float: left;
+      margin-right: 10px;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    .username {
+      display: block;
+      margin-top: 4px;
+      font-size: 13px;
+      font-weight: normal;
+    }
   }
 
   .subscribe-button {
@@ -193,28 +190,26 @@
     width: $sidebar_collapsed_width;
     padding-top: 0;
 
-    hr {
-      margin: 0;
-      color: $gray-normal;
-      border-color: $gray-normal;
-      width: 62px;
-      margin-left: -20px
-    }
-
     .block {
       width: $sidebar_collapsed_width - 1px;
       margin-left: -19px;
-      padding: 15px 0 0 0;
+      padding: 15px 0 0;
       border-bottom: none;
       overflow: hidden;
     }
 
+    .participants {
+      border-bottom: 1px solid $border-gray-light;
+    }
+
     .hide-collapsed {
       display: none;
     }
 
     .gutter-toggle {
-      margin-left: -36px;
+      width: 100%;
+      margin-left: 0;
+      padding-left: 25px;
     }
 
     .sidebar-collapsed-icon {
@@ -222,13 +217,17 @@
       width: 100%;
       text-align: center;
       padding-bottom: 10px;
-      color: #999999;
+      color: #999;
 
       span {
         display: block;
         margin-top: 0;
       }
 
+      .author {
+        display: none;
+      }
+
       .btn-clipboard {
         border: none;
 
@@ -237,10 +236,15 @@
         }
 
         i {
-          color: #999999;
+          color: #999;
         }
       }
     }
+
+    .sidebar-collapsed-user {
+      padding-bottom: 0;
+      margin-bottom: 10px;
+    }
   }
 
   .btn {
@@ -251,6 +255,22 @@
       border: 1px solid $border-gray-dark;
     }
   }
+
+  a:not(.btn) {
+    &:hover {
+      color: $md-link-color;
+      text-decoration: none;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+    padding-top: 6px;
+  }
+
+  .open .dropdown-menu {
+    width: 100%;
+  }
 }
 
 .btn-default.gutter-toggle {
@@ -262,3 +282,37 @@
     color: $gray-darkest;
   }
 }
+
+.edited-text {
+  color: $gray-darkest;
+
+  .author_link {
+    color: $gray-darkest;
+  }
+}
+
+.participants-list {
+  margin: -5px;
+}
+
+.participants-author {
+  display: inline-block;
+  padding: 5px;
+
+  .author_link {
+    display: block;
+  }
+
+  .avatar.avatar-inline {
+    margin: 0;
+  }
+}
+
+.participants-more {
+  margin-top: 5px;
+  margin-left: 5px;
+
+  a {
+    color: #8c8c8c;
+  }
+}

app/assets/stylesheets/pages/issues.scss

@@ -3,7 +3,7 @@
     padding: 10px $gl-padding;
     position: relative;
 
-    .issue-title {
+    .title {
       margin-bottom: 2px;
     }
 
@@ -49,7 +49,7 @@ form.edit-issue {
   margin: 0;
 }
 
-.merge-requests-title {
+.merge-requests-title, .related-branches-title {
   font-size: 16px;
   font-weight: 600;
 }
@@ -68,18 +68,18 @@ form.edit-issue {
 .merge-request,
 .issue {
   &.today {
-    background: #EFE;
-    border-color: #CEC;
+    background: #efe;
+    border-color: #cec;
   }
 
   &.closed {
-    background: #F9F9F9;
-    border-color: #E5E5E5;
+    background: #f9f9f9;
+    border-color: #e5e5e5;
   }
 
   &.merged {
-    background: #F9F9F9;
-    border-color: #E5E5E5;
+    background: #f9f9f9;
+    border-color: #e5e5e5;
   }
 }
 
@@ -130,14 +130,14 @@ form.edit-issue {
 }
 
 .issue-closed-by-widget {
-  color: $secondary-text;
+  color: $gl-text-color;
   margin-left: 52px;
 }
 
 .editor-details {
   display: block;
-  
+
   @media (min-width: $screen-sm-min) {
     display: inline-block;
   }
-}
+}

app/assets/stylesheets/pages/labels.scss

@@ -9,28 +9,45 @@
   }
 
   &.suggest-colors-dropdown {
-    margin-bottom: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-radius: $border-radius-base;
+    overflow: hidden;
 
     a {
       @include border-radius(0);
-      width: 36.7px;
+      width: (100% / 7);
       margin-right: 0;
       margin-bottom: -5px;
     }
   }
 }
 
-.dropdown-label-color-preview {
-  display: none;
-  margin-top: 5px;
-  width: 100%;
-  height: 25px;
+.dropdown-new-label {
+  .dropdown-content {
+    max-height: 260px;
+  }
+}
+
+.dropdown-label-color-input {
+  position: relative;
+  margin-bottom: 10px;
 
   &.is-active {
-    display: block;
+    padding-left: 32px;
   }
 }
 
+.dropdown-label-color-preview {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 32px;
+  border-top-left-radius: $border-radius-base;
+  border-bottom-left-radius: $border-radius-base;
+}
+
 .label-row {
   .label {
     padding: 9px;
@@ -41,3 +58,14 @@
 .color-label {
   padding: 3px 4px;
 }
+
+.label-subscription {
+  display: inline-block;
+}
+
+.dropdown-labels-error {
+  padding: 5px 10px;
+  margin-bottom: 10px;
+  background-color: $gl-danger;
+  color: $white-light;
+}

app/assets/stylesheets/pages/lint.scss

@@ -1,9 +1,9 @@
 .ci-body {
-  .incorrect-syntax{
+  .incorrect-syntax {
     font-size: 19px;
     color: red;
   }
-  .correct-syntax{
+  .correct-syntax {
     font-size: 19px;
     color: #47a447;
   }

app/assets/stylesheets/pages/login.scss

@@ -28,7 +28,7 @@
 
     img {
       max-width: 100%;
-      margin-bottom:  30px;
+      margin-bottom: 30px;
     }
 
     a {
@@ -36,16 +36,16 @@
     }
   }
 
-  .login-box{
+  .login-box {
     background: #fafafa;
     border-radius: 10px;
-    box-shadow: 0 0px 2px #CCC;
+    box-shadow: 0 0 2px #ccc;
     padding: 15px;
 
     .login-heading h3 {
       font-weight: 300;
       line-height: 1.5;
-      margin: 0 0 10px 0;
+      margin: 0 0 10px;
     }
 
     .login-footer {
@@ -74,7 +74,7 @@
 
     &.top {
       @include border-radius(5px 5px 0 0);
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
 
     &.bottom {
@@ -85,12 +85,12 @@
 
     &.middle {
       border-top: 0;
-      margin-bottom:0px;
+      margin-bottom: 0;
       @include border-radius(0);
     }
 
     &:active, &:focus {
-      background-color: #FFF;
+      background-color: #fff;
     }
   }
 

app/assets/stylesheets/pages/merge_requests.scss

@@ -113,7 +113,7 @@
   }
 
   .mr-widget-footer {
-    border-top: 1px solid #EEE;
+    border-top: 1px solid #eee;
   }
 
   .ci-coverage {
@@ -195,38 +195,8 @@
   line-height: 31px;
 }
 
-.disabled-comment-area {
-  padding: 16px 0;
-
-  .disabled-profile {
-    width: 40px;
-    height: 40px;
-    background: $border-gray-dark;
-    border-radius: 20px;
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  .disabled-comment {
-    background: $gray-light;
-    display: inline-block;
-    vertical-align: top;
-    height: 200px;
-    border-radius: 4px;
-    border: 1px solid $border-gray-normal;
-    padding-top: 90px;
-    text-align: center;
-    right: 20px;
-    position: absolute;
-    left: 70px;
-    margin-bottom: 20px;
-
-    span {
-      color: #B2B2B2;
-
-      a {
-        color: $md-link-color;
-      }
-    }
+.builds {
+  .table-holder {
+    overflow-x: scroll;
   }
 }