From 3b6440a73dca6794aa35f34da7651eaf4c64e81a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 1 Jul 2014 14:46:01 +0200
Subject: [PATCH] Watchers component deletew and add

---
 app/partials/views/modules/watchers.jade |  4 +-
 app/styles/components/watchers.scss      | 57 ++++++++++++++++++++++++
 app/styles/main.scss                     |  1 +
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 app/styles/components/watchers.scss

diff --git a/app/partials/views/modules/watchers.jade b/app/partials/views/modules/watchers.jade
index b369882c..523d582e 100644
--- a/app/partials/views/modules/watchers.jade
+++ b/app/partials/views/modules/watchers.jade
@@ -8,4 +8,6 @@ section.watchers
                 div.watcher-avatar
                     a.avatar(href="", title="Assigned to")
                         img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username")
-                a.watcher-name(href="", title="Jesús Espino") Jesús
\ No newline at end of file
+                div.watcher-name
+                    a(href="", title="Jesús Espino") Jesús
+                    a.icon.icon-delete(href="", title="delete-watcher")
\ No newline at end of file
diff --git a/app/styles/components/watchers.scss b/app/styles/components/watchers.scss
new file mode 100644
index 00000000..c341758f
--- /dev/null
+++ b/app/styles/components/watchers.scss
@@ -0,0 +1,57 @@
+.watchers {
+    margin-top: 2rem;
+    .watchers-header {
+        border-bottom: 2px solid $gray-light;
+        padding: .5rem;
+        position: relative;
+        .title {
+            @extend %large;
+            @extend %title;
+            text-transform: uppercase;
+        }
+        .icon {
+            @extend %large;
+            position: absolute;
+            right: 1rem;
+            top: 4px;
+        }
+    }
+    .watcher-single {
+        @include table-flex(center, center, flex, row, wrap, center);
+        @include transition(background .3s linear);
+        background: transparent;
+        border-bottom: 1px solid $gray-light;
+        padding: .5rem;
+        vertical-align: middle;
+        &:last-child {
+            border: 0;
+        }
+        &:hover {
+            .icon-delete {
+                @include transition(opacity .2s ease-in);
+                opacity: 1;
+            }
+        }
+    }
+    .watcher-name {
+        @include table-flex-child(8, 0);
+        @extend %medium;
+        color: $grayer;
+        margin-left: 1rem;
+        position: relative;
+    }
+    .watcher-avatar {
+        @include table-flex-child(1, 0);
+    }
+    .icon-delete {
+        @include transition(all .2s ease-in);
+        opacity: 0;
+        position: absolute;
+        right: .5rem;
+        top: 0;
+        &:hover {
+            @include transition(color .3s ease-in);
+            color: $red;
+        }
+    }
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 6ccafb8a..23bc4a7a 100755
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -27,6 +27,7 @@ $prefix-for-spec:      true;
 @import 'components/notification-message';
 @import 'components/basic-table';
 @import 'components/paginator';
+@import 'components/watchers';
 
 //Modules
 @import 'modules/nav';