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

Gemfile

@@ -151,7 +151,7 @@ gem "jquery-rails",     "2.1.3"
 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'

Gemfile.lock

@@ -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)

app/assets/stylesheets/application.scss

@@ -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";
-

app/assets/stylesheets/common.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;
+  }
+}

app/assets/stylesheets/generic.scss

+@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";

app/assets/stylesheets/gitlab_bootstrap/common.scss → app/assets/stylesheets/generic/common.scss

@@ -20,6 +20,7 @@
 .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 }
 
@@ -69,12 +70,6 @@
   }
 }
 
-.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;
@@ -101,6 +96,10 @@ pre.well-pre {
     color: #999;
     text-shadow: none;
   }
+
+  &.label-inverse {
+    background-color: #333333;
+  }
 }
 
 /** Big Labels **/
@@ -131,3 +130,9 @@ pre.well-pre {
 .dropdown-menu > li > a:focus {
   background: #29b;
 }
+
+.breadcrumb > li + li:before {
+  content: "/";
+  padding: 0;
+  color: #666;
+}

app/assets/stylesheets/gitlab_bootstrap/files.scss → app/assets/stylesheets/generic/files.scss

@@ -20,7 +20,6 @@
     text-align: left;
     color: $style_color;
     padding: 9px 10px;
-    height: 18px;
 
     .options {
       float: right;

app/assets/stylesheets/gitlab_bootstrap/forms.scss → app/assets/stylesheets/generic/forms.scss

-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 {
@@ -68,7 +13,6 @@ input[type='text'].danger {
 
 fieldset legend {
   font-size: 16px;
-  margin-bottom: 10px;
 }
 
 .datetime-controls {
@@ -76,3 +20,20 @@ fieldset legend {
     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;
+}

app/assets/stylesheets/gitlab_bootstrap/lists.scss → app/assets/stylesheets/generic/lists.scss

@@ -4,7 +4,9 @@
  */
 .well-list {
   margin: 0;
+  padding: 0;
   list-style: none;
+
   li {
     padding: 10px;
     min-height: 20px;

app/assets/stylesheets/selects.scss → app/assets/stylesheets/generic/selects.scss

@@ -3,6 +3,7 @@
   min-width: 100px;
 
   .chosen-single {
+    height: 26px;
     background: #EEE !important;
     border: 1px solid #DDD !important;
     @include box-shadow(none !important);
@@ -55,3 +56,13 @@
 .chosen-compact {
   max-width: 170px !important;
 }
+
+select {
+  &.chosen {
+    min-width: 200px;
+  }
+
+  &.chosen-sm {
+    min-width: 100px;
+  }
+}

app/assets/stylesheets/gitlab_bootstrap/typography.scss → app/assets/stylesheets/generic/typography.scss

@@ -2,11 +2,6 @@
  * Headers
  *
  */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 500;
-  line-height: 1.1;
-}
-
 h1.page-title {
   @include page-title;
   font-size: 28px;
@@ -99,6 +94,7 @@ a:focus {
     background: #f5f5f5;
   }
   ul {
+    padding: 0;
     margin: 0 0 9px 25px !important;
   }
 }

app/assets/stylesheets/gitlab_bootstrap/ui_box.scss → app/assets/stylesheets/generic/ui_box.scss

@@ -43,6 +43,7 @@
 
   ul {
     margin: 0;
+    padding: 0;
   }
 
   .title {
@@ -157,7 +158,8 @@
   .title {
     background: #D65;
     color: #fff;
-    text-shadow: 0 1px 1px #900;
+    text-shadow: none;
+    font-weight: 500;
   }
 }
 

app/assets/stylesheets/gitlab_bootstrap.scss → app/assets/stylesheets/gl_bootstrap.scss

-/** Override bootstrap variables **/
-$baseFontSize: 13px !default;
-$baseLineHeight: 18px !default;
-
-/**
- * BOOTSTRAP
- */
+// Core variables and mixins
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
-@import "bootstrap/reset";
+
+// Reset
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+
+// Core CSS
 @import "bootstrap/scaffolding";
-@import "bootstrap/grid";
-@import "bootstrap/layouts";
 @import "bootstrap/type";
 @import "bootstrap/code";
-@import "bootstrap/forms";
+@import "bootstrap/grid";
 @import "bootstrap/tables";
-@import "bootstrap/sprites";
-@import "bootstrap/dropdowns";
-@import "bootstrap/wells";
+@import "bootstrap/forms";
+
+// Components
 @import "bootstrap/component-animations";
-@import "bootstrap/close";
+@import "bootstrap/dropdowns";
 @import "bootstrap/button-groups";
-@import "bootstrap/alerts";
+@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/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";
+// 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;
+}
 
-/**
- * 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";
+@import "bootstrap/responsive-utilities";

app/assets/stylesheets/gitlab_bootstrap/mixins.scss → app/assets/stylesheets/main/mixins.scss

@@ -79,11 +79,15 @@
   color: $style_color;
   text-shadow: 0 1px 1px #FFF;
   font-size: 16px;
-  line-height: 40px;
+  line-height: 44px;
   font-weight: normal;
 }
 
 @mixin md-typography {
+  img {
+    max-width: 100%;
+  }
+
   *:first-child {
     margin-top: 0;
   }

app/assets/stylesheets/gitlab_bootstrap/variables.scss → app/assets/stylesheets/main/variables.scss

+/** Override bootstrap variables **/
+$font-size-base: 13px !default;
+
 /**
  * General Colors
  */

app/assets/stylesheets/sections.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";

app/assets/stylesheets/sections/commits.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;

app/assets/stylesheets/sections/dashboard.scss

 .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 {

app/assets/stylesheets/sections/editor.scss

@@ -42,7 +42,7 @@
       line-height: 20px;
     }
     textarea {
-      @extend .span8;
+      @extend .col-md-8;
     }
   }
 }

app/assets/stylesheets/sections/events.scss

@@ -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);
     }
 

app/assets/stylesheets/sections/header.scss

@@ -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;
+    }
+  }
+}

