Refactor css

app/assets/stylesheets/application.css.sass

@@ -6,6 +6,7 @@
 @import 'new_styles/_spinner'
 
 @import 'sidebar'
+@import 'leftnavbar'
 @import 'sprites'
 @import 'header'
 @import 'footer'
@@ -16,6 +17,7 @@
 @import 'publisher_blueprint'
 @import 'facebox'
 @import 'aspects'
+@import 'stream-faces'
 @import 'popover'
 @import 'stream_element'
 @import 'report'

app/assets/stylesheets/aspects.css.scss

@@ -25,12 +25,6 @@
   }
 }
 
-.btn {
-  &.delete {
-    color: desaturate($red,10%);
-  }
-}
-
 .modify_aspect {
   background: url("icons/pencil.png") no-repeat;
   width: 12px;
@@ -99,68 +93,6 @@
   margin-bottom: -2px;
 }
 
-#people_stream.contacts {
-  .stream_element {
-    padding: 10px;
-    min-height: 30px;
-    
-    .media { overflow: visible; }
-    
-    .float-right {
-      top: 16px;
-
-      a {
-        @include opacity(1);
-
-        &:hover {
-          @include opacity(0.6);
-        }
-      }
-    }
-    
-    .info { margin-top: -2px; }
-  }
-  
-  .avatar {
-    height: 30px;
-    width: 30px;
-  }
-
-  .icons-monotone_close_exit_delete {
-    height: 14px;
-    width: 14px;
-  }
-  
-  .no_contacts {
-    text-align: center;
-    margin-top: 50px;
-  }
-}
-
-#selected_aspect_contacts .avatar {
-    height: 32px;
-    width: 32px;
-    margin-bottom: -2px;
-}
-
-.stream-faces a:hover { text-decoration: none; }
-
-#view_all_contacts_link {
-  @include border-radius(2px);
-  display: block;
-  padding: 5px;
-  border: 1px dotted #aaa;
-  text-align: center;
-  margin: 5px 0px;
-}
-
-#no_contacts {
-  text-align: center;
-  padding: 10px;
-  background-color: #eee;
-  color: $text-dark-grey;
-}
-
 /* -- Used in aspects/edit.haml and in contacts/sharing.haml -- */
 #aspect_edit_controls { margin-top: 8px; }
 #aspect_edit_pane {
@@ -318,57 +250,6 @@
   }
 }
 
-#leftNavBar {
-  color: #222222;
-
-  ul {
-    margin: 0px;
-    padding: 0px;
-  }
-
-  a {
-    color: $link-grey;
-    font-weight: bold;
-    text-decoration: none;
-  }
-
-  .selected { color: $black; }
-  .selected a { color: $black; }
-
-  .hoverable {
-    display: block;
-    margin-right: 6px;
-    padding: 4px;
-    &:hover { background-color: $background-blue; }
-
-    .label {
-      background-color: $background-grey;
-      color: $text-grey;
-      float: right;
-      padding: 3px 5px;
-    }
-  }
-
-  .selectable {
-    display: block;
-    margin-left: 21px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .action {
-    width: 12px;
-    height: 12px;
-    display: none;
-    float: right;
-    margin: 3px;
-  }
-
-  .hoverable:hover  > .action {
-    display: block;
-  }
-}
-
 #new_aspect {
   #aspect_contacts_visible.checkbox {
     margin: 0px;
@@ -378,4 +259,3 @@
     display: inline;
   }
 }
-

app/assets/stylesheets/buttons.css.scss

@@ -27,3 +27,5 @@
 .btn-group.open > .btn.green {
   background: $green;
 }
+
+.btn.delete { color: desaturate($red,10%); }

app/assets/stylesheets/contacts.css.scss

@@ -39,6 +39,43 @@
     }
   }
 }
+#people_stream.contacts {
+  .stream_element {
+    padding: 10px;
+    min-height: 30px;
+
+    .media { overflow: visible; }
+
+    .float-right {
+      top: 16px;
+
+      a {
+        @include opacity(1);
+
+        &:hover {
+          @include opacity(0.6);
+        }
+      }
+    }
+
+    .info { margin-top: -2px; }
+  }
+
+  .avatar {
+    height: 30px;
+    width: 30px;
+  }
+
+  .icons-monotone_close_exit_delete {
+    height: 14px;
+    width: 14px;
+  }
+
+  .no_contacts {
+    text-align: center;
+    margin-top: 50px;
+  }
+}
 
 #community_spotlight {
   .avatar {
@@ -79,4 +116,11 @@
       color: $text-grey;
     }
   }
-}
+}
+
+#no_contacts {
+  text-align: center;
+  padding: 10px;
+  background-color: #eee;
+  color: $text-dark-grey;
+}

app/assets/stylesheets/leftnavbar.css.scss

