Fiddle with colors and scrolling in admin enterpise sidebar

app/assets/stylesheets/admin/dashboard_item.css.sass

@@ -36,6 +36,7 @@ div.dashboard_item
   .list
     max-height: 250px
     overflow-y: auto
+    overflow-x: hidden
 
   .list-title
     border: solid #5498da

app/assets/stylesheets/admin/sidebar-item.css.sass

@@ -17,10 +17,22 @@ div.sidebar_item
   .list
     max-height: 400px
     overflow-y: auto
-
-  .list-item
+    overflow-x: hidden
     border: solid #5498da
     border-width: 0px 1px 0px 1px
+    &.red
+      color: #DA5354
+      border: solid #DA5354
+      border-width: 0px 3px 0px 3px
+      .list-item
+        &.odd
+          background-color: #fcf6ef
+          &:hover
+            background-color: #9fc820
+      a
+        color: #DA5354
+
+  .list-item
     span.alpha
       font-weight: bold
       margin-left: -3px
@@ -29,16 +41,12 @@ div.sidebar_item
       max-width: 160px
       text-overflow: ellipsis
     span.omega
-      padding: 8px 13px 8px 0px
+      padding: 8px 18px 8px 0px
       margin-right: -3px
       text-align: right
     .icon-remove-sign
       color: #DA5354
       font-size: 18px
-    &.red
-      color: #DA5354
-      border: solid #DA5354
-      border-width: 0px 3px 0px 3px
     &.even
       background-color: #fff
     &.odd

app/views/admin/enterprises/_sidebar.html.haml

@@ -1,59 +1,62 @@
+- payment_methods_color = @payment_methods.count > 0 ? (@enterprise.payment_methods.count > 0 ? "blue" : "red") : "red"
 .sidebar_item.four.columns.alpha#payment_methods
-  .four.columns.alpha.header{ class: "#{@payment_methods.count > 0 ? "blue" : "red"}" }
+  .four.columns.alpha.header{ class: "#{payment_methods_color}" }
     %span.four.columns.alpha.centered Payment Methods
-  - if @payment_methods.count > 0
-    .four.columns.alpha.list
+  .four.columns.alpha.list{ class: "#{payment_methods_color}" }
+    - if @payment_methods.count > 0
       - @payment_methods.each do |payment_method|
         %a.four.columns.alpha.list-item{ class: "#{cycle('odd','even')}", href: "#{edit_admin_payment_method_path(payment_method)}" }
           %span.three.columns.alpha
             = payment_method.name
           %span.one.column.omega
             = f.check_box :payment_method_ids, { :multiple => true }, payment_method.id, nil
-  - else
-    .four.columns.alpha.list-item.red
-      %span.three.columns.alpha None Available
-      %span.one.column.omega
-        %span.icon-remove-sign
-  %a.four.columns.alpha.button{ href: "#{new_admin_payment_method_path}", class: "#{@payment_methods.count > 0 ? "blue" : "red"}" }
+    - else
+      .four.columns.alpha.list-item
+        %span.three.columns.alpha None Available
+        %span.one.column.omega
+          %span.icon-remove-sign
+  %a.four.columns.alpha.button{ href: "#{new_admin_payment_method_path}", class: "#{payment_methods_color}" }
     CREATE NEW
     %span.icon-arrow-right
 
+- shipping_methods_color = @shipping_methods.count > 0 ? (@enterprise.shipping_methods.count > 0 ? "blue" : "red") : "red"
 .sidebar_item.four.columns.alpha#shipping_methods
-  .four.columns.alpha.header{ class: "#{@shipping_methods.count > 0 ? "blue" : "red"}" }
+  .four.columns.alpha.header{ class: "#{shipping_methods_color}" }
     %span.four.columns.alpha.centered Shipping Methods
-  - if @shipping_methods.count > 0
-    .four.columns.alpha.list
+  .four.columns.alpha.list{ class: "#{shipping_methods_color}" }
+    - if @shipping_methods.count > 0
       - @shipping_methods.each do |shipping_method|
         %a.four.columns.alpha.list-item{ class: "#{cycle('odd','even')}", href: "#{edit_admin_shipping_method_path(shipping_method)}" }
           %span.three.columns.alpha
             = shipping_method.name
           %span.one.column.omega
             = f.check_box :shipping_method_ids, { :multiple => true }, shipping_method.id, nil
-  - else
-    .four.columns.alpha.list-item.red
-      %span.three.columns.alpha None Available
-      %span.one.column.omega
-        %span.icon-remove-sign
-  %a.four.columns.alpha.button{ href: "#{new_admin_shipping_method_path}", class: "#{@payment_methods.count > 0 ? "blue" : "red"}" }
+    - else
+      .four.columns.alpha.list-item
+        %span.three.columns.alpha None Available
+        %span.one.column.omega
+          %span.icon-remove-sign
+  %a.four.columns.alpha.button{ href: "#{new_admin_shipping_method_path}", class: "#{shipping_methods_color}" }
     CREATE NEW
     %span.icon-arrow-right
 
+- enterprise_fees_color = @enterprise_fees.count > 0 ? "blue" : "red"
 .sidebar_item.four.columns.alpha#enterprise_fees
-  .four.columns.alpha.header{ class: "#{@enterprise_fees.count > 0 ? "blue" : "red"}" }
+  .four.columns.alpha.header{ class: "#{enterprise_fees_color}" }
     %span.four.columns.alpha.centered Enterprise Fees
-  - if @enterprise_fees.count > 0
-    .four.columns.alpha.list
+  .four.columns.alpha.list{ class: "#{enterprise_fees_color}" }
+    - if @enterprise_fees.count > 0
       - @enterprise_fees.each do |enterprise_fee|
         %a.four.columns.alpha.list-item{ class: "#{cycle('odd','even')}", href: "#{main_app.admin_enterprise_fees_path}" }
           %span.three.columns.alpha
             = enterprise_fee.name
           %span.one.column.omega
              
-  - else
-    .four.columns.alpha.list-item.red
-      %span.three.columns.alpha None Available
-      %span.one.column.omega
-        %span.icon-remove-sign
-  %a.four.columns.alpha.button{ href: "#{main_app.admin_enterprise_fees_path}", class: "#{@enterprise_fees.count > 0 ? "blue" : "red"}" }
+    - else
+      .four.columns.alpha.list-item.red
+        %span.three.columns.alpha None Available
+        %span.one.column.omega
+          %span.icon-remove-sign
+  %a.four.columns.alpha.button{ href: "#{main_app.admin_enterprise_fees_path}", class: "#{enterprise_fees_color}" }
     CREATE NEW
     %span.icon-arrow-right