Start designing the card details pane

Implement a dynamic overflow to focus sight on the pane.

2 files changed, 6 insertions, 87 deletions

diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade
index 40e0dae3..7e237233 100644
--- a/client/components/sidebar/sidebar.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -2,7 +2,7 @@ template(name="sidebar")
   .board-sidebar.sidebar(class="{{#if isOpen}}is-open{{/if}}")
     a.sidebar-tongue.js-toogle-sidebar(
       class="{{#if isTongueHidden}}is-hidden{{/if}}")
-      i.fa.fa-chevron-left
+      i.fa.fa-angle-left
     .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
       unless isDefaultView
         h2
@@ -44,9 +44,9 @@ template(name="labelsWidget")
       | {{_ 'labels'}}
     .board-widget-content
       each currentBoard.labels
-        a.card-label(class="card-label-{{color}}").js-label
-          span.card-label-name= name
-      a.card-label.js-add-label
+          a.card-label(class="card-label-{{color}}").js-label
+            span.card-label-name= name
+      a.card-label.add-label.js-add-label
         i.fa.fa-plus
 
 template(name="memberPopup")
diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index e24b7de2..57cc85fd 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/client/components/sidebar/sidebar.styl
@@ -59,88 +59,6 @@
   &.is-open
     right: 0
 
-.board-widget-nav
-  border-radius: 3px
-  background: #dcdcdc
-  overflow: hidden
-  padding: 0
-  position: relative
-
-  .toggle-widget-nav
-    border-radius: 3px
-    color: #8c8c8c
-    margin: 0
-    padding: 7px 10px
-    position: relative
-    cursor: pointer
-
-    .toggle-menu-icon
-      position: absolute
-      top: 8px
-      right: 8px
-
-    &:hover
-      background: #ccc
-      color: #4d4d4d
-
-  .nav-list
-    display: block
-    opacity: 1
-    max-height: 400px
-
-    hr
-      margin: 2px 0
-      color: #ccc
-      background: #ccc
-
-  .nav-list-item
-    display: block
-    font-weight: 700
-    line-height: 30px
-    overflow: hidden
-    padding: 0 8px 0 36px
-    position: relative
-    text-decoration: none
-
-    .icon-type
-      left: 10px
-      position: absolute
-      top: 6px
-
-    &:hover
-      background: #ccc
-
-      .icon-type
-        color: #686868
-
-  .nav-list-sub-item
-    font-weight: 400
-    color: #666
-
-    &:hover
-      color: #4d4d4d
-
-  &.collapsed
-
-    .nav-list
-      max-height: 0
-      opacity: 0
-
-      hr
-        margin: 0
-
-    .toggle-widget-nav
-      color: #4d4d4d
-
-.board-widget-title
-  display: block
-  min-height: 20px
-  margin-bottom: 6px
-
-.board-widget-content
-  position: relative
-  z-index: 1
-
 .board-widget h4
   margin: 5px 0
 
@@ -162,7 +80,8 @@
   transition: left .1s
 
   i.fa
-    margin: 9px
+    padding: 3px 9px
+    font-size: 24px
     transition: transform 0.5s
 
   .board-sidebar.is-open &