refactor(todo): apply new design on blur skun

src/app/pages/dashboard/dashboard.html

@@ -43,7 +43,7 @@
   <div class="col-xlg-3 col-lg-6 col-md-6 col-xs-12"
        ba-panel
        ba-panel-title="To Do List"
-       ba-panel-class="xmedium-panel feed-comply-panel with-scroll">
+       ba-panel-class="xmedium-panel feed-comply-panel with-scroll todo-panel">
     <dashboard-todo></dashboard-todo>
   </div>
   <div class="col-xlg-6 col-lg-6 col-md-6 col-xs-12"

src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js

@@ -105,8 +105,8 @@
 
     $scope.newTodoText = '';
 
-    $scope.addToDoItem = function (event) {
+    $scope.addToDoItem = function (event, clickPlus) {
-      if (event.which === 13) {
+      if (clickPlus || event.which === 13) {
         $scope.todoList.unshift({
           text: $scope.newTodoText,
           edit: false,

src/app/pages/dashboard/dashboardTodo/dashboardTodo.html

@@ -1,8 +1,11 @@
-<input type="text" value="" class="form-control task-todo" placeholder="Task to do" ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
+<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
+<i ng-click="addToDoItem('',true)" class="add-item-icon ion-plus-round"></i>
+<div class="box-shadow-border"></div>
 <ul class="todo-list" ui-sortable ng-model="todoList">
   <li ng-repeat="item in todoList" ng-if="!item.deleted" ng-init="activeItem=false"
       ng-class="{checked: isChecked, active: activeItem}" class="{{ getMarkColor(item.markId) }}"
       ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
+    <div class="blur-container"><div class="blur-box"></div></div>
     <i class="mark"></i>
     <label class="todo-checkbox custom-checkbox custom-input-success">
       <input type="checkbox" ng-model="isChecked">

src/sass/theme/dashboard/_popularApp.scss

@@ -39,3 +39,15 @@
     }
   }
 }
+
+
+body.badmin-transparent{
+  .popular-app-img {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .popular-app-cost{
+    border-bottom: 1px solid rgba(0,0,0,0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+  }
+}

src/sass/theme/dashboard/_todo.scss

@@ -6,7 +6,6 @@ ul.todo-list {
   margin: 0;
   padding: 0;
   .placeholder, .ui-sortable-placeholder {
-    background: #fff;
   }
   li {
     margin: 0 0 -1px 0;
@@ -85,7 +84,7 @@ ul.todo-list {
       i.mark {
         min-width: 40px;
       }
-      label.todo-checkbox>span {
+      label.todo-checkbox > span {
         &:before {
           color: white;
           content: '\f10c';
@@ -95,7 +94,7 @@ ul.todo-list {
           float: none;
         }
       }
-      label.todo-checkbox>input:checked+span:before {
+      label.todo-checkbox > input:checked + span:before {
         content: '\f00c';
       }
     }
@@ -107,7 +106,7 @@ label.todo-checkbox {
   padding-right: 25px;
   min-height: 16px;
   cursor: pointer;
-  >span {
+  > span {
     white-space: nowrap;
     height: 16px;
     &:before {
@@ -117,3 +116,111 @@ label.todo-checkbox {
     }
   }
 }
+
+.add-item-icon {
+  display: none;
+}
+
+body.badmin-transparent {
+  .todo-panel.panel {
+    color: white;
+    opacity: 0.9;
+  }
+  input.task-todo {
+    color: white;
+    width: calc(100% - 25px);
+    opacity: 0.9;
+    border: none;
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    }
+    &::-webkit-input-placeholder {
+      color: white;
+      opacity: 0.6;
+    }
+  }
+  .add-item-icon {
+    display: block;
+    float: right;
+    margin-top: -45px;
+    margin-right: 5px;
+    font-size: 25px;
+    cursor: pointer;
+  }
+
+  ul.todo-list {
+    li {
+      margin: 0;
+      border: none;
+      font-weight: $font-light;
+
+      .blur-container{
+        height: 40px;
+        position: absolute;
+        width: calc(100% + 40px);;
+        top: 0;
+        left: -25px;
+        overflow-y: hidden;
+      }
+      &:hover{
+        .blur-container{
+          box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        }
+        .blur-box {
+          height: 100%;
+          background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
+          -webkit-filter: blur(3px);
+        }
+      }
+      &.primary, &.danger,&.success, &.info, &.warning {
+        i.mark {
+          background-color: transparent;
+        }
+      }
+      i.remove-todo {
+        color: white;
+        opacity: 0.4;
+        &:hover {
+          color: white;
+          opacity: 0.95;
+        }
+      }
+      i.mark {
+        min-width: 40px;
+        background-color: transparent;
+      }
+      label.todo-checkbox > span {
+        &:before {
+          color: white;
+          content: '\f10c';
+          float: none;
+          margin-right: 6px;
+          transition: none;
+        }
+      }
+      &.checked {
+        label.todo-checkbox > span {
+          &:before {
+            margin-right: 0;
+            position: absolute;
+            content: '';
+            background-size: contain;
+            background: url("../../../assets/img/app/todo/check-icon.png") no-repeat;
+          }
+        }
+      }
+    }
+  }
+
+  .box-shadow-border{
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+    width: calc(100% + 44px);
+    margin-left: -22px;
+  }
+
+}

src/sass/theme/dashboard/_trafficChart.scss

@@ -208,3 +208,9 @@
     left: calc(50% - 90px);
   }
 }
+body.badmin-transparent{
+  .traffic-chart canvas{
+    border: 10px solid rgba(0,0,0,0.35);
+    border-radius: 150px;
+  }
+}

src/sass/theme/skins/_02_transparent.scss

@@ -4,10 +4,6 @@ body.badmin-transparent {
   .default-color{
     color: $default-text;
   }
-  .traffic-chart canvas{
-    border: 10px solid rgba(0,0,0,0.35);
-    border-radius: 150px;
-  }
   .panel.panel-blur{
     border-radius: 5px;
     .panel-heading{
@@ -15,12 +11,4 @@ body.badmin-transparent {
       box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
     }
   }
-  .popular-app-img {
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-  }
-  .popular-app-cost{
-    border-bottom: 1px solid rgba(0,0,0,0.12);
-    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
-  }
 }