@@ -0,0 +1,48 @@
+#leftNavBar {
+  color: #222222;
+
+  ul {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  a {
+    color: $link-grey;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .selected { color: $black; }
+  .selected a { color: $black; }
+
+  .hoverable {
+    display: block;
+    margin-right: 6px;
+    padding: 4px;
+    &:hover { background-color: $background-blue; }
+
+    .label {
+      background-color: $background-grey;
+      color: $text-grey;
+    }
+  }
+
+  .selectable {
+    display: block;
+    margin-left: 21px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .action {
+    width: 12px;
+    height: 12px;
+    display: none;
+    float: right;
+    margin: 3px;
+  }
+
+  .hoverable:hover  > .action {
+    display: block;
+  }
+}

app/assets/stylesheets/new-templates.css.scss

@@ -58,6 +58,8 @@
 
 /* stream */
 @import 'tag';
+@import 'stream-faces';
 
 /* contacts */
-@import 'contacts';
+@import 'contacts';
+@import 'leftnavbar';

app/assets/stylesheets/sidebar.css.scss

@@ -1,5 +1,3 @@
-$bluebg: #e7f2f7;
-
 #home_user_badge {
 	min-height: 50px;
 	margin-bottom: 20px;
@@ -26,47 +24,6 @@ $bluebg: #e7f2f7;
 	float: left;
 	margin: 0px;
 	margin-right: 10px;
-	color: #222222;
-
-	ul {
-		margin: 0px;
-		padding: 0px;
-	}
-	
-	a {
-		color: $link-grey;
-		font-weight: bold;
-		text-decoration: none;
-	}
-
-	.selected { color: $black; }
-	.selected a { color: $black; }
-
-	.hoverable {
-		display: block;
-		margin-right: 6px;
-		padding: 4px;
-		&:hover { background-color: $bluebg; }
-	}
-
-	.selectable {
-		display: block;
-		margin-left: 21px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.action {
-		width: 12px;
-		height: 12px;
-		display: none;
-		float: right;
-		margin: 3px;
-	}
-
-	.hoverable:hover  > .action {
-		display: block;
-	}
 }
 
 #stream_selection {
@@ -87,7 +44,7 @@ $bluebg: #e7f2f7;
 	.selected {
 		visibility: visible;
 	}
-	
+
 	.selected + a {
 		color: #333333;
 	}
@@ -104,36 +61,36 @@ $bluebg: #e7f2f7;
 	.delete_tag_following {
 		background: url("icons/deletelabel.png") no-repeat;
 	}
-	
+
 	/* ---- override app/stylesheets/vendor/autoSuggest.css ---- */
 	.tag_input {
 		width: 100%;
 	}
-	
+
 	.as-result {
 		margin-top: -1px;
 		margin-left: 1px;
 	}
-	
+
 	.as-list {
 		em {
 			background-color: #aabbcc;
 			color: black;
 			padding: 0px;
 		}
-		
+
 		color: black;
 		position: static; /* override absolute */
 		margin: 0px;
 		border-radius: 0px 0px 3px 3px;
 		box-shadow: 0px 1px 1px #666;
 	}
-	
+
 	.as-result-item.active {
 		color: black;
 		text-shadow: none;
-		background-color: $bluebg;
+		background-color: $background-blue;
-		border-color: $bluebg;		
+		border-color: $background-blue;
 	}
 	/* ---- end override app/stylesheets/vendor/autoSuggest.css ---- */
 }
@@ -141,7 +98,7 @@ $bluebg: #e7f2f7;
 .rightBar {
   .section {
     margin-bottom: 20px;
-    
+
     .title {
       position: relative;
       border-bottom: 1px solid $border-grey;
@@ -156,7 +113,7 @@ $bluebg: #e7f2f7;
         font-weight: bold;
         color: $text-dark-grey;
       }
-      
+
       .icons-plus,
       .icons-heart,
       .icons-question,
@@ -210,19 +167,19 @@ $bluebg: #e7f2f7;
         color: $text-dark-grey;
       }
     }
-    
+
     .content {
       padding: 8px;
       color: $text-grey;
       font-size: 11px;
-          
+
       p, ul {
         margin: 5px 0px;
       }
 
       ul {
         padding-left: 0;
-      
+
         li {
           list-style: none;
         }

app/assets/stylesheets/stream-faces.css.scss

@@ -0,0 +1,7 @@
+#selected_aspect_contacts .avatar {
+    height: 32px;
+    width: 32px;
+    margin-bottom: -2px;
+}
+
+.stream-faces a:hover { text-decoration: none; }

app/views/contacts/_aspect_listings.haml

@@ -6,13 +6,13 @@
   %li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@spotlight)}
     %a.home_selector.hoverable{:href => contacts_path, :class => ("sub_selected" if params["a_id"])}
       = t('contacts.index.my_contacts')
-      .label
+      .label.pull-right
         = my_contacts_count
 
     %ul.sub_nav#aspects_list
       - all_aspects.each do |aspect|
         %li.hoverable{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
-          .label
+          .label.pull-right
             = aspect.contacts.size
           .icons-check_yes_ok{:class => ("selected" if params["a_id"].to_i == aspect.id) }
           %a.selectable{:href => contacts_path(:a_id => aspect.id)}
@@ -24,7 +24,7 @@
   %li.all_contacts{:class => ("active" if params["set"] == "all" || params["set"] == "only_sharing")}
     %a.home_selector.hoverable{:href => contacts_path(:set => "all"), :class => ("sub_selected" if params["set"] == "only_sharing")}
       = t('contacts.index.all_contacts')
-      .label
+      .label.pull-right
         = all_contacts_count
 
     %ul.sub_nav
@@ -32,5 +32,5 @@
         .icons-check_yes_ok{:class => ("invisible" if params["set"] == "only_sharing")}
         %a.selectable{:href => contacts_path(:set => "only_sharing")}
           = t('contacts.index.only_sharing_with_me')
-          .label
+          .label.pull-right
             = only_sharing_count