members table

app/partials/membership.jade

@@ -7,7 +7,49 @@ block content
     sidebar.menu-secondary.sidebar
         include views/modules/admin-menu
 
-    section.main.search-result
+    section.main.admin-membership
-        include views/components/mainTitle
+        header
-        include views/modules/search-filter
+            include views/components/mainTitle
-        include views/modules/search-result-table
+            a.button-green(title="Add New US" href="")
+               span.text + New role
+
+        section.admin-membership-table
+            div.row.title
+                div.header-member Member
+                div.header-role Role
+                div.header-status Status
+            div.row
+                div.row-member
+                    figure.avatar
+                        img(alt="username" src="http://thecodeplayer.com/u/uifaces/12.jpg")
+                        figcaption
+                            span.name Pilar
+                            span.email pilar.estaban@secuoyas.com
+                div.row-role
+                    select
+                        option UX
+                        option Front
+                        option Back
+                div.row-status
+                    div.active Active
+                    a(href="#").delete
+                        span.icon.icon-delete
+
+            div.row
+                div.row-member
+                    figure.avatar
+                        img(alt="username" src="http://thecodeplayer.com/u/uifaces/12.jpg")
+                        figcaption
+                            span.name Pilar
+                            span.email pilar.estaban@secuoyas.com
+                div.row-role
+                    select
+                        option UX
+                        option Front
+                        option Back
+                div.row-status
+                    a(href="#").pending
+                        | Pending
+                        span.icon.icon-reload
+                    a(href="#").delete
+                        span.icon.icon-delete

app/styles/main.scss

@@ -42,6 +42,7 @@ $prefix-for-spec:      true;
 @import 'modules/search-filter';
 @import 'modules/search-result-table';
 @import 'modules/admin-menu';
+@import 'modules/admin-membership';
 
 // Responsive
 @import 'responsive/mobile';

app/styles/modules/admin-membership.scss

@@ -0,0 +1,112 @@
+.admin-membership {
+    header {
+        @include clearfix;
+        margin-bottom: 1rem;
+        h1 {
+            float: left;
+            margin-bottom: 0;
+        }
+        a {
+            float: right;
+        }
+    }
+}
+
+.admin-membership-table {
+    align-content: stretch;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 100%;
+    .title {
+        font-family: 'DroidSans-Bold';
+    }
+    .row {
+        align-content: stretch;
+        align-items: center;
+        border-bottom: 1px solid $gray-light;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        padding: 1rem 0 1rem 1rem;
+        text-align: left;
+        width: 100%;
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+    .avatar {
+        align-items: center;
+        display: flex;
+        figcaption {
+            margin-left: 1rem;
+        }
+        img {
+            flex-basis: 35px;
+        }
+        .name,
+        .email {
+            display: block;
+            width: 100%;
+        }
+        .name {
+            font-family: DroidSans-Bold;
+        }
+        .email {
+            color: $gray-light;
+        }
+    }
+    .active,
+    .pending {
+        padding: 8px;
+        width: 115px;
+    }
+    .active {
+        background-color: $whitish;
+    }
+    .pending {
+        background-color: $red-light;
+        color: $white;
+        .icon {
+            float: right;
+        }
+        &:hover {
+            @include transition (background-color .3s linear);
+            background-color: $red;
+        }
+    }
+    .header-role,
+    .header-status {
+        padding-left: .5rem;
+    }
+    .row-role {
+        padding-right: 1rem;
+    }
+    .row-status {
+        display: flex;
+        .delete {
+            @extend %large;
+            align-items: center;
+            color: $gray-light;
+            display: flex;
+            margin-left: 15px;
+            padding: 0 15px;
+            &:hover {
+                color: $red;
+            }
+        }
+    }
+    .row-status,
+    .header-status {
+        width: 180px;
+    }
+    .row-member,
+    .row-role,
+    .header-member,
+    .header-role {
+        flex: 1 0 50px;
+    }
+}

csslintrc.json

@@ -19,5 +19,6 @@
     "regex-selectors": false,
     "floats": false,
     "fallback-colors": false,
-    "adjoining-classes": false
+    "adjoining-classes": false,
+    "qualified-headings": false
 }