Refactor UI boxes. Split issue box to different class
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets
parent
dc5bd10d45
commit
4345e9220e
5 changed files with 220 additions and 186 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
46
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss
Normal file
46
app/assets/stylesheets/gitlab_bootstrap/issue_box.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
171
app/assets/stylesheets/gitlab_bootstrap/ui_box.scss
Normal file
171
app/assets/stylesheets/gitlab_bootstrap/ui_box.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
h3.page-title .edit-wiki-header {
|
||||
.title .edit-wiki-header {
|
||||
width: 780px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue