prepare org filter markup and styles

app/styles/app.scss

@@ -49,6 +49,7 @@
 @import "app/components/buttons";
 @import "app/components/icons";
 @import "app/components/search";
+@import "app/components/dropdown";
 
 @import "app/layout";
 @import "app/layouts/dashboard";

app/styles/app/components/dropdown.sass

@@ -0,0 +1,113 @@
+/*
+ * Dashboard Activation Dropdown
+ */
+
+$dropdown-border: #C3D9DB
+
+.dropdown--db
+  @include resetul
+  @extend %br-4px
+  position: absolute
+  padding: .8em .5em
+  z-index: 90
+  width: 12.5em;
+  right: 0;
+  top: 4em;
+  border: 2px $dropdown-border solid;
+  background-color: $white
+  display: none
+  a
+    display: block
+    padding: 0.4em 1em .2em
+    &:hover
+      background-color: $dropdown-color
+      color: $white
+  &:before
+    content: ""
+    width: 1.2em
+    height: 1.2em
+    display: block
+    position: absolute
+    top: -0.7em;
+    right: 1.1em;
+    background-color: $white
+    border-top: solid 2px $dropdown-border;
+    border-left: solid 2px $dropdown-border;
+    transform: rotate(45deg);
+
+
+/*
+ * Dashboard Organizations Dropdown
+ */
+
+.current-org-avatar
+  display     : inline-block
+  height      : 20px
+  width       : 20px
+  vertical-align: top
+  margin : -5px 5px 0 0
+
+.dropdown--org
+  float : left
+
+.dropdown--org ul
+  text-align : left
+  display    : inline
+  margin     : 0
+  padding    : 0
+  list-style : none
+  z-index    : 1000
+
+.dropdown--org ul li
+  background   : $white
+  position     : relative
+  display      : inline-block
+  padding      : 10px 0 10px 0
+  margin-right : -4px
+  margin-top   : 0
+  cursor       : pointer
+  border-radius         : 0px
+
+.dropdown--org li.filters-start:hover
+  background-color : #fff
+
+.dropdown--org ul li ul
+  padding    : 0
+  position   : absolute
+  top        : 35px
+  left       : 0
+  width      : 200px
+  display    : none
+  opacity    : 0
+  visibility : hidden
+  box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
+
+.dropdown--org ul li ul li
+  display      : block
+  line-height  : 23px
+  padding-left : 20px
+
+.dropdown--org ul li ul li:first-child
+  border-top-left-radius  : 4px
+  border-top-right-radius : 4px
+
+.dropdown--org ul li ul li:last-child
+  border-bottom-left-radius  : 4px
+  border-bottom-right-radius : 4px
+
+.dropdown--org ul li ul li div
+  display          : inline-block
+  width            : 20px
+  height           : 20px
+  margin-right     : 5px
+  text-indent      : -9999px
+  border-radius    : 100px
+
+.dropdown--org ul li ul li:hover
+  background : #5e869a
+  color      : $white
+
+.dropdown--org ul li:hover ul
+  display    : block
+  opacity    : 1
+  visibility : visible

app/styles/app/layouts/dashboard.sass

@@ -1,6 +1,5 @@
 /*
- * Dashboard
+ * Dashboard List 
- * @todo: split into components: filter, search
  */
 
 @mixin colorDbelements($color)
@@ -19,7 +18,6 @@
 
 $db-gray: #C9C9C9
 $db-text-color: #ACAAAA
-$dropdown-border: #C3D9DB
 
 .dashboard
   color: $db-text-color
@@ -97,7 +95,6 @@ $dropdown-border: #C3D9DB
   left: 0
   height: 100%
   width: 2.5em
-  // background-color: $db-gray
   border-top-left-radius: 4px
   border-bottom-left-radius: 4px
 
@@ -160,40 +157,12 @@ $dropdown-border: #C3D9DB
     height: 2em
     right: 0
 
-.db-burger:hover ~ .dropdown,
+.dropdown--db
-.dropdown:hover
-  display: block
-
-.dropdown
-  @include resetul
-  @extend %br-4px
-  position: absolute
-  padding: .8em .5em
-  z-index: 90
-  width: 12.5em;
-  right: 0;
-  top: 4em;
-  border: 2px $dropdown-border solid;
-  background-color: $white
   display: none
