add animation to todo list

src/app/pages/dashboard/widgets/todo/_todo.scss

@@ -48,17 +48,6 @@ ul.todo-list {
       }
     }
 
-    i.mark {
-      display: block;
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      height: 42px;
-      width: 4px;
-      background: $input-border;
-      cursor: pointer;
-    }
-
     @mixin mark($color) {
       i.mark {
         background: $color;
@@ -79,6 +68,36 @@ ul.todo-list {
     &.warning {
       @include mark($warning);
     }
+
+    i.mark {
+      display: block;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      height: 42px;
+      min-width: 4px;
+      background: $input-border;
+      cursor: pointer;
+      transition: min-width 0.3s ease-out;
+    }
+
+    &.active {
+      i.mark {
+        min-width: 40px;
+      }
+      label.todo-checkbox>span {
+        &:before {
+          color: white;
+          content: '\f10c';
+          margin-right: 20px;
+          transition: margin-right 0.1s ease-out;
+          transition-delay: 0.2s;
+        }
+      }
+      label.todo-checkbox>input:checked+span:before {
+        content: '\f00c';
+      }
+    }
   }
 }
 
@@ -87,8 +106,13 @@ label.todo-checkbox {
   padding-right: 25px;
   min-height: 16px;
   cursor: pointer;
-  span {
+  >span {
     white-space: nowrap;
     height: 16px;
+    &:before {
+      border: none;
+      color: $help-text;
+      transition: all 0.15s ease-out;
+    }
   }
 }

src/app/pages/dashboard/widgets/todo/todo.html

@@ -1,13 +1,13 @@
 <input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
 <ul class="todo-list" ui-sortable ng-model="todoList">
-  <li ng-repeat="item in todoList" ng-if="!item.deleted" ng-class="{checked: isChecked}" class="{{ getMarkColor(item.markId) }}">
+  <li ng-repeat="item in todoList" ng-if="!item.deleted" ng-init="activeItem=false"
-    <i class="mark" ng-click="changeColor(item)"></i>
+      ng-class="{checked: isChecked, active: activeItem}" class="{{ getMarkColor(item.markId) }}"
+      ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
+    <i class="mark"></i>
     <label class="todo-checkbox custom-checkbox custom-input-success">
       <input type="checkbox" ng-model="isChecked">
       <span class="cut-with-dots">{{ item.text }}</span>
     </label>
-
-    <!--<span class="todo-text cut-with-dots nowrap">{{ item.text }}</span>-->
     <i class="remove-todo ion-ios-close-empty" ng-click="item.deleted = true"></i>
   </li>
 </ul>