[2375] Re-factor the navigation styles to apply to plain lists

Created the .simple-list class that can now be added to any list element. Also created .nav-facet for applying the facet styles to a .nav-simple element.
ckan · May 23, 2012 · 295b03f · 295b03f
1 parent 7d10945
commit 295b03f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/ckan/public/base/less/mixins.less b/ckan/public/base/less/mixins.less
@@ -37,3 +37,29 @@
   margin: 0;
   list-style: none;
 }
+
+.simple-item {
+  padding: 7px 25px;
+  border-bottom: 1px dotted #ccc;
+}
+
+.simple-list {
+  .clearfix;
+  .unstyled;
+  padding-bottom: 7px;
+
+  & > li {
+    .simple-item;
+  }
+
+  .ckan-icon {
+    position: relative;
+    top: 0px;
+  }
+}
+
+.secondary .simple-list > li {
+  padding-left:  @secondary-module-margin-x;
+  padding-right: @secondary-module-margin-x;
+  position: relative;
+}
diff --git a/ckan/public/base/less/nav.less b/ckan/public/base/less/nav.less
@@ -1,24 +1,15 @@
 .nav-simple {
-  .clearfix();
-  padding-bottom: 7px;
-}
-
-.nav-simple > li {
-  border-bottom: 1px dotted #ccc;
+  .simple-list;
 }
 
 .nav-simple > li > a {
   color: @nav-link-color;
-  padding: 7px 25px;
+  margin: -7px -@module-margin-x;
+  padding: 7px @module-margin-x;
   font-size: 12px;
   line-height: 14px; // keeps the overall height an even number
 }
 
-.nav-simple > li > a .ckan-icon {
-  position: relative;
-  top: -1px;
-}
-
 .nav-simple > li.active {
   background-color: #f2f2f2;
 }
@@ -43,8 +34,10 @@
   position: relative;
 }
 
-.secondary .nav-simple > li > a:hover:after,
-.secondary .nav-simple > li.active > a:hover:after {
+// FACET NAVIGATION
+
+.nav-facet > li > a:hover:after,
+.nav-facet > li.active > a:hover:after {
   .ckan-icon;
   .ckan-icon-circle-add;
   content: "";
@@ -54,16 +47,16 @@
   margin-top: -8px;
 }
 
-.secondary .nav-simple > li > a:hover:after {
+.nav-facet > li > a:hover:after {
   .ckan-icon-circle-add;
 }
 
-.secondary .nav-simple > li.active > a:hover:after {
+.nav-facet > li.active > a:hover:after {
   .ckan-icon-circle-cross;
   right: 3px;
 }
 
-.secondary .nav-simple > li.selected > a {
+.nav-facet > li.selected > a {
   padding-left:  @secondary-module-margin-x - 7;
   padding-right: @secondary-module-margin-x - 7;
 }