Merge branch 'todo-done-updates' into 'master'

Change opacity of finished todos instead of background color

See merge request !10100

1 files changed, 22 insertions, 8 deletions

diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 5f0aede4f5e..b071d7f18cd 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -47,6 +47,7 @@
 
   .todo-avatar,
   .todo-actions {
+    @include transition(opacity);
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
   }
@@ -67,21 +68,34 @@
     flex: 0 1 100%;
     min-width: 0;
   }
-}
 
-.todos-list > .todo.todo-pending.done-reversible {
-  background-color: $gray-light;
+  &.todo-pending.done-reversible {
+    background-color: $white-light;
 
-  &:hover {
-    border-color: $border-color;
-  }
+    &:hover {
+      border-color: $white-dark;
+      background-color: $gray-light;
 
-  .title {
-    font-weight: normal;
+      .todo-avatar,
+      .todo-item {
+        opacity: .6;
+      }
+    }
+
+    .todo-avatar,
+    .todo-item {
+      opacity: .2;
+    }
+
+    .btn {
+      background-color: $gray-light;
+    }
   }
 }
 
 .todo-item {
+  @include transition(opacity);
+
   .todo-title {
     display: flex;