diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index 547891ff..b13b2db2 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -1,13 +1,14 @@ .taskboard-task { @include transition (box-shadow .4s linear); - background: $very-light-gray; + background: $postit; box-shadow: none; min-height: 7rem; position: relative; &:hover { .icon { - @include transition(color .3s linear); - color: $gray-light; + @include transition(coalor .3s linear, opacity .3s linear); + color: $postit-dark-hover; + opacity: 1; } } &.ui-sortable-helper { @@ -18,15 +19,17 @@ } .taskboard-tagline { @include table-flex(); - height: .4rem; + background: $gray-light; //Fallback + height: .3rem; } .taskboard-tag { @include table-flex-child(1, 0, 0, 0); background: $postit-hover; //Fallback - height: .1rem; + height: .3rem; } .taskboard-task-inner { @include table-flex(); + min-height: 7.5rem; padding: 1rem .5rem; } .avatar { @@ -51,29 +54,35 @@ } } .task-assigned { - @extend %bold; + @extend %small; + color: $postit-dark-hover; display: block; } .task-num { color: $grayer; margin-right: .5em; } + .task-name { + @extend %bold; + color: $grayer; + } .taskboard-text { @extend %small; @include table-flex-child($flex-grow: 10, $flex-basis: 50px); padding: 0 .5rem 0 1rem; } .icon { - @include transition(color .3s linear); + @include transition(color .3s linear, opacity .3s linear); } .icon-edit, .icon-drag-h { @extend %large; bottom: .5rem; - color: $whitish; + color: $postit-hover; + opacity: 0; position: absolute; &:hover { - color: $grayer; + color: $postit-dark-hover; } } .icon-edit { diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index 95d8c90b..ebc3cfcd 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -30,5 +30,6 @@ $button-green-hover: #9dce0a; $button-gray: #585858; $button-gray-hover: #879b89; -$postit: #fff0c5; -$postit-hover: #e3d6b0; +$postit: #fff8e4; +$postit-hover: #f1e8cd; +$postit-dark-hover: #e4d6ad; diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 443fbad6..5a219c5b 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -62,6 +62,7 @@ $column-margin: 0 10px 0 0; } .taskboard-tasks-box { background: $whitish; + //background: $very-light-gray; } .taskboard-userstory-box {