-  a
+
-    display: block
+.db-burger:hover ~ .dropdown--db,
-    padding: 0.4em 1em .2em
+.dropdown--db:hover
-    &:hover
+  display: block
-      background-color: $dropdown-color
-      color: $white
-  &:before
-    content: ""
-    width: 1.2em
-    height: 1.2em
-    display: block
-    position: absolute
-    top: -0.7em;
-    right: 1.1em;
-    background-color: $white
-    border-top: solid 2px $dropdown-border;
-    border-left: solid 2px $dropdown-border;
-    transform: rotate(45deg);
 
 .dashboard-starred,
 .dashboard-active,
@@ -244,79 +213,6 @@ $dropdown-border: #C3D9DB
     h2, h3, p, button, .db-status
       opacity: .7
 
-
-// .current-org-avatar
-//   display     : inline-block
-//   height      : 20px
-//   width       : 20px
-//   vertical-align: top
-//   margin : -5px 5px 0 0
-
-// #filters
-//   float : left
-
-// #filters ul
-//   text-align : left
-//   display    : inline
-//   margin     : 0
-//   padding    : 0
-//   list-style : none
-//   z-index    : 1000
-
-// #filters ul li
-//   background   : $white
-//   position     : relative
-//   display      : inline-block
-//   padding      : 10px 0 10px 0
-//   margin-right : -4px
-//   margin-top   : 0
-//   cursor       : pointer
-//   border-radius         : 0px
-
-// #filters li.filters-start:hover
-//   background-color : #fff
-
-// #filters ul li ul
-//   padding    : 0
-//   position   : absolute
-//   top        : 35px
-//   left       : 0
-//   width      : 200px
-//   display    : none
-//   opacity    : 0
-//   visibility : hidden
-//   box-shadow         : 2px 1px 4px 0px rgba(148,145,138,0.4)
-
-// #filters ul li ul li
-//   display      : block
-//   line-height  : 23px
-//   padding-left : 20px
-
-// #filters ul li ul li:first-child
-//   border-top-left-radius  : 4px
-//   border-top-right-radius : 4px
-
-// #filters ul li ul li:last-child
-//   border-bottom-left-radius  : 4px
-//   border-bottom-right-radius : 4px
-
-// #filters ul li ul li div
-//   display          : inline-block
-//   width            : 20px
-//   height           : 20px
-//   margin-right     : 5px
-//   text-indent      : -9999px
-//   border-radius    : 100px
-
-// #filters ul li ul li:hover
-//   background : #5e869a
-//   color      : $white
-
-// #filters ul li:hover ul
-//   display    : block
-//   opacity    : 1
-//   visibility : visible
-
 // #views
 //   float : left
 

app/templates/dashboard/repositories.hbs

@@ -1,7 +1,6 @@
 <div id="filters-search" class="section section--white section--maxheight">
   <div class="row">
-    <!--
+    <div class="small-6 medium-3 large-2 columns dropdown--org" id="filters">
-    <div class="small-6 medium-3 large-2 columns" id="filters">
       <ul>
         <li class="filters-start">
           <div class="current-org-avatar org-travisci"></div>Travis CI <div class="arrow-down"></div>
@@ -15,8 +14,7 @@
         </li>
       </ul>
     </div>
-    -->
+{{!--     <div class="small-6 medium-2 large-2 columns no-padding" id="views">
-    <!-- <div class="small-6 medium-2 large-2 columns no-padding" id="views">
       <ul>
         <li class="views-start">
           View all repos <div class="arrow-down"></div>
@@ -28,7 +26,7 @@
           </ul>
         </li>
       </ul>
-    </div> -->
+    </div> --}}
     <div class="search">
       {{filter-input placeholder="Search all repositories" class="search-field"
           action="updateFilter" on="key-up"}}
@@ -57,7 +55,7 @@
         <div class="db-burger">
           <span class="icon icon-burger"></span>
         </div>
-        <ul class="dropdown">
+        <ul class="dropdown--db">
           <li><a href="#" title="">Deactivate repository</a></li>
           <li><a href="#" title="">Trigger a build</a></li>
         </ul>
@@ -97,7 +95,7 @@
         <div class="db-burger">
           <span class="icon icon-burger"></span>
         </div>
-        <ul class="dropdown">
+        <ul class="dropdown--db">
           <li><a href="#" title="">Deactivate repository</a></li>
           <li><a href="#" title="">Trigger a build</a></li>
         </ul>
@@ -123,7 +121,7 @@
       <div class="db-burger">
         <span class="icon icon-burger"></span>
       </div>
-      <ul class="dropdown">
+      <ul class="dropdown--db">
         <li><a href="#" title="">Deactivate repository</a></li>
         <li><a href="#" title="">Trigger a build</a></li>
       </ul>