Category config color rectangles

stable
Xavier Julián 2014-07-21 11:36:43 +02:00
parent f699f31a34
commit 7da22c5c95
2 changed files with 35 additions and 25 deletions

View File

@ -8,24 +8,31 @@ div.category-config-list
div.resume div.resume
div.resume-title Attachments div.resume-title Attachments
div.count 2/7 div.count 2/7
div.progress div.summary-role
span(style='width: 50%') div.role-summary-single.active
div.role-summary-single.inactive
div.role-summary-single.inactive
div.role-summary-single.active
div.role-summary-single.inactive
div.role-summary-single.inactive
div.icon.icon-arrow-bottom div.icon.icon-arrow-bottom
div.category-config div.category-config
div.resume div.resume
div.resume-title User stories div.resume-title User stories
div.count 2/7 div.count 2/7
div.progress div.summary-role
span(style='width: 20%') div.role-summary-single.active
div.role-summary-single.inactive
div.icon.icon-arrow-bottom div.icon.icon-arrow-bottom
div.category-config div.category-config
div.resume div.resume
div.resume-title Issues div.resume-title Issues
div.count 2/7 div.count 2/7
div.progress div.summary-role
span(style='width: 75%') div.role-summary-single.active
div.role-summary-single.inactive
div.icon.icon-arrow-up div.icon.icon-arrow-up
div.category-items div.category-items
div.category-item div.category-item
@ -58,6 +65,7 @@ div.category-config-list
div.resume div.resume
div.resume-title User stories div.resume-title User stories
div.count 2/7 div.count 2/7
div.progress div.summary-role
span(style='width: 20%') div.role-summary-single.active
div.icon.icon-arrow-bottom div.role-summary-single.inactive
div.icon.icon-arrow-bottom

View File

@ -4,36 +4,38 @@
border-top: 1px solid $gray-light; border-top: 1px solid $gray-light;
} }
.resume { .resume {
@include table-flex();
cursor: pointer; cursor: pointer;
display: flex;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
} }
.resume-title { .resume-title {
line-height: 28px; @include table-flex-child(1, 280px, 0);
width: 280px;
} }
.count { .count {
@include table-flex-child(1, 0, 0);
color: $gray-light; color: $gray-light;
line-height: 28px;
} }
.progress { .summary-role {
background-color: $whitish; @include table-flex-child(3, 280px, 0);
margin-left: 1rem; .role-summary-single {
padding: 4px; background: $gray-light;
width: 220px; display: inline-block;
span {
background-color: #9fcf0f;
display: block;
height: 20px; height: 20px;
margin-right: .1rem;
width: 15px;
&.active {
background: $green-taiga;
}
&.inactive {
background: $gray;
}
} }
} }
.icon { .icon {
@include table-flex-child(1, 0, 0);
@extend %xlarge; @extend %xlarge;
line-height: 28px; text-align: right;
position: absolute;
right: 1rem;
top: 1rem;
} }
.category-items { .category-items {
background-color: $whitish; background-color: $whitish;