From d9e4eec49fcd3e54e10291fe6d1d85d59595dd0c Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Thu, 14 Nov 2013 15:26:48 -0500
Subject: [PATCH] Style the site setting category links. Required and Basic
 Setup are bigger and all other links are to the right of them.

---
 .../templates/site_settings.js.handlebars      |  4 ++--
 .../stylesheets/common/admin/admin_base.scss   | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/site_settings.js.handlebars b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
index edb28155e8..4b959af389 100644
--- a/app/assets/javascripts/admin/templates/site_settings.js.handlebars
+++ b/app/assets/javascripts/admin/templates/site_settings.js.handlebars
@@ -10,9 +10,9 @@
   </div>
 </div>
 
-<ul class="nav nav-pills">
+<ul class="nav nav-pills site-settings-nav">
   {{#each category in controller}}
-    <li>{{#link-to 'adminSiteSettingsCategory' category.nameKey}}{{category.name}}{{/link-to}}</li>
+    <li {{bindAttr class="category.nameKey"}}>{{#link-to 'adminSiteSettingsCategory' category.nameKey class=category.nameKey}}{{category.name}}{{/link-to}}</li>
   {{/each}}
 </ul>
 
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 141e4f7eef..cdd6d537d7 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -143,6 +143,24 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
   }
 }
 
+.site-settings-nav {
+  li {
+    background-color: grayscale($nav-pills-background-color-hover);
+    margin-bottom: 5px;
+
+    &.required, &.basic {
+      margin-bottom: 20px; // so nothing floats underneath these ones
+    }
+
+    > a {
+      font-size: 13px;
+      &.required, &.basic {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
 .settings {
   .setting {
     padding-bottom: 20px;