BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Unverified Commit 4345e922 by Dmitriy Zaporozhets
Options

Refactor UI boxes. Split issue box to different class

Signed-off-by: 's avatarDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
parent dc5bd10d
Showing with 220 additions and 186 deletions
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";
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
/**
* ===================================
* 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;
......
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss 0 → 100644
/**
* 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;
}
}
}
app/assets/stylesheets/gitlab_bootstrap/ui_box.scss 0 → 100644
/**
* 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;
}
}
app/assets/stylesheets/sections/wiki.scss
h3.page-title .edit-wiki-header {
.title .edit-wiki-header {
width: 780px;
margin-left: auto;
margin-right: auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment