CSS refactoring. Notes better styled

app/assets/stylesheets/gitlab_bootstrap.scss

@@ -335,6 +335,9 @@ img.avatar {
   &.s24 { 
     width:24px;
   }
+  &.s32 { 
+    width:32px;
+  }
 }
 
 img.lil_av { 

app/assets/stylesheets/main.scss

@@ -76,13 +76,13 @@ $hover: #FDF5D9;
  * Header of application. 
  * Contain application logo, search panel, profile icon
  */
-@import "header.scss";
+@import "sections/header.scss";
 
 /**
  * Navigation menu of application. 
  * Panel with links to pages depends on project, profile or admin area
  */
-@import "nav.scss";
+@import "sections/nav.scss";
 
 /**
  * This file represent some UI that can be changed 
@@ -147,12 +147,12 @@ $hover: #FDF5D9;
 /**
  * This file represent notes(comments) styles 
  */
-@import "notes.scss";
+@import "sections/notes.scss";
 
 /**
  * Devise styles 
  */
-@import "login.scss";
+@import "sections/login.scss";
 
 /**
  * CODE HIGHTLIGHT BASE

app/assets/stylesheets/sections/login.scss

@@ -41,4 +41,3 @@ body.login-page{
 }
 
 .login-box a.forgot{float: right; padding-top: 6px}
-

app/assets/stylesheets/sections/notes.scss

@@ -38,21 +38,31 @@
   }
 }
 
-.note .delete-note { 
+.note { 
-  display:none; 
+  padding: 8px 0; 
-  float:right;
+  border-bottom: 1px solid #eee;
-}
+  overflow: hidden;
-.note:hover .delete-note { display:block; }
+  display: block;
-.note {padding: 10px 0; border-bottom: 1px solid #eee; overflow: hidden; display: block;}
+  img {float: left; margin-right: 10px;}
-.note img{float: left; margin-right: 10px;}
+  .note-author cite{font-style: italic;}
-.note span.note-title{display: block;}
+  p { color:$style_color; }
-.note span.note-title{margin-bottom: 10px}
+  .note-author { color: $style_color;}
-.note span.note-author{color: #999; font-weight: normal; font-style: italic;}
+
-.note span.note-author strong{font-weight: bold; font-style: normal;}
+  .note-title { margin-left:50px; padding-top: 5px;}
-.note p { color:$style_color; }
+  .avatar { 
-.note .note-author { color: $style_color;}
+    margin-top:3px;
+  }
+
+  .delete-note { 
+    display:none; 
+    float:right;
+  }
+
+  &:hover { 
+    .delete-note { display:block; }
+  }
+}
 
-.note .note-title { margin-left:55px; }
 
 p.notify_controls input{
   margin: 5px;

app/views/notes/_show.html.haml

@@ -1,5 +1,5 @@
 %li{:id => dom_id(note), :class => "note"}
-  = image_tag gravatar_icon(note.author.email), :class => "left", :width => 40, :style => "padding-right:5px;"
+  = image_tag gravatar_icon(note.author.email), :class => "avatar"
   %div.note-author
     %strong= note.author_name
     = link_to "##{dom_id(note)}", name: dom_id(note) do
@@ -7,7 +7,9 @@
         = time_ago_in_words(note.updated_at)
         ago
     - if(note.author_id == current_user.id) || can?(current_user, :admin_note, @project)
-      %strong= link_to "Remove", [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn small"
+      = link_to [@project, note], :confirm => 'Are you sure?', :method => :delete, :remote => true, :class => "cred delete-note btn very_small" do 
+        %i.icon-trash
+        Remove
 
   %div.note-title
     = preserve do