From 4345e9220ee2935610c97b0226d011a4736366f1 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 24 Dec 2013 11:45:28 +0200 Subject: [PATCH] Refactor UI boxes. Split issue box to different class Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/gitlab_bootstrap.scss | 2 + .../stylesheets/gitlab_bootstrap/blocks.scss | 185 ------------------ .../gitlab_bootstrap/issue_box.scss | 46 +++++ .../stylesheets/gitlab_bootstrap/ui_box.scss | 171 ++++++++++++++++ app/assets/stylesheets/sections/wiki.scss | 2 +- 5 files changed, 220 insertions(+), 186 deletions(-) create mode 100644 app/assets/stylesheets/gitlab_bootstrap/issue_box.scss create mode 100644 app/assets/stylesheets/gitlab_bootstrap/ui_box.scss 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;