Merge branch 'bootstrap3' of /home/git/repositories/gitlab/gitlabhq

Dmitriy Zaporozhets
2 parents a2355c52 3567107c
Showing 171 changed files with 2451 additions and 2392 deletions Show diff stats
Gemfile
Gemfile.lock
app/assets/javascripts/behaviors/toggler_behavior.coffee
app/assets/stylesheets/application.scss
app/assets/stylesheets/common.scss
app/assets/stylesheets/generic.scss
app/assets/stylesheets/generic/avatar.scss
app/assets/stylesheets/generic/blocks.scss
app/assets/stylesheets/generic/buttons.scss
app/assets/stylesheets/generic/common.scss
app/assets/stylesheets/generic/files.scss
app/assets/stylesheets/generic/forms.scss
app/assets/stylesheets/generic/issue_box.scss
app/assets/stylesheets/generic/lists.scss
app/assets/stylesheets/generic/nav.scss
app/assets/stylesheets/generic/selects.scss
app/assets/stylesheets/generic/typography.scss
app/assets/stylesheets/generic/ui_box.scss
app/assets/stylesheets/gitlab_bootstrap.scss
app/assets/stylesheets/gitlab_bootstrap/avatar.scss
@@ -151,7 +151,7 @@ gem &quot;jquery-rails&quot;,     &quot;2.1.3&quot;
 gem "jquery-ui-rails",  "2.0.2"
 gem "modernizr",        "2.6.2"
 gem "raphael-rails", "~> 2.1.2"
-gem 'bootstrap-sass', '~> 2.3'
+gem 'bootstrap-sass', '~> 3.0'
 gem "font-awesome-rails", '~> 3.2'
 gem "gemoji", "~> 1.3.0"
 gem "gon", git: "https://github.com/gitlabhq/gon.git", ref: '58ca8e17273051cb370182cabd3602d1da6783ab'
@@ -64,7 +64,7 @@ GEM
       erubis (>= 2.6.6)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (2.3.2.2)
+    bootstrap-sass (3.0.3.0)
       sass (~> 3.2)
     builder (3.1.4)
     capybara (2.1.0)
@@ -575,7 +575,7 @@ DEPENDENCIES
   awesome_print
   better_errors
   binding_of_caller
-  bootstrap-sass (~> 2.3)
+  bootstrap-sass (~> 3.0)
   capybara
   carrierwave
   chosen-rails (= 1.0.1)
@@ -3,7 +3,7 @@ $ -&gt;
     container = $(@).closest(".js-toggler-container")
     container.toggleClass("on")
-  
+
   $("body").on "click", ".js-toggle-visibility-link", (e) ->
     $(@).find('i').
       toggleClass('icon-chevron-down').
@@ -11,7 +11,7 @@ $ -&gt;
     container = $(".js-toggle-visibility-container")
     container.toggleClass("hide")
     e.preventDefault()
-  
+
   $("body").on "click", ".js-toggle-button", (e) ->
     $(@).closest(".js-toggle-container").find(".js-toggle-content").toggle()
     e.preventDefault()
@@ -9,36 +9,41 @@
  *= require_self
 */
+@import "main/variables.scss";
+@import "main/mixins.scss";
+@import "main/fonts.scss";
+
 /**
- * GitLab bootstrap:
+ * Customized Twitter bootstrap
  */
-@import "gitlab_bootstrap.scss";
+@import 'gl_bootstrap';
+/**
+ * Font icons
+ *
+ */
+@import "font-awesome";
+
+/**
+ * Generic css (forms, nav etc):
+ */
+@import "generic.scss";
+
+
+/**
+ * Unrefactored css
+ */
 @import "common.scss";
-@import "selects.scss";
-
-@import "sections/header.scss";
-@import "sections/nav.scss";
-@import "sections/commits.scss";
-@import "sections/issues.scss";
-@import "sections/projects.scss";
-@import "sections/snippets.scss";
-@import "sections/votes.scss";
-@import "sections/merge_requests.scss";
-@import "sections/graph.scss";
-@import "sections/events.scss";
-@import "sections/themes.scss";
-@import "sections/tree.scss";
-@import "sections/notes.scss";
-@import "sections/profile.scss";
-@import "sections/login.scss";
-@import "sections/editor.scss";
-@import "sections/admin.scss";
-@import "sections/wiki.scss";
-@import "sections/wall.scss";
-@import "sections/dashboard.scss";
-@import "sections/stat_graph.scss";
+
+/**
+ * Page specific styles (issues, projects etc):
+ */
+@import "sections.scss";
+
+/**
+ * Code ighlight
+ */
 @import "highlight/white.scss";
 @import "highlight/dark.scss";
 @import "highlight/solarized_dark.scss";
@@ -57,4 +62,3 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
-
@@ -119,18 +119,6 @@ p.time {
   margin: 30px 3px 3px 2px;
 }
-.search-holder {
-  label, input {
-     height: 30px;
-     padding: 0;
-     font-size: 14px;
-  }
-  label {
-    line-height: 30px;
-    color: #666;
-  }
-}
-
 .highlight {
   text-shadow: none;
 }