app/assets/stylesheets/sections/login.scss

 /* Login Page */
-body.login-page{
-  .container > .content {
-    padding-top: 20px;
+.login-page {
+  h1 {
+    font-size: 3em;
+    font-weight: 200;
   }
-}
 
-.login-box{
+  .login-box{
     width: 304px;
     position: relative;
     @include border-radius(5px);
     margin: auto;
     padding: 20px;
     background: white;
-}
+  }
 
-.login-box .login-logo{
+  .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}
+  .form-control {
+    background-color: #f1f1f1;
+    font-size: 16px;
+    padding: 14px 10px;
+    width: 280px;
+    height: auto;
 
-.login-box input.text.top{
+    &.top {
       @include border-radius(5px 5px 0 0);
       margin-bottom: 0px;
-}
+    }
 
-.login-box input.text.bottom{
+    &.bottom {
       @include border-radius(0 0 5px 5px);
       border-top: 0;
       margin-bottom: 20px;
-}
+    }
 
-.login-box input.text.middle{
+    &.middle {
       border-top: 0;
       margin-bottom:0px;
-}
-
-.login-box a.forgot{float: right; padding-top: 6px}
-
-.remember_me {
-  text-align: left;
+      @include border-radius(0);
+    }
+  }
 
-  input {
-    margin: 2px;
+  .login-box a.forgot {
+    float: right;
+    padding-top: 6px
   }
-}
 
-.devise-errors {
+  .devise-errors {
     h2 {
       font-size: 14px;
       color: #a00;
     }
+  }
 }

app/assets/stylesheets/sections/merge_requests.scss

@@ -15,28 +15,8 @@
     }
   }
 
-  .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;

app/assets/stylesheets/sections/nav.scss

@@ -6,6 +6,7 @@
   border-bottom: 1px solid #E1E1E1;
 
   ul {
+    padding: 0;
     margin: auto;
     height: 40px;
     overflow: hidden;

app/assets/stylesheets/sections/notes.scss

@@ -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;
 }

app/assets/stylesheets/sections/profile.scss

 .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;
     }
   }
 }

app/assets/stylesheets/sections/projects.scss

@@ -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;
   }
 }
 

app/assets/stylesheets/sections/tree.scss

@@ -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 {

app/assets/stylesheets/sections/votes.scss

@@ -36,3 +36,8 @@
   display: inline-block;
   margin: 0 8px;
 }
+
+.votes-holder {
+  float: right;
+  width: 250px;
+}

app/assets/stylesheets/sections/wall.scss

 .wall-page {
   .wall-note-form {
-    @extend .span12;
+    @extend .col-md-12;
 
     margin: 0;
     height: 140px;

app/views/admin/broadcast_messages/index.html.haml

@@ -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"

app/views/admin/dashboard/index.html.haml

@@ -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

app/views/admin/groups/edit.html.haml

@@ -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

app/views/admin/groups/new.html.haml

@@ -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"

app/views/admin/groups/show.html.haml

@@ -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:

app/views/admin/hooks/index.html.haml

@@ -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"
        
       = f.submit "Add System Hook", class: "btn btn-create"
 %hr

app/views/admin/projects/index.html.haml

 .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]
              
             %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]
              
             %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})

