[2375] Style the active facets

ckan · May 17, 2012 · e8945df · e8945df
1 parent cfafab3
commit e8945df
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/ckan/public/base/less/mixins.less b/ckan/public/base/less/mixins.less
@@ -21,17 +21,16 @@
   padding-left: 10px;
   padding-right: 5px;
   margin-right: 11px;
-}
-
-.tag:after {
-  content: "";
-  background: url("@{image-path}/background-tag.png") no-repeat center left;
-  position: absolute;
-  display: block;
-  top: 0;
-  bottom: 0;
-  right: -11px;
-  width: 11px;
+  &:before {
+    content: "";
+    background: url("@{image-path}/background-tag.png") no-repeat center left;
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 0;
+    right: -11px;
+    width: 11px;
+  }
 }
 
 .unstyled {

diff --git a/ckan/public/base/less/nav.less b/ckan/public/base/less/nav.less
@@ -10,6 +10,7 @@
 .nav-simple > li > a {
   color: @nav-link-color;
   padding: 7px 25px;
+  font-size: 12px;
   line-height: 14px; // keeps the overall height an even number
 }
 
@@ -18,18 +19,22 @@
   top: -1px;
 }
 
-.nav-simple > li.selected > a {
-  @inner-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
-  @outer-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  .border-radius(3px);
-  .box-shadow(@inner-shadow);
-  box-shadow: @inner-shadow, @outer-shadow;
-  cursor: default;
-  margin: 2px 5px 3px;
-  padding: 4px (@module-margin-x - 7);
-  background: #000;
-  color: #fff;
-  border: 1px solid black;
+.nav-simple > li.active {
+  background-color: #f2f2f2;
+}
+
+.nav-simple > li.active > a {
+  .tag;
+  .box-sizing(border-box);
+  font-size: 12px;
+  font-weight: bold;
+  position: relative;
+  left: 4px;
+  margin-left: 0;
+  margin-right: 7px;
+  padding-left: 10px;
+  padding-right: 0px;
+  padding: 1px (@module-margin-x - 7);
 }
 
 .secondary .nav-simple > li > a {
@@ -38,7 +43,8 @@
   position: relative;
 }
 
-.secondary .nav-simple > li > a:hover:after {
+.secondary .nav-simple > li > a:hover:after,
+.secondary .nav-simple > li.active > a:hover:after {
   .ckan-icon;
   .ckan-icon-circle-add;
   content: "";
@@ -48,6 +54,15 @@
   margin-top: -8px;
 }
 
+.secondary .nav-simple > li > a:hover:after {
+  .ckan-icon-circle-add;
+}
+
+.secondary .nav-simple > li.active > a:hover:after {
+  .ckan-icon-circle-cross;
+  right: 3px;
+}
+
 .secondary .nav-simple > li.selected > a {
   padding-left:  @secondary-module-margin-x - 7;
   padding-right: @secondary-module-margin-x - 7;