Refactor UI boxes. Split issue box to different class

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
gitlabhq · Dec 24, 2013 · 4345e92 · 4345e92
1 parent dc5bd10
commit 4345e92
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 186 deletions.
diff --git 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
@@ -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
@@ -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;
+    }
+  }
+}