app/views/admin/projects/show.html.haml

@@ -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

app/views/admin/users/_form.html.haml

@@ -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?

app/views/admin/users/index.html.haml

 .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})

app/views/admin/users/show.html.haml

@@ -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:

app/views/dashboard/_groups.html.haml

 .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

app/views/dashboard/_projects.html.haml

 .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

app/views/dashboard/issues.html.haml

@@ -7,7 +7,7 @@
 %hr
 
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'issue'
-  .span9
+  .col-md-9
     = render 'shared/issues'

app/views/dashboard/merge_requests.html.haml

@@ -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'

app/views/dashboard/projects.html.haml

@@ -25,7 +25,8 @@
   All projects you have access to are listed here. Public projects are not included here unless you are a member
 %hr
 .row
-  .span3
+  .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
@@ -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

app/views/dashboard/show.html.haml

 - 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

app/views/devise/confirmations/new.html.haml

@@ -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

app/views/devise/passwords/edit.html.haml

@@ -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"

app/views/devise/passwords/new.html.haml

@@ -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

app/views/devise/registrations/new.html.haml

@@ -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

app/views/devise/sessions/_new_base.html.haml

 = 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"}

app/views/devise/sessions/_new_ldap.html.haml

 = 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"

app/views/devise/sessions/new.html.haml

 .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

app/views/groups/_new_group_member.html.haml

@@ -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"

app/views/groups/edit.html.haml

 .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"

app/views/groups/issues.html.haml

@@ -9,7 +9,7 @@
 %hr
 
 .row
-  .span3
+  .col-md-3
     = render 'shared/filter', entity: 'issue'
-  .span9
+  .col-md-9
     = render 'shared/issues'

app/views/groups/merge_requests.html.haml

@@ -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'

app/views/groups/new.html.haml

 = 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

app/views/groups/show.html.haml

 .dashboard
-  .activities.span8
+  .activities.col-md-8
     = render "events/event_last_push", event: @last_push
     = link_to dashboard_path, class: 'btn btn-tiny' do
       ← 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

app/views/help/_api_layout.html.haml

 .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

app/views/help/_layout.html.haml

 .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

app/views/help/_shortcuts.html.haml

 #modal-shortcuts.modal.hide
+  .modal-dialog
+    .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3 Keyboard Shortcuts

app/views/help/index.html.haml

-.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

app/views/kaminari/gitlab/_paginator.html.haml

@@ -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?

app/views/layouts/_head.html.haml

@@ -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')
 

app/views/layouts/_head_panel.html.haml

@@ -7,13 +7,15 @@
           %h1 GITLAB
         %span.separator
       %h1.project_name= title
-      %ul.nav
+
+      .navbar-collapse.collapse
+        %ul.nav.navbar-nav
           %li
             %a
               %div.hide.turbolink-spinner
                 %i.icon-refresh.icon-spin
                 Loading...
-        %li
+          %li.hidden-sm
             = render "layouts/search"
           %li
             = link_to public_root_path, title: "Public area", class: 'has_bottom_tooltip', 'data-original-title' => 'Public area' do

app/views/layouts/project_settings.html.haml

@@ -15,7 +15,7 @@
     .container
       .content
         .row
-          .span2
+          .col-md-2
             = render "projects/settings_nav"
-          .span10
+          .col-md-10
             = yield

app/views/profiles/accounts/show.html.haml

@@ -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'
            
           %span.loading-gif.hide= image_tag "ajax_loader.gif"
         %p.light

app/views/profiles/keys/_form.html.haml

 %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

app/views/profiles/keys/new.html.haml

 %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'
 

app/views/profiles/keys/show.html.haml

 .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

app/views/profiles/notifications/_settings.html.haml

 %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
 

app/views/profiles/notifications/show.html.haml

@@ -18,23 +18,23 @@
     – 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
 

app/views/profiles/passwords/edit.html.haml

@@ -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"

app/views/profiles/passwords/new.html.haml

@@ -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"

app/views/profiles/show.html.haml

@@ -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 ...
              
             %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

app/views/projects/_errors.html.haml

 - if @project.errors.any?
