kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'issue-box-redesign' into 'master' 

Issue box redesign

I complained before about the issue box looks. This is a proposed redesign.

The background of the issue is slightly lighter than the comments, so there is a clear distinction.

To make sure the issue then doesn't disappear, the shadow is slightly strongly (but still barely noticeable, to keep it flat).

The left top corner is round to highlight the status 'label', as it were a real label.

See merge request !1125
This commit is contained in:
Dmitriy Zaporozhets 2014-09-29 10:19:23 +00:00
parent 91d30c9002 be296633fd
commit 376e004c16
1 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/stylesheets/generic/issue_box.scss
View File

@ -8,43 +8,51 @@
*/ */
.issue-box { .issue-box {
color: #666; color: #555;
margin:20px 0; margin:20px 0;
background: #FFF; background: #f9f9f9;
border: 1px solid #EEE; border-top-left-radius: 5px;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
&.issue-box-closed { &.issue-box-closed {
border-color: $border_danger;
.state { .state {
background-color: #F3CECE;
border-color: $border_danger;
}
.state-label {
background-color: $bg_danger; background-color: $bg_danger;
color: #FFF; color: #FFF;
border-color: $border_danger;
} }
} }
&.issue-box-merged { &.issue-box-merged {
border-color: $border_primary;
.state { .state {
background-color: #B7CEE7;
border-color: $border_primary;
}
.state-label {
background-color: $bg_primary; background-color: $bg_primary;
color: #FFF; color: #FFF;
border-color: $border_primary;
} }
} }
&.issue-box-open { &.issue-box-open {
border-color: $border_success;
.state { .state {
border-color: $border_success; background-color: #D6F1D7;
border-color: $bg_success;
}
.state-label {
background-color: $bg_success; background-color: $bg_success;
color: #FFF; color: #FFF;
} }
} }
&.issue-box-expired { &.issue-box-expired {
border-color: #cea61b;
.state { .state {
background-color: #EEE9B3;
border-color: #faebcc; border-color: #faebcc;
}
.state-label {
background: #cea61b; background: #cea61b;
color: #FFF; color: #FFF;
} }
@ -55,8 +63,7 @@
} }
.state { .state {
border-bottom: 1px solid #DDD; background-color: #f9f9f9;
padding: 10px 15px;
} }
.title { .title {
@ -104,12 +111,14 @@
font-size: 14px; font-size: 14px;
float: left; float: left;
font-weight: bold; font-weight: bold;
padding: 10px 15px;
border-top-left-radius: 5px;
} }
.creator { .creator {
float: right; float: right;
padding: 10px 15px;
a { a {
color: #FFF;
text-decoration: underline; text-decoration: underline;
} }
} }