Merge branch 'refactor/scss' of /home/git/repositories/gitlab/gitlabhq

18 files changed, 271 insertions, 243 deletions

diff --git a/app/assets/stylesheets/gitlab_bootstrap.scss b/app/assets/stylesheets/gitlab_bootstrap.scss
index faf36b702c0..322fab4b416 100644
--- a/app/assets/stylesheets/gitlab_bootstrap.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap.scss
@@ -61,6 +61,8 @@ $baseLineHeight: 18px !default;
 @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";
diff --git a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
index 9f5c4a1de94..1cbd7439835 100644
--- a/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/blocks.scss
@@ -1,188 +1,3 @@
-/**
- * ===================================
- * Contain UI block elements:
- *   .ui-box   - for any block & widgets
- * ===================================
- */
-
-/**
- * UI Block
- *
- */
-.ui-box {
-  background: #FFF;
-  margin-bottom: 20px;
-  border: 1px solid #DDD;
-  word-wrap: break-word;
-
-  &.small-box {
-    margin-bottom: 10px;
-
-    .title {
-      font-size: 13px;
-      line-height: 30px;
-
-      a {
-        color: #666;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  &.ui-box-show {
-    color: #666;
-    margin:20px 0;
-    background: #FAFAFA;
-
-    .control-group {
-      margin-bottom: 0;
-    }
-  }
-
-  &.ui-box-danger {
-    background: #f7f7f7;
-    border: none;
-
-    .title {
-      background: #D65;
-      color: #fff;
-      text-shadow: 0 1px 1px #900;
-    }
-  }
-
-  img { max-width: 100%; }
-
-  pre {
-    code {
-      background: none !important;
-    }
-  }
-
-  .ui-box-head,
-  .ui-box-body,
-  .ui-box-bottom {
-    padding: 15px;
-
-    .clearfix {
-      margin: 0;
-    }
-  }
-
-  .ui-box-head {
-    .box-title {
-      font-size: 20px;
-      font-weight: 500;
-      line-height: 28px;
-      margin: 0;
-      color: #444;
-    }
-    h3 {
-      margin: 0;
-    }
-  }
-
-  .ui-box-body {
-    border: none;
-    background-color: #f5f5f5;
-    border: none;
-    border-top: 1px solid #eee;
-  }
-
-  .ui-box-bottom {
-    border-top: 1px solid #eee;
-  }
-
-  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;
-          }
-        }
-      }
-    }
-  }
-
-  &.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;
-      }
-    }
-  }
-}
-
-.tab-pane {
-  .ui-box {
-    margin: 3px 3px 25px 3px;
-  }
-}
-
 .light-well {
   background: #f9f9f9;
   padding: 15px;
diff --git a/app/assets/stylesheets/gitlab_bootstrap/issue_box.scss b/app/assets/stylesheets/gitlab_bootstrap/issue_box.scss
new file mode 100644
index 00000000000..6330523ea22
--- /dev/null
+++ b/app/assets/stylesheets/gitlab_bootstrap/issue_box.scss
@@ -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;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/gitlab_bootstrap/ui_box.scss b/app/assets/stylesheets/gitlab_bootstrap/ui_box.scss
new file mode 100644
index 00000000000..056b4eeaaf4
--- /dev/null
+++ b/app/assets/stylesheets/gitlab_bootstrap/ui_box.scss
@@ -0,0 +1,171 @@
+/**
+ * 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;
+  }
+}
diff --git a/app/assets/stylesheets/sections/wiki.scss b/app/assets/stylesheets/sections/wiki.scss
index ed3a432ded0..dfaeba41cf6 100644
--- a/app/assets/stylesheets/sections/wiki.scss
+++ b/app/assets/stylesheets/sections/wiki.scss
@@ -1,4 +1,4 @@
-h3.page-title .edit-wiki-header {
+.title .edit-wiki-header {
   width: 780px;
   margin-left: auto;
   margin-right: auto;
diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index 5ba67591f35..e5af56ffc5c 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -5,7 +5,7 @@
 
 .ui-box
   .title Sidekiq running processes
-  .ui-box-body
+  .body
     - if @sidekiq_processes.empty?
       %h4.cred
         %i.icon-warning-sign
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 1de3d2e36fe..4d0522393dd 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -48,7 +48,7 @@
     .ui-box
       .title
         Add user(s) to the group:
-      .ui-box-body.form-holder
+      .body.form-holder
         %p.light
           Read more about project permissions
           %strong= link_to "here", help_permissions_path, class: "vlink"
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 5ac36a1acb3..74c2d63c828 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -78,7 +78,7 @@
     .ui-box
       .title
         Transfer project
-      .ui-box-body
+      .body
         = form_for @project, url: transfer_admin_project_path(@project), method: :put do |f|
           .control-group
             = f.label :namespace_id, "Namespace"
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 666044e329b..7a204d89cd1 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -63,7 +63,7 @@
       .tab-pane#tab-remove
         .ui-box.ui-box-danger
           .title Remove group
-          .ui-box-body
+          .body
             %p
               Removing group will cause all child projects and resources to be removed.
             %p
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 44f722d9e15..1d3a3ca1333 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -105,7 +105,7 @@
               Unarchive project
             - else
               Archive project
-          .ui-box-body
+          .body
             - if @project.archived?
               %p
                 Unarchiving the project will mark its repository as active.
@@ -168,7 +168,7 @@
       - if can?(current_user, :remove_project, @project)
         .ui-box.ui-box-danger
           .title Remove project
-          .ui-box-body
+          .body
             %p
               Removing the project will delete its repository and all related resources including issues, merge requests etc.
               %br
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index 78f852e4e30..80d1aac6d3e 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -6,14 +6,14 @@
         - @issue.errors.full_messages.each do |msg|
           %span= msg
           %br
-    .ui-box.ui-box-show
-      .ui-box-head
+    .issue-box
+      .title
         .control-group
           = f.label :title do
             %strong= "Subject *"
           .controls
             = f.text_field :title, maxlength: 255, class: "input-xxlarge js-gfm-input", autofocus: true, required: true
-      .ui-box-body
+      .context
         .control-group
           .issue_assignee.pull-left
             = f.label :assignee_id do
@@ -31,7 +31,7 @@
               Milestone
             .controls= f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'chosen'})
 
-      .ui-box-bottom
+      .description
         .control-group
           = f.label :label_list do
             %i.icon-tag
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 7d40721f68f..b21874c8d56 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -37,17 +37,16 @@
         %span.light Milestone
         = @issue.milestone.title
 
-.ui-box.ui-box-show
-  .ui-box-head
-    %h4.box-title
-      = gfm escape_once(@issue.title)
+.issue-box
+  %h4.title
+    = gfm escape_once(@issue.title)
 
-  .ui-box-body
+  .context
     %cite.cgray
       = render partial: 'issue_context', locals: { issue: @issue }
 
   - if @issue.description.present?
-    .ui-box-bottom
+    .description
       .wiki
         = preserve do
           = markdown @issue.description
diff --git a/app/views/projects/issues/update.js.haml b/app/views/projects/issues/update.js.haml
index eb27faa3126..2be1d0f0db0 100644
--- a/app/views/projects/issues/update.js.haml
+++ b/app/views/projects/issues/update.js.haml
@@ -3,8 +3,8 @@
     :plain
       $("##{dom_id(@issue)}").fadeOut();
 - elsif params[:issue_context]
-  $('.ui-box-body').html("#{escape_javascript(render partial: 'issue_context', locals: { issue: @issue })}");
-  $('.ui-box-body').effect('highlight');
+  $('.issue-box .context').html("#{escape_javascript(render partial: 'issue_context', locals: { issue: @issue })}");
+  $('.issue-box .context').effect('highlight');
   $('.chosen').chosen();
   $('.edit-issue.inline-update input[type="submit"]').hide();
   - if @issue.milestone
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index 2d80a766523..83ac2a58d80 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -1,41 +1,39 @@
-.ui-box.ui-box-show
-  .ui-box-head
-    %h4.box-title
-      = gfm escape_once(@merge_request.title)
+.issue-box
+  %h4.title
+    = gfm escape_once(@merge_request.title)
 
-  .ui-box-body
-    %div
-      %cite.cgray
-        Created by #{link_to_member(@project, @merge_request.author)}.
-        - if @merge_request.assignee
-          Currently assigned to #{link_to_member(@project, @merge_request.assignee)}.
-      - if @merge_request.milestone
-        .pull-right
-          - milestone = @merge_request.milestone
-          %cite.cgray Attached to milestone
-          %strong= link_to_gfm truncate(milestone.title, length: 20), project_milestone_path(milestone.project, milestone)
+  .context
+    %cite.cgray
+      Created by #{link_to_member(@project, @merge_request.author)}.
+      - if @merge_request.assignee
+        Currently assigned to #{link_to_member(@project, @merge_request.assignee)}.
+    - if @merge_request.milestone
+      .pull-right
+        - milestone = @merge_request.milestone
+        %cite.cgray Attached to milestone
+        %strong= link_to_gfm truncate(milestone.title, length: 20), project_milestone_path(milestone.project, milestone)
 
 
   - if @merge_request.description.present?
-    .ui-box-bottom
+    .description
       .wiki
         = preserve do
           = markdown @merge_request.description
 
   - if @merge_request.closed?
-    .ui-box-bottom.alert-error
+    .description.alert-error
       %span
         %i.icon-remove
         Closed by #{link_to_member(@project, @merge_request.closed_event.author)}
         #{time_ago_with_tooltip(@merge_request.closed_event.created_at)} ago.
   - if @merge_request.merged?
-    .ui-box-bottom.alert-success
+    .description.alert-success
       %span
         %i.icon-ok
         Merged by #{link_to_member(@project, @merge_request.merge_event.author)}
         #{time_ago_with_tooltip(@merge_request.merge_event.created_at)} ago.
   - if !@closes_issues.empty? && @merge_request.opened?
-    .ui-box-bottom.alert-info
+    .description.alert-info
       %span
         %i.icon-ok
         Accepting this merge request will close #{@closes_issues.size == 1 ? 'issue' : 'issues'}
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index fda39a6f963..74a32832388 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -28,13 +28,11 @@
     ← To milestones list
 
 
-.ui-box.ui-box-show
-  .ui-box-head
-    %h4.box-title
+.issue-box
+  %h4.title
+    = gfm escape_once(@milestone.title)
 
-      = gfm escape_once(@milestone.title)
-
-  .ui-box-body
+  .context
     %p
       Progress:
       #{@milestone.closed_items_count} closed
@@ -46,7 +44,7 @@
 
 
   - if @milestone.description.present?
-    .ui-box-bottom
+    .description
       = preserve do
         = markdown @milestone.description
 
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 3b5f80e528f..0420e026c69 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -6,15 +6,14 @@
         - @wiki.errors.full_messages.each do |msg|
           %li= msg
 
-  .ui-box.ui-box-show
-    .ui-box-head
-      %h3.page-title
-        .edit-wiki-header
-          = @wiki.title.titleize
-          = f.hidden_field :title, value: @wiki.title
-          = f.select :format, options_for_select(GollumWiki::MARKUPS, {selected: @wiki.format}), {}, class: "pull-right input-medium"
-          = f.label :format, class: "pull-right", style: "padding-right: 20px;"
-    .ui-box-body
+  .issue-box
+    %h3.title
+      .edit-wiki-header
+        = @wiki.title.titleize
+        = f.hidden_field :title, value: @wiki.title
+        = f.select :format, options_for_select(GollumWiki::MARKUPS, {selected: @wiki.format}), {}, class: "pull-right input-medium"
+        = f.label :format, class: "pull-right", style: "padding-right: 20px;"
+    .context
       .controls
         %span.cgray
           Wiki content is parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
@@ -22,11 +21,11 @@
           %code [Link Title](page-slug)
           \.
 
-    .ui-box-bottom
+    .description
       .control-group
         = f.label :content
         .controls= f.text_area :content, class: 'span8 js-gfm-input', rows: 18
-    .ui-box-bottom
+    .description
       .control-group
         = f.label :commit_message
         .controls= f.text_field :message, class: 'span8', rows: 18
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index 3b3888a50e9..199000656fe 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -1,6 +1,6 @@
 - if @issues.any?
   - @issues.group_by(&:project).each do |group|
-    .ui-box.small-box
+    .ui-box.ui-box-small
       - project = group[0]
       .title
         = link_to_project project
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index 368aec5a462..ddad28339c8 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -1,6 +1,6 @@
 - if @merge_requests.any?
   - @merge_requests.group_by(&:target_project).each do |group|
-    .ui-box.small-box
+    .ui-box.ui-box-small
       - project = group[0]
       .title
         = link_to_project project