-  .alert.alert-error
+  .alert.alert-danger
     %button{ type: "button", class: "close", "data-dismiss" => "alert"} ×
     = @project.errors.full_messages.first

app/views/projects/_home_panel.html.haml

 - empty_repo = @project.empty_repo?
 .project-home-panel{:class => ("empty-project" if empty_repo)}
+  .visibility-level-label.has_tooltip{'data-title' => "#{visibility_level_label(@project.visibility_level)} project" }
+    = visibility_level_icon(@project.visibility_level)
   .row
-    .span6
+    .col-sm-6
       %h4.project-home-title
         = @project.name_with_namespace
-        %span.visibility-level-label
-          = visibility_level_icon(@project.visibility_level)
-          = visibility_level_label(@project.visibility_level)
 
-    .span6
+    .col-sm-6
       - unless empty_repo
         .project-home-dropdown
           = render "dropdown"
@@ -16,7 +15,7 @@
         = render "shared/clone_panel"
 
   .project-home-extra.clearfix.row
-    .project-home-desc.span8
+    .project-home-desc.col-md-8
       - if @project.description.present?
         = @project.description
       - if can?(current_user, :admin_project, @project)

app/views/projects/_visibility_level.html.haml

-.control-group.project-visibility-level-holder
-  = f.label :visibility_level do
+.form-group.project-visibility-level-holder
+  = f.label :visibility_level, class: 'control-label' do
     Visibility Level
     = link_to "(?)", help_public_access_path
+  .col-sm-10
     - if can_change_visibility_level
       - Gitlab::VisibilityLevel.values.each do |level|
+        .append-bottom-10
           - restricted = restricted_visibility_levels.include?(level)
-      .controls
           = f.radio_button :visibility_level, level, checked: (visibility_level == level), disabled: restricted
           %span.descr{:class => ("restricted" if restricted)}
             = label :project_visibility_level, level do
               = visibility_level_icon(level)
               %strong
                 = visibility_level_label(level)
-          .light= visibility_level_description(level)
+            .light.prepend-left-20= visibility_level_description(level)
       - unless restricted_visibility_levels.empty?
-      .controls
+        .col-sm-10
           %span.info
             Some visibility level settings have been restricted by the administrator.
     - else
-    .controls
+      .col-sm-10
         %span.info
           = visibility_level_icon(visibility_level)
           %strong

app/views/projects/blob/_blob.html.haml

@@ -4,7 +4,6 @@
     = link_to project_tree_path(@project, @ref) do
       = @project.path
   - tree_breadcrumbs(@tree, 6) do |title, path|
-    \/
     %li
       - if path
         - if path.end_with?(@path)

app/views/projects/blob/_remove.html.haml

-%div#modal-remove-blob.modal.hide
+#modal-remove-blob.modal.hide
+  .modal-dialog
+    .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3.page-title Remove #{@blob.name}
@@ -8,12 +10,12 @@
 
       .modal-body
         = form_tag project_blob_path(@project, @id), method: :delete do
-      .control-group.commit_message-group
+          .form-group.commit_message-group
             = label_tag 'commit_message', class: "control-label" do
               Commit message
-        .controls
+            .col-sm-10
               = text_area_tag 'commit_message', params[:commit_message], placeholder: "Removed this file because...", required: true, rows: 3
-      .control-group
-        .controls
+          .form-group
+            .col-sm-10
               = submit_tag 'Remove file', class: 'btn btn-remove'
               = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"

app/views/projects/branches/index.html.haml

 = render "projects/commits/head"
 .row
-  .span3
+  .col-md-3
     = render "filter"
-  .span9
+  .col-md-9
     - unless @branches.empty?
       %ul.bordered-list.top-list
         - @branches.each do |branch|

app/views/projects/branches/new.html.haml

 %h3.page-title
   %i.icon-code-fork
   New branch
-= form_tag project_branches_path, method: :post do
-  .control-group
+= form_tag project_branches_path, method: :post, class: "form-horizontal" do
+  .form-group
     = label_tag :branch_name, 'Name for new branch', class: 'control-label'
-    .controls
-      = text_field_tag :branch_name, nil, placeholder: 'feature/dashboard', required: true, tabindex: 1
-  .control-group
+    .col-sm-10
+      = text_field_tag :branch_name, nil, placeholder: 'feature/dashboard', required: true, tabindex: 1, class: 'form-control'
+  .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .controls
-      = text_field_tag :ref, nil, placeholder: 'master', required: true, tabindex: 2
+    .col-sm-10
+      = text_field_tag :ref, nil, placeholder: 'master', required: true, tabindex: 2, class: 'form-control'
       .light branch name or commit SHA
   .form-actions
     = submit_tag 'Create branch', class: 'btn btn-create', tabindex: 3

