From e2696d090e3b5cb77952b2c0a6a695453d85b8ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Fri, 30 Jan 2015 15:17:20 +0100
Subject: [PATCH] Basic custom field styles

---
 .../modules/admin/admin-us-extras.jade        | 16 +++++---
 .../modules/admin/admin-custom-fields.scss    | 37 +++++++++++++++++++
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/app/partials/includes/modules/admin/admin-us-extras.jade b/app/partials/includes/modules/admin/admin-us-extras.jade
index e4758637..37a24a0f 100644
--- a/app/partials/includes/modules/admin/admin-us-extras.jade
+++ b/app/partials/includes/modules/admin/admin-us-extras.jade
@@ -5,14 +5,20 @@ section.custom-fields-table.basic-table
             div.custom-description Description
             div.custom-options
     div.table-body
-        div.row
-            div.custom-name
+        div.row.single-custom-field
+            div.custom-name Name
             div.custom-description Description
             div.custom-options
+                div.custom-options-wrapper
+                    a.edit-webhook.icon.icon-edit(href="", title="Edit Custom Field")
+                    a.delete-webhook.icon.icon-delete(href="", title="Delete Custom Field")
         form.row
             fieldset.custom-name
-                input(type="text")
-            fieldset.custom-description Description
-                input(type="text")
+                input(type="text", placeholder="Set your custom field name")
+            fieldset.custom-description
+                input(type="text", placeholder="Set your custom field description")
             fieldset.custom-options
+                div.custom-options-wrapper
+                    a.edit-webhook.icon.icon-floppy(href="", title="Save Custom Field")
+                    a.delete-webhook.icon.icon-delete(href="", title="Delete Custom Field")
 
diff --git a/app/styles/modules/admin/admin-custom-fields.scss b/app/styles/modules/admin/admin-custom-fields.scss
index 95f74aba..b7cfb36f 100644
--- a/app/styles/modules/admin/admin-custom-fields.scss
+++ b/app/styles/modules/admin/admin-custom-fields.scss
@@ -1,3 +1,40 @@
 .custom-fields-table {
+    .row {
+        border-bottom: 0;
+        padding: .5rem 0;
+        &:hover {
+            .custom-options-wrapper {
+                opacity: 1;
+                transition: opacity .2s linear;
+            }
+        }
+    }
+    .table-header {
+        @extend %bold;
+        border-bottom: 1px solid $gray-light;
+    }
+    .single-custom-field {
+        border-bottom: 1px solid $whitish;
+        color: $gray;
+    }
+    .custom-name,
+    .custom-description {
+        color: $gray;
+        margin-right: .5rem;
+    }
+    .custom-name {
+        flex-grow: 1;
+    }
+    .custom-description {
+        flex-grow: 2;
+    }
+    .custom-options {
+        flex-basis: 200px;
+        flex-grow: 0;
+    }
+    .custom-options-wrapper {
+        opacity: 0;
+        transition: opacity .3s linear;
+    }
 
 }