taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved taskboard styles

stable
Xavier Julián 2014-08-07 10:33:07 +02:00
parent 36ec352fc5
commit 462d2b7073
3 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/styles/components/taskboard-task.scss
View File

@ -1,13 +1,14 @@
.taskboard-task { .taskboard-task {
@include transition (box-shadow .4s linear); @include transition (box-shadow .4s linear);
background: $very-light-gray; background: $postit;
box-shadow: none; box-shadow: none;
min-height: 7rem; min-height: 7rem;
position: relative; position: relative;
&:hover { &:hover {
.icon { .icon {
@include transition(color .3s linear); @include transition(coalor .3s linear, opacity .3s linear);
color: $gray-light; color: $postit-dark-hover;
opacity: 1;
} }
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@ -18,15 +19,17 @@
} }
.taskboard-tagline { .taskboard-tagline {
@include table-flex(); @include table-flex();
height: .4rem; background: $gray-light; //Fallback
height: .3rem;
} }
.taskboard-tag { .taskboard-tag {
@include table-flex-child(1, 0, 0, 0); @include table-flex-child(1, 0, 0, 0);
background: $postit-hover; //Fallback background: $postit-hover; //Fallback
height: .1rem; height: .3rem;
} }
.taskboard-task-inner { .taskboard-task-inner {
@include table-flex(); @include table-flex();
min-height: 7.5rem;
padding: 1rem .5rem; padding: 1rem .5rem;
} }
.avatar { .avatar {
@ -51,29 +54,35 @@
} }
} }
.task-assigned { .task-assigned {
@extend %bold; @extend %small;
color: $postit-dark-hover;
display: block; display: block;
} }
.task-num { .task-num {
color: $grayer; color: $grayer;
margin-right: .5em; margin-right: .5em;
} }
.task-name {
@extend %bold;
color: $grayer;
}
.taskboard-text { .taskboard-text {
@extend %small; @extend %small;
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
padding: 0 .5rem 0 1rem; padding: 0 .5rem 0 1rem;
} }
.icon { .icon {
@include transition(color .3s linear); @include transition(color .3s linear, opacity .3s linear);
} }
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {
@extend %large; @extend %large;
bottom: .5rem; bottom: .5rem;
color: $whitish; color: $postit-hover;
opacity: 0;
position: absolute; position: absolute;
&:hover { &:hover {
color: $grayer; color: $postit-dark-hover;
} }
} }
.icon-edit { .icon-edit {

5
app/styles/dependencies/colors.scss
View File

@ -30,5 +30,6 @@ $button-green-hover: #9dce0a;
$button-gray: #585858; $button-gray: #585858;
$button-gray-hover: #879b89; $button-gray-hover: #879b89;
$postit: #fff0c5; $postit: #fff8e4;
$postit-hover: #e3d6b0; $postit-hover: #f1e8cd;
$postit-dark-hover: #e4d6ad;

1
app/styles/modules/backlog/taskboard-table.scss
View File

@ -62,6 +62,7 @@ $column-margin: 0 10px 0 0;
} }
.taskboard-tasks-box { .taskboard-tasks-box {
background: $whitish; background: $whitish;
//background: $very-light-gray;
} }
.taskboard-userstory-box { .taskboard-userstory-box {