User list style

app/assets/javascripts/backbone/apps/users/list/list_view.js

@@ -8,8 +8,8 @@ this.VelhaMania.module('UsersApp.List', function(List, App, Backbone, Marionette
 
     List.UserView = Marionette.ItemView.extend({
         template: 'users/list/templates/user',
-        className: 'user-item',
         tagName: 'li',
+        className: 'user-item',
         triggers: {
             'click': 'user:clicked'
         },

app/assets/javascripts/backbone/apps/users/list/templates/user.jst.jade

@@ -1,2 +1,7 @@
-img(src= avatar)
-span.username= username
+.user.waves-effect
+  .user-avatar
+    img(src= avatar)
+  .user-username
+    span.username= username
+
+.divider

app/assets/stylesheets/application.scss

@@ -25,6 +25,7 @@
 // -------------------------------------
 
 @import "components/grid";
+@import "components/waves";
 
 // -------------------------------------
 //   Structures
@@ -33,6 +34,7 @@
 @import "structures/body";
 @import "structures/nav";
 @import "structures/login";
+@import "structures/user";
 
 // -------------------------------------
 //   Inbox

app/assets/stylesheets/components/_waves.sass

@@ -0,0 +1,10 @@
+// *************************************
+//
+//   Waves
+//
+// *************************************
+
+// ----- Colors ----- //
+
+.waves-blue .waves-ripple
+  background-color: $c-waves-blue-background

app/assets/stylesheets/foundation/_config.sass

@@ -25,6 +25,7 @@
 
 $blue: #053554
 $light-blue: #155F8E
+$light-blue-opacify: rgba(179, 222, 228, 0.2)
 $dark-blue: #3D6884
 $white: #FFF
 
@@ -42,19 +43,40 @@ $c-highlight: lighten($blue, 90%)
 
 // ----- Structures ----- //
 
+// ----- Nav ----- //
+
 $c-nav-background: $blue
 
+// ----- Button ----- //
+
 $c-button-background: $blue
 $c-button-highlight-background: $light-blue
 
+// ----- Form ----- //
+
 $c-form-background: $white
-$c-input-focus: $light-blue
 
+// ----- Inputs ----- //
+
+$c-input-focus: $light-blue
 $c-input-border-is-invalid: $error-color
+
+// ----- Label ----- //
+
 $c-label-is-invalid: $error-color
 
+// ----- Logo ----- //
+
 $c-brand-logo: $dark-blue
 
+// ----- Username ----- //
+
+$c-username-color: $dark-blue
+
+// ----- Waves ----- //
+
+$c-waves-blue-background: $light-blue-opacify
+
 // -------------------------------------
 //   Base
 // -------------------------------------
@@ -89,6 +111,14 @@ $b-space-m: $b-space * $b-space-scale * 3
 $b-space-l: $b-space * $b-space-scale * 4
 $b-space-xl: $b-space * $b-space-scale * 5
 
+// ----- User List Space ----- //
+
+$b-user-list-space: $b-space
+
+// ----- User Item Space ----- //
+
+$b-user-item-space: $b-space
+
 // -------------------------------------
 //   Components
 // -------------------------------------

app/assets/stylesheets/structures/_user.sass

@@ -0,0 +1,59 @@
+// *************************************
+//
+//   User
+//
+// *************************************
+
+.user
+  @extend .row
+  @extend .waves-blue
+  height: em(70px)
+  margin-bottom: 0
+  padding: $b-user-item-space
+  width: 100%
+
+// -------------------------------------
+//   Scaffolding
+// -------------------------------------
+
+// -------- List -------- //
+
+.user-list
+  @extend .card
+  margin: em($b-user-list-space) auto 0
+  min-width: em(200px)
+  max-width: em(500px)
+  padding: $b-user-list-space
+
+// -------- Item -------- //
+
+.user-item
+  width: 100%
+
+// -------- Avatar -------- //
+
+.user-avatar
+  @extend .col
+  @extend .m3
+  @extend .s12
+  @extend .card-image
+  height: em(50px)
+  text-align: center
+  img
+    height: em(50px)
+    width: em(50px) !important
+
+// -------- Username -------- //
+
+.user-username
+  @extend .col
+  @extend .m9
+  @extend .s12
+  @extend .card-content
+  line-height: em(50px)
+  height: em(50px)
+  padding: 0 !important
+  span
+    @extend .card-title
+    color: $c-username-color !important
+    font-weight: 100