rework styles of facets

3 files changed, 69 insertions, 107 deletions

diff --git a/server/sonar-web/src/main/less/components.less b/server/sonar-web/src/main/less/components.less
index 44617bd1374..386954cd3f7 100644
--- a/server/sonar-web/src/main/less/components.less
+++ b/server/sonar-web/src/main/less/components.less
@@ -19,7 +19,6 @@
  */
 @import "components/ui";
 @import "components/source";
-@import "components/facets";
 @import "components/modals";
 @import "components/issues";
 @import "components/measures";
diff --git a/server/sonar-web/src/main/less/components/facets.less b/server/sonar-web/src/main/less/components/facets.less
deleted file mode 100644
index adaccc77188..00000000000
--- a/server/sonar-web/src/main/less/components/facets.less
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * SonarQube, open source software quality management tool.
- * Copyright (C) 2008-2014 SonarSource
- * mailto:contact AT sonarsource DOT com
- *
- * SonarQube is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * SonarQube is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-@import (reference) "../mixins";
-@import (reference) "../variables";
-
-.facet {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1;
-  margin: 0 6px 6px 6px;
-  padding: 4px 5px;
-  border: 1px solid @barBorderColor;
-  border-radius: 2px;
-  background-color: lighten(@barBackgroundColor, 2%);
-  font-size: 0;
-  cursor: pointer;
-  white-space: nowrap;
-  .trans(none);
-
-  &:hover {
-    border: 1px solid @blue;
-    text-decoration: none;
-  }
-
-  &.active {
-    border: 1px solid @blue;
-    background-color: @lightBlue;
-    text-decoration: none;
-
-    .facet-name {
-      background-color: @lightBlue;
-    }
-
-    .facet-stat {
-      border-color: @blue;
-      background-color: @lightBlue;
-    }
-  }
-}
-
-.facet-name {
-  background-color: lighten(@barBackgroundColor, 2%);
-  font-size: @smallFontSize;
-}
-
-.facet-stat {
-  margin-left: 5px;
-  padding-left: 5px;
-  border-left: 1px solid @barBorderColor;
-  background-color: lighten(@barBackgroundColor, 2%);
-  color: @secondFontColor;
-  font-size: @smallFontSize;
-}
-
-.facet-toggle {
-  display: none;
-  float: left;
-  height: 16px;
-  line-height: 16px;
-  margin-top: -2px;
-  padding: 0 5px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 300;
-  text-transform: lowercase;
-
-  &:hover {
-    color: @baseFontColor;
-  }
-}
-
-.facet-toggle-active.facet-toggle-green {
-  background-color: @green;
-  color: #fff;
-}
-
-.facet-toggle-active.facet-toggle-red {
-  background-color: @red;
-  color: #fff;
-}
diff --git a/server/sonar-web/src/main/less/components/search-navigator.less b/server/sonar-web/src/main/less/components/search-navigator.less
index b200da5eff3..3991f2dfcbd 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -108,42 +108,102 @@
 
 .search-navigator-facet {
   position: relative;
+  display: inline-block;
+  vertical-align: middle;
   width: 100%;
+  line-height: 1;
   margin: 0 0 1px 0;
-  border-color: transparent;
+  padding: 4px 5px;
+  border: 1px solid transparent;
+  border-radius: 2px;
   .box-sizing(border-box);
   background-color: @barBackgroundColor;
   white-space: normal;
   overflow: hidden;
+  font-size: 0;
+  cursor: pointer;
+  .trans(none);
 
+  &:hover {
+    border: 1px solid @blue;
+  }
+  
   .facet-name {
-    white-space: nowrap;
     background-color: @barBackgroundColor;
     color: @baseFontColor;
+    font-size: @smallFontSize;
+    white-space: nowrap;
   }
 
   .facet-stat {
     position: absolute;
-    top: 0; right: 0;
+    top: 0;
+    right: 0;
+    margin-left: 5px;
     padding: 4px 5px;
-    border: none;
     background-color: @barBackgroundColor;
+    color: @secondFontColor;
+    font-size: @smallFontSize;
 
     &:before {
       content: " ";
       position: absolute;
-      top: 0; bottom: 0; right: 100%;
+      top: 0;
+      bottom: 0;
+      right: 100%;
       width: 10px;
       background-image: linear-gradient(to right, fade(@barBackgroundColor, 0%), @barBackgroundColor 75%);
     }
   }
 
-  &.active .facet-stat:before {
-    background-image: linear-gradient(to right, fade(@lightBlue, 0%), @lightBlue 75%);
+  .facet-toggle {
+    display: none;
+    float: left;
+    height: 16px;
+    line-height: 16px;
+    margin-top: -2px;
+    padding: 0 5px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 300;
+    text-transform: lowercase;
+
+    &:hover {
+      color: @baseFontColor;
+    }
+  }
+
+  .facet-toggle-active.facet-toggle-green {
+    background-color: @green;
+    color: #fff;
   }
 
-  &.active .facet-toggle {
-    display: inline;
+  .facet-toggle-active.facet-toggle-red {
+    background-color: @red;
+    color: #fff;
+  }
+
+  &.active {
+    border: 1px solid @blue;
+    background-color: @lightBlue;
+    text-decoration: none;
+
+    .facet-name {
+      background-color: @lightBlue;
+    }
+
+    .facet-stat {
+      border-color: @blue;
+      background-color: @lightBlue;
+
+      &:before {
+        background-image: linear-gradient(to right, fade(@lightBlue, 0%), @lightBlue 75%);
+      }
+    }
+
+    .facet-toggle {
+      display: inline;
+    }
   }
 }