@@ -209,7 +197,7 @@ li.note {
 }
 .git_error_tips {
-  @extend .span6;
+  @extend .col-md-6;
   text-align: left;
   margin-top: 40px;
   pre {
@@ -395,3 +383,9 @@ table {
     font-weight: bolder;
   }
 }
+
+.side-filters {
+  fieldset {
+    margin-bottom: 15px;
+  }
+}
@@ -0,0 +1,12 @@
+@import "generic/avatar.scss";
+@import "generic/nav.scss";
+@import "generic/common.scss";
+@import "generic/typography.scss";
+@import "generic/buttons.scss";
+@import "generic/blocks.scss";
+@import "generic/ui_box.scss";
+@import "generic/issue_box.scss";
+@import "generic/files.scss";
+@import "generic/lists.scss";
+@import "generic/forms.scss";
+@import "generic/selects.scss";
@@ -0,0 +1,23 @@
+.avatar {
+  float: left;
+  margin-right: 12px;
+  width: 40px;
+  padding: 1px;
+  @include border-radius(4px);
+
+  &.avatar-inline {
+    float: none;
+    margin-left: 3px;
+
+    &.s16 { margin-right: 2px; }
+    &.s24 { margin-right: 2px; }
+  }
+
+  &.s16 { width: 16px; height: 16px; margin-right: 6px; }
+  &.s24 { width: 24px; height: 24px; margin-right: 8px; }
+  &.s26 { width: 26px; height: 26px; margin-right: 8px; }
+  &.s32 { width: 32px; height: 32px; margin-right: 10px; }
+  &.s60 { width: 60px; height: 60px; margin-right: 12px; }
+  &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s160 { width: 160px; height: 160px; margin-right: 20px; }
+}
@@ -0,0 +1,4 @@
+.light-well {
+  background: #f9f9f9;
+  padding: 15px;
+}
@@ -0,0 +1,158 @@
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: normal;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 6px 12px;
+  font-size: 13px;
+  line-height: 18px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  color: #444444;
+  background-color: #fff;
+  border-color: #ccc;
+  text-shadow: none;
+
+  &.hover,
+  &:hover {
+    color: #444444;
+    text-decoration: none;
+    background-color: #ebebeb;
+    border-color: #adadad;
+  }
+
+  &.focus,
+  &:focus {
+    color: #444444;
+    text-decoration: none;
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  &.active,
+  &:active {
+    outline: 0;
+    background-image: none;
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.65;
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  &.btn-primary {
+    color: #ffffff;
+    background-color: #429bca;
+    border-color: #358ebd;
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #3286b1;
+      border-color: #286e8e;
+    }
+  }
+
+  &.btn-success {
+    color: #ffffff;
+    background-color: #5cb85c;
+    border-color: #4cae4c;
+
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #47a447;
+      border-color: #398439;
+    }
+  }
+
+  &.btn-danger {
+    color: #ffffff;
+    background-color: #d9534f;
+    border-color: #d43f3a;
+
+
+    &.hover,
+    &:hover,
+    &.disabled,
+    &[disabled] {
+      color: #ffffff;
+      background-color: #d2322d;
+      border-color: #ac2925;
+    }
+  }
+
+  &.btn-new {
+    @extend .btn-success;
+  }
+
+  &.btn-create {
+    @extend .wide;
+    @extend .btn-success;
+  }
+
+  &.btn-save {
+    @extend .wide;
+    @extend .btn-primary;
+  }
+
+  &.btn-close,
+  &.btn-remove {
+    @extend .btn-danger;
+  }
+
+  &.btn-cancel {
+    float: right;
+  }
+
+  &.wide {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  &.btn-small {
+    padding: 2px 10px;
+    font-size: 12px;
+  }
+
+  &.btn-tiny {
+    font-size: 11px;
+    padding: 2px 6px;
+    line-height: 16px;
+    margin: 2px;
+  }
+
+  &.grouped {
+    margin-right: 7px;
+    float: left;
+  }
+
+  &.btn-block {
+    width: 100%;
+    margin: 0;
+    padding: 6px 0;
+    margin-bottom: 15px;
+  }
+}
@@ -0,0 +1,138 @@
+/** COLORS **/
+.cgray { color: gray }
+.clgray { color: #BBB }
+.cred { color: #D12F19 }
+.cgreen { color: #4a2 }
+.cblue { color: #29A }
+.cblack { color: #111 }
+.cdark { color: #444 }
+.camber { color: #ffc000 }
+.cwhite { color: #fff!important }
+.bgred { background: #F2DEDE!important }
+
+/** COMMON CLASSES **/
+.left { float:left }
+
+.prepend-top-10 { margin-top:10px }
+.prepend-top-20 { margin-top:20px }
+.prepend-left-10 { margin-left:10px }
+.prepend-left-20 { margin-left:20px }
+.append-right-10 { margin-right:10px }
+.append-right-20 { margin-right:20px }
+.append-bottom-10 { margin-bottom:10px }
+.append-bottom-15 { margin-bottom:15px }
+.append-bottom-20 { margin-bottom:20px }
+.inline { display: inline-block }
+
+.padded { padding:20px }
+.ipadded { padding:20px!important }
+.lborder { border-left:1px solid #eee }
+.underlined_link { text-decoration: underline; }
+.hint { font-style: italic; color: #999; }
+.light { color: #888 }
+.tiny { font-weight: normal }
+.vtop { vertical-align: top !important; }
+
+
+/** ALERT MESSAGES **/
+.alert.alert-disabled {
+  background: #EEE;
+  color: #777;
+  border-color: #DDD;
+}
+
+/** HELPERS **/
+.nothing_here_message {
+  text-align: center;
+  padding: 20px;
+  color: #666;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 36px;
+}
+
+.slead {
+  color: #666;
+  font-size: 14px;
+  margin-bottom: 12px;
+  font-weight: normal;
+  line-height: 24px;
+}
+
+
+.tab-content {
+  overflow: visible;
+}
+
+@media (max-width: 1200px) {
+  .only-wide {
+    display: none;
+  }
+}
+
+pre.well-pre {
+  border: 1px solid #EEE;
+  background: #f9f9f9;
+  border-radius: 0;
+  color: #555;
+}
+
+.input-append .btn.active, .input-prepend .btn.active {
+  background: #CCC;
+  border-color: #BBB;
+  text-shadow: 0 1px 1px #fff;
+  font-weight: bold;
+  @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
+}
+
+.label {
+  padding: 2px 4px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+
+  &.label-gray {
+    background-color: #eee;
+    color: #999;
+    text-shadow: none;
+  }
+
+  &.label-inverse {
+    background-color: #333333;
+  }
+}
+
+/** Big Labels **/
+.state-label {
+  font-size: 14px;
+  padding: 6px 25px;
+  text-align: center;
+  @include border-radius(4px);
+  text-shadow: none;
+  margin-left: 10px;
+
+  &.state-label-green {
+    background: #4A4;
+    color: #FFF;
+  }
+
+  &.state-label-red {
+    background: #DA4E49;
+    color: #FFF;
+  }
+}
+
+.dropdown-menu > li > a {
+  text-shadow: none;
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background: #29b;
+}
+
+.breadcrumb > li + li:before {
+  content: "/";
+  padding: 0;
+  color: #666;
+}
@@ -0,0 +1,218 @@
+/**
+ * File content holder
+ *
+ */
+.file-holder {
+  border: 1px solid #CCC;
+  margin-bottom: 1em;
+
+  table {
+    @extend .table;
+  }
+
+  .file-title {
+    background: #DDD;
+    border-bottom: 1px solid #CCC;
+    text-shadow: 0 1px 1px #fff;
+    margin: 0;
+    font-weight: normal;
+    font-weight: bold;
+    text-align: left;
+    color: $style_color;
+    padding: 9px 10px;
+
+    .options {
+      float: right;
+      margin-top: -5px;
+    }
+
+    .file_name {
+      color: $style_color;
+      font-size: 14px;
+      text-shadow: 0 1px 1px #fff;
+      small {
+        color: #999;
+        font-size: 13px;
+      }
+    }
+  }
+  .file-content {
+    background: #fff;
+    font-size: 11px;
+
+    &.image_file {
+      background: #eee;
+      text-align: center;
+      img {
+        padding: 100px;
+        max-width: 300px;
+      }
+    }
+
+    &.wiki {
+      padding: 20px;
+      font-size: 14px;
+      line-height: 1.6;
+
+      .highlight {
+        margin-bottom: 9px;
+        @include border-radius(4px);
+
+        > pre {
+          margin: 0;
+        }
+      }
+    }
+
+    &.blob_file {
+
+    }
+
+    &.blob-no-preview {
+      background: #eee;
+      text-shadow: 0 1px 2px #FFF;
+      padding: 100px 0;
+    }
+
+    /**
+     *  Blame file
+     */
+    &.blame {
+      table {
+        border: none;
+        box-shadow: none;
+        margin: 0;
+      }
+      tr {
+        border-bottom: 1px solid #eee;
+      }
+      td {
+        &:first-child {
+          border-left: none;
+        }
+        &:last-child {
+          border-right: none;
+        }
+        background: #fff;
+        padding: 5px;
+      }
+      .author,
+      .blame_commit {
+        background: #f5f5f5;
+        vertical-align: top;
+      }
+      .lines {
+        pre {
+          padding: 0;
+          margin: 0;
+          background: none;
+          border: none;
+        }
+      }
+    }
+
+    &.logs {
+      background: #eee;
+      max-height: 700px;
+      overflow-y: auto;
+
+      ol {
+        margin-left: 40px;
+        padding: 10px 0;
+        border-left: 1px solid #CCC;
+        margin-bottom: 0;
+        background: white;
+        li {
+          color: #888;
+          p {
+            margin: 0;
+            color: #333;
+            line-height: 24px;
+            padding-left: 10px;
+          }
+
+          &:hover {
+            background: $hover;
+          }
+        }
+      }
+    }
+
+    /**
+     *  Code file
+     */
+    &.code {
+      padding: 0;
+
+      table.lines {
+        border: none;
+        box-shadow: none;
+        margin: 0px;
+        padding: 0px;
+        table-layout: fixed;
+
+        pre {
+          border: none;
+          border-radius: 0;
+          font-family: $monospace_font;
+          font-size: 12px !important;
+          line-height: 16px !important;
+          margin: 0;
+          padding: 10px 0;
+        }
+        td {
+          border: none;
+          margin: 0;
+          padding: 0;
+          vertical-align: top;
+
+          &:first-child {
+            background: #eee;
+            width: 50px;
+          }
+          &:last-child {
+          }
+        }
+        tr:hover {
+          background: none;
+        }
+
+        pre.line_numbers {
+          color: #666;
+          padding: 10px 6px 10px 0;
+          text-align: right;
+          background: #EEE;
+
+          a {
+            color: #666;
+
+            i {
+              display: none;
+              font-size: 14px;
+              line-height: 14px;
+            }
+            &:hover i {
+              display: inherit;
+            }
+          }
+        }
+
+        .highlight {
+          border-left: 1px solid #DEE2E3;
+          overflow: auto;
+          overflow-y: hidden;
+
+          pre {
+            white-space: pre;
+            word-wrap: normal;
+
+            .line {
+              padding: 0 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
@@ -0,0 +1,39 @@
+input[type='search'].search-text-input {
+  background-image: url("icon-search.png");
+  background-repeat: no-repeat;
+  background-position: 10px;
+  padding-left: 25px;
+}
+
+input[type='text'].danger {
+  background: #F2DEDE!important;
+  border-color: #D66;
+  text-shadow: 0 1px 1px #fff
+}
+
+fieldset legend {
+  font-size: 16px;
+}
+
+.datetime-controls {
+  select {
+    width: 100px;
+  }
+}
+
+.form-actions {
+  padding: 17px 20px 18px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  background-color: whitesmoke;
+  border-top: 1px solid #e5e5e5;
+  padding-left: 17%;
+}
+
+label.control-label {
+  @extend .col-sm-2;
+}
+
+.inline-input-group {
+  width: 250px;
+}
@@ -0,0 +1,46 @@
+/**
+ * Issue box:
+ * Huge block (one per page) for storing title, descripion and other information.
+ * Used for Issue#show page, MergeRequest#show page etc
+ *
+ * CLasses:
+ *   .issue-box - Regular box
+ */
+
+.issue-box {
+  color: #666;
+  margin:20px 0;
+  background: #FAFAFA;
+  border: 1px solid #DDD;
+
+  .control-group {
+    margin-bottom: 0;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    margin: 0;
+    color: #444;
+  }
+
+  .context {
+    border: none;
+    background-color: #f5f5f5;
+    border: none;
+    border-top: 1px solid #eee;
+  }
+
+  .description {
+    border-top: 1px solid #eee;
+  }
+
+  .title, .context, .description {
+    padding: 15px;
+
+    .clearfix {
+      margin: 0;
+    }
+  }
+}
@@ -0,0 +1,97 @@
+/**
+ * Well styled list
+ *
+ */
+.well-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    padding: 10px;
+    min-height: 20px;
+    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+    &.disabled {
+      color: #888;
+    }
+
+    &.unstyled {
+      &:hover {
+        background: none;
+      }
+    }
+
+    &.smoke { background-color: #f5f5f5; }
+
+    &:hover {
+      background: $hover;
+      border-bottom: 1px solid #ADF;
+    }
+
+    &:last-child {
+      border-bottom: none;
+
+      &.bottom {
+        background: #f5f5f5;
+      }
+    }
+
+    .author { color: #999; }
+
+    p {
+      padding-top: 1px;
+      margin: 0;
+      color: #222;
+      img {
+        position: relative;
+        top: 3px;
+      }
+    }
+
+    .well-title {
+      font-size: 14px;
+      line-height: 18px;
+    }
+  }
+}
+
+ol, ul {
+  &.styled {
+    li {
+      padding: 2px;
+    }
+  }
+}
+
+/** light list with border-bottom between li **/
+ul.bordered-list {
+  margin: 5px 0px;
+  padding: 0px;
+  li {
+    padding: 5px 0;
+    border-bottom: 1px solid #EEE;
+    overflow: hidden;
+    display: block;
+    margin: 0px;
+    &:last-child { border:none }
+    &.active {
+      background: #f9f9f9;
+      a { font-weight: bold; }
+    }
+
+    &.light {
+      a { color: #777; }
+    }
+  }
+
+  &.top-list {
+    li:first-child {
+      padding-top: 0;
+      h4, h5 {
+        margin-top: 0;
+      }
+    }
+  }
+}
@@ -0,0 +1,91 @@
+/**
+ * nav-pills
+ *
+ */
+.nav-pills {
+  .active a {
+    background: $primary_color;
+  }
+
+  > li > a {
+    @include border-radius(0);
+  }
+
+  &.nav-stacked {
+    > li > a {
+      border-left: 4px solid #EEE;
+      padding: 12px;
+      color: #777;
+    }
+    > .active > a {
+      border-color: $primary_color;
+      background: none;
+      color: #333;
+      font-weight: bolder;
+    }
+
+    &.nav-stacked-menu {
+      li > a {
+        padding: 16px;
+      }
+    }
+  }
+
+  &.nav-pills-small {
+    > li > a {
+      padding: 8px 12px;
+      font-size: 12px;
+    }
+  }
+}
+
+.nav-pills > .active > a > i[class^="icon-"] { background: inherit; }
+
+
+
+/**
+ * nav-tabs
+ *
+ */
+.nav-tabs > li > a, .nav-pills > li > a { color: $style_color; }
+.nav.nav-tabs {
+  li {
+    > a {
+      padding: 8px 20px;
+      margin-right: 7px;
+      line-height: 20px;
+      border-color: #EEE;
+      color: #888;
+      border-bottom: 1px solid #ddd;
+      .badge {
+        background-color: #eee;
+        color: #888;
+        text-shadow: 0 1px 1px #fff;
+      }
+      i[class^="icon-"] {
+        line-height: 14px;
+      }
+    }
+    &.active {
+      > a {
+        border-color: #CCC;
+        border-bottom: 1px solid #fff;
+        color: #333;
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.nav-small-tabs > li > a { padding: 6px 9px; }
+}
+
+
+
+/**
+ * fix to keep tooltips position in top navigation bar
+ *
+ */
+.navbar .nav > li {
+  position: relative;
+  white-space: nowrap;
+}
@@ -0,0 +1,68 @@
+/** Chosen.js selectbox style override **/
+.chosen-container {
+  min-width: 100px;
+
+  .chosen-single {
+    height: 26px;
+    background: #EEE !important;
+    border: 1px solid #DDD !important;
+    @include box-shadow(none !important);
+    @include border-radius(4px !important);
+  }
+
+  .chosen-results li.highlighted {
+    background: #29b;
+  }
+
+  .chosen-drop {
+    margin-top: 10px;
+    border: 1px solid #DDD !important;
+    @include border-radius(4px !important);
+  }
+
+  .chosen-search input {
+    border: 1px solid #CCC !important;
+    @include box-shadow(none !important);
+  }
+}
+
+/** Select2 styling **/
+.select2-container .select2-choice {
+  @include bg-light-gray-gradient;
+}
+
+.select2-container .select2-choice div {
+  border: none;
+  background: none;
+}
+
+.select2-drop {
+  padding-top: 8px;
+}
+
+.select2-no-results, .select2-searching {
+  padding: 7px;
+  color: #666;
+}
+
+.chosen-container .chosen-single div b {
+  background-position-y: 0px !important;
+}
+
+.chosen-container .chosen-drop .chosen-search input {
+  background-position-y: -24px !important;
+}
+
+.chosen-compact {
+  max-width: 170px !important;
+}
+
+select {
+  &.chosen {
+    min-width: 200px;
+  }
+
+  &.chosen-sm {
+    min-width: 100px;
+  }
+}
@@ -0,0 +1,104 @@
+/**
+ * Headers
+ *
+ */
+h1.page-title {
+  @include page-title;
+  font-size: 28px;
+}
+
+h2.page-title {
+  @include page-title;
+  font-size: 24px;
+}
+
+h3.page-title {
+  @include page-title;
+}
+
+h6 {
+  color: #888;
+  text-transform: uppercase;
+}
+
+/** CODE **/
+pre {
+  font-family: $monospace_font;
+
+  &.dark {
+    background: #333;
+    color: #f5f5f5;
+  }
+}
+
+/**
+ * Links
+ *
+ */
+a {
+  outline: none;
+  color: $link_color;
+  &:hover {
+    text-decoration: none;
+    color: $primary_color;
+  }
+
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &.dark {
+    color: $style_color;
+  }
+
+  &.lined {
+    text-decoration: underline;
+    &:hover { text-decoration: underline; }
+  }
+
+  &.gray {
+    color: gray;
+  }
+
+  &.supp_diff_link {
+    text-align: center;
+    padding: 20px 0;
+    background: #f1f1f1;
+    width: 100%;
+    float: left;
+  }
+
+  &.neib  {
+    margin-right: 15px;
+  }
+}
+
+a:focus {
+  outline: none;
+}
+
+.monospace {
+  font-family: $monospace_font;
+}
+
+/**
+ * Wiki typography
+ *
+ */
+.wiki {
+  @include md-typography;
+
+  font-size: 14px;
+  line-height: 1.6;
+  .white .highlight pre {
+    background: #f5f5f5;
+  }
+  ul {
+    padding: 0;
+    margin: 0 0 9px 25px !important;
+  }
+}
+
+.md {
+  @include md-typography;
+}
@@ -0,0 +1,173 @@
+/**
+ * UI box:
+ * Block element for separating information on page.
+ * Used for storing issues lists, grouped data.
+ * You can have multiple ui boxes on one page
+ *
+ * Classes:
+ *   .ui-box   - for any block & widgets
+ *   .ui-box.ui-box-small - same but with smaller title
+ *   .ui-box.ui-box-danger - with red title
+ *
+ * Ex. 1: List
+ *   .ui-box
+ *     .title
+ *       # title here
+ *     %ul
+ *       # content here
+ *
+ * Ex. 2: Block data
+ *   .ui-box
+ *     .title
+ *       # title here
+ *     .body
+ *       # content here
+ *
+ */
+
+.ui-box {
+  background: #FFF;
+  margin-bottom: 20px;
+  border: 1px solid #DDD;
+  word-wrap: break-word;
+
+  img {
+    max-width: 100%;
+  }
+
+  pre {
+    code {
+      background: none !important;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .title {
+    background-color: #EEE;
+    border-bottom: 1px solid #DDD;
+    color: #666;
+    font-size: 16px;
+    text-shadow: 0 1px 1px #fff;
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 40px;
+    font-weight: normal;
+    margin: 0;
+
+    > a {
+      text-shadow: 0 1px 1px #fff;
+    }
+
+    form {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+
+    .btn {
+      vertical-align: middle;
+      padding: 4px 12px;
+      @include box-shadow(0 0px 1px 1px #f2f2f2);
+    }
+
+    .nav-pills {
+      > li {
+        > a {
+          padding: 13px;
+          margin: 0;
+          font-size: 13px;
+        }
+        &.active {
+          > a {
+            background: #D5D5D5;
+            color: $style_color;
+            @include border-radius(0);
+            border-radius: 0;
+            border-left: 1px solid #CCC;
+            border-right: 1px solid #CCC;
+          }
+        }
+      }
+    }
+  }
+
+  .body {
+    padding: 10px;
+  }
+
+  &.padded {
+    h5, .title {
+      margin: -20px;
+      margin-bottom: 0;
+      padding: 5px 20px;
+    }
+  }
+
+  .row_title {
+    font-weight: 500;
+    color: #444;
+    &:hover {
+      color: #444;
+      text-decoration: underline;
+    }
+  }
+
+  .form-holder {
+    padding-top: 20px;
+    form {
+      margin-bottom: 0;
+      legend {
+        text-indent: 10px;
+      }
+      .form-actions {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+/*
+ * Small box
+ */
+.ui-box.ui-box-small {
+  margin-bottom: 10px;
+
+  .title {
+    font-size: 13px;
+    line-height: 30px;
+
+    a {
+      color: #666;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+/*
+ * Danger box
+ */
+.ui-box.ui-box-danger {
+  background: #f7f7f7;
+  border: none;
+
+  .title {
+    background: #D65;
+    color: #fff;
+    text-shadow: none;
+    font-weight: 500;
+  }
+}
+
+/*
+ * Block under tw-bootstrap tabs
+ */
+.tab-pane {
+  .ui-box {
+    margin: 3px 3px 25px 3px;
+  }
+}
@@ -1,68 +0,0 @@
-/** Override bootstrap variables **/
-$baseFontSize: 13px !default;
-$baseLineHeight: 18px !default;
-
-/**
- * BOOTSTRAP
- */
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-@import "bootstrap/reset";
-@import "bootstrap/scaffolding";
-@import "bootstrap/grid";
-@import "bootstrap/layouts";
-@import "bootstrap/type";
-@import "bootstrap/code";
-@import "bootstrap/forms";
-@import "bootstrap/tables";
-@import "bootstrap/sprites";
-@import "bootstrap/dropdowns";
-@import "bootstrap/wells";
-@import "bootstrap/component-animations";
-@import "bootstrap/close";
-@import "bootstrap/button-groups";
-@import "bootstrap/alerts";
-@import "bootstrap/navs";
-@import "bootstrap/navbar";
-@import "bootstrap/breadcrumbs";
-@import "bootstrap/pagination";
-@import "bootstrap/pager";
-@import "bootstrap/modals";
-@import "bootstrap/tooltip";
-@import "bootstrap/popovers";
-@import "bootstrap/thumbnails";
-@import "bootstrap/media";
-@import "bootstrap/labels-badges";
-@import "bootstrap/progress-bars";
-@import "bootstrap/accordion";
-@import "bootstrap/carousel";
-@import "bootstrap/hero-unit";
-@import "bootstrap/utilities";
-@import "bootstrap/responsive-utilities";
-@import "bootstrap/responsive-1200px-min";
-
-/**
- * Font icons
- *
- */
-@import "font-awesome";
-
-/**
- * GitLab bootstrap.
- * Overrides some styles of twitter bootstrap.
- * Also give some common classes for GitLab app
- */
-@import "gitlab_bootstrap/variables.scss";
-@import "gitlab_bootstrap/fonts.scss";
-@import "gitlab_bootstrap/mixins.scss";
-@import "gitlab_bootstrap/avatar.scss";
-@import "gitlab_bootstrap/nav.scss";
-@import "gitlab_bootstrap/common.scss";
-@import "gitlab_bootstrap/typography.scss";
-@import "gitlab_bootstrap/buttons.scss";
-@import "gitlab_bootstrap/blocks.scss";
-@import "gitlab_bootstrap/ui_box.scss";
-@import "gitlab_bootstrap/issue_box.scss";
-@import "gitlab_bootstrap/files.scss";
-@import "gitlab_bootstrap/lists.scss";
-@import "gitlab_bootstrap/forms.scss";
@@ -1,23 +0,0 @@
-.avatar {
-  float: left;
-  margin-right: 12px;
-  width: 40px;
-  padding: 1px;
-  @include border-radius(4px);
-
-  &.avatar-inline {
-    float: none;
-    margin-left: 3px;
-
-    &.s16 { margin-right: 2px; }
-    &.s24 { margin-right: 2px; }
-  }
-
-  &.s16 { width: 16px; height: 16px; margin-right: 6px; }
-  &.s24 { width: 24px; height: 24px; margin-right: 8px; }
-  &.s26 { width: 26px; height: 26px; margin-right: 8px; }
-  &.s32 { width: 32px; height: 32px; margin-right: 10px; }
-  &.s60 { width: 60px; height: 60px; margin-right: 12px; }
-  &.s90 { width: 90px; height: 90px; margin-right: 15px; }
-  &.s160 { width: 160px; height: 160px; margin-right: 20px; }
-}
@@ -1,4 +0,0 @@
-.light-well {
-  background: #f9f9f9;
-  padding: 15px;
-}
@@ -1,158 +0,0 @@
-.btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 18px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  color: #444444;
-  background-color: #fff;
-  border-color: #ccc;
-  text-shadow: none;
-
-  &.hover,
-  &:hover {
-    color: #444444;
-    text-decoration: none;
-    background-color: #ebebeb;
-    border-color: #adadad;
-  }
-
-  &.focus,
-  &:focus {
-    color: #444444;
-    text-decoration: none;
-    outline: thin dotted #333;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-
-  &.active,
-  &:active {
-    outline: 0;
-    background-image: none;
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.65;
-    filter: alpha(opacity=65);
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-
-  &.btn-primary {
-    color: #ffffff;
-    background-color: #429bca;
-    border-color: #358ebd;
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-      background-color: #3286b1;
-      border-color: #286e8e;
-    }
-  }
-
-  &.btn-success {
-    color: #ffffff;
-    background-color: #5cb85c;
-    border-color: #4cae4c;
-
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-      background-color: #47a447;
-      border-color: #398439;
-    }
-  }
-
-  &.btn-danger {
-    color: #ffffff;
-    background-color: #d9534f;
-    border-color: #d43f3a;
-
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-      background-color: #d2322d;
-      border-color: #ac2925;
-    }
-  }
-
-  &.btn-new {
-    @extend .btn-success;
-  }
-
-  &.btn-create {
-    @extend .wide;
-    @extend .btn-success;
-  }
-
-  &.btn-save {
-    @extend .wide;
-    @extend .btn-primary;
-  }
-
-  &.btn-close,
-  &.btn-remove {
-    @extend .btn-danger;
-  }
-
-  &.btn-cancel {
-    float: right;
-  }
-
-  &.wide {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  &.btn-small {
-    padding: 2px 10px;
-    font-size: 12px;
-  }
-
-  &.btn-tiny {
-    font-size: 11px;
-    padding: 2px 6px;
-    line-height: 16px;
-    margin: 2px;
-  }
-
-  &.grouped {
-    margin-right: 7px;
-    float: left;
-  }
-
-  &.btn-block {
-    width: 100%;
-    margin: 0;
-    padding: 6px 0;
-    margin-bottom: 15px;
-  }
-}
@@ -1,133 +0,0 @@
-/** COLORS **/
-.cgray { color: gray }
-.clgray { color: #BBB }
-.cred { color: #D12F19 }
-.cgreen { color: #4a2 }
-.cblue { color: #29A }
-.cblack { color: #111 }
-.cdark { color: #444 }
-.camber { color: #ffc000 }
-.cwhite { color: #fff!important }
-.bgred { background: #F2DEDE!important }
-
-/** COMMON CLASSES **/
-.left { float:left }
-
-.prepend-top-10 { margin-top:10px }
-.prepend-top-20 { margin-top:20px }
-.prepend-left-10 { margin-left:10px }
-.prepend-left-20 { margin-left:20px }
-.append-right-10 { margin-right:10px }
-.append-right-20 { margin-right:20px }
-.append-bottom-10 { margin-bottom:10px }
-.append-bottom-20 { margin-bottom:20px }
-.inline { display: inline-block }
-
-.padded { padding:20px }
-.ipadded { padding:20px!important }
-.lborder { border-left:1px solid #eee }
-.underlined_link { text-decoration: underline; }
-.hint { font-style: italic; color: #999; }
-.light { color: #888 }
-.tiny { font-weight: normal }
-.vtop { vertical-align: top !important; }
-
-
-/** ALERT MESSAGES **/
-.alert.alert-disabled {
-  background: #EEE;
-  color: #777;
-  border-color: #DDD;
-}
-
-/** HELPERS **/
-.nothing_here_message {
-  text-align: center;
-  padding: 20px;
-  color: #666;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 36px;
-}
-
-.slead {
-  color: #666;
-  font-size: 14px;
-  margin-bottom: 12px;
-  font-weight: normal;
-  line-height: 24px;
-}
-
-
-.tab-content {
-  overflow: visible;
-}
-
-@media (max-width: 1200px) {
-  .only-wide {
-    display: none;
-  }
-}
-
-.pagination ul > li > a, .pagination ul > li >span {
-  @include linear-gradient(#f1f1f1, #e1e1e1);
-  color: #333;
-  text-shadow: 0 1px 1px #FFF;
-}
-
-pre.well-pre {
-  border: 1px solid #EEE;
-  background: #f9f9f9;
-  border-radius: 0;
-  color: #555;
-}
-
-.input-append .btn.active, .input-prepend .btn.active {
-  background: #CCC;
-  border-color: #BBB;
-  text-shadow: 0 1px 1px #fff;
-  font-weight: bold;
-  @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
-}
-
-.label {
-  padding: 2px 4px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-
-  &.label-gray {
-    background-color: #eee;
-    color: #999;
-    text-shadow: none;
-  }
-}
-
-/** Big Labels **/
-.state-label {
-  font-size: 14px;
-  padding: 6px 25px;
-  text-align: center;
-  @include border-radius(4px);
-  text-shadow: none;
-  margin-left: 10px;
-
-  &.state-label-green {
-    background: #4A4;
-    color: #FFF;
-  }
-
-  &.state-label-red {
-    background: #DA4E49;
-    color: #FFF;
-  }
-}
-
-.dropdown-menu > li > a {
-  text-shadow: none;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  background: #29b;
-}
@@ -1,219 +0,0 @@
-/**
- * File content holder
- *
- */
-.file-holder {
-  border: 1px solid #CCC;
-  margin-bottom: 1em;
-
-  table {
-    @extend .table;
-  }
-
-  .file-title {
-    background: #DDD;
-    border-bottom: 1px solid #CCC;
-    text-shadow: 0 1px 1px #fff;
-    margin: 0;
-    font-weight: normal;
-    font-weight: bold;
-    text-align: left;
-    color: $style_color;
-    padding: 9px 10px;
-    height: 18px;
-
-    .options {
-      float: right;
-      margin-top: -5px;
-    }
-
-    .file_name {
-      color: $style_color;
-      font-size: 14px;
-      text-shadow: 0 1px 1px #fff;
-      small {
-        color: #999;
-        font-size: 13px;
-      }
-    }
-  }
-  .file-content {
-    background: #fff;
-    font-size: 11px;
-
-    &.image_file {
-      background: #eee;
-      text-align: center;
-      img {
-        padding: 100px;
-        max-width: 300px;
-      }
-    }
-
-    &.wiki {
-      padding: 20px;
-      font-size: 14px;
-      line-height: 1.6;
-
-      .highlight {
-        margin-bottom: 9px;
-        @include border-radius(4px);
-
-        > pre {
-          margin: 0;
-        }
-      }
-    }
-
-    &.blob_file {
-
-    }
-
-    &.blob-no-preview {
-      background: #eee;
-      text-shadow: 0 1px 2px #FFF;
-      padding: 100px 0;
-    }
-
-    /**
-     *  Blame file
-     */
-    &.blame {
-      table {
-        border: none;
-        box-shadow: none;
-        margin: 0;
-      }
-      tr {
-        border-bottom: 1px solid #eee;
-      }
-      td {
-        &:first-child {
-          border-left: none;
-        }
-        &:last-child {
-          border-right: none;
-        }
-        background: #fff;
-        padding: 5px;
-      }
-      .author,
-      .blame_commit {
-        background: #f5f5f5;
-        vertical-align: top;
-      }
-      .lines {
-        pre {
-          padding: 0;
-          margin: 0;
-          background: none;
-          border: none;
-        }
-      }
-    }
-
-    &.logs {
-      background: #eee;
-      max-height: 700px;
-      overflow-y: auto;
-
-      ol {
-        margin-left: 40px;
-        padding: 10px 0;
-        border-left: 1px solid #CCC;
-        margin-bottom: 0;
-        background: white;
-        li {
-          color: #888;
-          p {
-            margin: 0;
-            color: #333;
-            line-height: 24px;
-            padding-left: 10px;
-          }
-
-          &:hover {
-            background: $hover;
-          }
-        }
-      }
-    }
-
-    /**
-     *  Code file
-     */
-    &.code {
-      padding: 0;
-
-      table.lines {
-        border: none;
-        box-shadow: none;
-        margin: 0px;
-        padding: 0px;
-        table-layout: fixed;
-
-        pre {
-          border: none;
-          border-radius: 0;
-          font-family: $monospace_font;
-          font-size: 12px !important;
-          line-height: 16px !important;
-          margin: 0;
-          padding: 10px 0;
-        }
-        td {
-          border: none;
-          margin: 0;
-          padding: 0;
-          vertical-align: top;
-
-          &:first-child {
-            background: #eee;
-            width: 50px;
-          }
-          &:last-child {
-          }
-        }
-        tr:hover {
-          background: none;
-        }
-
-        pre.line_numbers {
-          color: #666;
-          padding: 10px 6px 10px 0;
-          text-align: right;
-          background: #EEE;
-
-          a {
-            color: #666;
-
-            i {
-              display: none;
-              font-size: 14px;
-              line-height: 14px;
-            }
-            &:hover i {
-              display: inherit;
-            }
-          }
-        }
-
-        .highlight {
-          border-left: 1px solid #DEE2E3;
-          overflow: auto;
-          overflow-y: hidden;
-
-          pre {
-            white-space: pre;
-            word-wrap: normal;
-
-            .line {
-              padding: 0 10px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
@@ -1,2 +0,0 @@
-/** Typo **/
-$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
@@ -1,78 +0,0 @@
-form {
-  @extend .form-horizontal;
-
-  label {
-    @extend .control-label;
-
-    &.radio-label {
-      text-align: left;
-      width: 100%;
-      margin-left: 0;
-
-      input[type="radio"] {
-        margin-top: 1px !important;
-      }
-    }
-
-    &.list-label {
-      float: none;
-      padding: 0 !important;
-      margin: 0;
-      text-align: left;
-    }
-  }
-
-  &.form-tiny {
-    margin: 0;
-  }
-}
-
-input.input-xpadding,
-.add-on.input-xpadding {
-  padding: 6px 10px;
-}
-
-.control-group {
-  .control-label {
-    padding-top: 6px;
-  }
-  .controls {
-    input, textarea {
-      padding: 6px 10px;
-    }
-
-    input[type="radio"], input[type="checkbox"] {
-      margin-top: 6px;
-    }
-
-    .add-on {
-      padding: 6px;
-    }
-  }
-}
-
-input[type='search'].search-text-input {
-  background-image: url("icon-search.png");
-  background-repeat: no-repeat;
-  background-position: 10px;
-  padding-left: 25px;
-  @include border-radius(4px);
-  border: 1px solid #ccc;
-}
-
-input[type='text'].danger {
-  background: #F2DEDE!important;
-  border-color: #D66;
-  text-shadow: 0 1px 1px #fff
-}
-
-fieldset legend {
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-
-.datetime-controls {
-  select {
-    width: 100px;
-  }
-}
@@ -1,46 +0,0 @@
-/**
- * Issue box:
- * Huge block (one per page) for storing title, descripion and other information.
- * Used for Issue#show page, MergeRequest#show page etc
- *
- * CLasses:
- *   .issue-box - Regular box
- */
-
-.issue-box {
-  color: #666;
-  margin:20px 0;
-  background: #FAFAFA;
-  border: 1px solid #DDD;
-
-  .control-group {
-    margin-bottom: 0;
-  }
-
-  .title {
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 28px;
-    margin: 0;
-    color: #444;
-  }
-
-  .context {
-    border: none;
-    background-color: #f5f5f5;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-
-  .description {
-    border-top: 1px solid #eee;
-  }
-
-  .title, .context, .description {
-    padding: 15px;
-
-    .clearfix {
-      margin: 0;
-    }
-  }
-}
@@ -1,95 +0,0 @@
-/**
- * Well styled list
- *
- */
-.well-list {
-  margin: 0;
-  list-style: none;
-  li {
-    padding: 10px;
-    min-height: 20px;
-    border-bottom: 1px solid #eee;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-    &.disabled {
-      color: #888;
-    }
-
-    &.unstyled {
-      &:hover {
-        background: none;
-      }
-    }
-
-    &.smoke { background-color: #f5f5f5; }
-
-    &:hover {
-      background: $hover;
-      border-bottom: 1px solid #ADF;
-    }
-
-    &:last-child {
-      border-bottom: none;
-
-      &.bottom {
-        background: #f5f5f5;
-      }
-    }
-
-    .author { color: #999; }
-
-    p {
-      padding-top: 1px;
-      margin: 0;
-      color: #222;
-      img {
-        position: relative;
-        top: 3px;
-      }
-    }
-
-    .well-title {
-      font-size: 14px;
-      line-height: 18px;
-    }
-  }
-}
-
-ol, ul {
-  &.styled {
-    li {
-      padding: 2px;
-    }
-  }
-}
-
-/** light list with border-bottom between li **/
-ul.bordered-list {
-  margin: 5px 0px;
-  padding: 0px;
-  li {
-    padding: 5px 0;
-    border-bottom: 1px solid #EEE;
-    overflow: hidden;
-    display: block;
-    margin: 0px;
-    &:last-child { border:none }
-    &.active {
-      background: #f9f9f9;
-      a { font-weight: bold; }
-    }
-
-    &.light {
-      a { color: #777; }
-    }
-  }
-
-  &.top-list {
-    li:first-child {
-      padding-top: 0;
-      h4, h5 {
-        margin-top: 0;
-      }
-    }
-  }
-}
@@ -1,144 +0,0 @@
-/**
- * Generic mixins
- */
- @mixin box-shadow($shadow) {
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
-  -ms-box-shadow: $shadow;
-  -o-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-
-@mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -o-border-radius: $radius;
-  border-radius: $radius;
-}
-
-@mixin border-radius-left($radius) {
-  @include border-radius($radius 0 0 $radius)
-}
-
-@mixin linear-gradient($from, $to) {
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
-  background-image: -webkit-linear-gradient($from, $to);
-  background-image: -moz-linear-gradient($from, $to);
-  background-image: -ms-linear-gradient($from, $to);
-  background-image: -o-linear-gradient($from, $to);
-}
-
-@mixin transition($transition) {
-  -webkit-transition: $transition;
-  -moz-transition: $transition;
-  -ms-transition: $transition;
-  -o-transition: $transition;
-  transition: $transition;
-}
-
-/**
- * Prefilled mixins
- * Mixins with fixed values
- */
-@mixin bg-light-gray-gradient {
-  background: #f1f1f1;
-  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
-  background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
-  background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
-  background-image: -ms-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
-  background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
-}
-
-@mixin bg-gray-gradient {
-  background: #eee;
-  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
-  background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
-  background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
-  background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
-  background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-}
-
-@mixin bg-dark-gray-gradient {
-  background: #eee;
-  background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
-  background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
-  background-image: -ms-linear-gradient(#e9e9e9, #d7d7d7);
-  background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
-}
-
-@mixin shade {
-  @include box-shadow(0 0 3px #ddd);
-}
-
-@mixin solid-shade {
-  @include box-shadow(0 0 0 3px #f1f1f1);
-}
-
-@mixin header-font {
-  color: $style_color;
-  text-shadow: 0 1px 1px #FFF;
-  font-size: 16px;
-  line-height: 40px;
-  font-weight: normal;
-}
-
-@mixin md-typography {
-  *:first-child {
-    margin-top: 0;
-  }
-
-  code { padding: 0 4px; }
-
-  h1 {
-    margin-top: 45px;
-    font-size: 2.5em;
-  }
-
-  h2 {
-    margin-top: 40px;
-    font-size: 2em;
-  }
-
-  h3 {
-    margin-top: 35px;
-    font-size: 2em;
-  }
-
-  h4 {
-    margin-top: 30px;
-    font-size: 1.5em;
-  }
-
-  blockquote p {
-    color: #888;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  table {
-    @extend .table;
-    @extend .table-bordered;
-    th {
-      background: #EEE;
-    }
-  }
-
-  code {
-    font-size: inherit;
-    font-weight: inherit;
-    color: #555;
-  }
-
-  li {
-    line-height: 1.5;
-  }
-}
-
-@mixin page-title {
-  color: #333;
-  font-size: 20px;
-  line-height: 1.5;
-  margin-top: 0px;
-  margin-bottom: 15px;
-}
@@ -1,91 +0,0 @@
-/**
- * nav-pills
- *
- */
-.nav-pills {
-  .active a {
-    background: $primary_color;
-  }
-
-  > li > a {
-    @include border-radius(0);
-  }
-
-  &.nav-stacked {
-    > li > a {
-      border-left: 4px solid #EEE;
-      padding: 12px;
-      color: #777;
-    }
-    > .active > a {
-      border-color: $primary_color;
-      background: none;
-      color: #333;
-      font-weight: bolder;
-    }
-
-    &.nav-stacked-menu {
-      li > a {
-        padding: 16px;
-      }
-    }
-  }
-
-  &.nav-pills-small {
-    > li > a {
-      padding: 8px 12px;
-      font-size: 12px;
-    }
-  }
-}
-
-.nav-pills > .active > a > i[class^="icon-"] { background: inherit; }
-
-
-
-/**
- * nav-tabs
- *
- */
-.nav-tabs > li > a, .nav-pills > li > a { color: $style_color; }
-.nav.nav-tabs {
-  li {
-    > a {
-      padding: 8px 20px;
-      margin-right: 7px;
-      line-height: 20px;
-      border-color: #EEE;
-      color: #888;
-      border-bottom: 1px solid #ddd;
-      .badge {
-        background-color: #eee;
-        color: #888;
-        text-shadow: 0 1px 1px #fff;
-      }
-      i[class^="icon-"] {
-        line-height: 14px;
-      }
-    }
-    &.active {
-      > a {
-        border-color: #CCC;
-        border-bottom: 1px solid #fff;
-        color: #333;
-        font-weight: bold;
-      }
-    }
-  }
-
-  &.nav-small-tabs > li > a { padding: 6px 9px; }
-}
-
-
-
-/**
- * fix to keep tooltips position in top navigation bar
- *
- */
-.navbar .nav > li {
-  position: relative;
-  white-space: nowrap;
-}
@@ -1,108 +0,0 @@
-/**
- * Headers
- *
- */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
-  line-height: 1.1;
-}
-
-h1.page-title {
-  @include page-title;
-  font-size: 28px;
-}
-
-h2.page-title {
-  @include page-title;
-  font-size: 24px;
-}
-
-h3.page-title {
-  @include page-title;
-}
-
-h6 {
-  color: #888;
-  text-transform: uppercase;
-}
-
-/** CODE **/
-pre {
-  font-family: $monospace_font;
-
-  &.dark {
-    background: #333;
-    color: #f5f5f5;
-  }
-}
-
-/**
- * Links
- *
- */
-a {
-  outline: none;
-  color: $link_color;
-  &:hover {
-    text-decoration: none;
-    color: $primary_color;
-  }
-
-  &:focus {
-    text-decoration: underline;
-  }
-
-  &.dark {
-    color: $style_color;
-  }
-
-  &.lined {
-    text-decoration: underline;
-    &:hover { text-decoration: underline; }
-  }
-
-  &.gray {
-    color: gray;
-  }
-
-  &.supp_diff_link {
-    text-align: center;
-    padding: 20px 0;
-    background: #f1f1f1;
-    width: 100%;
-    float: left;
-  }
-
-  &.neib  {
-    margin-right: 15px;
-  }
-}
-
-a:focus {
-  outline: none;
-}
-
-.monospace {
-  font-family: $monospace_font;
-}
-
-/**
- * Wiki typography
- *
- */
-.wiki {
-  @include md-typography;
-
-  font-size: 14px;
-  line-height: 1.6;
-  .white .highlight pre {
-    background: #f5f5f5;
-  }
-  ul {
-    margin: 0 0 9px 25px !important;
-  }
-}
-
-.md {
-  @include md-typography;
-}
@@ -1,171 +0,0 @@
-/**
- * UI box:
- * Block element for separating information on page.
- * Used for storing issues lists, grouped data.
- * You can have multiple ui boxes on one page
- *
- * Classes:
- *   .ui-box   - for any block & widgets
- *   .ui-box.ui-box-small - same but with smaller title
- *   .ui-box.ui-box-danger - with red title
- *
- * Ex. 1: List
- *   .ui-box
- *     .title
- *       # title here
- *     %ul
- *       # content here
- *
- * Ex. 2: Block data
- *   .ui-box
- *     .title
- *       # title here
- *     .body
- *       # content here
- *
- */
-
-.ui-box {
-  background: #FFF;
-  margin-bottom: 20px;
-  border: 1px solid #DDD;
-  word-wrap: break-word;
-
-  img {
-    max-width: 100%;
-  }
-
-  pre {
-    code {
-      background: none !important;
-    }
-  }
-
-  ul {
-    margin: 0;
-  }
-
-  .title {
-    background-color: #EEE;
-    border-bottom: 1px solid #DDD;
-    color: #666;
-    font-size: 16px;
-    text-shadow: 0 1px 1px #fff;
-    padding: 0 10px;
-    font-size: 14px;
-    line-height: 40px;
-    font-weight: normal;
-    margin: 0;
-
-    > a {
-      text-shadow: 0 1px 1px #fff;
-    }
-
-    form {
-      margin-bottom: 0;
-      margin-top: 0;
-    }
-
-    .btn {
-      vertical-align: middle;
-      padding: 4px 12px;
-      @include box-shadow(0 0px 1px 1px #f2f2f2);
-    }
-
-    .nav-pills {
-      > li {
-        > a {
-          padding: 13px;
-          margin: 0;
-          font-size: 13px;
-        }
-        &.active {
-          > a {
-            background: #D5D5D5;
-            color: $style_color;
-            @include border-radius(0);
-            border-radius: 0;
-            border-left: 1px solid #CCC;
-            border-right: 1px solid #CCC;
-          }
-        }
-      }
-    }
-  }
-
-  .body {
-    padding: 10px;
-  }
-
-  &.padded {
-    h5, .title {
-      margin: -20px;
-      margin-bottom: 0;
-      padding: 5px 20px;
-    }
-  }
-
-  .row_title {
-    font-weight: 500;
-    color: #444;
-    &:hover {
-      color: #444;
-      text-decoration: underline;
-    }
-  }
-
-  .form-holder {
-    padding-top: 20px;
-    form {
-      margin-bottom: 0;
-      legend {
-        text-indent: 10px;
-      }
-      .form-actions {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
-/*
- * Small box
- */
-.ui-box.ui-box-small {
-  margin-bottom: 10px;
-
-  .title {
-    font-size: 13px;
-    line-height: 30px;
-
-    a {
-      color: #666;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-/*
- * Danger box
- */
-.ui-box.ui-box-danger {
-  background: #f7f7f7;
-  border: none;
-
-  .title {
-    background: #D65;
-    color: #fff;
-    text-shadow: 0 1px 1px #900;
-  }
-}
-
-/*
- * Block under tw-bootstrap tabs
- */
-.tab-pane {
-  .ui-box {
-    margin: 3px 3px 25px 3px;
-  }
-}
@@ -1,13 +0,0 @@
-/**
- * General Colors
- */
-$primary_color: #2FA0BB;
-$link_color: #3A89A3;
-$style_color: #474D57;
-$hover: #D9EDF7;
-
-/**
- * Commit Diff Colors
- */
-$added: #63c363;
-$deleted: #f77;
@@ -0,0 +1,76 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/list-group";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+.clearfix {
+  @include clearfix();
+}
+.center-block {
+  @include center-block();
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+.hide {
+  display: none;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  @include text-hide();
+}
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+.affix {
+  position: fixed;
+}
+
+@import "bootstrap/responsive-utilities";
@@ -0,0 +1,2 @@
+/** Typo **/
+$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace;
@@ -0,0 +1,148 @@
+/**
+ * Generic mixins
+ */
+ @mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  -ms-box-shadow: $shadow;
+  -o-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -o-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin border-radius-left($radius) {
+  @include border-radius($radius 0 0 $radius)
+}
+
+@mixin linear-gradient($from, $to) {
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
+  background-image: -webkit-linear-gradient($from, $to);
+  background-image: -moz-linear-gradient($from, $to);
+  background-image: -ms-linear-gradient($from, $to);
+  background-image: -o-linear-gradient($from, $to);
+}
+
+@mixin transition($transition) {
+  -webkit-transition: $transition;
+  -moz-transition: $transition;
+  -ms-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+/**
+ * Prefilled mixins
+ * Mixins with fixed values
+ */
+@mixin bg-light-gray-gradient {
+  background: #f1f1f1;
+  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
+  background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+  background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+  background-image: -ms-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+  background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+}
+
+@mixin bg-gray-gradient {
+  background: #eee;
+  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
+  background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
+  background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
+  background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
+  background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+}
+
+@mixin bg-dark-gray-gradient {
+  background: #eee;
+  background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7);
+  background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7);
+  background-image: -ms-linear-gradient(#e9e9e9, #d7d7d7);
+  background-image: -o-linear-gradient(#e9e9e9, #d7d7d7);
+}
+
+@mixin shade {
+  @include box-shadow(0 0 3px #ddd);
+}
+
+@mixin solid-shade {
+  @include box-shadow(0 0 0 3px #f1f1f1);
+}
+
+@mixin header-font {
+  color: $style_color;
+  text-shadow: 0 1px 1px #FFF;
+  font-size: 16px;
+  line-height: 44px;
+  font-weight: normal;
+}
+
+@mixin md-typography {
+  img {
+    max-width: 100%;
+  }
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  code { padding: 0 4px; }
+
+  h1 {
+    margin-top: 45px;
+    font-size: 2.5em;
+  }
+
+  h2 {
+    margin-top: 40px;
+    font-size: 2em;
+  }
+
+  h3 {
+    margin-top: 35px;
+    font-size: 2em;
+  }
+
+  h4 {
+    margin-top: 30px;
+    font-size: 1.5em;
+  }
+
+  blockquote p {
+    color: #888;
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  table {
+    @extend .table;
+    @extend .table-bordered;
+    th {
+      background: #EEE;
+    }
+  }
+
+  code {
+    font-size: inherit;
+    font-weight: inherit;
+    color: #555;
+  }
+
+  li {
+    line-height: 1.5;
+  }
+}
+
+@mixin page-title {
+  color: #333;
+  font-size: 20px;
+  line-height: 1.5;
+  margin-top: 0px;
+  margin-bottom: 15px;
+}
@@ -0,0 +1,16 @@
+/** Override bootstrap variables **/
+$font-size-base: 13px !default;
+
+/**
+ * General Colors
+ */
+$primary_color: #2FA0BB;
+$link_color: #3A89A3;
+$style_color: #474D57;
+$hover: #D9EDF7;
+
+/**
+ * Commit Diff Colors
+ */
+$added: #63c363;
+$deleted: #f77;
@@ -0,0 +1,21 @@
+@import "sections/header.scss";
+@import "sections/nav.scss";
+@import "sections/commits.scss";
+@import "sections/issues.scss";
+@import "sections/projects.scss";
+@import "sections/snippets.scss";
+@import "sections/votes.scss";
+@import "sections/merge_requests.scss";
+@import "sections/graph.scss";
+@import "sections/events.scss";
+@import "sections/themes.scss";
+@import "sections/tree.scss";
+@import "sections/notes.scss";
+@import "sections/profile.scss";
+@import "sections/login.scss";
+@import "sections/editor.scss";
+@import "sections/admin.scss";
+@import "sections/wiki.scss";
+@import "sections/wall.scss";
+@import "sections/dashboard.scss";
+@import "sections/stat_graph.scss";
@@ -80,7 +80,7 @@
       border-right: 1px solid #ccc;
       text-align: right;
       min-width: 35px;
-      max-width: 35px;
+      max-width: 50px;
       width: 35px;
       @include user-select(none);
       a {
@@ -399,8 +399,8 @@
 .commits-compare-switch{
   background: url("switch_icon.png") no-repeat center center;
-  width: 22px;
-  height: 22px;
+  width: 32px;
+  height: 32px;
   text-indent: -9999px;
   float: left;
   margin-right: 9px;
 .dashboard {
-  @extend .row;
-  .activities {
-  }
-
   .side {
-    @extend .pull-right;
-
     .ui-box {
       margin: 0px;
       box-shadow: none;
@@ -20,7 +14,7 @@
   .search-text-input {
     float:left;
-    @extend .span2;
+    @extend .col-md-2;
   }
   .btn {
     margin-left: 5px;
@@ -32,14 +26,15 @@
   .dash-filter {
     margin: 7px 0;
     padding: 4px 6px;
-    width: 202px;
+    width: 220px;
     float: left;
+    height: inherit;
   }
 }
 @media (max-width: 1200px) {
   .dashboard .dash-filter {
-    width: 132px;
+    width: 150px;
   }
 }
@@ -107,7 +102,6 @@
   padding: 8px 12px;
   border-radius: 50px;
   background: #f5f5f5;
-  width: 16px;
   text-align: center;
   i {
@@ -42,7 +42,7 @@
       line-height: 20px;
     }
     textarea {
-      @extend .span8;
+      @extend .col-md-8;
     }
   }
 }
@@ -75,6 +75,7 @@
         margin-top: 4px;
         margin-left: 0px;
         max-width: 200px;
+        float: none;
       }
       p:last-child {
@@ -147,7 +148,7 @@
       float: left;
       padding: 9px 6px;
       font-size: 18px;
-      width: 26px;
+      width: 40px;
       @include border-radius(3px);
     }
@@ -4,17 +4,24 @@
  */
 header {
   &.navbar-gitlab {
+    margin-bottom: 0;
+    min-height: 40px;
+
     .navbar-inner {
-      height: 40px;
-      padding: 3px;
       background: #F1F1F1;
+      border-bottom: 1px solid #DDD;
       filter: none;
       .nav > li > a {
         color: $style_color;
         text-shadow: 0 1px 0 #fff;
         font-size: 14px;
-        padding: 10px;
+        line-height: 32px;
+        padding: 6px 10px;
+
+        &:hover {
+          background: none;
+        }
       }
       /** NAV block with links and profile **/
@@ -35,9 +42,6 @@ header {
   .app_logo {
     float: left;
     margin-right: 9px;
-    position: relative;
-    top: -3px;
-    padding-top: 3px;
     a {
       float: left;
@@ -49,7 +53,7 @@ header {
         background: url('logo-black.png') no-repeat center center;
         background-size: 32px;
         float: left;
-        height: 40px;
+        height: 46px;
         width: 40px;
         @include header-font;
         text-indent: -9999px;
@@ -75,7 +79,7 @@ header {
   .profile-pic {
     position: relative;
-    top: -4px;
+    top: -1px;
     img {
       width: 26px;
       height: 26px;
@@ -91,21 +95,25 @@ header {
   .search {
     margin-right: 10px;
     margin-left: 10px;
+    margin-top: 8px;
+
+    form {
+      margin: 0;
+      padding: 0;
+    }
     .search-input {
-      @extend .span3;
       background-image: url("icon-search.png");
       background-repeat: no-repeat;
       background-position: 10px;
+      height: inherit;
+      padding: 4px 6px;
       padding-left: 25px;
       font-size: 13px;
       @include border-radius(3px);
       border: 1px solid #c6c6c6;
       box-shadow: none;
       @include transition(all 0.15s ease-in 0s);
-      &:focus {
-        @extend .span4;
-      }
     }
   }
@@ -181,12 +189,26 @@ header {
   .separator {
     float: left;
     height: 46px;
-    width: 1px;
+    width: 2px;
     background: white;
     border-left: 1px solid #DDD;
-    margin-top: -3px;
     margin-left: 10px;
     margin-right: 10px;
   }
 }
+.search .search-input {
+  width: 300px;
+  &:focus {
+    width: 400px;
+  }
+}
+
+@media (max-width: 1200px)  {
+  .search .search-input {
+    width: 200px;
+    &:focus {
+      width: 300px;
+    }
+  }
+}
 /* Login Page */
-body.login-page{
-  .container > .content {
-    padding-top: 20px;
+.login-page {
+  h1 {
+    font-size: 3em;
+    font-weight: 200;
   }
-}
-
-.login-box{
-  width: 304px;
-  position: relative;
-  @include border-radius(5px);
-  margin: auto;
-  padding: 20px;
-  background: white;
-}
-
-.login-box .login-logo{
-  margin: 10px 0 30px 0;
-  display: block;
-}
-
-.login-box input.text{background-color: #f1f1f1; font-size: 16px; @include border-radius(0); padding: 14px 10px; width: 280px}
-
-.login-box input.text.top{
-  @include border-radius(5px 5px 0 0);
-  margin-bottom: 0px;
-}
-.login-box input.text.bottom{
-  @include border-radius(0 0 5px 5px);
-  border-top: 0;
-  margin-bottom: 20px;
-}
-
-.login-box input.text.middle{
-  border-top: 0;
-  margin-bottom:0px;
-}
+  .login-box{
+    width: 304px;
+    position: relative;
+    @include border-radius(5px);
+    margin: auto;
+    padding: 20px;
+    background: white;
+  }
-.login-box a.forgot{float: right; padding-top: 6px}
+  .login-logo{
+    margin: 10px 0 30px 0;
+    display: block;
+  }
-.remember_me {
-  text-align: left;
+  .form-control {
+    background-color: #f1f1f1;
+    font-size: 16px;
+    padding: 14px 10px;
+    width: 280px;
+    height: auto;
+
+    &.top {
+      @include border-radius(5px 5px 0 0);
+      margin-bottom: 0px;
+    }
+
+    &.bottom {
+      @include border-radius(0 0 5px 5px);
+      border-top: 0;
+      margin-bottom: 20px;
+    }
+
+    &.middle {
+      border-top: 0;
+      margin-bottom:0px;
+      @include border-radius(0);
+    }
+  }
-  input {
-    margin: 2px;
+  .login-box a.forgot {
+    float: right;
+    padding-top: 6px
   }
-}
-.devise-errors {
-  h2 {
-   font-size: 14px;
-   color: #a00;
+  .devise-errors {
+    h2 {
+      font-size: 14px;
+      color: #a00;
+    }
   }
 }
@@ -15,29 +15,9 @@
     }
   }
-  .accept_group {
-    float: left;
-    border: 1px solid #ADA;
-    padding: 2px;
-    @include border-radius(5px);
-    background: #CEB;
-
-    .accept_merge_request {
-      font-size: 13px;
-      float: left;
-    }
-    .remove_branch_holder {
-      margin-left: 20px;
-      margin-right: 10px;
-      float: left;
-    }
-    label {
-      color: #444;
-      text-align: left
-    }
+  .accept-group {
   }
-
   .how_to_merge_link {
     @extend .primary;
   }
@@ -111,12 +91,8 @@
 .merge-request-angle {
   text-align: center;
   margin: 0 auto;
-  background: #eee;
-  border-radius: 100px;
-  width: 60px;
-  line-height: 60px;
-  color: #777;
-  text-shadow: 0 1px 2px #FFF;
+  font-size: 2em;
+  line-height: 1.1;
 }
 .merge-request-form-info {
@@ -129,7 +105,6 @@
   }
   .chosen-container .chosen-single {
-    padding: 2px 0 2px 10px;
     span {
       font-weight: bold;
       color: #555;
@@ -6,6 +6,7 @@
   border-bottom: 1px solid #E1E1E1;
   ul {
+    padding: 0;
     margin: auto;
     height: 40px;
     overflow: hidden;
@@ -2,7 +2,7 @@
  * Notes
  */
-@-webkit-keyframes target-note {
+@-webkit-keyframes targe3-note {
   from { background:#fffff0; }
   50% { background:#ffffd3; }
   to { background:#fffff0; }
@@ -119,9 +119,9 @@ ul.notes {
 }
 .file .notes_holder {
-  font-family: $sansFontFamily;
   font-size: 13px;
   line-height: 18px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   td {
     border: 1px solid #ddd;
@@ -138,7 +138,7 @@ ul.notes {
       border-left: 1px solid #ddd !important;
     }
     &.notes_content {
-      background-color: $white;
+      background-color: #fff;
       border-width: 1px 0;
       padding-top: 0;
@@ -303,7 +303,7 @@ ul.notes {
 }
 .note-image-attach {
-  @extend .span4;
+  @extend .col-md-4;
   @extend .thumbnail;
   margin-left: 45px;
 }
 .update-notifications {
-  margin-bottom: 0;
-  label {
-    margin-bottom: 0;
+  .radio-inline {
+    margin-right: 30px;
   }
 }
@@ -17,7 +16,7 @@
     legend {
       border: none;
-      margin: 0;
+      margin-bottom: 10px;
     }
   }
 }
@@ -52,13 +52,16 @@
   }
   .visibility-level-label {
-    font-size: 14px;
+    font-size: 17px;
     background: #f1f1f1;
-    padding: 8px 10px;
     border-radius: 4px;
-    margin-left: 10px;
     color: #888;
+    position: absolute;
+    margin-left: -55px;
     text-shadow: 0 1px 1px #FFF;
+    width: 40px;
+    text-align: center;
+    padding: 6px;
     i {
       color: inherit;
@@ -67,7 +70,7 @@
 }
 .git-clone-holder {
-  float: right;
+  margin-right: 45px;
   border: 1px solid #E1E1E1;
   @include border-radius(4px);
@@ -100,6 +103,11 @@
     cursor: auto;
     @extend .monospace;
     background: #FAFAFA;
+    width: 100%;
+  }
+
+  .protocol-clone {
+    overflow: hidden;
   }
 }
@@ -24,10 +24,10 @@
       th {
         font-weight: normal;
         font-size: 15px;
-        border-bottom: 1px solid #CCC;
+        border-bottom: 1px solid #CCC !important;
       }
       td {
-        border-color: #F1F1F1;
+        border-color: #F1F1F1 !important;
       }
       &:hover {
         td {
@@ -111,7 +111,7 @@
 .tree-ref-holder {
   float: left;
-  margin-top: 5px;
+  margin-top: 8px;
 }
 .readme-holder {
@@ -36,3 +36,8 @@
   display: inline-block;
   margin: 0 8px;
 }
+
+.votes-holder {
+  float: right;
+  width: 250px;
+}
 .wall-page {
   .wall-note-form {
-    @extend .span12;
+    @extend .col-md-12;
     margin: 0;
     height: 140px;
@@ -1,57 +0,0 @@
-/** Chosen.js selectbox style override **/
-.chosen-container {
-  min-width: 100px;
-
-  .chosen-single {
-    background: #EEE !important;
-    border: 1px solid #DDD !important;
-    @include box-shadow(none !important);
-    @include border-radius(4px !important);
-  }
-
-  .chosen-results li.highlighted {
-    background: #29b;
-  }
-
-  .chosen-drop {
-    margin-top: 10px;
-    border: 1px solid #DDD !important;
-    @include border-radius(4px !important);
-  }
-
-  .chosen-search input {
-    border: 1px solid #CCC !important;
-    @include box-shadow(none !important);
-  }
-}
-
-/** Select2 styling **/
-.select2-container .select2-choice {
-  @include bg-light-gray-gradient;
-}
-
-.select2-container .select2-choice div {
-  border: none;
-  background: none;
-}
-
-.select2-drop {
-  padding-top: 8px;
-}
-
-.select2-no-results, .select2-searching {
-  padding: 7px;
-  color: #666;
-}
-
-.chosen-container .chosen-single div b {
-  background-position-y: 0px !important;
-}
-
-.chosen-container .chosen-drop .chosen-search input {
-  background-position-y: -24px !important;
-}
-
-.chosen-compact {
-  max-width: 170px !important;
-}
@@ -8,33 +8,33 @@
 = form_for [:admin, @broadcast_message] do |f|
   -if @broadcast_message.errors.any?
-    .alert.alert-error
+    .alert.alert-danger
       - @broadcast_message.errors.full_messages.each do |msg|
         %p= msg
-  .control-group
+  .form-group
     = f.label :message
-    .controls
-      = f.text_area :message, class: "input-xxlarge", rows: 2, required: true
+    .col-sm-10
+      = f.text_area :message, class: "form-control", rows: 2, required: true
       %div
         = link_to '#', class: 'js-toggle-colors-link' do
           Customize colors
-  .control-group.js-toggle-colors-container.hide
+  .form-group.js-toggle-colors-container.hide
     = f.label :color, "Background Color"
-    .controls
+    .col-sm-10
       = f.text_field :color, placeholder: "#AA33EE"
       .light Hex values as 3 double digit numbers, starting with a # sign.
-  .control-group.js-toggle-colors-container.hide
+  .form-group.js-toggle-colors-container.hide
     = f.label :font, "Font Color"
-    .controls
+    .col-sm-10
       = f.text_field :font, placeholder: "#224466"
       .light Hex values as 3 double digit numbers, starting with a # sign.
-  .control-group
+  .form-group
     = f.label :starts_at
-    .controls.datetime-controls
+    .col-sm-10.datetime-controls
       = f.datetime_select :starts_at
-  .control-group
+  .form-group
     = f.label :ends_at
-    .controls.datetime-controls
+    .col-sm-10.datetime-controls
       = f.datetime_select :ends_at
   .form-actions
     = f.submit "Add broadcast message", class: "btn btn-create"
@@ -4,7 +4,7 @@
   You can manage projects, users and other GitLab data from here.
 %hr
 .admin_dash.row
-  .span4
+  .col-md-4
     .light-well
       %h4 Projects
       .data
@@ -12,7 +12,7 @@
           %h1= Project.count
         %hr
         = link_to 'New Project', new_project_path, class: "btn btn-new"
-  .span4
+  .col-md-4
     .light-well
       %h4 Users
       .data
@@ -20,7 +20,7 @@
           %h1= User.count
         %hr
         = link_to 'New User', new_admin_user_path, class: "btn btn-new"
-  .span4
+  .col-md-4
     .light-well
       %h4 Groups
       .data
@@ -30,7 +30,7 @@
         = link_to 'New Group', new_admin_group_path, class: "btn btn-new"
 .row.prepend-top-10
-  .span4
+  .col-md-4
     %h4 Latest projects
     %hr
     - @projects.each do |project|
@@ -39,7 +39,7 @@
         %span.light.pull-right
           #{time_ago_with_tooltip(project.created_at)}
-  .span4
+  .col-md-4
     %h4 Latest users
     %hr
     - @users.each do |user|
@@ -49,7 +49,7 @@
         %span.light.pull-right
           #{time_ago_with_tooltip(user.created_at)}
-  .span4
+  .col-md-4
     %h4 Latest groups
     %hr
     - @groups.each do |group|
@@ -61,7 +61,7 @@
 %br
 .row
-  .span4
+  .col-md-4
     %h4 Stats
     %hr
     %p
@@ -92,7 +92,7 @@
       Milestones
       %span.light.pull-right
         = Milestone.count
-  .span4
+  .col-md-4
     %h4
       Features
     %hr
@@ -112,7 +112,7 @@
       OmniAuth
       %span.light.pull-right
         = boolean_to_icon Gitlab.config.omniauth.enabled
-  .span4
+  .col-md-4
     %h4 Components
     %hr
     %p
@@ -2,24 +2,24 @@
 %hr
 = form_for [:admin, @group] do |f|
   - if @group.errors.any?
-    .alert.alert-error
+    .alert.alert-danger
       %span= @group.errors.full_messages.first
-  .control-group.group_name_holder
+  .form-group.group_name_holder
     = f.label :name do
       Group name
-    .controls
-      = f.text_field :name, placeholder: "Example Group", class: "input-xxlarge"
+    .col-sm-10
+      = f.text_field :name, placeholder: "Example Group", class: "form-control"
-  .control-group.group-description-holder
+  .form-group.group-description-holder
     = f.label :description, "Details"
-    .controls
-      = f.text_area :description, maxlength: 250, class: "input-xxlarge js-gfm-input", rows: 4
+    .col-sm-10
+      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
-  .control-group.group_name_holder
+  .form-group.group_name_holder
     = f.label :path do
       %span.cred Group path
-    .controls
-      = f.text_field :path, placeholder: "example-group", class: "input-xxlarge danger"
+    .col-sm-10
+      = f.text_field :path, placeholder: "example-group", class: "form-control danger"
       %ul.cred
         %li Changing group path can have unintended side effects.
         %li Renaming group path will rename directory for all related projects
@@ -2,17 +2,17 @@
 %hr
 = form_for [:admin, @group] do |f|
   - if @group.errors.any?
-    .alert.alert-error
+    .alert.alert-danger
       %span= @group.errors.full_messages.first
-  .control-group
+  .form-group
     = f.label :name do
       Group name
-    .controls
-      = f.text_field :name, placeholder: "Ex. OpenSource", class: "input-xxlarge left"
-  .control-group.group-description-holder
+    .col-sm-10
+      = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control left"
+  .form-group.group-description-holder
     = f.label :description, "Details"
-    .controls
-      = f.text_area :description, maxlength: 250, class: "input-xxlarge js-gfm-input", rows: 4
+    .col-sm-10
+      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
   .form-actions
     = f.submit 'Create group', class: "btn btn-create"
@@ -6,7 +6,7 @@
     Edit
 %hr
 .row
-  .span6
+  .col-md-6
     .ui-box
       .title
         Group info:
@@ -44,7 +44,7 @@
             %span.pull-right.light
               %span.monospace= project.path_with_namespace + ".git"
-  .span6
+  .col-md-6
     .ui-box
       .title
         Add user(s) to the group:
@@ -10,13 +10,13 @@
 = form_for @hook, as: :hook, url: admin_hooks_path, html: { class: 'form-inline' } do |f|
   -if @hook.errors.any?
-    .alert.alert-error
+    .alert.alert-danger
       - @hook.errors.full_messages.each do |msg|
         %p= msg
-  .control-group
+  .form-group
     = f.label :url, "URL:"
-    .controls
-      = f.text_field :url, class: "text_field input-xxlarge input-xpadding"
+    .col-sm-10
+      = f.text_field :url, class: "text_field form-control input-xpadding"
       &nbsp;
       = f.submit "Add System Hook", class: "btn btn-create"
 %hr
 .row
-  .span4
+  .col-md-4
     .admin-filter
       = form_tag admin_projects_path, method: :get, class: 'form-inline' do
-        .control-group
+        .form-group
           = label_tag :name, 'Name:', class: 'control-label'
-          .controls
+          .col-sm-10
             = text_field_tag :name, params[:name], class: "span2"
-        .control-group
+        .form-group
           = label_tag :owner_id, 'Owner:', class: 'control-label'
-          .controls
+          .col-sm-10
             = users_select_tag :owner_id, selected: params[:owner_id], class: 'input-large input-clamp'
-        .control-group.visibility-levels
+        .form-group.visibility-levels
           = label_tag :visibility_level, 'Visibility Levels', class: 'control-label'
           - Project.visibility_levels.each do |label, level|
-            .controls
+            .col-sm-10
               = check_box_tag 'visibility_levels[]', level, params[:visibility_levels].present? && params[:visibility_levels].include?(level.to_s)
               %span.descr
                 = visibility_level_icon(level)
                 = label
-        .control-group
+        .form-group
           = label_tag :with_push, 'Not empty', class: 'control-label'
-          .controls
+          .col-sm-10
             = check_box_tag :with_push, 1, params[:with_push]
             &nbsp;
             %span.light Projects with push events
-        .control-group
+        .form-group
           = label_tag :abandoned, 'Abandoned', class: 'control-label'
-          .controls
+          .col-sm-10
             = check_box_tag :abandoned, 1, params[:abandoned]
             &nbsp;
             %span.light No activity over 6 month
@@ -37,7 +37,7 @@
         .form-actions
           = submit_tag "Search", class: "btn submit btn-primary"
           = link_to "Reset", admin_projects_path, class: "btn"
-  .span8
+  .col-md-8
     .ui-box
       .title
         Projects (#{@projects.total_count})
@@ -5,7 +5,7 @@
     Edit
 %hr
 .row
-  .span6
+  .col-md-6
     .ui-box
       .title
         Project info:
@@ -80,16 +80,16 @@
         Transfer project
       .body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
-          .control-group
+          .form-group
             = f.label :namespace_id, "Namespace"
-            .controls
+            .col-sm-10
               = namespace_select_tag :namespace_id, selected: params[:namespace_id], class: 'input-large'
-          .control-group
-            .controls
+          .form-group
+            .col-sm-10
               = f.submit 'Transfer', class: 'btn btn-primary'
-  .span6
+  .col-md-6
     - if @group
       .ui-box
         .title
@@ -2,34 +2,34 @@
   = form_for [:admin, @user] do |f|
     -if @user.errors.any?
       #error_explanation
-        %ul.unstyled.alert.alert-error
+        %ul.unstyled.alert.alert-danger
           - @user.errors.full_messages.each do |msg|
             %li= msg
     %fieldset
       %legend Account
-      .control-group
+      .form-group
         = f.label :name
-        .controls
+        .col-sm-10
           = f.text_field :name, required: true, autocomplete: "off"
           %span.help-inline * required
-      .control-group
+      .form-group
         = f.label :username
-        .controls
+        .col-sm-10
           = f.text_field :username, required: true, autocomplete: "off"
           %span.help-inline * required
-      .control-group
+      .form-group
         = f.label :email
-        .controls
+        .col-sm-10
           = f.text_field :email, required: true, autocomplete: "off"
           %span.help-inline * required
     - if @user.new_record?
       %fieldset
         %legend Password
-        .control-group
+        .form-group
           = f.label :password
-          .controls
+          .col-sm-10
             %strong
               A temporary password will be generated and sent to user.
               %br
@@ -37,32 +37,32 @@
     - else
       %fieldset
         %legend Password
-        .control-group
+        .form-group
           = f.label :password
-          .controls= f.password_field :password, disabled: f.object.force_random_password
-        .control-group
+          .col-sm-10= f.password_field :password, disabled: f.object.force_random_password
+        .form-group
           = f.label :password_confirmation
-          .controls= f.password_field :password_confirmation, disabled: f.object.force_random_password
+          .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password
     %fieldset
       %legend Access
       .row
-        .span8
-          .control-group
+        .col-md-8
+          .form-group
             = f.label :projects_limit
-            .controls= f.number_field :projects_limit
+            .col-sm-10= f.number_field :projects_limit
-          .control-group
+          .form-group
             = f.label :can_create_group
-            .controls= f.check_box :can_create_group
+            .col-sm-10= f.check_box :can_create_group
-          .control-group
+          .form-group
             = f.label :admin do
               %strong.cred Administrator
-            .controls= f.check_box :admin
-        .span4
+            .col-sm-10= f.check_box :admin
+        .col-md-4
           - unless @user.new_record?
-            .alert.alert-error
+            .alert.alert-danger
               - if @user.blocked?
                 %p This user is blocked and is not able to login to GitLab
                 = link_to 'Unblock User', unblock_admin_user_path(@user), method: :put, class: "btn btn-small"
@@ -71,15 +71,15 @@
                 = link_to 'Block User', block_admin_user_path(@user), data: {confirm: 'USER WILL BE BLOCKED! Are you sure?'}, method: :put, class: "btn btn-small btn-remove"
     %fieldset
       %legend Profile
-      .control-group
+      .form-group
         = f.label :skype
-        .controls= f.text_field :skype
-      .control-group
+        .col-sm-10= f.text_field :skype
+      .form-group
         = f.label :linkedin
-        .controls= f.text_field :linkedin
-      .control-group
+        .col-sm-10= f.text_field :linkedin
+      .form-group
         = f.label :twitter
-        .controls= f.text_field :twitter
+        .col-sm-10= f.text_field :twitter
     .form-actions
       - if @user.new_record?
 .row
-  .span3
+  .col-md-3
     .admin-filter
       = form_tag admin_users_path, method: :get, class: 'form-inline' do
         = search_field_tag :name, params[:name], placeholder: 'Name, email or username', class: 'input-xpadding span2'
@@ -25,7 +25,7 @@
       %hr
       = link_to 'Reset', admin_users_path, class: "btn btn-cancel"
-  .span9
+  .col-md-9
     .ui-box
       .title
         Users (#{@users.total_count})
@@ -13,7 +13,7 @@
 %hr
 .row
-  .span6
+  .col-md-6
     .ui-box
       .title
         Account:
@@ -100,7 +100,7 @@
             %li Owned groups will be left
           = link_to 'Block user', block_admin_user_path(@user), data: { confirm: 'USER WILL BE BLOCKED! Are you sure?' }, method: :put, class: "btn btn-remove"
-      .alert.alert-error
+      .alert.alert-danger
         %h4
           Remove user
         %br
@@ -116,7 +116,7 @@
               %strong #{@user.solo_owned_groups.map(&:name).join(', ')}
         = link_to 'Remove user', [:admin, @user], data: { confirm: "USER #{@user.name} WILL BE REMOVED! Are you sure?" }, method: :delete, class: "btn btn-remove"
-  .span6
+  .col-md-6
     - if @user.users_groups.present?
       .ui-box
         .title Groups:
 .ui-box
   .title.clearfix
-    = search_field_tag :filter_group, nil, placeholder: 'Filter by name', class: 'dash-filter'
+    = search_field_tag :filter_group, nil, placeholder: 'Filter by name', class: 'dash-filter form-control'
     - if current_user.can_create_group?
       %span.pull-right
         = link_to new_group_path, class: "btn btn-new" do
 .ui-box
   .title.clearfix
-    = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'dash-filter'
+    = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'dash-filter form-control'
     - if current_user.can_create_project?
       %span.pull-right
         = link_to new_project_path, class: "btn btn-new" do
@@ -7,7 +7,7 @@
 %hr
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'issue'
-  .span9
+  .col-md-9
     = render 'shared/issues'
@@ -7,7 +7,7 @@
   List all merge requests from all project's you have access to.
 %hr
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'merge_request'
-  .span9
+  .col-md-9
     = render 'shared/merge_requests'
@@ -25,28 +25,29 @@
   All projects you have access to are listed here. Public projects are not included here unless you are a member
 %hr
 .row
-  .span3
-    %ul.nav.nav-pills.nav-stacked
-      = nav_tab :scope, nil do
-        = link_to projects_dashboard_filter_path(scope: nil) do
-          All
-          %span.pull-right
-            = current_user.authorized_projects.count
-      = nav_tab :scope, 'personal' do
-        = link_to projects_dashboard_filter_path(scope: 'personal') do
-          Personal
-          %span.pull-right
-            = current_user.personal_projects.count
-      = nav_tab :scope, 'joined' do
-        = link_to projects_dashboard_filter_path(scope: 'joined') do
-          Joined
-          %span.pull-right
-            = current_user.authorized_projects.joined(current_user).count
-      = nav_tab :scope, 'owned' do
-        = link_to projects_dashboard_filter_path(scope: 'owned') do
-          Owned
-          %span.pull-right
-            = current_user.owned_projects.count
+  .col-md-3.hidden-sm.hidden-xs.side-filters
+    %fieldset
+      %ul.nav.nav-pills.nav-stacked
+        = nav_tab :scope, nil do
+          = link_to projects_dashboard_filter_path(scope: nil) do
+            All
+            %span.pull-right
+              = current_user.authorized_projects.count
+        = nav_tab :scope, 'personal' do
+          = link_to projects_dashboard_filter_path(scope: 'personal') do
+            Personal
+            %span.pull-right
+              = current_user.personal_projects.count
+        = nav_tab :scope, 'joined' do
+          = link_to projects_dashboard_filter_path(scope: 'joined') do
+            Joined
+            %span.pull-right
+              = current_user.authorized_projects.joined(current_user).count
+        = nav_tab :scope, 'owned' do
+          = link_to projects_dashboard_filter_path(scope: 'owned') do
+            Owned
+            %span.pull-right
+              = current_user.owned_projects.count
     %fieldset
       %legend Visibility
@@ -81,7 +82,7 @@
                 %i.icon-tag
                 = label.name
-  .span9
+  .col-md-9
     %ul.bordered-list.my-projects.top-list
       - @projects.each do |project|
         %li.my-project-row
 - if @has_authorized_projects
-  .dashboard
-    .activities.span8
+  .dashboard.row
+    .activities.col-md-8
       = render 'activities'
-    .side.span4
+    .side.col-md-4.hidden-sm
       = render 'sidebar'
 - else
@@ -3,7 +3,7 @@
   = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
     .devise-errors
       = devise_error_messages!
-    = f.email_field :email, placeholder: 'Email', class: "text", required: true
+    = f.email_field :email, placeholder: 'Email', class: "form-control", required: true
     .clearfix.append-bottom-10
       = f.submit "Resend confirmation instructions", class: 'btn btn-success'
   %hr
@@ -4,9 +4,9 @@
     = devise_error_messages!
   = f.hidden_field :reset_password_token
   %div
-    = f.password_field :password, class: "text top", placeholder: "New password", required: true
+    = f.password_field :password, class: "form-control top", placeholder: "New password", required: true
   %div
-    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm new password", required: true
+    = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm new password", required: true
   %div
   .clearfix.append-bottom-10
     = f.submit "Change my password", class: "btn btn-primary"
@@ -2,7 +2,7 @@
   %h3.page-title Reset password
   .devise-errors
     = devise_error_messages!
-  = f.email_field :email, placeholder: "Email",  class: "text", required: true
+  = f.email_field :email, placeholder: "Email",  class: "form-control", required: true
   .clearfix.append-bottom-10
     = f.submit "Reset password", class: "btn-primary btn"
   %hr
@@ -3,15 +3,15 @@
   .devise-errors
     = devise_error_messages!
   %div
-    = f.text_field :name, class: "text top", placeholder: "Name", required: true
+    = f.text_field :name, class: "form-control top", placeholder: "Name", required: true
   %div
-    = f.text_field :username, class: "text middle", placeholder: "Username", required: true
+    = f.text_field :username, class: "form-control middle", placeholder: "Username", required: true
   %div
-    = f.email_field :email, class: "text middle", placeholder: "Email", required: true
+    = f.email_field :email, class: "form-control middle", placeholder: "Email", required: true
   %div
-    = f.password_field :password, class: "text middle", placeholder: "Password", required: true
+    = f.password_field :password, class: "form-control middle", placeholder: "Password", required: true
   %div
-    = f.password_field :password_confirmation, class: "text bottom", placeholder: "Confirm password", required: true
+    = f.password_field :password_confirmation, class: "form-control bottom", placeholder: "Confirm password", required: true
   %div
     = f.submit "Sign up", class: "btn-create btn"
   %hr
 = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
-  = f.text_field :login, class: "text top", placeholder: "Username or Email", autofocus: "autofocus"
-  = f.password_field :password, class: "text bottom", placeholder: "Password"
+  = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus"
+  = f.password_field :password, class: "form-control bottom", placeholder: "Password"
   - if devise_mapping.rememberable?
     .clearfix.append-bottom-10
       %label.checkbox.remember_me{for: "user_remember_me"}
 = form_tag(user_omniauth_callback_path(:ldap), id: 'new_ldap_user' ) do
-  = text_field_tag :username, nil, {class: "text top", placeholder: "LDAP Login", autofocus: "autofocus"}
-  = password_field_tag :password, nil, {class: "text bottom", placeholder: "Password"}
+  = text_field_tag :username, nil, {class: "form-control top", placeholder: "LDAP Login", autofocus: "autofocus"}
+  = password_field_tag :password, nil, {class: "form-control bottom", placeholder: "Password"}
   %br/
   = submit_tag "LDAP Sign in", class: "btn-create btn"
 .login-box
   %h3.page-title Sign in
   - if ldap_enabled?
-    %ul.nav.nav-tabs
+    %ul.nav.nav-tabs.append-bottom-20
       %li.active
         = link_to 'LDAP', '#tab-ldap', 'data-toggle' => 'tab'
       %li
@@ -6,14 +6,14 @@
       group
     %p 1. Choose users you want in the group
-    .control-group
+    .form-group
       = f.label :user_ids, "People"
-      .controls= users_select_tag(:user_ids, multiple: true, class: 'input-large')
+      .col-sm-10= users_select_tag(:user_ids, multiple: true, class: 'input-large')
     %p 2. Set access level for them
-    .control-group
+    .form-group
       = f.label :group_access, "Group Access"
-      .controls= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select chosen"
+      .col-sm-10= select_tag :group_access, options_for_select(UsersGroup.group_access_roles, @users_group.group_access), class: "project-access-select chosen"
     .form-actions
       = f.submit 'Add users into group', class: "btn btn-create"
 .row
-  .span2
+  .col-md-2
     %ul.nav.nav-pills.nav-stacked.nav-stacked-menu
       %li.active
         = link_to '#tab-edit', 'data-toggle' => 'tab' do
@@ -12,7 +12,7 @@
       %li
         = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
-  .span10
+  .col-md-10
     .tab-content
       .tab-pane.active#tab-edit
         .ui-box
@@ -22,18 +22,18 @@
           %div.form-holder
             = form_for @group do |f|
               - if @group.errors.any?
-                .alert.alert-error
+                .alert.alert-danger
                   %span= @group.errors.full_messages.first
-              .control-group
+              .form-group
                 = f.label :name do
                   Group name
-                .controls
-                  = f.text_field :name, placeholder: "Ex. OpenSource", class: "input-xxlarge left"
+                .col-sm-10
+                  = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control left"
-              .control-group.group-description-holder
+              .form-group.group-description-holder
                 = f.label :description, "Details"
-                .controls
-                  = f.text_area :description, maxlength: 250, class: "input-xxlarge js-gfm-input", rows: 4
+                .col-sm-10
+                  = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
               .form-actions
                 = f.submit 'Save group', class: "btn btn-save"
@@ -9,7 +9,7 @@
 %hr
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'issue'
-  .span9
+  .col-md-9
     = render 'shared/issues'
@@ -8,7 +8,7 @@
   group. To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 %hr
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'merge_request'
-  .span9
+  .col-md-9
     = render 'shared/merge_requests'
 = form_for @group do |f|
   - if @group.errors.any?
-    .alert.alert-error
+    .alert.alert-danger
       %span= @group.errors.full_messages.first
-  .control-group
+  .form-group
     = f.label :name do
       Group name
-    .controls
-      = f.text_field :name, placeholder: "Ex. OpenSource", class: "input-xxlarge left"
+    .col-sm-10
+      = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control left"
-  .control-group.group-description-holder
+  .form-group.group-description-holder
     = f.label :description, "Details"
-    .controls
-      = f.text_area :description, maxlength: 250, class: "input-xxlarge js-gfm-input", rows: 4
+    .col-sm-10
+      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
-  .control-group
-    .controls
+  .form-group
+    .col-sm-10
       %ul
         %li A group is a collection of several projects
         %li Groups are private by default
 .dashboard
-  .activities.span8
+  .activities.col-md-8
     = render "events/event_last_push", event: @last_push
     = link_to dashboard_path, class: 'btn btn-tiny' do
       &larr; To dashboard
@@ -12,7 +12,7 @@
     - else
       %p.nothing_here_message Project activity will be displayed here
     .loading.hide
-  .side.span4
+  .side.col-md-4
     - if @group.description.present?
       .description-block
         = @group.description
 .row
-  .span3
+  .col-md-3
     .append-bottom-20
       = link_to help_path, class: 'btn btn-small' do
         %i.icon-angle-left
@@ -9,5 +9,5 @@
         %li{class: file == @category ? 'active' : nil}
           = link_to file.titleize, help_api_file_path(file)
-  .span9.pull-right
+  .col-md-9.pull-right
     = yield
 .row
-  .span3{:"data-spy" => 'affix'}
+  .col-md-3{:"data-spy" => 'affix'}
     %h3.page-title Help
     %ul.nav.nav-pills.nav-stacked
       - links = {:"Workflow" => help_workflow_path, :"SSH Keys" => help_ssh_path, :"GitLab Markdown" => help_markdown_path, :"Permissions" => help_permissions_path, :"API" => help_api_path, :"Web Hooks" => help_web_hooks_path, :"Rake Tasks" => help_raketasks_path, :"System Hooks" => help_system_hooks_path, :"Public Access" => help_public_access_path, :"Security" => help_security_path}
@@ -7,5 +7,5 @@
         %li{class: current_page?(path) ? 'active' : nil}
           = link_to title, path
-  .span9.pull-right
+  .col-md-9.pull-right
     = yield
 #modal-shortcuts.modal.hide
-  .modal-header
-    %a.close{href: "#", "data-dismiss" => "modal"} ×
-    %h3 Keyboard Shortcuts
-  .modal-body
-    %h5 Global Shortcuts
-    %p
-      %span.label.label-inverse s
-      &ndash;
-      Focus Search
-    %p
-      %span.label.label-inverse ?
-      &ndash;
-      Show this dialog
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %h3 Keyboard Shortcuts
+      .modal-body
+        %h5 Global Shortcuts
+        %p
+          %span.label.label-inverse s
+          &ndash;
+          Focus Search
+        %p
+          %span.label.label-inverse ?
+          &ndash;
+          Show this dialog
-    %h5 Project Files browsing
-    %p
-      %span.label.label-inverse
-        %i.icon-arrow-up
-      &ndash;
-      Move selection up
-    %p
-      %span.label.label-inverse
-        %i.icon-arrow-down
-      &ndash;
-      Move selection down
-    %p
-      %span.label.label-inverse Enter
-      &ndash;
-      Open selection
+        %h5 Project Files browsing
+        %p
+          %span.label.label-inverse
+            %i.icon-arrow-up
+          &ndash;
+          Move selection up
+        %p
+          %span.label.label-inverse
+            %i.icon-arrow-down
+          &ndash;
+          Move selection down
+        %p
+          %span.label.label-inverse Enter
+          &ndash;
+          Open selection
-.hero-unit
+.jumbotron
   %h2
     GitLab
     %span= Gitlab::VERSION
@@ -11,7 +11,7 @@
     Read more about GitLab at #{link_to "gitlab.org", "http://gitlab.org/", target: "_blank"}.
 .row
-  .span4
+  .col-md-4
     .ui-box
       .title
         Quick help
@@ -35,7 +35,7 @@
           Browse our
           = link_to "issue tracker", "https://github.com/gitlabhq/gitlabhq/issues"
-  .span4
+  .col-md-4
     .ui-box
       .title
         User documentation
@@ -64,7 +64,7 @@
           %strong= link_to "Web Hooks", help_web_hooks_path
           %p Let GitLab notify you when new code has been pushed to your project.
-  .span4
+  .col-md-4
     .ui-box
       .title
         Admin documentation
@@ -6,8 +6,8 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  %div.pagination
-    %ul
+  %div.gl-pagination
+    %ul.pagination
       = prev_page_tag unless current_page.first?
       - each_page do |page|
         - if page.left_outer? || page.right_outer? || page.inside_window?
@@ -8,6 +8,8 @@
   = javascript_include_tag "application"
   = csrf_meta_tags
   = include_gon
+  :erb
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   = render 'layouts/google_analytics' if extra_config.has_key?('google_analytics_id')
@@ -7,34 +7,36 @@
           %h1 GITLAB
         %span.separator
       %h1.project_name= title
-      %ul.nav
-        %li
-          %a
-            %div.hide.turbolink-spinner
-              %i.icon-refresh.icon-spin
-              Loading...
-        %li
-          = render "layouts/search"
-        %li
-          = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
-            %i.icon-globe
-        %li
-          = link_to user_snippets_path(current_user), title: "My snippets", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
-            %i.icon-paste
-        - if current_user.is_admin?
+
+      .navbar-collapse.collapse
+        %ul.nav.navbar-nav
           %li
-            = link_to admin_root_path, title: "Admin area", class: 'has_bottom_tooltip', 'data-original-title' => 'Admin area' do
-              %i.icon-cogs
-        - if current_user.can_create_project?
+            %a
+              %div.hide.turbolink-spinner
+                %i.icon-refresh.icon-spin
+                Loading...
+          %li.hidden-sm
+            = render "layouts/search"
           %li
-            = link_to new_project_path, title: "New project", class: 'has_bottom_tooltip', 'data-original-title' => 'New project'  do
-              %i.icon-plus
-        %li
-          = link_to profile_path, title: "Profile settings", class: 'has_bottom_tooltip', 'data-original-title' => 'Profile settings"'  do
-            %i.icon-user
-        %li
-          = link_to destroy_user_session_path, class: "logout", method: :delete, title: "Logout", class: 'has_bottom_tooltip', 'data-original-title' => 'Logout'  do
-            %i.icon-signout
-        %li
-          = link_to current_user, class: "profile-pic", id: 'profile-pic' do
-            = image_tag avatar_icon(current_user.email, 26), alt: 'User activity'
+            = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
+              %i.icon-globe
+          %li
+            = link_to user_snippets_path(current_user), title: "My snippets", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do
+              %i.icon-paste
+          - if current_user.is_admin?
+            %li
+              = link_to admin_root_path, title: "Admin area", class: 'has_bottom_tooltip', 'data-original-title' => 'Admin area' do
+                %i.icon-cogs
+          - if current_user.can_create_project?
+            %li
+              = link_to new_project_path, title: "New project", class: 'has_bottom_tooltip', 'data-original-title' => 'New project'  do
+                %i.icon-plus
+          %li
+            = link_to profile_path, title: "Profile settings", class: 'has_bottom_tooltip', 'data-original-title' => 'Profile settings"'  do
+              %i.icon-user
+          %li
+            = link_to destroy_user_session_path, class: "logout", method: :delete, title: "Logout", class: 'has_bottom_tooltip', 'data-original-title' => 'Logout'  do
+              %i.icon-signout
+          %li
+            = link_to current_user, class: "profile-pic", id: 'profile-pic' do
+              = image_tag avatar_icon(current_user.email, 26), alt: 'User activity'
@@ -15,7 +15,7 @@
     .container
       .content
         .row
-          .span2
+          .col-md-2
             = render "projects/settings_nav"
-          .span10
+          .col-md-10
             = yield
@@ -23,8 +23,9 @@
           %p.cgray
             - if current_user.private_token
-              = text_field_tag "token", current_user.private_token, class: "input-xlarge input-xpadding pull-left"
-              = f.submit 'Reset', data: { confirm: "Are you sure?" }, class: "btn btn-primary btn-build-token prepend-left-10"
+              = text_field_tag "token", current_user.private_token, class: "form-control"
+              %div
+                = f.submit 'Reset', data: { confirm: "Are you sure?" }, class: "btn btn-primary btn-build-token"
             - else
               %span You don`t have one yet. Click generate to fix it.
               = f.submit 'Generate', class: "btn success btn-build-token"
@@ -47,7 +48,7 @@
         %p
           Changing your username will change path to all personal projects!
         %div
-          = f.text_field :username, required: true, class: 'input-xlarge input-xpadding'
+          = f.text_field :username, required: true, class: 'form-control'
           &nbsp;
           %span.loading-gif.hide= image_tag "ajax_loader.gif"
         %p.light
 %div
-  = form_for [:profile, @key] do |f|
+  = form_for [:profile, @key], html: { class: 'form-horizontal' } do |f|
     - if @key.errors.any?
-      .alert.alert-error
+      .alert.alert-danger
         %ul
           - @key.errors.full_messages.each do |msg|
             %li= msg
-    .control-group
-      = f.label :title
-      .controls= f.text_field :title, class: "input-xlarge"
-    .control-group
-      = f.label :key
-      .controls
-        %p.light
-          Paste your public key here. Read more about how to generate a key on #{link_to "the SSH help page", help_ssh_path}.
-        = f.text_area :key, class: "input-xxlarge thin_area"
+    .form-group
+      = f.label :title, class: 'control-label'
+      .col-sm-10= f.text_field :title, class: "form-control"
+    .form-group
+      = f.label :key, class: 'control-label'
+      .col-sm-10
+        = f.text_area :key, class: "form-control", rows: 8
     .form-actions
 %h3.page-title Add an SSH Key
+%p.light
+  Paste your public key here. Read more about how to generate a key on #{link_to "the SSH help page", help_ssh_path}.
 %hr
 = render 'form'
 .row
-  .span4
+  .col-md-4
     .ui-box
       .title
         SSH Key
@@ -11,7 +11,7 @@
           %span.light Created on:
           %strong= @key.created_at.stamp("Aug 21, 2011")
-  .span8
+  .col-md-8
     %p
       %span.light Fingerprint:
       %strong= @key.fingerprint
 %li
   .row
-    .span4
+    .col-md-4
       %span
         = notification_icon(notification)
@@ -8,24 +8,24 @@
           = link_to membership.group.name, membership.group
         - else
           = link_to_project(membership.project)
-    .span7
+    .col-md-7
       = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
         = hidden_field_tag :notification_type, type, id: dom_id(membership, 'notification_type')
         = hidden_field_tag :notification_id, membership.id, id: dom_id(membership, 'notification_id')
-        = label_tag do
+        = label_tag nil, class: 'radio-inline' do
           = radio_button_tag :notification_level, Notification::N_GLOBAL, notification.global?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
           %span Use global setting
-        = label_tag do
+        = label_tag nil, class: 'radio-inline' do
           = radio_button_tag :notification_level, Notification::N_DISABLED, notification.disabled?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
           %span Disabled
-        = label_tag do
+        = label_tag nil, class: 'radio-inline' do
           = radio_button_tag :notification_level, Notification::N_PARTICIPATING, notification.participating?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
           %span Participating
-        = label_tag do
+        = label_tag nil, class: 'radio-inline' do
           = radio_button_tag :notification_level, Notification::N_WATCH, notification.watch?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
           %span Watch
@@ -18,23 +18,23 @@
     &ndash; You will receive all notifications from projects in which you participate
 .row
-  .span4
+  .col-md-4
     %h4
       = notification_icon(@notification)
       Global setting
-  .span7
+  .col-md-7
     = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
       = hidden_field_tag :notification_type, 'global'
-      = label_tag do
+      = label_tag nil, class: 'radio-inline' do
         = radio_button_tag :notification_level, Notification::N_DISABLED, @notification.disabled?, class: 'trigger-submit'
         %span Disabled
-      = label_tag do
+      = label_tag nil, class: 'radio-inline' do
         = radio_button_tag :notification_level, Notification::N_PARTICIPATING, @notification.participating?, class: 'trigger-submit'
         %span Participating
-      = label_tag do
+      = label_tag nil, class: 'radio-inline' do
         = radio_button_tag :notification_level, Notification::N_WATCH, @notification.watch?, class: 'trigger-submit'
         %span Watch
@@ -3,30 +3,30 @@
   Change your password or recover your current one.
 %hr
 .update-password
-  = form_for @user, url: profile_password_path, method: :put do |f|
+  = form_for @user, url: profile_password_path, method: :put, html: { class: 'form-horizontal' }  do |f|
     %div
       %p.slead
         You must provide current password in order to change it.
         %br
         After a successful password update you will be redirected to login page where you should login with your new password
       -if @user.errors.any?
-        .alert.alert-error
+        .alert.alert-danger
           %ul
             - @user.errors.full_messages.each do |msg|
               %li= msg
-      .control-group
-        = f.label :current_password
-        .controls
-          = f.password_field :current_password, required: true
+      .form-group
+        = f.label :current_password, class: 'control-label'
+        .col-sm-10
+          = f.password_field :current_password, required: true, class: 'form-control'
           %div
             = link_to "Forgot your password?", reset_profile_password_path, method: :put
-      .control-group
-        = f.label :password, 'New password'
-        .controls= f.password_field :password, required: true
-      .control-group
-        = f.label :password_confirmation
-        .controls
-          = f.password_field :password_confirmation, required: true
+      .form-group
+        = f.label :password, 'New password', class: 'control-label'
+        .col-sm-10= f.password_field :password, required: true, class: 'form-control'
+      .form-group
+        = f.label :password_confirmation, class: 'control-label'
+        .col-sm-10
+          = f.password_field :password_confirmation, required: true, class: 'form-control'
       .form-actions
         = f.submit 'Save password', class: "btn btn-save"
@@ -5,18 +5,18 @@
       %br
       After successful password update you will be redirected to login screen
     -if @user.errors.any?
-      .alert.alert-error
+      .alert.alert-danger
         %ul
           - @user.errors.full_messages.each do |msg|
             %li= msg
-    .control-group
+    .form-group
       = f.label :password
-      .controls= f.password_field :password, required: true
-    .control-group
+      .col-sm-10= f.password_field :password, required: true
+    .form-group
       = f.label :password_confirmation
-      .controls
+      .col-sm-10
         = f.password_field :password_confirmation, required: true
-    .control-group
-      .controls
+    .form-group
+      .col-sm-10
         = f.submit 'Set new password', class: "btn btn-create"
@@ -10,49 +10,49 @@
 = form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }, authenticity_token: true do |f|
   -if @user.errors.any?
-    %div.alert.alert-error
+    %div.alert.alert-danger
       %ul
         - @user.errors.full_messages.each do |msg|
           %li= msg
   .row
-    .span7
-      .control-group
+    .col-md-7
+      .form-group
         = f.label :name, class: "control-label"
-        .controls
-          = f.text_field :name, class: "input-xlarge", required: true
+        .col-sm-10
+          = f.text_field :name, class: "form-control", required: true
           %span.help-block Enter your name, so people you know can recognize you.
-      .control-group
+      .form-group
         = f.label :email, class: "control-label"
-        .controls
+        .col-sm-10
           - if @user.ldap_user?
-            = f.text_field :email, class: "input-xlarge", required: true, readonly: true
+            = f.text_field :email, class: "form-control", required: true, readonly: true
             %span.help-block.light
               Email is read-only for LDAP user
           - else
-            = f.text_field :email, class: "input-xlarge", required: true
+            = f.text_field :email, class: "form-control", required: true
             - if @user.unconfirmed_email.present?
               %span.help-block
                 We sent confirmation email to
                 %strong #{@user.unconfirmed_email}
             - else
               %span.help-block We also use email for avatar detection if no avatar is uploaded.
-      .control-group
+      .form-group
         = f.label :skype, class: "control-label"
-        .controls= f.text_field :skype, class: "input-xlarge"
-      .control-group
+        .col-sm-10= f.text_field :skype, class: "form-control"
+      .form-group
         = f.label :linkedin, class: "control-label"
-        .controls= f.text_field :linkedin, class: "input-xlarge"
-      .control-group
+        .col-sm-10= f.text_field :linkedin, class: "form-control"
+      .form-group
         = f.label :twitter, class: "control-label"
-        .controls= f.text_field :twitter, class: "input-xlarge"
-      .control-group
+        .col-sm-10= f.text_field :twitter, class: "form-control"
+      .form-group
         = f.label :bio, class: "control-label"
-        .controls
-          = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
+        .col-sm-10
+          = f.text_area :bio, rows: 6, class: "form-control", maxlength: 250
           %span.help-block Tell us about yourself in fewer than 250 characters.
-    .span5.pull-right
+    .col-md-5
       .light-well
         = image_tag avatar_icon(@user.email, 160), alt: '', class: 'avatar s160'
@@ -73,7 +73,7 @@
               %span Choose File ...
             &nbsp;
             %span.file_name.js-avatar-filename File name...
-            = f.file_field :avatar, class: "js-user-avatar-input hide"
+            = f.file_field :avatar, class: "js-user-avatar-input hidden"
             .light The maximum file size allowed is 100KB.
             - if @user.avatar?
               %hr
	@@ -151,7 +151,7 @@ gem "jquery-rails", "2.1.3"		@@ -151,7 +151,7 @@ gem "jquery-rails", "2.1.3"
151	gem "jquery-ui-rails", "2.0.2"	151	gem "jquery-ui-rails", "2.0.2"
152	gem "modernizr", "2.6.2"	152	gem "modernizr", "2.6.2"
153	gem "raphael-rails", "~> 2.1.2"	153	gem "raphael-rails", "~> 2.1.2"
154	-gem 'bootstrap-sass', '~> 2.3'	154	+gem 'bootstrap-sass', '~> 3.0'
155	gem "font-awesome-rails", '~> 3.2'	155	gem "font-awesome-rails", '~> 3.2'
156	gem "gemoji", "~> 1.3.0"	156	gem "gemoji", "~> 1.3.0"
157	gem "gon", git: "https://github.com/gitlabhq/gon.git", ref: '58ca8e17273051cb370182cabd3602d1da6783ab'	157	gem "gon", git: "https://github.com/gitlabhq/gon.git", ref: '58ca8e17273051cb370182cabd3602d1da6783ab'
	@@ -64,7 +64,7 @@ GEM		@@ -64,7 +64,7 @@ GEM
64	erubis (>= 2.6.6)	64	erubis (>= 2.6.6)
65	binding_of_caller (0.7.2)	65	binding_of_caller (0.7.2)
66	debug_inspector (>= 0.0.1)	66	debug_inspector (>= 0.0.1)
67	- bootstrap-sass (2.3.2.2)	67	+ bootstrap-sass (3.0.3.0)
68	sass (~> 3.2)	68	sass (~> 3.2)
69	builder (3.1.4)	69	builder (3.1.4)
70	capybara (2.1.0)	70	capybara (2.1.0)
	@@ -575,7 +575,7 @@ DEPENDENCIES		@@ -575,7 +575,7 @@ DEPENDENCIES
575	awesome_print	575	awesome_print
576	better_errors	576	better_errors
577	binding_of_caller	577	binding_of_caller
578	- bootstrap-sass (~> 2.3)	578	+ bootstrap-sass (~> 3.0)
579	capybara	579	capybara
580	carrierwave	580	carrierwave
581	chosen-rails (= 1.0.1)	581	chosen-rails (= 1.0.1)
	@@ -3,7 +3,7 @@ $ ->		@@ -3,7 +3,7 @@ $ ->
3	container = $(@).closest(".js-toggler-container")	3	container = $(@).closest(".js-toggler-container")
4		4
5	container.toggleClass("on")	5	container.toggleClass("on")
6	-	6	+
7	$("body").on "click", ".js-toggle-visibility-link", (e) ->	7	$("body").on "click", ".js-toggle-visibility-link", (e) ->
8	$(@).find('i').	8	$(@).find('i').
9	toggleClass('icon-chevron-down').	9	toggleClass('icon-chevron-down').
	@@ -11,7 +11,7 @@ $ ->		@@ -11,7 +11,7 @@ $ ->
11	container = $(".js-toggle-visibility-container")	11	container = $(".js-toggle-visibility-container")
12	container.toggleClass("hide")	12	container.toggleClass("hide")
13	e.preventDefault()	13	e.preventDefault()
14	-	14	+
15	$("body").on "click", ".js-toggle-button", (e) ->	15	$("body").on "click", ".js-toggle-button", (e) ->
16	$(@).closest(".js-toggle-container").find(".js-toggle-content").toggle()	16	$(@).closest(".js-toggle-container").find(".js-toggle-content").toggle()
17	e.preventDefault()	17	e.preventDefault()
@@ -0,0 +1,12 @@		@@ -0,0 +1,12 @@
	1	+@import "generic/avatar.scss";
	2	+@import "generic/nav.scss";
	3	+@import "generic/common.scss";
	4	+@import "generic/typography.scss";
	5	+@import "generic/buttons.scss";
	6	+@import "generic/blocks.scss";
	7	+@import "generic/ui_box.scss";
	8	+@import "generic/issue_box.scss";
	9	+@import "generic/files.scss";
	10	+@import "generic/lists.scss";
	11	+@import "generic/forms.scss";
	12	+@import "generic/selects.scss";
@@ -0,0 +1,23 @@		@@ -0,0 +1,23 @@
	1	+.avatar {
	2	+ float: left;
	3	+ margin-right: 12px;
	4	+ width: 40px;
	5	+ padding: 1px;
	6	+ @include border-radius(4px);
	7	+
	8	+ &.avatar-inline {
	9	+ float: none;
	10	+ margin-left: 3px;
	11	+
	12	+ &.s16 { margin-right: 2px; }
	13	+ &.s24 { margin-right: 2px; }
	14	+ }
	15	+
	16	+ &.s16 { width: 16px; height: 16px; margin-right: 6px; }
	17	+ &.s24 { width: 24px; height: 24px; margin-right: 8px; }
	18	+ &.s26 { width: 26px; height: 26px; margin-right: 8px; }
	19	+ &.s32 { width: 32px; height: 32px; margin-right: 10px; }
	20	+ &.s60 { width: 60px; height: 60px; margin-right: 12px; }
	21	+ &.s90 { width: 90px; height: 90px; margin-right: 15px; }
	22	+ &.s160 { width: 160px; height: 160px; margin-right: 20px; }
	23	+}
@@ -0,0 +1,4 @@		@@ -0,0 +1,4 @@
	1	+.light-well {
	2	+ background: #f9f9f9;
	3	+ padding: 15px;
	4	+}
@@ -0,0 +1,158 @@		@@ -0,0 +1,158 @@
	1	+.btn {
	2	+ display: inline-block;
	3	+ margin-bottom: 0;
	4	+ font-weight: normal;
	5	+ text-align: center;
	6	+ vertical-align: middle;
	7	+ cursor: pointer;
	8	+ background-image: none;
	9	+ border: 1px solid transparent;
	10	+ white-space: nowrap;
	11	+ padding: 6px 12px;
	12	+ font-size: 13px;
	13	+ line-height: 18px;
	14	+ border-radius: 4px;
	15	+ -webkit-user-select: none;
	16	+ -moz-user-select: none;
	17	+ -ms-user-select: none;
	18	+ -o-user-select: none;
	19	+ user-select: none;
	20	+ color: #444444;
	21	+ background-color: #fff;
	22	+ border-color: #ccc;
	23	+ text-shadow: none;
	24	+
	25	+ &.hover,
	26	+ &:hover {
	27	+ color: #444444;
	28	+ text-decoration: none;
	29	+ background-color: #ebebeb;
	30	+ border-color: #adadad;
	31	+ }
	32	+
	33	+ &.focus,
	34	+ &:focus {
	35	+ color: #444444;
	36	+ text-decoration: none;
	37	+ outline: thin dotted #333;
	38	+ outline: 5px auto -webkit-focus-ring-color;
	39	+ outline-offset: -2px;
	40	+ }
	41	+
	42	+ &.active,
	43	+ &:active {
	44	+ outline: 0;
	45	+ background-image: none;
	46	+ -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	47	+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	48	+ }
	49	+
	50	+ &.disabled,
	51	+ &[disabled] {
	52	+ cursor: not-allowed;
	53	+ pointer-events: none;
	54	+ opacity: 0.65;
	55	+ filter: alpha(opacity=65);
	56	+ -webkit-box-shadow: none;
	57	+ box-shadow: none;
	58	+ }
	59	+
	60	+ &.btn-primary {
	61	+ color: #ffffff;
	62	+ background-color: #429bca;
	63	+ border-color: #358ebd;
	64	+
	65	+ &.hover,
	66	+ &:hover,
	67	+ &.disabled,
	68	+ &[disabled] {
	69	+ color: #ffffff;
	70	+ background-color: #3286b1;
	71	+ border-color: #286e8e;
	72	+ }
	73	+ }
	74	+
	75	+ &.btn-success {
	76	+ color: #ffffff;
	77	+ background-color: #5cb85c;
	78	+ border-color: #4cae4c;
	79	+
	80	+
	81	+ &.hover,
	82	+ &:hover,
	83	+ &.disabled,
	84	+ &[disabled] {
	85	+ color: #ffffff;
	86	+ background-color: #47a447;
	87	+ border-color: #398439;
	88	+ }
	89	+ }
	90	+
	91	+ &.btn-danger {
	92	+ color: #ffffff;
	93	+ background-color: #d9534f;
	94	+ border-color: #d43f3a;
	95	+
	96	+
	97	+ &.hover,
	98	+ &:hover,
	99	+ &.disabled,
	100	+ &[disabled] {
	101	+ color: #ffffff;
	102	+ background-color: #d2322d;
	103	+ border-color: #ac2925;
	104	+ }
	105	+ }
	106	+
	107	+ &.btn-new {
	108	+ @extend .btn-success;
	109	+ }
	110	+
	111	+ &.btn-create {
	112	+ @extend .wide;
	113	+ @extend .btn-success;
	114	+ }
	115	+
	116	+ &.btn-save {
	117	+ @extend .wide;
	118	+ @extend .btn-primary;
	119	+ }
	120	+
	121	+ &.btn-close,
	122	+ &.btn-remove {
	123	+ @extend .btn-danger;
	124	+ }
	125	+
	126	+ &.btn-cancel {
	127	+ float: right;
	128	+ }
	129	+
	130	+ &.wide {
	131	+ padding-left: 20px;
	132	+ padding-right: 20px;
	133	+ }
	134	+
	135	+ &.btn-small {
	136	+ padding: 2px 10px;
	137	+ font-size: 12px;
	138	+ }
	139	+
	140	+ &.btn-tiny {
	141	+ font-size: 11px;
	142	+ padding: 2px 6px;
	143	+ line-height: 16px;
	144	+ margin: 2px;
	145	+ }
	146	+
	147	+ &.grouped {
	148	+ margin-right: 7px;
	149	+ float: left;
	150	+ }
	151	+
	152	+ &.btn-block {
	153	+ width: 100%;
	154	+ margin: 0;
	155	+ padding: 6px 0;
	156	+ margin-bottom: 15px;
	157	+ }
	158	+}
@@ -0,0 +1,138 @@		@@ -0,0 +1,138 @@
	1	+/ COLORS /
	2	+.cgray { color: gray }
	3	+.clgray { color: #BBB }
	4	+.cred { color: #D12F19 }
	5	+.cgreen { color: #4a2 }
	6	+.cblue { color: #29A }
	7	+.cblack { color: #111 }
	8	+.cdark { color: #444 }
	9	+.camber { color: #ffc000 }
	10	+.cwhite { color: #fff!important }
	11	+.bgred { background: #F2DEDE!important }
	12	+
	13	+/ COMMON CLASSES /
	14	+.left { float:left }
	15	+
	16	+.prepend-top-10 { margin-top:10px }
	17	+.prepend-top-20 { margin-top:20px }
	18	+.prepend-left-10 { margin-left:10px }
	19	+.prepend-left-20 { margin-left:20px }
	20	+.append-right-10 { margin-right:10px }
	21	+.append-right-20 { margin-right:20px }
	22	+.append-bottom-10 { margin-bottom:10px }
	23	+.append-bottom-15 { margin-bottom:15px }
	24	+.append-bottom-20 { margin-bottom:20px }
	25	+.inline { display: inline-block }
	26	+
	27	+.padded { padding:20px }
	28	+.ipadded { padding:20px!important }
	29	+.lborder { border-left:1px solid #eee }
	30	+.underlined_link { text-decoration: underline; }
	31	+.hint { font-style: italic; color: #999; }
	32	+.light { color: #888 }
	33	+.tiny { font-weight: normal }
	34	+.vtop { vertical-align: top !important; }
	35	+
	36	+
	37	+/ ALERT MESSAGES /
	38	+.alert.alert-disabled {
	39	+ background: #EEE;
	40	+ color: #777;
	41	+ border-color: #DDD;
	42	+}
	43	+
	44	+/ HELPERS /
	45	+.nothing_here_message {
	46	+ text-align: center;
	47	+ padding: 20px;
	48	+ color: #666;
	49	+ font-weight: normal;
	50	+ font-size: 16px;
	51	+ line-height: 36px;
	52	+}
	53	+
	54	+.slead {
	55	+ color: #666;
	56	+ font-size: 14px;
	57	+ margin-bottom: 12px;
	58	+ font-weight: normal;
	59	+ line-height: 24px;
	60	+}
	61	+
	62	+
	63	+.tab-content {
	64	+ overflow: visible;
	65	+}
	66	+
	67	+@media (max-width: 1200px) {
	68	+ .only-wide {
	69	+ display: none;
	70	+ }
	71	+}
	72	+
	73	+pre.well-pre {
	74	+ border: 1px solid #EEE;
	75	+ background: #f9f9f9;
	76	+ border-radius: 0;
	77	+ color: #555;
	78	+}
	79	+
	80	+.input-append .btn.active, .input-prepend .btn.active {
	81	+ background: #CCC;
	82	+ border-color: #BBB;
	83	+ text-shadow: 0 1px 1px #fff;
	84	+ font-weight: bold;
	85	+ @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
	86	+}
	87	+
	88	+.label {
	89	+ padding: 2px 4px;
	90	+ font-size: 12px;
	91	+ font-style: normal;
	92	+ font-weight: normal;
	93	+
	94	+ &.label-gray {
	95	+ background-color: #eee;
	96	+ color: #999;
	97	+ text-shadow: none;
	98	+ }
	99	+
	100	+ &.label-inverse {
	101	+ background-color: #333333;
	102	+ }
	103	+}
	104	+
	105	+/ Big Labels /
	106	+.state-label {
	107	+ font-size: 14px;
	108	+ padding: 6px 25px;
	109	+ text-align: center;
	110	+ @include border-radius(4px);
	111	+ text-shadow: none;
	112	+ margin-left: 10px;
	113	+
	114	+ &.state-label-green {
	115	+ background: #4A4;
	116	+ color: #FFF;
	117	+ }
	118	+
	119	+ &.state-label-red {
	120	+ background: #DA4E49;
	121	+ color: #FFF;
	122	+ }
	123	+}
	124	+
	125	+.dropdown-menu > li > a {
	126	+ text-shadow: none;
	127	+}
	128	+
	129	+.dropdown-menu > li > a:hover,
	130	+.dropdown-menu > li > a:focus {
	131	+ background: #29b;
	132	+}
	133	+
	134	+.breadcrumb > li + li:before {
	135	+ content: "/";
	136	+ padding: 0;
	137	+ color: #666;
	138	+}
@@ -0,0 +1,218 @@		@@ -0,0 +1,218 @@
	1	+/**
	2	+ * File content holder
	3	+ *
	4	+ */
	5	+.file-holder {
	6	+ border: 1px solid #CCC;
	7	+ margin-bottom: 1em;
	8	+
	9	+ table {
	10	+ @extend .table;
	11	+ }
	12	+
	13	+ .file-title {
	14	+ background: #DDD;
	15	+ border-bottom: 1px solid #CCC;
	16	+ text-shadow: 0 1px 1px #fff;
	17	+ margin: 0;
	18	+ font-weight: normal;
	19	+ font-weight: bold;
	20	+ text-align: left;
	21	+ color: $style_color;
	22	+ padding: 9px 10px;
	23	+
	24	+ .options {
	25	+ float: right;
	26	+ margin-top: -5px;
	27	+ }
	28	+
	29	+ .file_name {
	30	+ color: $style_color;
	31	+ font-size: 14px;
	32	+ text-shadow: 0 1px 1px #fff;
	33	+ small {
	34	+ color: #999;
	35	+ font-size: 13px;
	36	+ }
	37	+ }
	38	+ }
	39	+ .file-content {
	40	+ background: #fff;
	41	+ font-size: 11px;
	42	+
	43	+ &.image_file {
	44	+ background: #eee;
	45	+ text-align: center;
	46	+ img {
	47	+ padding: 100px;
	48	+ max-width: 300px;
	49	+ }
	50	+ }
	51	+
	52	+ &.wiki {
	53	+ padding: 20px;
	54	+ font-size: 14px;
	55	+ line-height: 1.6;
	56	+
	57	+ .highlight {
	58	+ margin-bottom: 9px;
	59	+ @include border-radius(4px);
	60	+
	61	+ > pre {
	62	+ margin: 0;
	63	+ }
	64	+ }
	65	+ }
	66	+
	67	+ &.blob_file {
	68	+
	69	+ }
	70	+
	71	+ &.blob-no-preview {
	72	+ background: #eee;
	73	+ text-shadow: 0 1px 2px #FFF;
	74	+ padding: 100px 0;
	75	+ }
	76	+
	77	+ /**
	78	+ * Blame file
	79	+ */
	80	+ &.blame {
	81	+ table {
	82	+ border: none;
	83	+ box-shadow: none;
	84	+ margin: 0;
	85	+ }
	86	+ tr {
	87	+ border-bottom: 1px solid #eee;
	88	+ }
	89	+ td {
	90	+ &:first-child {
	91	+ border-left: none;
	92	+ }
	93	+ &:last-child {
	94	+ border-right: none;
	95	+ }
	96	+ background: #fff;
	97	+ padding: 5px;
	98	+ }
	99	+ .author,
	100	+ .blame_commit {
	101	+ background: #f5f5f5;
	102	+ vertical-align: top;
	103	+ }
	104	+ .lines {
	105	+ pre {
	106	+ padding: 0;
	107	+ margin: 0;
	108	+ background: none;
	109	+ border: none;
	110	+ }
	111	+ }
	112	+ }
	113	+
	114	+ &.logs {
	115	+ background: #eee;
	116	+ max-height: 700px;
	117	+ overflow-y: auto;
	118	+
	119	+ ol {
	120	+ margin-left: 40px;
	121	+ padding: 10px 0;
	122	+ border-left: 1px solid #CCC;
	123	+ margin-bottom: 0;
	124	+ background: white;
	125	+ li {
	126	+ color: #888;
	127	+ p {
	128	+ margin: 0;
	129	+ color: #333;
	130	+ line-height: 24px;
	131	+ padding-left: 10px;
	132	+ }
	133	+
	134	+ &:hover {
	135	+ background: $hover;
	136	+ }
	137	+ }
	138	+ }
	139	+ }
	140	+
	141	+ /**
	142	+ * Code file
	143	+ */
	144	+ &.code {
	145	+ padding: 0;
	146	+
	147	+ table.lines {
	148	+ border: none;
	149	+ box-shadow: none;
	150	+ margin: 0px;
	151	+ padding: 0px;
	152	+ table-layout: fixed;
	153	+
	154	+ pre {
	155	+ border: none;
	156	+ border-radius: 0;
	157	+ font-family: $monospace_font;
	158	+ font-size: 12px !important;
	159	+ line-height: 16px !important;
	160	+ margin: 0;
	161	+ padding: 10px 0;
	162	+ }
	163	+ td {
	164	+ border: none;
	165	+ margin: 0;
	166	+ padding: 0;
	167	+ vertical-align: top;
	168	+
	169	+ &:first-child {
	170	+ background: #eee;
	171	+ width: 50px;
	172	+ }
	173	+ &:last-child {
	174	+ }
	175	+ }
	176	+ tr:hover {
	177	+ background: none;
	178	+ }
	179	+
	180	+ pre.line_numbers {
	181	+ color: #666;
	182	+ padding: 10px 6px 10px 0;
	183	+ text-align: right;
	184	+ background: #EEE;
	185	+
	186	+ a {
	187	+ color: #666;
	188	+
	189	+ i {
	190	+ display: none;
	191	+ font-size: 14px;
	192	+ line-height: 14px;
	193	+ }
	194	+ &:hover i {
	195	+ display: inherit;
	196	+ }
	197	+ }
	198	+ }
	199	+
	200	+ .highlight {
	201	+ border-left: 1px solid #DEE2E3;
	202	+ overflow: auto;
	203	+ overflow-y: hidden;
	204	+
	205	+ pre {
	206	+ white-space: pre;
	207	+ word-wrap: normal;
	208	+
	209	+ .line {
	210	+ padding: 0 10px;
	211	+ }
	212	+ }
	213	+ }
	214	+ }
	215	+ }
	216	+ }
	217	+}
	218	+
@@ -0,0 +1,39 @@		@@ -0,0 +1,39 @@
	1	+input[type='search'].search-text-input {
	2	+ background-image: url("icon-search.png");
	3	+ background-repeat: no-repeat;
	4	+ background-position: 10px;
	5	+ padding-left: 25px;
	6	+}
	7	+
	8	+input[type='text'].danger {
	9	+ background: #F2DEDE!important;
	10	+ border-color: #D66;
	11	+ text-shadow: 0 1px 1px #fff
	12	+}
	13	+
	14	+fieldset legend {
	15	+ font-size: 16px;
	16	+}
	17	+
	18	+.datetime-controls {
	19	+ select {
	20	+ width: 100px;
	21	+ }
	22	+}
	23	+
	24	+.form-actions {
	25	+ padding: 17px 20px 18px;
	26	+ margin-top: 18px;
	27	+ margin-bottom: 18px;
	28	+ background-color: whitesmoke;
	29	+ border-top: 1px solid #e5e5e5;
	30	+ padding-left: 17%;
	31	+}
	32	+
	33	+label.control-label {
	34	+ @extend .col-sm-2;
	35	+}
	36	+
	37	+.inline-input-group {
	38	+ width: 250px;
	39	+}