app/views/projects/branches/recent.html.haml

 = render "projects/commits/head"
 .row
-  .span3
+  .col-md-3
     = render "filter"
-  .span9
+  .col-md-9
     %ul.bordered-list.top-list
       - @branches.each do |branch|
         = render "projects/branches/branch", branch: branch

app/views/projects/commit/huge_commit.html.haml

 = render "projects/commit/commit_box"
-.alert.alert-error
+.alert.alert-danger
   %h4 Commit diffs are too big to be displayed

app/views/projects/commits/_commits.html.haml

 - @commits.group_by { |c| c.committed_date.to_date }.sort.reverse.each do |day, commits|
   .row.commits-row
-    .span2
+    .col-md-2
       %h4
         %i.icon-calendar
         %span= day.stamp("28 Aug, 2010")
       %p= pluralize(commits.count, 'commit')
-    .span10
+    .col-md-10
       %ul.well-list
         = render commits, project: @project
   %hr.lists-separator

app/views/projects/commits/_head.html.haml

-%ul.nav.nav-tabs
+%ul.nav.nav-tabs.append-bottom-15
   %li= render partial: 'shared/ref_switcher', locals: {destination: 'commits'}
 
   = nav_link(controller: [:commit, :commits]) do

app/views/projects/commits/_image.html.haml

@@ -49,7 +49,7 @@
           %img{src: "data:#{old_file.mime_type};base64,#{Base64.encode64(old_file.data)}"}
         .frame.added
           %img{src: "data:#{file.mime_type};base64,#{Base64.encode64(file.data)}"}
-        .controls
+        .col-sm-10
           .transparent
           .drag-track
             .dragger{:style => "left: 0px;"}

app/views/projects/compare/_form.html.haml

-= form_tag project_compare_index_path(@project), method: :post do
-  .clearfix
-    .pull-left
+= form_tag project_compare_index_path(@project), method: :post, class: 'form-inline' do
+  .clearfix.append-bottom-20
     - if params[:to] && params[:from]
       = link_to 'switch', {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has_tooltip', title: 'Switch base of comparison'}
-      .input-prepend
-        %span.add-on.input-xpadding from
-        = text_field_tag :from, params[:from], class: "span3 input-xpadding"
+    .form-group
+      .input-group.inline-input-group
+        %span.input-group-addon from
+        = text_field_tag :from, params[:from], class: "form-control"
     = "..."
-      .input-prepend
-        %span.add-on.input-xpadding to
-        = text_field_tag :to, params[:to], class: "span3 input-xpadding"
-    .pull-left
+    .form-group
+      .input-group.inline-input-group
+        %span.input-group-addon to
+        = text_field_tag :to, params[:to], class: "form-control"
      
     = submit_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if compare_to_mr_button?

app/views/projects/compare/show.html.haml

@@ -6,7 +6,7 @@
 = render "form"
 
 - if @commits.size > 100
-  .alert.alert-block
+  .alert.alert-warning
     %p
       %strong Warning! This comparison includes more than 100 commits.
     %p To preserve performance the line diff is not shown.

app/views/projects/deploy_keys/_form.html.haml

 %div
-  = form_for [@project, @key], url: project_deploy_keys_path do |f|
+  = form_for [@project, @key], url: project_deploy_keys_path, html: { class: 'deploy-key-form 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
+    .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
         %p.light
           Paste a machine public key here. Read more about how to generate it
           = link_to "here", help_ssh_path
-        = f.text_area :key, class: "input-xxlarge thin_area"
+        = f.text_area :key, class: "form-control thin_area", rows: 5
 
     .form-actions
       = f.submit 'Create', class: "btn-create btn"

app/views/projects/deploy_keys/index.html.haml

@@ -12,7 +12,7 @@
 %hr.clearfix
 
 .row
-  .span5.enabled-keys
+  .col-md-5.enabled-keys
     %h5
       %strong.cgreen Enabled deploy keys
       for this project
@@ -21,7 +21,7 @@
       - if @enabled_keys.blank?
         .light-well
           %p.nothing_here_message Create a #{link_to 'new deploy key', new_project_deploy_key_path(@project)} or add an existing one
-  .span5.available-keys
+  .col-md-5.available-keys
     %h5
       %strong Deploy keys
       from projects available to you