rework css

22 files changed, 2720 insertions, 18 deletions

diff --git a/server/sonar-web/src/main/less/components/bubble-popup.less b/server/sonar-web/src/main/less/components/bubble-popup.less
new file mode 100644
index 00000000000..36c7246eacd
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/bubble-popup.less
@@ -0,0 +1,136 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+@popupArrowSize: 8px;
+
+.bubble-popup {
+  position: absolute;
+  z-index: 100;
+  margin-top: -16px;
+  margin-left: @popupArrowSize;
+  padding: 10px;
+  border: 1px solid @barBorderColor;
+  border-radius: 3px;
+  .box-sizing(border-box);
+  background-color: @white;
+  box-shadow: @defaultShadow;
+}
+
+.bubble-popup-arrow,
+.bubble-popup-arrow:after {
+  position: absolute;
+  display: block;
+  .size(0, 0);
+  border: @popupArrowSize solid transparent;
+}
+
+.bubble-popup-arrow {
+  top: 15px;
+  left: -@popupArrowSize;
+  border-left-width: 0;
+  border-right-color: @barBorderColor;
+
+  &:after {
+    content: " ";
+    left: 1px;
+    bottom: -@popupArrowSize;
+    border-left-width: 0;
+    border-right-color: @white;
+  }
+}
+
+.bubble-popup-bottom {
+  margin-top: @popupArrowSize;
+  margin-left: -16px;
+
+  .bubble-popup-arrow {
+    top: -@popupArrowSize;
+    left: 15px;
+    border-left-width: @popupArrowSize;
+    border-top-width: 0;
+    border-right-color: transparent;
+    border-bottom-color: @barBorderColor;
+
+    &:after {
+      left: -@popupArrowSize;
+      bottom: -@popupArrowSize - 1px;
+      border-left-width: @popupArrowSize;
+      border-top-width: 0;
+      border-right-color: transparent;
+      border-bottom-color: @white;
+    }
+  }
+}
+
+.bubble-popup-bottom-right {
+  .bubble-popup-bottom;
+  margin-left: 0;
+  margin-right: -8px;
+
+  .bubble-popup-arrow {
+    left: auto;
+    right: 15px;
+  }
+}
+
+.bubble-popup-container {
+  max-width: 560px;
+  max-height: 300px;
+  padding-right: 30px;
+  overflow: auto;
+}
+
+.bubble-popup-title {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+.bubble-popup-section {
+  width: 450px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.fluid {
+    width: auto;
+    max-width: 450px;
+  }
+}
+
+.bubble-popup-section + .bubble-popup-section,
+.bubble-popup-section + .bubble-popup-title {
+  margin-top: 10px;
+}
+
+.bubble-popup-list {
+  margin-top: 5px;
+
+  & > li { padding: 2px 0; }
+}
+
+
+@overlayPopupMargin: 20px;
+@overlayPopupPadding: 40px;
+
+.overlay-popup {
+  position: fixed;
+  z-index: 1200;
+  top: @overlayPopupMargin;
+  bottom: @overlayPopupMargin;
+  left: @overlayPopupMargin;
+  right: @overlayPopupMargin;
+  padding: @overlayPopupPadding @overlayPopupPadding @overlayPopupPadding + 30px;
+  background-color: #fff;
+  overflow: scroll;
+  box-shadow: 0 0 20px 15px rgba(0, 0, 0, 0.5);
+
+  .modal-foot {
+    position: fixed;
+    z-index: 1201;
+    bottom: @overlayPopupMargin;
+    left: @overlayPopupMargin;
+    right: @overlayPopupMargin;
+  }
+}
diff --git a/server/sonar-web/src/main/less/components/component-name.less b/server/sonar-web/src/main/less/components/component-name.less
index 9621942992d..78549e66171 100644
--- a/server/sonar-web/src/main/less/components/component-name.less
+++ b/server/sonar-web/src/main/less/components/component-name.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .component-name {
   .clearfix;
diff --git a/server/sonar-web/src/main/less/components/component-viewer.less b/server/sonar-web/src/main/less/components/component-viewer.less
new file mode 100644
index 00000000000..ad39f12a0ce
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/component-viewer.less
@@ -0,0 +1,554 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "ui";
+
+@headerHeight: 60px;
+@workspaceWidth: 250px;
+
+
+.component-viewer {
+  width: 100%;
+  min-width: 600px;
+  border-left-width: 0;
+  .box-sizing(border-box);
+  .clearfix;
+}
+
+.component-viewer-workspace-enabled {
+  .component-viewer-workspace .component-viewer-workspace-list,
+  .component-viewer-workspace .component-viewer-workspace-title { display: block; }
+}
+
+
+.component-viewer-title {
+  color: @baseFontColor;
+  font-size: @baseFontSize;
+  font-weight: bold;
+}
+
+.component-viewer-title-separator {
+  padding: 0 4px;
+}
+
+
+.component-viewer-workspace {
+  position: relative;
+  float: left;
+  min-width: 30px;
+  margin-right: 10px;
+  border: 1px solid @barBorderColor;
+  background-color: @barBackgroundColor;
+
+  &.overflow {
+    .box-sizing(border-box);
+  }
+}
+
+.component-viewer-workspace-header {
+  position: relative;
+  height: 30px;
+  border-bottom: 1px solid @barBorderColor;
+}
+
+.component-viewer-workspace-title {
+  display: none;
+  padding: 0 30px 0 10px;
+  line-height: 30px;
+  text-transform: uppercase;
+}
+
+.component-viewer-workspace-list {
+  display: none;
+  width: @workspaceWidth;
+  padding: 8px 0;
+  .box-sizing(border-box);
+}
+
+.component-viewer-workspace-item {
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.active > a { font-weight: bold; }
+  .subtitle { line-height: 16px; }
+}
+
+.component-viewer-workspace-item + .component-viewer-workspace-item {
+  margin-top: 10px;
+}
+
+.component-viewer-workspace-transition {
+  margin-top: 7px;
+  margin-left: 7px;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-workspace-options {
+  margin-top: 5px;
+  margin-left: 7px;
+  padding-left: 10px;
+  border-left: 3px solid darken(@barBorderColor, 10%);
+}
+
+.component-viewer-workspace-option {
+  line-height: 16px;
+  padding: 3px 0;
+
+  &.active > a { font-weight: bold; }
+}
+
+.component-viewer-workspace-toggle {
+  position: absolute;
+  top: 0; right: 0;
+  .size(30px, 30px);
+  .trans;
+
+  &:hover { background-color: @barBorderColor; }
+}
+
+.component-viewer-source {
+  position: relative;
+  float: left;
+
+  &.overflow {
+    .box-sizing(border-box);
+    overflow: auto;
+  }
+
+  .code th {
+
+    &.settings {
+      line-height: 22px;
+      text-align: left;
+
+      .icon-not-favorite,
+      .icon-favorite {
+        float: right;
+        padding-top: 2px;
+      }
+    }
+
+    &.settings-toggle {
+      vertical-align: top;
+      border-right: 1px solid @barBorderColor;
+      text-align: center;
+      white-space: nowrap;
+
+      .icon-settings { font-size: @iconSmallFontSize; }
+    }
+  }
+
+  .code .coverage-tests {
+    cursor: pointer;
+  }
+
+  .code .duplications {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    font-size: 0 !important;
+
+    .duplication {
+      display: inline-block;
+      vertical-align: top;
+      .size(5px, 19px);
+    }
+
+    .duplication + .duplication { margin-left: 2px; }
+
+    .duplication-exists {
+      background-color: @lightOrange;
+      cursor: pointer;
+      .trans;
+    }
+
+    .duplication-hover {
+      background-color: darken(@lightOrange, 10%);
+    }
+  }
+
+  .code .measures {
+    padding: 4px 5px;
+    border-left: 1px solid @barBorderColor;
+    border-bottom: 1px solid @barBorderColor;
+    background-color: @barBackgroundColor;
+  }
+
+  .code .stat {
+
+    &.coverage-green {
+      background-color: lighten(@green, 15%) !important;
+      color: @baseFontColor;
+    }
+
+    &.coverage-orange {
+      background-color: lighten(@orange, 15%) !important;
+      color: @baseFontColor;
+    }
+
+    &.coverage-red {
+      background-color: lighten(@red, 15%) !important;
+      color: @baseFontColor;
+    }
+  }
+
+  .code .row-expand {
+
+    .stat, .line {
+      border-left: none;
+      border-right: none;
+      background: url(../images/gray-stripes.png) repeat;
+    }
+
+    .line { text-align: right; }
+  }
+
+  .code .row-hidden { display: none; }
+
+}
+
+
+.component-viewer-source-settings {
+  display: none;
+
+  &.open { display: inline-block; }
+
+  & > li {
+    display: inline;
+    margin-right: 10px;
+  }
+}
+
+
+
+
+.component-viewer-header {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.component-viewer-header-bar {
+  .clearfix;
+  border: 1px solid @barBorderColor;
+  background-color: @barBackgroundColor;
+}
+
+.component-viewer-header-bar + .component-viewer-header-bar {
+  border-top: 1px solid @barBorderColor;
+}
+
+.component-viewer-header-two-lines-mixin() {
+  @lineHeight: 24px;
+  @topPadding: @headerHeight / 2 - @lineHeight;
+  line-height: @lineHeight;
+  padding: @topPadding 10px;
+}
+
+.component-viewer-header-component {
+  float: left;
+  .component-viewer-header-two-lines-mixin;
+
+}
+
+.component-viewer-header-component-project {
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-component-name {
+  font-weight: 600;
+}
+
+.component-viewer-header-favorite {
+  position: relative;
+  top: -2px;
+  margin-left: 4px;
+  .link-no-underline;
+}
+
+.component-viewer-header-measures {
+  float: right;
+}
+
+.component-viewer-header-measures-scope {
+  position: relative;
+  float: left;
+  height: @headerHeight;
+}
+
+.component-viewer-header-measures-toggle-scope {
+  position: absolute;
+  top: 0;
+  display: block;
+  .size(100%, 6px);
+  margin-bottom: -1px;
+  border-left: 1px solid @barBackgroundColor;
+  .box-sizing(border-box);
+  background-color: lighten(@blue, 30%);
+  .link-no-underline;
+  .transform-origin(0 0);
+  .trans;
+
+  &:after {
+    content: " ";
+    position: absolute;
+    top: 100%;
+    .size(100%, 4px);
+    background-color: transparent;
+  }
+
+  &:hover {
+    background-color: lighten(@blue, 15%);
+    .scale2(1, 2);
+  }
+
+  &.active { background-color: @blue; }
+  &.inactive { background-color: transparent; }
+}
+
+.component-viewer-header-measures-expand {
+  display: block;
+  padding: 11px 20px;
+  white-space: nowrap;
+  .link-no-underline;
+
+  a& {
+    .trans(background);
+
+    &:hover { background-color: @barBorderColor; }
+
+    &:active, &.active {
+      margin-bottom: -1px;
+      border-bottom: 1px solid #fff;
+      border-left-color: @barBorderColor;
+      background-color: #fff;
+    }
+  }
+}
+
+.component-viewer-header-measures-scope + .component-viewer-header-measures-scope {
+  border-left-color: @barBorderColor;
+}
+
+.component-viewer-header-measures-expand .icon-dropdown {
+  margin-left: 6px;
+  margin-right: -10px;
+  color: @baseFontColor;
+}
+
+.component-viewer-header-measure {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: @baseFontSize;
+
+  .rating {
+    font-size: 18px;
+  }
+}
+
+.component-viewer-header-measure + .component-viewer-header-measure {
+  margin-left: 15px;
+}
+
+.component-viewer-header-measure-label {
+  display: block;
+  margin-top: 2px;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-measure-value {
+  display: block;
+  color: @baseFontColor;
+  font-size: 18px;
+  font-weight: 300;
+
+  i {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.component-viewer-header-measure-issues {
+  width: 45px;
+}
+
+.component-viewer-header-measure-issue {
+  min-width: 1px;
+  height: 6px;
+
+  &.s-blocker { background-color: @severityBlockerColor; }
+  &.s-critical { background-color: @severityCriticalColor; }
+  &.s-major { background-color: @severityMajorColor; }
+  &.s-minor { background-color: @severityMinorColor; }
+  &.s-info { background-color: @severityInfoColor; }
+}
+
+.component-viewer-header-measure-issue + .component-viewer-header-measure-issue {
+  margin-top: 1px;
+}
+
+.component-viewer-header-actions {
+  float: right;
+  display: block;
+  padding: 20px 10px;
+  font-size: @iconFontSize;
+  .link-no-underline;
+}
+
+.component-viewer-header-more-actions {
+  position: absolute;
+  z-index: 100;
+  right: 0; top: 60px;
+  padding: 10px;
+  border: 1px solid @barBorderColor;
+  background-color: @white;
+  line-height: 1.8;
+}
+
+.component-viewer-header-expanded-bar {
+  display: none;
+  .clearfix;
+  position: relative;
+  margin-top: -1px;
+  border: 1px solid @barBorderColor;
+  border-top: none;
+  background-color: #fff;
+
+  &.active { display: block; }
+}
+
+.component-viewer-header-expanded-bar-section {
+  display: inline-block;
+  vertical-align: top;
+  width: 250px;
+
+  &.large { width: 350px; }
+}
+
+.component-viewer-header-expanded-bar-section-actions {
+  margin-left: 15px;
+
+  .component-viewer-header-expanded-bar-section-list > li {
+    padding: 4px 0;
+    line-height: 1.5;
+  }
+}
+
+.component-viewer-header-expanded-bar-section-title {
+  padding: 10px 10px 6px 10px;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-header-expanded-bar-section-list {
+  max-height: 120px; // 5 items
+  overflow: auto;
+  .webkit-scrollbar;
+
+  & > li > .item {
+    position: relative;
+    display: block;
+    padding: 4px 60px 4px 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    & > .number {
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      margin-top: -8px;
+    }
+
+    & > i {
+      position: absolute;
+      top: 50%;
+      right: 6px;
+      margin-top: -7px;
+    }
+
+    .duration {
+      display: inline-block;
+      min-width: 40px;
+    }
+  }
+
+  & > li > a.item {
+    color: @baseFontColor;
+    .link-no-underline;
+    .trans;
+
+    &:hover { background-color: @barBackgroundColor; }
+    &:active, &.active { background-color: @lightBlue; }
+  }
+}
+
+.component-viewer-header-expanded-bar-bulk-change {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 4px 10px;
+  font-size: @smallFontSize;
+  .trans;
+
+  &:hover { background-color: @barBackgroundColor; }
+}
+
+.component-viewer-header-decoration {
+  margin-top: 10px;
+}
+
+.component-viewer-header-time-changes {
+  padding: 10px;
+}
+
+.component-viewer-header-sqale-rating {
+  float: left;
+  font-size: 20px;
+}
+
+
+.component-viewer-popup-test {
+  position: relative;
+  display: block;
+  height: 16px;
+  line-height: 16px;
+}
+
+.component-viewer-popup-test-file {
+}
+
+.component-viewer-popup-test-name {
+  display: block;
+  border-left: 20px solid transparent;
+  border-right: 44px solid transparent;
+  .box-sizing(border-box);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.component-viewer-popup-test-status {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -8px;
+}
+
+.component-viewer-popup-test-duration {
+  position: absolute;
+  top: 0; right: 0;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.component-viewer-popup-duplications {
+  padding: 4px 0;
+  white-space: normal;
+}
+
+.component-viewer-popup-label {
+  padding-right: 6px;
+  font-weight: 500;
+}
diff --git a/server/sonar-web/src/main/less/components/dropdowns.less b/server/sonar-web/src/main/less/components/dropdowns.less
index 4b75992a0ab..0e5cf6501c3 100644
--- a/server/sonar-web/src/main/less/components/dropdowns.less
+++ b/server/sonar-web/src/main/less/components/dropdowns.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 
 .dropdown {
diff --git a/server/sonar-web/src/main/less/components/graphics.less b/server/sonar-web/src/main/less/components/graphics.less
new file mode 100644
index 00000000000..f5604148bf0
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/graphics.less
@@ -0,0 +1,235 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+.sonar-d3 {
+
+}
+
+.sonar-d3 .axis path {
+  fill: none;
+  stroke: #444;
+}
+
+.sonar-d3 .tick line {
+  stroke: #444;
+}
+
+.sonar-d3 .tick text {
+  fill: #444;
+}
+
+.sonar-d3 .plot {
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .plot:hover .arc,
+.sonar-d3 .plot.hover .arc {
+  opacity: 0.4;
+}
+
+.sonar-d3 .plot .arc:hover,
+.sonar-d3 .plot .arc.hover {
+  opacity: 1;
+}
+
+.sonar-d3 .plot .line {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.sonar-d3 .plot .line-marker {
+  fill: #fff;
+  stroke: #000;
+  stroke-width: 2;
+  opacity: 0;
+}
+
+.sonar-d3 .plot .scanner {
+  stroke: #000;
+  opacity: 0.25;
+}
+
+.sonar-d3 .arc,
+.sonar-d3 .bar rect {
+  cursor: pointer;
+  stroke: #fff;
+  stroke-width: 1px;
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .bar,
+.sonar-d3 .bar .legend-text,
+.sonar-d3 .pie-legend,
+.sonar-d3 .pie-legend .legend-text {
+  cursor: pointer;
+}
+
+.sonar-d3 .legend {
+
+}
+
+.sonar-d3 .legend-bullet {
+  transition: all 0.2s ease;
+}
+
+.sonar-d3 .legend-text {
+  font-size: 12px;
+  cursor: default;
+}
+
+.sonar-d3 .legend-active .legend-bullet {
+  -webkit-transform: scale(1.4);
+  -webkit-transform-origin: center;
+}
+
+.sonar-d3 .legend-html {
+  margin-bottom: 10px;
+  color: @secondFontColor;
+
+  .legend-text + .legend-text { margin-left: 15px; }
+  .legend-text-main { font-weight: 500; }
+}
+
+.sonar-d3 .details-color-indicator {
+  fill: #fff;
+  transition: fill 0.2s ease;
+}
+
+.sonar-d3 .details-metric {
+  font-size: 12px;
+}
+
+.sonar-d3 .details-metric-main {
+  font-weight: bold;
+}
+
+.sonar-d3 .info {
+
+}
+
+.sonar-d3 .info-text {
+  font-size: 13px;
+}
+
+.sonar-d3 .info-text-bold {
+  font-weight: bold;
+}
+
+.sonar-d3 .info-text-small {
+  font-size: 12px;
+}
+
+.sonar-d3 .event-tick {
+  fill: none;
+  stroke: #000;
+  stroke-width: 1px;
+  transition: all 0.3s ease;
+}
+
+.sonar-d3.cloud-widget {
+  text-align: center;
+}
+
+.sonar-d3 .cloud-word {
+  display: inline-block;
+  vertical-align: baseline;
+  white-space: nowrap;
+  margin-right: 14px;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+
+  &:hover {
+    border-bottom: 1px solid;
+  }
+}
+
+.max-results-reached-message {
+  font-size: 12px;
+}
+
+div.max-results-reached-message {
+  margin-top: 10px;
+  color: #777;
+  text-align: center;
+}
+
+text.max-results-reached-message {
+  fill: #777;
+}
+
+.sonar-d3 .treemap-container {
+  position: relative;
+}
+
+.sonar-d3 .treemap-cell {
+  position: absolute;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  .box-sizing(border-box);
+  text-align: center;
+}
+
+.sonar-d3 .treemap-cell-drilldown {
+  cursor: pointer;
+}
+
+.sonar-d3 .treemap-inner {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1.2;
+  padding: 5px;
+  .box-sizing(border-box);
+  color: #fff;
+  font-weight: 300;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sonar-d3 .treemap-link {
+  position: absolute;
+  z-index: 2;
+  top: 5px; right: 5px;
+  line-height: @iconSmallFontSize;
+  color: #fff;
+  opacity: 0.5;
+  .link-no-underline;
+
+  &:hover { opacity: 1; }
+}
+
+.sonar-d3 .treemap-link i,
+.sonar-d3 .treemap-link i:before {
+  vertical-align: top;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.sonar-d3 .treemap-cell-small {
+  .treemap-inner { display: none; }
+}
+
+.sonar-d3 .treemap-cell-very-small {
+  .treemap-inner { display: none; }
+  .treemap-link { display: none; }
+}
+
+.sonar-d3 .treemap-breadcrumbs {
+  margin-top: 10px;
+  padding-top: 7px;
+  border-top: 1px solid #E6E6E6;
+}
+
+.sonar-d3 .treemap-breadcrumbs-item {
+  color: @secondFontColor;
+
+  & > [class^="icon-qualifier-"] { margin-right: 4px; }
+}
+
+.sonar-d3 .treemap-breadcrumbs-item + .treemap-breadcrumbs-item {
+  margin-left: 10px;
+
+  & > .icon-chevron-right { margin-right: 10px; }
+}
diff --git a/server/sonar-web/src/main/less/components/issues.less b/server/sonar-web/src/main/less/components/issues.less
index b4a0ec67399..8177f088984 100644
--- a/server/sonar-web/src/main/less/components/issues.less
+++ b/server/sonar-web/src/main/less/components/issues.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 @import (reference) "../components/typography";
 
 @leftPadding: 10px;
diff --git a/server/sonar-web/src/main/less/components/login.less b/server/sonar-web/src/main/less/components/login.less
new file mode 100644
index 00000000000..067d2a34a8c
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/login.less
@@ -0,0 +1,29 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+#login_form {
+  border: 2px solid #4b9fd5;
+  width: 230px;
+  text-align: left;
+  background-color: #CAE3F2;
+  padding: 15px 20px;
+}
+
+#login_form h4 {
+  text-align: left;
+  font-weight: bold;
+  color: #036;
+}
+
+#login_form p {
+  padding: 3px 0 10px;
+}
+
+#login_form a {
+  border-bottom-color: @blue;
+}
+
+#login_form .desc {
+  font-size: 85%;
+  font-weight: normal;
+}
diff --git a/server/sonar-web/src/main/less/components/measures.less b/server/sonar-web/src/main/less/components/measures.less
index 9ee9d75a375..a49a2c31004 100644
--- a/server/sonar-web/src/main/less/components/measures.less
+++ b/server/sonar-web/src/main/less/components/measures.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 
 .measures {
diff --git a/server/sonar-web/src/main/less/components/menu.less b/server/sonar-web/src/main/less/components/menu.less
index 0b78b90f030..9750de742b9 100644
--- a/server/sonar-web/src/main/less/components/menu.less
+++ b/server/sonar-web/src/main/less/components/menu.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .menu {
   min-width: 160px;
diff --git a/server/sonar-web/src/main/less/components/navbar.less b/server/sonar-web/src/main/less/components/navbar.less
new file mode 100644
index 00000000000..2c8da63e581
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navbar.less
@@ -0,0 +1,212 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "ui";
+
+@navbarGlobalBackground: #262626;
+@navbarContextBackground: @barBackgroundColor;
+
+@navbarHeight: 30px;
+@navbarLineHeight: 20px;
+@navbarTopPadding: (@navbarHeight - @navbarLineHeight) / 2;
+
+.navbar, [class^="navbar-"], [class*=" navbar-"] {
+  .box-sizing(border-box);
+}
+
+.navbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  .clearfix;
+  height: @navbarHeight;
+}
+
+.navbar-fade {
+  .navbar-nav {
+    opacity: 0;
+    .trans(opacity);
+  }
+
+  .navbar-favorite {
+    margin-right: -23px;
+    .trans(margin);
+  }
+
+  &.in {
+    .navbar-nav {
+      opacity: 1;
+    }
+
+    .navbar-favorite {
+      margin-right: 0;
+    }
+  }
+}
+
+.navbar a {
+  .link-no-underline;
+  .trans(none);
+}
+
+.navbar-header {
+  float: left;
+}
+
+.navbar-brand {
+  display: block;
+
+  img {
+    vertical-align: top;
+  }
+}
+
+.navbar-nav {
+  float: left;
+}
+
+.navbar-nav > li {
+  float: left;
+}
+
+.navbar-nav > li > a {
+  padding: @navbarTopPadding 10px;
+  line-height: @navbarLineHeight;
+}
+
+.navbar-nav > li.navbar-more > a {
+  padding-right: 17px;
+}
+
+.navbar-nav > li.navbar-more + li {
+  margin-left: -17px;
+}
+
+.navbar-nav > li.navbar-more + li > a {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.navbar-icon:before {
+  color: #fff !important;
+  font-size: @iconFontSize;
+}
+
+.navbar-favorite {
+  position: relative;
+  top: -2px;
+}
+
+.navbar-right {
+  float: right;
+}
+
+.navbar-search {
+  position: relative;
+  width: 480px;
+  .box-sizing(border-box);
+  .trans(width);
+}
+
+.navbar-search-input {
+  width: 100%;
+  padding: 0 20px 0 40px !important;
+  border: none !important;
+}
+
+.navbar-search-icon {
+  position: absolute;
+  top: 4px;
+  left: 20px;
+  color: @secondFontColor;
+
+  &:before {
+    font-size: @iconSmallFontSize;
+  }
+}
+
+.navbar-search-extra {
+  display: inline-block;
+  width: 90px;
+  margin-right: 10px;
+  text-align: right;
+}
+
+.navbar-search-subtitle {
+  position: absolute;
+  top: 5px;
+  right: 40px;
+}
+
+
+.navbar-global {
+  top: 0;
+  z-index: 499;
+  background-color: @navbarGlobalBackground;
+
+  .navbar-nav > li > a {
+    color: #fff;
+    font-size: 12px;
+    font-weight: 300;
+    letter-spacing: 0.05em;
+
+    &:hover, &:focus {
+      color: #fff;
+    }
+  }
+
+  .navbar-nav > .active > a,
+  .navbar-nav > .dropdown.open > a {
+    color: #fff;
+  }
+
+  .navbar-brand:hover,
+  .navbar-brand:focus {
+    background-color: darken(@navbarGlobalBackground, 20%);
+  }
+
+  .navbar-nav > li > a:hover,
+  .navbar-nav > li > a:focus,
+  .navbar-nav > .active > a,
+  .navbar-nav > .dropdown.open > a {
+    background-color: @blue;
+  }
+
+  .navbar-search-dropdown {
+    background-color: @blue !important;
+  }
+
+  .navbar-admin-link:hover,
+  .navbar-admin-link:focus,
+  .active > .navbar-admin-link {
+    background-color: @orange !important;
+  }
+}
+
+
+.navbar-context {
+  top: @navbarHeight;
+  z-index: 498;
+  height: 57px;
+  background-color: @navbarContextBackground;
+
+  .nav-tabs {
+    width: 100%;
+  }
+
+  .navbar-nav > li > a {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+}
+
+.navbar-context-favorite {
+  float: left;
+  padding: 6px 0 0 10px;
+}
+
+.navbar-context-meta {
+  line-height: @navbarHeight;
+  padding: 0 10px;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+}
diff --git a/server/sonar-web/src/main/less/components/navigator.less b/server/sonar-web/src/main/less/components/navigator.less
new file mode 100644
index 00000000000..26839743527
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator.less
@@ -0,0 +1,6 @@
+@import (reference) "../mixins";
+@import (reference) "../variables";
+
+@import "navigator/config";
+@import "navigator/base";
+@import "navigator/filters";
diff --git a/server/sonar-web/src/main/less/components/navigator/base.less b/server/sonar-web/src/main/less/components/navigator/base.less
new file mode 100644
index 00000000000..9b448f74e4b
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/base.less
@@ -0,0 +1,459 @@
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
+
+
+.navigator { }
+
+
+.navigator-element() {
+  position: fixed;
+  z-index: 2;
+  .box-sizing(border-box);
+}
+
+.navigator-header {
+  height: @navigatorHeaderHeight;
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-filters {
+  position: relative;
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-content {
+  display: table;
+  width: 100%;
+}
+
+.navigator-side {
+  position: relative;
+  display: table-cell;
+  vertical-align: top;
+  width: @navigatorResultsWidth + 2 * @navigatorPadding;
+  min-width: 275px + 2 * @navigatorPadding;
+  max-width: 600px + 2 * @navigatorPadding;
+}
+
+.navigator-main {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.navigator-facets {
+  margin: @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+}
+
+.navigator-results {
+  position: relative;
+  z-index: 2;
+  width: @navigatorResultsWidth;
+  min-width: 275px;
+  max-width: 600px;
+  margin: @navigatorPadding @navigatorPadding 0;
+  .box-sizing(border-box);
+}
+
+.navigator-actions {
+  position: relative;
+  z-index: 4;
+  margin: 0 @navigatorPadding @navigatorPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+  .clearfix;
+}
+
+.navigator-details {
+  position: relative;
+  margin: 0 @navigatorPadding @navigatorPadding;
+}
+
+.navigator-resizer {
+  position: absolute;
+  top: 50%; right: -1px;
+  cursor: col-resize;
+}
+
+.navigator-notes {
+  display: none;
+}
+
+.navigator-with-notes {
+
+  .navigator-notes {
+    display: block;
+  }
+}
+
+
+.measures-page {
+  .navigator-details { overflow: visible; }
+  .page { padding: 0 0 0 @navigatorPadding; }
+}
+
+
+.navigator-fetching {
+  &:before {
+    content: " ";
+    position: absolute;
+    z-index: 3;
+    top: 0; bottom: 0; left: 0; right: 0;
+    background: #fff url(../images/loading.gif) no-repeat 4px 4px;
+  }
+
+  &#tab-issue-rule {
+    position: relative;
+
+    &:before {
+      z-index: 3;
+      background-color: #EFEFEF;
+    }
+  }
+
+  &.code-issue-actions {
+    position: relative;
+
+    &:before {
+      z-index: 3;
+      background-color: #E4ECF3;
+    }
+  }
+}
+
+
+.navigator-page-loader {
+  padding: @navigatorPadding 0 0 @navigatorPadding;
+}
+
+
+
+// Header
+.navigator-header {
+  padding: 0 @navigatorPadding;
+  background-color: @navigatorBarBackground;
+  font-size: 0;
+
+  .page-title,
+  .page-actions {
+    margin: (@navigatorHeaderHeight - @formControlHeight) / 2 0;
+  }
+}
+
+.navigator-header-favorite {
+  padding-left: 58px;
+}
+
+.navigator-header-title {
+  display: inline-block;
+  vertical-align: middle;
+  color: @navigatorHeaderColor;
+  font-size: 20px;
+  line-height: @navigatorHeaderLineHeight;
+}
+
+.navigator-header-title-note {
+  vertical-align: middle;
+  color: #777;
+  font-size: @smallFontSize;
+}
+
+.navigator-header-description {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 70%;
+  margin-left: 16px;
+  font-size: @smallFontSize;
+  font-style: italic;
+}
+
+.navigator-header-actions {
+  margin: 8px 0 8px 20px;
+
+  & > a {
+    vertical-align: middle;
+    margin: 0 8px;
+    font-size: @smallFontSize;
+  }
+}
+
+.navigator-header-menu-toggle {
+  display: inline-block;
+  vertical-align: top;
+  height: 36px;
+  margin-right: 10px;
+  margin-left: -10px;
+  padding: 10px;
+  border-right: 1px solid transparent;
+  .box-sizing(border-box);
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    background-color: @navigatorHover;
+  }
+
+  &.active {
+    border-color: #cdcdcd;
+    background-color: #fff;
+  }
+
+  [class^="icon-"], [class*=" icon-"] {
+    font-size: 16px;
+  }
+}
+
+
+
+// Notes
+.navigator-notes {
+  margin: 0 @navigatorPadding @navigatorPadding @navigatorPadding;
+  padding: 0 @navigatorPadding;
+  border: 1px solid @navigatorBorderColor;
+  background-color: @navigatorBarBackground;
+
+  color: #777;
+  font-size: @smallFontSize;
+  line-height: @navigatorNotesHeight;
+}
+
+
+
+// Facets
+.navigator-facets {
+  padding: @navigatorPadding;
+  border-bottom: 1px solid @navigatorBorderColor;
+  background-color: @navigatorBarBackground;
+}
+
+.navigator-facets-list {
+
+}
+
+.navigator-facets-list-item {
+  font-size: 0;
+  margin-bottom: -6px;
+}
+
+.navigator-facets-list-item + .navigator-facets-list-item {
+  margin-top: @navigatorPadding;
+}
+
+.navigator-facets-list-item-name {
+  float: left;
+  line-height: 22px;
+  min-width: 120px;
+  margin-right: @navigatorPadding;
+  font-size: @smallFontSize;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.navigator-facets-list-item-options {
+  overflow: hidden;
+}
+
+
+
+// Results
+.navigator-results {
+  background-color: @white;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &.fetching {
+    .navigator-results-list { visibility: hidden; }
+    .navigator-results-loader { display: block; }
+  }
+}
+
+.navigator-results-loader {
+  position: fixed;
+  z-index: 10;
+  display: none;
+  background-color: #fff;
+}
+
+.navigator-results-list {
+
+  & > li {
+    position: relative;
+    z-index: 1;
+    padding: @navigatorPadding / 2 0;
+    border: 1px solid;
+    border-color: @navigatorBorderLightColor transparent;
+    cursor: pointer;
+    .trans;
+
+    .line {
+      padding: @navigatorPadding / 2 @navigatorPadding;
+      line-height: 1.2;
+    }
+
+    .line-small {
+      font-size: 11px;
+      line-height: 14px;
+    }
+
+    .line-right {
+      float: right;
+    }
+
+    .line-nowrap {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
+
+    &.active {
+      z-index: 2;
+      background-color: #CAE3F2;
+      border-color: #4B9FD5;
+    }
+  }
+
+  & > li + li { margin-top: -1px; }
+}
+
+.navigator-results-no-results {
+  padding-top: 20% !important;
+  background: #fff !important;
+  border-color: transparent !important;
+  color: #999;
+  cursor: default !important;
+  text-align: center;
+}
+
+
+
+// Details
+.navigator-details {
+  background-color: @white;
+  overflow: auto;
+
+  &.loading {
+    background: @white url("../images/loading.gif") no-repeat 4px 2px;
+  }
+
+  .code-issue-name {
+    border-bottom: none;
+  }
+
+  .code-issue-actions {
+    background-color: #E4ECF3;
+  }
+
+  .source_title {
+    z-index: 3;
+    top: @navigatorTopOffset + @navigatorHeaderHeight + @navigatorFiltersHeight;
+    left: @navigatorResultsWidth;
+    right: 0;
+    padding: 0 0 @navigatorPadding 0;
+    background-color: #fff;
+  }
+
+  .source {
+    & > table {
+      border: 1px solid #DDD;
+    }
+  }
+
+  .scm .author {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+
+
+// Status
+.navigator-actions {
+  padding: 0 @navigatorPadding 0 0;
+
+  border-right: 1px solid @navigatorBorderLightColor;
+  border-bottom: 1px solid @navigatorBorderLightColor;
+  background-color: @navigatorBarBackground;
+  font-size: @smallFontSize;
+
+  strong { font-weight: bold; }
+}
+
+.navigator-actions-order {
+  float: left;
+  padding: 0 @navigatorPadding;
+  line-height: @navigatorStatusHeight;
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    background-color: @navigatorHover;
+  }
+}
+
+.navigator-actions-order-choices {
+  position: absolute;
+  top: 100%;
+  left: -1px;
+  min-width: @navigatorResultsWidth / 2;
+  background-color: #fff;
+  border: 1px solid @navigatorBorderLightColor;
+  box-shadow: @defaultShadow;
+  overflow: hidden;
+  display: none;
+
+  & > li {
+    height: @navigatorStatusHeight;
+    line-height: @navigatorStatusHeight;
+    padding: 0 10px;
+    cursor: pointer;
+    .trans;
+
+    &:hover {
+      background-color: @navigatorBarBackground;
+    }
+  }
+
+  &.open {
+    display: block;
+  }
+}
+
+.navigator-actions-total {
+  float: right;
+  height: @navigatorStatusHeight;
+  line-height: @navigatorStatusHeight;
+}
+
+.navigator-actions-bulk {
+  position: relative;
+  top: -1px;
+  margin-left: 8px;
+  font-size: 16px;
+  text-decoration: none;
+}
+
+
+
+// Footer
+.navigator-page #footer {
+  margin: 0;
+  border-top: 1px solid @navigatorBorderLightColor;
+}
+
+.navigator-page #ftlinks {
+  margin-top: 0;
+}
diff --git a/server/sonar-web/src/main/less/components/navigator/config.less b/server/sonar-web/src/main/less/components/navigator/config.less
new file mode 100644
index 00000000000..10c6ce5e674
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/config.less
@@ -0,0 +1,32 @@
+@import (reference) "../../variables";
+
+// Layout
+@navigatorTopOffset: 80px;
+@navigatorBottomOffset: 35px;
+
+@navigatorHeaderHeight: 40px;
+@navigatorHeaderLineHeight: @navigatorHeaderHeight - 3px;
+@navigatorFiltersHeight: 40px;
+@navigatorFiltersLineHeight: @navigatorFiltersHeight - 3px;
+@navigatorFacetsHeight: 90px;
+@navigatorStatusHeight: 30px;
+@navigatorNotesHeight: 20px;
+
+@navigatorResultsWidth: 320px;
+
+@navigatorPadding: 10px;
+
+
+// Colors
+@navigatorBarBackground: @barBackgroundColor;
+@navigatorBorderColor: @barBorderColor;
+@navigatorBorderLightColor: @barBorderColor;
+
+@navigatorHeaderColor: @baseFontColor;
+
+@navigatorFacetStatColor: @secondFontColor;
+@navigatorFacetInactiveBackground: lighten(@barBackgroundColor, 4%);
+
+
+@navigatorHover: darken(@navigatorBarBackground, 5%);
+@navigatorFilterPadding: @navigatorPadding;
diff --git a/server/sonar-web/src/main/less/components/navigator/filters.less b/server/sonar-web/src/main/less/components/navigator/filters.less
new file mode 100644
index 00000000000..7c56f015d96
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/navigator/filters.less
@@ -0,0 +1,332 @@
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
+
+
+.navigator-filters {
+  padding-right: 85px;
+  background-color: @navigatorBarBackground;
+  font-size: 0;
+}
+
+.navigator-filters-list {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  margin-bottom: -1px;
+}
+
+.navigator-filter-submit,
+.navigator-filter-new-search {
+  vertical-align: middle;
+  margin-left: 15px;
+  font-size: @baseFontSize;
+}
+
+.navigator-filter-submit {
+  position: absolute;
+  bottom: 0; right: 0;
+  .size(85px, @navigatorFiltersHeight);
+  margin: -1px -1px -1px 0;
+  padding: 0;
+  border: 1px solid darken(@blue, 10%);
+  background: @blue;
+  color: #fff;
+  font-weight: normal;
+  .trans;
+
+  &::-moz-focus-inner { border: 0; }
+
+  &:hover, &:focus {
+    border-color: @blue;
+    background-color: lighten(@blue, 10%);
+  }
+}
+
+.navigator-filter-list-favorite {
+  position: relative;
+  padding-left: 36px;
+  overflow: hidden;
+}
+
+.navigator-filters-actions {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 20px;
+  font-size: @baseFontSize;
+}
+
+.navigator-filter {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  vertical-align: top;
+  height: @navigatorFiltersHeight;
+  line-height: @navigatorFiltersLineHeight;
+  margin: -1px 0 0 -1px;
+  padding: 0 1.5 * @navigatorFilterPadding;
+  border: 1px solid @navigatorBorderLightColor;
+  .box-sizing(border-box);
+  white-space: nowrap;
+  cursor: pointer;
+  .trans;
+
+  &:hover {
+    z-index: 2;
+    border-color: @navigatorBorderColor;
+    background-color: @navigatorHover;
+  }
+
+  &.active {
+    border-color: @darkGrey;
+    background: #fff;
+  }
+
+}
+
+.navigator-filter-disabled {
+  display: none;
+}
+
+.navigator-filter-optional {
+  padding-right: 0;
+}
+
+.navigator-filter-inline,
+.navigator-filter-read-only,
+.navigator-filter-inactive {
+  cursor: default;
+
+  &:hover,
+  &.active {
+    border-color: transparent;
+    background: transparent;
+  }
+}
+
+.navigator-filter-inline .navigator-filter-label:after {
+    content: "";
+}
+
+.navigator-filter-inactive {
+  opacity: 0.5;
+}
+
+.navigator-filter-context {
+  z-index: 3;
+  background-color: @contextBackground;
+  border-color: @contextBorder;
+}
+
+.navigator-filter-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 5px;
+  color: #333;
+  font-size: @baseFontSize;
+
+  &:after { content: ":"; }
+}
+
+.navigator-filter-value {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 120px;
+  color: #333;
+  font-size: @baseFontSize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.default {
+    color: #666;
+  }
+}
+
+.navigator-filter-disable {
+  display: inline-block;
+  vertical-align: middle;
+  .square(20px);
+  line-height: 20px;
+  margin: 0 0 0 5px;
+  font-size: 18px;
+  text-align: center;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background-color: darken(@navigatorHover, 7%);
+  }
+}
+
+.navigator-filter-range-input {
+  width: 120px;
+}
+
+.navigator-filter-details {
+  display: none;
+  position: absolute;
+  z-index: 1200;
+  min-width: 100px;
+  border: 1px solid @darkGrey;
+  background: #fff;
+  box-shadow: @defaultShadow;
+  font-size: @baseFontSize;
+  transition: opacity 0.3s ease;
+
+  &.active {
+    display: block;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  /* IE10+ specific styles go here */
+  .navigator-filter-details {
+    width: 250px;
+  }
+}
+
+.navigator-filter-details-inner {
+  max-width: 300px;
+  padding: 5px @navigatorFilterPadding;
+
+  .select2-container,
+  input {
+    margin: 5px 0;
+    vertical-align: middle;
+  }
+}
+
+.navigator-filter-select-list {
+  min-width: 150px;
+  max-width: 300px;
+  max-height: 182px;
+  padding: 5px 0;
+  overflow-y: auto;
+  .webkit-scrollbar;
+  -ms-overflow-style: scrollbar;
+
+  label {
+    display: block;
+    padding: 5px @navigatorFilterPadding;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .trans(background);
+
+    &:hover,
+    &.current {
+      background-color: darken(#fff, 7%);
+    }
+
+    & > input[type=checkbox] {
+      vertical-align: baseline;
+      cursor: pointer;
+    }
+
+    & > img {
+      vertical-align: text-bottom;
+    }
+
+//    & > span {
+//      display: inline-block;
+//      vertical-align: top;
+//      width: 86%;
+//      white-space: nowrap;
+//      overflow: hidden;
+//      text-overflow: ellipsis;
+//    }
+
+    &.special {
+      font-style: italic;
+
+      & > span {
+        text-decoration: underline;
+      }
+    }
+
+    &.inactive {
+      cursor: default;
+      opacity: 0.5;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  .single {
+    padding: 5px @navigatorFilterPadding;
+  }
+
+  .line {
+    height: 1px;
+    margin: 5px 0;
+    background: @darkGrey;
+  }
+}
+
+.navigator-filter-select-list:not(.hidden) + .navigator-filter-select-list {
+  margin-top: 5px;
+  border-top: 1px solid @darkGrey;
+}
+
+.navigator-filter-search {
+  position: relative;
+  margin: @navigatorFilterPadding 26px @navigatorFilterPadding @navigatorFilterPadding;
+
+  input {
+    .size(100%, 26px);
+    padding: 0 7px;
+    border: 1px solid @darkGrey;
+    .box-sizing(border-box);
+  }
+
+  .fetching &:after {
+    content: ' ';
+    position: absolute;
+    top: 6px; right: -21px;
+    display: block;
+    .square(16px);
+    background: #fff url(../images/loading.gif) no-repeat center center;
+  }
+
+  &.fetching-error {
+
+    input { border: 2px solid @red; }
+  }
+}
+
+.navigator-filter-load-more {
+  display: none;
+  height: 26px;
+  line-height: 26px;
+  background-color: @grey;
+  text-align: center;
+  cursor: pointer;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background-color: darken(@grey, 7%);
+  }
+}
+
+.navigator-filter-favorite {
+  position: absolute;
+  top: -@navigatorPadding - @navigatorFiltersHeight;
+  left: 0;
+}
+
+.navigator-filter-favorite-toggle {
+  .size(16px, @navigatorFiltersHeight);
+  background: url('../images/navigator/favorite-filters.png') no-repeat center center;
+
+  @media @retina {
+    background-image: url(../images/navigator/favorite-filters@2x.png);
+    background-size: 16px 14px;
+  }
+}
+
+.navigator-filter-more-criteria {
+  font-size: @baseFontSize;
+}
diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less
index 66b2f43a2f9..207bbc31737 100644
--- a/server/sonar-web/src/main/less/components/page.less
+++ b/server/sonar-web/src/main/less/components/page.less
@@ -1,21 +1,29 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "../init/links";
+
 
 .page {
-  padding: 10px 0;
+  position: relative;
+  padding: 10px;
+}
+
+.page-container {
+  min-width: 980px;
+}
+
+.page-wrapper {
+  min-height: ~"calc(100vh - @{pageFooterHeight})";
+  .box-sizing(border-box);
 }
 
-.page-header,
-// deprecated
-.page_title {
+.page-header {
   .clearfix;
   margin-bottom: 10px;
 }
 
 .page-title {
   float: left;
-  font-size: @mediumFontSize !important;
   line-height: @formControlHeight;
 }
 
@@ -29,3 +37,19 @@
   font-size: @smallFontSize;
   line-height: 1.5;
 }
+
+.page-footer {
+  min-height: @pageFooterHeight;
+  padding: 10px;
+  line-height: 1.5;
+  border-top: 1px solid @barBorderColor;
+  .box-sizing(border-box);
+  background-color: @barBackgroundColor;
+  color: @baseFontColorLight;
+  font-size: @smallFontSize;
+  text-align: center;
+
+  a {
+    .link-base-color;
+  }
+}
diff --git a/server/sonar-web/src/main/less/components/rules.less b/server/sonar-web/src/main/less/components/rules.less
index c4314d0c84c..4532f47ba93 100644
--- a/server/sonar-web/src/main/less/components/rules.less
+++ b/server/sonar-web/src/main/less/components/rules.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @leftPadding: 10px;
 @rightPadding: 10px;
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 3503922f9ba..5b7d664110f 100644
--- a/server/sonar-web/src/main/less/components/search-navigator.less
+++ b/server/sonar-web/src/main/less/components/search-navigator.less
@@ -1,11 +1,10 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @sideWidth: 300px;
 
 .search-navigator {
-  margin: 0 -10px;
 
   &.sticky {
 
@@ -343,7 +342,6 @@
   margin-right: 4px;
   border-bottom: none;
   color: @baseFontColor;
-  font-size: @iconSmallFontSize;
 }
 
 .search-navigator-filters-actions {
diff --git a/server/sonar-web/src/main/less/components/select-list.less b/server/sonar-web/src/main/less/components/select-list.less
new file mode 100644
index 00000000000..9cfd6ed019d
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/select-list.less
@@ -0,0 +1,194 @@
+@import (reference) '../variables';
+@import (reference) '../mixins';
+
+.select-list-container {
+  min-width: 500px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-control {
+  margin-bottom: 10px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-list-container {
+  border: 1px solid #bfbfbf;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.select-list-list-container.loading .select-list-list {
+  visibility: hidden;
+}
+
+.select-list-list-container-readonly {
+  border: none;
+}
+
+.select-list-list-container-readonly .select-list-list {
+  overflow: visible;
+}
+
+.select-list-list-container-readonly .select-list-list > li {
+  border: none;
+}
+
+.select-list-list {
+  overflow-x: hidden;
+}
+
+  .select-list-list > li {
+    position: relative;
+    display: block;
+    margin-top: -1px;
+    padding: 5px 10px;
+    border-top: 1px solid #e0e0e0;
+    color: #404040;
+    transition: -webkit-transform 0.3s ease;
+    transition: -ms-transform 0.3s ease;
+    transition: transform 0.3s ease;
+  }
+
+  .select-list-list > li.removed {
+    -webkit-transform: translateX(100%);
+       -moz-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+         -o-transform: translateX(100%);
+            transform: translateX(100%);
+  }
+
+  .select-list-list > li.added {
+    -webkit-transform: translateX(-100%);
+       -moz-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
+         -o-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+
+  .select-list-list > li.progress {
+    background: url(../images/loading.gif) no-repeat 10px 5px;
+  }
+
+  .select-list-list > li.progress .select-list-list-checkbox {
+    visibility: hidden;
+  }
+
+  .select-list-list > li.empty-message {
+    padding: 6px 5px;
+    border: 1px solid #ddd;
+    background-color: #efefef;
+  }
+
+
+.select-list-list-checkbox {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.select-list-list-item {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.select-list-control {
+  height: 27px;
+}
+
+.select-list-check-control {
+  float: left;
+}
+
+.select-list-check-control.disabled {
+  filter: alpha(opacity=60);
+  opacity: 0.6;
+}
+
+.select-list-check-control.disabled .select-list-control-button {
+  background-color: #fff !important;
+}
+
+.select-list-control-button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  vertical-align: middle;
+  width: 110px;
+  height: 27px;
+  line-height: 25px;
+  .box-sizing(border-box);
+  border: 1px solid #bfbfbf;
+  color: @baseFontColor;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.select-list-control-button:hover {
+  background-color: #f6f6f6;
+  color: @baseFontColor;
+}
+
+.select-list-control-button:active,
+.select-list-control-button.active {
+  z-index: 2;
+  background-color: #efefef;
+  color: @baseFontColor;
+}
+
+.select-list-control-button + .select-list-control-button {
+  margin-left: -1px;
+}
+
+
+.select-list-search-control {
+  position: relative;
+  float: right;
+  height: 27px;
+}
+
+.select-list-search-control input {
+  width: 170px;
+  height: 100%;
+  line-height: 27px\9;
+  padding: 0 40px 0 10px;
+  border: 1px solid #bfbfbf;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.select-list-search-control input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.select-list-search-control input::-ms-clear {
+  display: none;
+}
+
+.select-list-search-control-clear {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 23px;
+  height: 23px;
+  line-height: 24px;
+  background-color: #e0e0e0;
+  color: #fff;
+  cursor: pointer;
+  font-size: 18px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+  .select-list-search-control.disabled .select-list-search-control-clear {
+    filter: alpha(opacity=0);
+    opacity: 0;
+  }
+
+  .select-list-search-control-clear:hover {
+    background-color: #d6d6d6;
+  }
diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index 80928d14e7d..361634ac603 100644
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @lineHeight: 18px;
 @lineWithIssuesBackground: #ffeaea;
diff --git a/server/sonar-web/src/main/less/components/tooltips.less b/server/sonar-web/src/main/less/components/tooltips.less
index 271f13d8804..99574aefe7f 100644
--- a/server/sonar-web/src/main/less/components/tooltips.less
+++ b/server/sonar-web/src/main/less/components/tooltips.less
@@ -1,6 +1,6 @@
 @import (reference) "../mixins";
 @import (reference) "../variables";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 @background: #475760;
 
diff --git a/server/sonar-web/src/main/less/components/typography.less b/server/sonar-web/src/main/less/components/typography.less
index 24d960ff196..bdc8903a45c 100644
--- a/server/sonar-web/src/main/less/components/typography.less
+++ b/server/sonar-web/src/main/less/components/typography.less
@@ -1,6 +1,6 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
-@import (reference) "../ui";
+@import (reference) "ui";
 
 .formatted() {
   max-width: 1020px;
diff --git a/server/sonar-web/src/main/less/components/ui.less b/server/sonar-web/src/main/less/components/ui.less
new file mode 100644
index 00000000000..311a2ca8328
--- /dev/null
+++ b/server/sonar-web/src/main/less/components/ui.less
@@ -0,0 +1,491 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+
+/*
+ * Common
+ */
+
+.nowrap { white-space: nowrap; }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.justify {
+  margin-bottom: -1em;
+  text-align: justify;
+
+  & > .ib { display: inline-block; }
+
+  &:after { display: inline-block; width: 100%; content: " "; }
+}
+
+.no-transform {
+  text-transform: none;
+}
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.first-letter-uppercase::first-letter {
+  text-transform: uppercase;
+}
+
+.disabled-pointer-events {
+  pointer-events: none !important;
+}
+
+
+/*
+ * Links
+ */
+
+.link() {
+  outline: none;
+  text-decoration: none;
+  .trans;
+
+  &:hover { color: @blue; }
+
+  &:active, &:focus {
+    color: @darkBlue;
+  }
+}
+
+.base-link {
+  color: @baseFontColor;
+  .link;
+}
+
+.highlighted-link() {
+  color: @darkBlue;
+  .link;
+}
+
+.underlined-link() {
+  .highlighted-link;
+  border-bottom: 1px solid @lightBlue;
+
+  &.link-red { .widget-link-red; }
+}
+
+.icon-with-link {
+  outline: none;
+  text-decoration: none;
+}
+
+.widget-link {
+  .highlighted-link;
+  border-bottom: 1px solid @lightBlue;
+}
+
+.widget-link-red {
+  color: @red;
+  border-bottom-color: @lightRed;
+
+  &:hover, &:active, &:focus {
+    color: @red;
+    border-bottom-color: @red;
+  }
+}
+
+a.active-link {
+  border-bottom: none;
+  font-weight: 500;
+}
+
+
+
+/*
+ * Inputs
+ */
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=search],
+textarea {
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+  background: #fff;
+  color: @baseFontColor;
+  .trans(border-color);
+
+  &:active,
+  &:focus {
+    border-color: @highlighted;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &.invalid { border-color: @red; }
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=search] {
+  height: @formControlHeight;
+  padding: 0 3px;
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+}
+
+textarea {
+  padding: 3px;
+}
+
+button,
+.button,
+input[type=submit],
+input[type=button] {
+  display: inline-block;
+  vertical-align: baseline;
+  height: @formControlHeight;
+  margin: 0 1px;
+  padding: 0 10px;
+
+  border: 1px solid @darkGrey;
+  .box-sizing(border-box);
+
+  background: #f4f4f4;
+
+  color: @baseFontColor;
+  font-weight: bold;
+  font-size: @baseFontSize;
+  text-align: center;
+  text-decoration: none;
+
+  cursor: pointer;
+  outline: none;
+  .trans(border-color);
+
+  &:hover, &.active {
+    border-color: #5281a0;
+    background: #4b9fd5;
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #2790c0;
+    background: #78bdea;
+    color: #fff;
+  }
+
+  &:focus {
+    border-color: @highlighted;
+  }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active,
+  &[disabled]:focus {
+    color: #bbb;
+    border-color: #ddd;
+    background: #ebebeb;
+    cursor: default;
+  }
+}
+
+.button { line-height: @formControlHeight; }
+
+.button-red {
+  &:hover, &:focus {
+    border-color: #900;
+    background: lighten(#900, 10%);
+    color: #fff;
+  }
+
+  &:active {
+    border-color: #900;
+    background: lighten(#900, 20%);
+  }
+}
+
+.button-clean,
+.button-clean:hover,
+.button-clean:focus {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: @baseFontColor;
+}
+
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+
+  & > button,
+  & > .button {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding: 2px 8px;
+    font-size: @smallFontSize;
+    font-weight: normal;
+    cursor: pointer;
+
+    &:hover, &:focus, &:active, &.active {
+      z-index: 3;
+    }
+  }
+
+  & > .button { line-height: 16px; }
+
+  & > button + button,
+  & > button + .button,
+  & > .button + button,
+  & > .button + .button {
+    margin-left: -1px;
+  }
+
+  & > a:not(.button) {
+    vertical-align: middle;
+    margin: 0 8px;
+    font-size: @smallFontSize;
+  }
+}
+
+
+.message-notice {
+  display: block;
+  padding: 5px 8px;
+  border: 2px solid @blue;
+}
+
+.message-alert {
+  display: block;
+  padding: 5px 8px;
+  border: 2px solid @orange;
+}
+
+.message-error {
+  display: block;
+  padding: 5px 8px;
+  background-color: @red;
+  color: #fff;
+}
+
+.message-notice + .message-notice,
+.message-notice + .message-alert,
+.message-notice + .message-error,
+.message-alert + .message-notice,
+.message-alert + .message-alert,
+.message-alert + .message-error,
+.message-error + .message-notice,
+.message-error + .message-alert,
+.message-error + .message-error {
+  margin-top: 5px;
+}
+
+
+
+/*
+ * Display SQALE Rating (also used by the SQALE plugin)
+ */
+
+.rating {
+  display: inline-block;
+  .size(1em, 1.3em);
+  line-height: 1.3;
+  color: #fff;
+  font-weight: 300;
+  text-align: center;
+
+  a > & {
+    margin-bottom: -1px;
+    border-bottom: 1px solid;
+    .trans;
+
+    &:hover { opacity: 0.8; }
+  }
+}
+
+.rating-A {
+  background-color: #00AA00;
+  a & { border-bottom-color: #00AA00; }
+}
+
+.rating-B {
+  background-color: #80CC00;
+  a & { border-bottom-color: #80CC00; }
+}
+
+.rating-C {
+  background-color: #FFEE00;
+  color: @baseFontColor;
+  a & { border-bottom-color: #FFEE00; }
+}
+
+.rating-D {
+  background-color: #F77700;
+  a & { border-bottom-color: #F77700; }
+}
+
+.rating-E {
+  background-color: #EE0000;
+  a & { border-bottom-color: #EE0000; }
+}
+
+
+.processes-container {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 50%;
+  width: 350px;
+  margin-left: -175px;
+}
+
+.process-spinner {
+  padding: 0 10px;
+  line-height: @formControlHeight;
+  border-radius: 0 0 3px 3px;
+  .box-sizing(border-box);
+  background-color: #f0e8ac;
+  text-align: center;
+  opacity: 0;
+  .trans;
+
+  &.shown { opacity: 1; }
+}
+
+.process-spinner + .process-spinner {
+  margin-top: 5px;
+  border-radius: 3px;
+}
+
+.process-spinner-failed {
+  padding-right: 30px;
+  background-color: @red;
+  color: @white;
+}
+
+.process-spinner-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 3px;
+  background: none !important;
+  border: none !important;
+  line-height: 1;
+}
+
+
+
+.shortcuts-section {
+
+}
+
+.shortcuts-section + .shortcuts-section {
+  margin-top: 20px;
+}
+
+.shortcuts-section-title {
+  margin-bottom: 5px;
+}
+
+.shortcuts-list {
+  > li + li {
+    margin-top: 5px;
+  }
+}
+
+.shortcut-button {
+  display: inline-block;
+  .square(24px);
+  line-height: 24px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  .vertical-gradient(#f5f5f5, #eee);
+  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+  color: @secondFontColor;
+  font-size: @baseFontSize;
+  font-weight: 500;
+  text-align: center;
+}
+
+
+.nav {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav > li {
+  position: relative;
+  display: block;
+}
+
+.nav > li > a {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 10px 15px;
+}
+
+
+.nav-crumbs {
+  padding: 2px 0;
+
+  a {
+    color: @baseFontColorLight;
+
+    &:hover, &:focus {
+      color: @blue !important;
+    }
+  }
+
+  > li + li:before {
+    content: "/";
+    float: left;
+    padding: 4px 0;
+    color: fade(@baseFontColor, 30%);
+  }
+
+  > li:first-child {
+    font-size: 18px;
+    font-weight: 300;
+
+    > a {
+      color: @baseFontColor;
+    }
+  }
+}
+
+.nav-tabs {
+  border-bottom: 1px solid @barBorderColor;
+
+  > li {
+    float: left;
+    margin-bottom: -1px;
+  }
+
+  > li > a {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-right: 2px;
+    border-bottom: 3px solid transparent;
+    color: @baseFontColorLight;
+
+    &:hover {
+      border-color: @blue;
+    }
+  }
+
+  > li.active > a {
+    border-color: @blue;
+  }
+}