rework css

server/sonar-web/Gruntfile.coffee

@@ -9,18 +9,16 @@ module.exports = (grunt) ->
       dev:
         files:
           '<%= grunt.option("assetsDir") || pkg.assets %>css/sonar.css': [
-            '<%= pkg.sources %>less/init.less'
             '<%= pkg.sources %>less/jquery-ui.less'
             '<%= pkg.sources %>less/select2.less'
             '<%= pkg.sources %>less/select2-sonar.less'
-            '<%= pkg.sources %>less/layout.less'
+
+            '<%= pkg.sources %>less/init.less'
+            '<%= pkg.sources %>less/components.less'
+            '<%= pkg.sources %>less/pages.less'
+
             '<%= pkg.sources %>less/style.less'
-            '<%= pkg.sources %>less/icons.less'
-            '<%= pkg.sources %>less/ui.less'
-            '<%= pkg.sources %>less/sonar-colorizer.less'
-            '<%= pkg.sources %>less/dashboard.less'
-            '<%= pkg.sources %>less/select-list.less'
-            '<%= pkg.sources %>less/navigator.less'
+
             '<%= pkg.sources %>less/*.less'
           ]
       build:
@@ -28,18 +26,16 @@ module.exports = (grunt) ->
           cleancss: true
         files:
           '<%= grunt.option("assetsDir") || pkg.assets %>css/sonar.css': [
-            '<%= pkg.sources %>less/init.less'
             '<%= pkg.sources %>less/jquery-ui.less'
             '<%= pkg.sources %>less/select2.less'
             '<%= pkg.sources %>less/select2-sonar.less'
-            '<%= pkg.sources %>less/layout.less'
+
+            '<%= pkg.sources %>less/init.less'
+            '<%= pkg.sources %>less/components.less'
+            '<%= pkg.sources %>less/pages.less'
+
             '<%= pkg.sources %>less/style.less'
-            '<%= pkg.sources %>less/icons.less'
-            '<%= pkg.sources %>less/ui.less'
-            '<%= pkg.sources %>less/sonar-colorizer.less'
-            '<%= pkg.sources %>less/dashboard.less'
-            '<%= pkg.sources %>less/select-list.less'
-            '<%= pkg.sources %>less/navigator.less'
+
             '<%= pkg.sources %>less/*.less'
           ]
 

server/sonar-web/src/main/hbs/nav/nav-settings-navbar.hbs

@@ -1,5 +1,11 @@
 <div class="container">
-  <ul class="nav navbar-nav">
+  <ul class="nav navbar-nav nav-crumbs">
+      <li>
+        <a href="{{link '/settings'}}">{{t 'layout.settings'}}</a>
+      </li>
+  </ul>
+
+  <ul class="nav navbar-nav nav-tabs">
     <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">
         {{t 'sidebar.project_settings'}}&nbsp;<i class="icon-dropdown"></i>
@@ -39,9 +45,6 @@
         <li>
           <a href="{{link '/roles/projects'}}">{{t 'roles.page'}}</a>
         </li>
-        <li>
-          <a href="{{link '/admin_dashboards/index'}}">{{t 'default_dashboards.page'}}</a>
-        </li>
       </ul>
     </li>
 

server/sonar-web/src/main/js/nav/app.js

@@ -41,7 +41,7 @@ define([
 
   App.addInitializer(function () {
     var navHeight = $('.navbar-global').outerHeight() + $('.navbar-context').outerHeight();
-    $(document.body).css('padding-top', navHeight).data('top-offset', navHeight);
+    $('.page-wrapper').css('padding-top', navHeight).data('top-offset', navHeight);
   });
 
   App.addInitializer(function () {

server/sonar-web/src/main/less/component-viewer-source-colorizer.less

@@ -1,29 +0,0 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-
-/* constants */
-.code .c {
-  font-style: normal;
-}
-
-/* javadoc */
-.code .j {
-  font-style: normal;
-}
-
-/* keyword */
-.code .k {
-  color: saturate(@darkBlue, 50%);
-  font-weight: 600;
-}
-
-/* string */
-.code .s {
-  color: saturate(@red, 0%);
-  font-weight: normal;
-}
-
-/* preprocessing directive */
-.code .p {
-  font-weight: normal;
-}

server/sonar-web/src/main/less/components.less

@@ -1,3 +1,4 @@
+@import "components/ui";
 @import "components/source";
 @import "components/facets";
 @import "components/modals";
@@ -11,3 +12,10 @@
 @import "components/menu";
 @import "components/page";
 @import "components/component-name";
+@import "components/component-viewer";
+@import "components/navbar";
+@import "components/navigator";
+@import "components/select-list";
+@import "components/login";
+@import "components/graphics";
+@import "components/bubble-popup";

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;
+  }
+}

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;

server/sonar-web/src/main/less/component-viewer.less → server/sonar-web/src/main/less/components/component-viewer.less

@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 @import (reference) "ui";
 
 @headerHeight: 60px;

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 {

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; }
+}

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;

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;
+}

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 {

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;

server/sonar-web/src/main/less/navbar.less → server/sonar-web/src/main/less/components/navbar.less

@@ -1,5 +1,5 @@
-@import (reference) "mixins";
-@import (reference) "variables";
+@import (reference) "../mixins";
+@import (reference) "../variables";
 @import (reference) "ui";
 
 @navbarGlobalBackground: #262626;

server/sonar-web/src/main/less/navigator.less → server/sonar-web/src/main/less/components/navigator.less

@@ -1,5 +1,5 @@
-@import (reference) "mixins";
-@import (reference) "variables";
+@import (reference) "../mixins";
+@import (reference) "../variables";
 
 @import "navigator/config";
 @import "navigator/base";

server/sonar-web/src/main/less/navigator/base.less → server/sonar-web/src/main/less/components/navigator/base.less

@@ -1,7 +1,6 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
 
 
 .navigator { }

server/sonar-web/src/main/less/navigator/config.less → server/sonar-web/src/main/less/components/navigator/config.less

@@ -1,4 +1,4 @@
-@import "../variables";
+@import (reference) "../../variables";
 
 // Layout
 @navigatorTopOffset: 80px;

server/sonar-web/src/main/less/navigator/filters.less → server/sonar-web/src/main/less/components/navigator/filters.less

@@ -1,7 +1,6 @@
-@import "../variables";
-@import "../mixins";
-
-@import "config";
+@import (reference) "../../variables";
+@import (reference) "../../mixins";
+@import (reference) "config";
 
 
 .navigator-filters {

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;
+  }
+}

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;

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 {

server/sonar-web/src/main/less/select-list.less → server/sonar-web/src/main/less/components/select-list.less

@@ -1,5 +1,5 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
+@import (reference) '../variables';
+@import (reference) '../mixins';
 
 .select-list-container {
   min-width: 500px;

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;

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;
 

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;

server/sonar-web/src/main/less/ui.less → server/sonar-web/src/main/less/components/ui.less

@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 
 
 /*
@@ -94,18 +94,6 @@
   }
 }
 
-.link-no-underline {
-  border-bottom: none;
-}
-
-.link-with-icon {
-  .link-no-underline;
-
-  & > .ul {
-    border-bottom: 1px solid @lightBlue;
-  }
-}
-
 a.active-link {
   border-bottom: none;
   font-weight: 500;
@@ -453,7 +441,7 @@ input[type=button] {
   padding: 2px 0;
 
   a {
-    color: @baseLightFontColor;
+    color: @baseFontColorLight;
 
     &:hover, &:focus {
       color: @blue !important;
@@ -490,7 +478,7 @@ input[type=button] {
     padding-bottom: 2px;
     margin-right: 2px;
     border-bottom: 3px solid transparent;
-    color: @baseLightFontColor;
+    color: @baseFontColorLight;
 
     &:hover {
       border-color: @blue;

server/sonar-web/src/main/less/deprecated.less

@@ -0,0 +1,356 @@
+@import (reference) "variables";
+@import (reference) "mixins";
+@import (reference) "components/ui";
+
+// deprecated since 5.1
+
+// use `.page-title` instead
+.page_title {
+  .clearfix;
+  margin-bottom: 10px;
+}
+
+.loading {
+  background: url("../images/loading.gif") no-repeat 4px 2px;
+  color: #444;
+  padding: 3px 25px;
+}
+
+// use `.vertical-right` instead
+.right {
+  text-align: right;
+}
+
+// use `.vertical-left` instead
+.left {
+  text-align: left;
+}
+
+// use `.text-center` instead
+.center {
+  text-align: center;
+}
+
+// use `.vertical-top` instead
+.top {
+  vertical-align: top;
+}
+
+// use `.vertical-bottom` instead
+.bottom {
+  vertical-align: bottom;
+}
+
+// use `.vertical-middle` instead
+.middle {
+  vertical-align: middle;
+}
+
+.clear {
+  height: 0;
+  clear: both;
+}
+
+// use `.note` instead
+.subtitle {
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+}
+
+.crossout {
+  text-decoration: line-through;
+}
+
+.notes {
+  color: #777;
+  font-size: 11px;
+  margin-bottom: 10px;
+  background-color: #EFEFEF;
+  border: 1px solid #cdcdcd;
+  line-height: 16px;
+  height: 16px;
+  padding: 2px 4px;
+}
+
+.warning, .modal-warning {
+  border: solid 1px #FFD324;
+  background-color: #FFF6BF;
+  color: #514721;
+  margin: 0 0 4px;
+  padding: 4px;
+}
+
+.error, .modal-error {
+  border: 1px solid red;
+  background-color: #FF5252;
+  color: #eee;
+  margin: 0 0 4px;
+  padding: 4px;
+
+  a {
+    color: #eee;
+  }
+}
+
+.notice, .modal-notice {
+  border: 1px solid #9c9;
+  background-color: #e2f9e3;
+  color: #060;
+  margin: 0 0 4px;
+  padding: 4px;
+}
+
+.info {
+  background-color: #CAE3F2;
+  padding: 5px;
+  border: 1px solid #4B9FD5;
+}
+
+div.operations {
+  float: right;
+  margin: 0;
+}
+
+ul.operations {
+  float: right;
+  height: 20px;
+  line-height: 20px;
+  list-style-type: none;
+  margin: 0;
+  background-color: #EFEFEF;
+  border: 1px solid #cdcdcd;
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+ul.operations li {
+  float: left;
+  margin: 0;
+  padding: 0 8px;
+  font-size: 85%;
+  border-right: 1px solid #cdcdcd;
+}
+
+ul.operations li.selected {
+  background-color: #d4d4d4;
+}
+
+ul.operations li.last {
+  border-right-width: 0;
+}
+
+ul.operations li a {
+  .base-link;
+  color: #555;
+}
+
+ul.operations li img {
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+th.operations, td.operations {
+  text-align: right;
+}
+
+.doc h2 {
+  margin-top: 8px;
+}
+
+.doc p {
+  margin: 8px 0;
+}
+
+.doc pre, pre.code {
+  color: #777;
+  background-color: #EFEFEF;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px dashed #777;
+  font-size: 93%;
+  line-height: 1.5em;
+}
+
+.doc li {
+  list-style: disc outside;
+  padding: 2px;
+}
+
+.doc ul {
+  list-style: none outside;
+  padding-left: 30px;
+}
+
+.rulename, .rulename a {
+  color: #444;
+  font-weight: 500;
+}
+
+.rulename a:hover {
+  text-decoration: underline;
+}
+
+.source_title {
+  padding: 10px 5px;
+}
+
+.source_title span.h1 {
+  font-size: 16px;
+  margin-right: 10px;
+}
+
+.source_links {
+  font-size: 11px;
+}
+
+.global_violations {
+  width: 100%;
+}
+
+.global_violations > tbody > tr > td {
+  padding-bottom: 10px;
+}
+
+.global_violations td {
+  padding: 3px 0;
+}
+
+.global_violations td img, #source_title img {
+  vertical-align: text-bottom;
+}
+
+.tab_header {
+  padding: 5px 10px;
+}
+
+.tab_header td {
+  padding-right: 7px;
+}
+
+.tab_header td.name {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.tab_header td.value {
+  text-align: right;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.extension-close {
+  position: absolute;
+  top: 5px; right: 10px;
+}
+
+.source_options {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid #ddd;
+  font-size: 85%;
+}
+
+.source_options td {
+  background: url("../images/sep12.png") no-repeat scroll 0 50% transparent;
+  padding: 0 10px;
+}
+
+.source_options td.first {
+  background: none;
+  padding: 0 10px 0 0;
+}
+
+div.autocomplete {
+  position: absolute;
+  width: 600px;
+  right: 10px;
+  top: 10px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  margin: 0;
+  padding: 0;
+  color: #111;
+  line-height: 18px;
+  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
+  z-index: 999999;
+}
+
+div.autocomplete ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+div.autocomplete ul li {
+  list-style-type: none;
+  display: block;
+  margin: 0;
+  padding: 3px 5px;
+  cursor: pointer;
+  color: #333;
+  line-height: 18px;
+  height: 18px;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+div.autocomplete div.q {
+  font-size: 93%;
+  color: #777;
+  width: 90px;
+  text-align: right;
+  margin-right: 5px;
+  display: inline-block;
+
+  /* For IE 7 */
+  zoom: 1;
+  *display: inline;
+}
+
+div.autocomplete ul li img {
+  vertical-align: middle;
+}
+
+div.autocomplete ul li.selected {
+  background-color: @lightBlue;
+}
+
+div.autocomplete strong {
+  font-weight: bold;
+}
+
+div.autocompleteNote {
+  color: #777;
+  font-size: 85%;
+  background-color: #EFEFEF;
+  border-top: 1px solid #CCC;
+  padding: 1px 10px;
+}
+
+.color_OK {
+  border: 2px solid #85bb43 !important;
+  color: #85bb43 !important;
+}
+
+.color_WARN {
+  border: 2px solid #f90 !important;
+  color: #f90 !important;
+}
+
+.color_ERROR {
+  border: 2px solid #d4333f !important;
+  color: #d4333f !important;
+}
+
+.admin-page-title {
+  margin-bottom: 0;
+}
+
+.admin-page-description {
+  font-size: 85%;
+  font-weight: normal;
+  margin-bottom: 25px;
+}

server/sonar-web/src/main/less/init.less

@@ -1,165 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-
-html {
-  color: @baseFontColor;
-  background: #fff;
-}
-
-body {
-  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: @baseFontSize;
-  line-height: 1.231;
-}
-
-* {
-  margin: 0;
-  padding: 0
-}
-
-a {
-  border-bottom: 1px solid @lightBlue;
-  color: @darkBlue;
-  cursor: pointer;
-  outline: none;
-  text-decoration: none;
-  .trans;
-
-  &:hover {
-    color: @blue;
-  }
-
-  &:active, &:focus {
-    color: @darkBlue;
-  }
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-fieldset, img {
-  border: 0;
-}
-
-address, caption, cite, code, dfn, em, strong, th, var {
-  font-style: normal;
-  font-weight: normal;
-}
-
-ol, ul {
-  list-style: none;
-}
-
-caption, th {
-  text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
-q:before, q:after {
-  content: '';
-}
-
-abbr, acronym {
-  border: 0;
-  font-variant: normal;
-}
-
-sup {
-  vertical-align: text-top;
-}
-
-sub {
-  vertical-align: text-bottom;
-}
-
-input, textarea, select {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-select, input, button, textarea {
-  font-size: inherit;
-  font-family: inherit;
-}
-
-/*Remove button padding in FF*/
-select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-legend {
-  color: #000
-}
-
-pre, code, kbd, samp, tt {
-  font-family: monospace;
-  line-height: 1;
-}
-
-code {
-  font-size: 93%;
-}
-
-small {
-  color: #aaa;
-  font-size: 85%;
-  font-style: normal;
-}
-
-em {
-  font-weight: bold;
-}
-
-svg {
-  vertical-align: top;
-}
-
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Light-webfont.eot');
-  src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Light-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
-  font-weight: 300;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Regular-webfont.eot');
-  src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
-  font-weight: 400;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Medium-webfont.eot');
-  src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
-  font-weight: 500;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'Roboto';
-  src: url('../fonts/Roboto-Bold-webfont.eot');
-  src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
-  url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
-  url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
-  font-weight: 700;
-  font-style: normal;
-}
+@import "init/base";
+@import "init/type";
+@import "init/links";
+@import "init/tables";
+@import "init/icons";
+@import "init/misc";

server/sonar-web/src/main/less/init/base.less

@@ -0,0 +1,106 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+*, *:before, *:after {
+  margin: 0;
+  padding: 0
+}
+
+html, body {
+  background-color: @baseBackgroundColor;
+}
+
+fieldset, img {
+  border: 0;
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+caption, th {
+  text-align: left;
+}
+
+q:before, q:after {
+  content: '';
+}
+
+abbr, acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+select, input, button, textarea {
+  font-size: inherit;
+  font-family: inherit;
+}
+
+/*Remove button padding in FF*/
+select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+legend {
+  color: #000
+}
+
+pre, code, kbd, samp, tt {
+  font-family: @monoFontFamily;
+  font-size: @monoFontSize;
+  line-height: @monoLineHeight;
+}
+
+svg, img {
+  vertical-align: top;
+}
+
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Light-webfont.eot');
+  src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Light-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular-webfont.eot');
+  src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium-webfont.eot');
+  src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Medium-webfont.svg#robotomedium') format('svg');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Bold-webfont.eot');
+  src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
+  url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
+  url('../fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
+  font-weight: 700;
+  font-style: normal;
+}

server/sonar-web/src/main/less/icons.less → server/sonar-web/src/main/less/init/icons.less

@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
 
 @font-face {
 	font-family: 'sonar';

server/sonar-web/src/main/less/init/links.less

@@ -0,0 +1,38 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+a {
+  border-bottom: 1px solid @lightBlue;
+  color: @darkBlue;
+  cursor: pointer;
+  outline: none;
+  text-decoration: none;
+  .trans;
+
+  &:hover {
+    color: @blue;
+  }
+
+  &:active, &:focus {
+    color: @darkBlue;
+  }
+}
+
+.link-base-color {
+  border-color: mix(@baseFontColor, @barBackgroundColor, 20%);
+  color: @baseFontColor;
+
+  &:hover {
+    border-bottom-color: @lightBlue;
+    color: @blue;
+  }
+
+  &:active, &:focus {
+    border-bottom-color: @lightBlue;
+    color: @darkBlue;
+  }
+}
+
+.link-no-underline {
+  border-bottom: none;
+}

server/sonar-web/src/main/less/init/lists.less

@@ -0,0 +1,41 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+ol, ul {
+  list-style: none;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  margin-left: -5px;
+  list-style: none;
+}
+
+.list-inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+dl {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
+
+dt, dd {
+  line-height: 1.42857143;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}

server/sonar-web/src/main/less/init/misc.less

@@ -0,0 +1,34 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+.vertical-top {
+  vertical-align: top;
+}
+
+.vertical-bottom {
+  vertical-align: bottom;
+}
+
+.vertical-middle {
+  vertical-align: middle;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.note {
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+
+  img {
+    // FIXME why bottom?
+    vertical-align: bottom;
+  }
+}

server/sonar-web/src/main/less/init/tables.less

@@ -0,0 +1,203 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.odd {
+  background-color: #fff;
+}
+
+.odd.selected, .even.selected, .odd.selected a, .even.selected a, .even.selected span, .odd.selected span {
+  background-color: @lightBlue;
+  color: @baseFontColor;
+}
+
+table.data > thead > tr > th {
+  vertical-align: top;
+  font-size: 93%;
+  padding: 4px 7px 4px 3px;
+  line-height: 1.4;
+  text-transform: uppercase;
+
+  & > .small {
+    text-transform: none;
+  }
+}
+
+table.data > tfoot > tr > td {
+  font-size: 93%;
+  color: #777;
+  padding: 5px;
+}
+
+table.data > tbody > tr > td {
+  padding: 5px;
+  vertical-align: text-top;
+}
+
+table.data td.small, table.data th.small {
+  padding: 0;
+  white-space: nowrap;
+}
+
+table.data th img, table.data td img {
+  vertical-align: sub;
+}
+
+table.data.zebra tbody tr:nth-child(odd) {
+  background-color: #f5f5f5;
+}
+
+.data thead tr.total {
+  background-color: #EFEFEF;
+  font-weight: normal;
+  border: 1px solid #DDD;
+}
+
+.data thead tr.total th {
+  font-weight: normal;
+}
+
+.data thead tr.blank {
+  background-color: #fff;
+  line-height: 15px;
+}
+
+.data tr.highlight {
+  background-color: @lightBlue;
+}
+
+.data input, .data select, .data button {
+  vertical-align: baseline;
+}
+
+.data td.category {
+  padding-right: 15px;
+}
+
+.categoryDescription {
+  padding: 10px 5px;
+}
+
+.data td.category.withSubcategories {
+  background-image: url('../images/bullet_arrow_down.gif');
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+.data td.subcategory {
+  padding-left: 20px;
+}
+
+.hoverable:hover {
+  background-color: #CAE3F2;
+}
+
+.hoverable:hover a {
+  color: #111;
+}
+
+table.sortable .sortcol {
+  cursor: pointer;
+  padding-left: 15px;
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
+table.sortable .sortasc {
+  background-image: url('../images/bullet_arrow_up.gif');
+  background-position: left center;
+}
+
+table.sortable .sortdesc {
+  background-image: url('../images/bullet_arrow_down.gif');
+  background-position: left center;
+}
+
+table.sortable .righticon {
+  padding-right: 15px;
+  background-position: right center;
+}
+
+table.sortable .nosort {
+  cursor: default;
+}
+
+table.spaced th {
+  font-weight: bold;
+  color: #333;
+  padding: 4px 5px;
+}
+
+table.spaced td, table.matrix tfoot td {
+  padding: 3px 5px;
+  line-height: 18px;
+}
+
+table.spaced td img {
+  vertical-align: text-bottom;
+}
+
+table.spacedicon th {
+  font-weight: bold;
+  color: #333;
+  padding: 4px 5px;
+}
+
+table.spacedicon td {
+  padding: 0 5px;
+  height: 24px;
+}
+
+.thin {
+  width: 1%;
+}
+
+td.sep {
+  width: 10px;
+}
+
+.spacer {
+  width: 5px;
+  display: inline-block;
+}
+
+.formError {
+  display: inline-block;
+  background-color: #FF9090;
+  color: #000;
+  padding: 0 5px;
+}
+
+table.form td {
+  padding: 2px 5px;
+  vertical-align: top;
+}
+
+table.form td.keyCell {
+  width: 1%;
+  white-space: nowrap;
+  text-align: right;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+table.form td img {
+  vertical-align: bottom;
+}
+
+.admin hr {
+  background: transparent;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: 1px dashed #FFD324;
+  height: 1px;
+}
+
+table#project-history tr > td {
+  vertical-align: top;
+}

server/sonar-web/src/main/less/init/type.less

@@ -0,0 +1,86 @@
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
+
+html, body {
+  color: @baseFontColor;
+}
+
+body {
+  font-family: @baseFontFamily;
+  font-size: @baseFontSize;
+  line-height: @baseLineHeight;
+}
+
+h1, .h1 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @bigFontSize;
+  font-weight: 300;
+}
+
+h2, .h2 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @bigFontSize;
+  font-weight: 300;
+}
+
+h3, .h3 {
+  line-height: @formControlHeight;
+  color: @baseFontColor;
+  font-size: @baseFontSize;
+  font-weight: 500;
+}
+
+h4, .h4, h5, .h5, h6, .h6 {
+  line-height: @formControlHeight;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
+  font-weight: 400;
+}
+
+h1 img, .h1 img, h2 img, .h2 img, h3 img, .h3 img, h4 img, .h4 img {
+  vertical-align: middle;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+em {
+  font-style: italic;
+}
+
+strong {
+  font-weight: bold;
+}
+
+small,
+.small {
+  font-size: (100% * (@smallFontSize / @baseFontSize));
+}
+
+.big {
+  font-size: (100% * (@bigFontSize / @baseFontSize));
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}

server/sonar-web/src/main/less/layout.less

@@ -1,288 +0,0 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-
-@media print {
-  /* ------------------- PRINT ------------------- */
-  html, body {
-    font-size: 8pt;
-  }
-
-  a, a:link, a:visited {
-    text-decoration: none;
-    border-bottom: 0;
-  }
-
-  .noprint {
-    display: none !important;
-  }
-
-  .print {
-    display: inline;
-    position: static;
-    left: 0;
-  }
-
-  #hd, #sidebar, #crumbs {
-    display: none;
-  }
-
-  .with_sidebar, .wo_sidebar {
-    padding: 0 !important;
-    margin: 0;
-  }
-
-  #content {
-    margin-left: 0 !important;
-  }
-
-  .widget thead, .widget tfoot {
-    // Fix for phantomjs bug about wrapping tables
-    display: table-row-group;
-  }
-}
-
-@media screen {
-  .print {
-    display: none;
-  }
-}
-
-/* LAYOUT */
-#content {
-  padding: 0 10px;
-}
-
-#container {
-  height: auto !important;
-  min-width: 940px;
-  min-height: 500px;
-}
-
-#hd {
-  color: #FFF;
-  background: #262626;
-  padding: 0 10px;
-  height: 30px;
-  line-height: 30px;
-  font-size: 93%;
-  margin: 0;
-  position: relative;
-}
-
-#hd #nav-left > ul > li {
-  height: 30px;
-}
-
-#hd a {
-  color: #fff;
-  .link-no-underline;
-
-  &.selected, &:hover, &:focus { color: @blue; }
-}
-
-#nav-left {
-  float: left;
-  vertical-align: middle;
-}
-
-#nav {
-  float: right;
-  vertical-align: middle;
-}
-
-#nav-left img, #nav img {
-  vertical-align: text-bottom;
-}
-
-#nav-left > ul > li {
-  float: left;
-  padding: 0 20px 0 0;
-}
-
-#nav-left > ul > li > a,
-#nav > ul > li > a {
-  font-size: @smallFontSize;
-  font-weight: 300;
-  letter-spacing: 0.05em;
-}
-
-#nav > ul > li {
-  float: right;
-  height: 30px;
-  padding: 0 0 0 15px;
-}
-
-#searchResourcesResults {
-  position: absolute;
-  float: right;
-  width: 600px;
-  top: 30px;
-  right: 0;
-}
-
-#crumbs {
-  color: #444;
-  background: #EFEFEF;
-  height: 26px;
-  line-height: 26px;
-  font-size: 93%;
-  margin: 0;
-  padding: 0 10px;
-  border-bottom: 1px solid #CCC;
-}
-
-#crumbs img {
-  vertical-align: text-bottom;
-}
-
-#bc li {
-  float: left;
-  background: #EFEFEF url("../images/bc-gray.png") no-repeat right;
-  border-bottom: 1px solid #CCC;
-  padding: 0 20px 0 0;
-  margin: 0 10px 0 0;
-}
-
-#bc li img {
-  margin-right: -5px;
-}
-
-#bc li a {
-  .link-no-underline;
-}
-
-#crumbs-ops {
-  float: right;
-  padding: 0 5px 0 0;
-}
-
-#crumbs-ops li {
-  float: left;
-  padding: 0 0 0 10px;
-}
-
-#crumbs-ops li a {
-  .link-no-underline;
-}
-
-#hd .dropdown-menu a {
-  color: #000;
-}
-
-#project-settings-menu {
-  float: right;
-  right: 20px;
-}
-
-#nonav {
-  text-align: left;
-  margin: 50px 180px 0;
-}
-
-#footer {
-  padding: 4px 0;
-  clear: both;
-}
-
-#body {
-  position: relative;
-}
-
-.with_sidebar {
-  margin: 0 0 0 160px;
-  padding: 10px;
-}
-
-.wo_sidebar {
-  margin: 0 8px;
-}
-
-#sidebar {
-  position: absolute;
-  top: 0; left: 10px;
-  width: 150px;
-
-  &.sticky {
-    position: fixed;
-  }
-}
-
-ul.sidebar {
-  text-align: left;
-  border-top: none;
-  padding: 10px 0;
-}
-
-ul.sidebar li {
-  list-style-type: none;
-  padding: 3px 10px;
-}
-
-ul.sidebar li > a {
-  .link-no-underline;
-}
-
-ul.sidebar li.active {
-  background-color: #4b9fd5;
-}
-
-ul.sidebar li.active a, ul.sidebar li.active a:hover {
-  color: #FFF;
-}
-
-ul.sidebar li.active [class^="icon-"],
-ul.sidebar li.active [class*=" icon-"] {
-  color: #FFF;
-}
-
-li.sidebar-title {
-  text-transform: uppercase;
-  font-size: 93%;
-  font-weight: bold;
-}
-
-ul.sidebar li.spacer {
-  border: 0 none;
-  height: 10px;
-  margin: 0;
-  padding: 0;
-}
-
-ul.sidebar select, ul.sidebar input {
-  font-size: 93%;
-}
-
-#logo {
-  text-align: center;
-  padding: 10px 0 0 0;
-}
-
-#logo a {
-  text-decoration: none;
-  border-bottom-width: 0;
-}
-
-#logo img {
-  display: block;
-}
-
-.gray-sidebar {
-  background-color: #EFEFEF;
-  border: 1px solid #CCC;
-  color: #666;
-  border-top: none;
-}
-
-.blue-sidebar {
-  height: 100%;
-  border-left: 1px solid @blue;
-  border-right: 1px solid @blue;
-  border-bottom: 1px solid @blue;
-  background-color: @lightBlue;
-  color: @baseFontColor;
-}
-
-.nolayout {
-  padding: 10px;
-}

server/sonar-web/src/main/less/pages.less

@@ -0,0 +1,8 @@
+@import "pages/analysis-reports";
+@import "pages/api-documentation";
+@import "pages/coding-rules";
+@import "pages/dashboard";
+@import "pages/dsm";
+@import "pages/issues";
+@import "pages/libraries";
+@import "pages/quality-gates";

server/sonar-web/src/main/less/analysis-reports.less → server/sonar-web/src/main/less/pages/analysis-reports.less

@@ -1,7 +1,7 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
-@import (reference) "navigator/base";
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
+@import (reference) "../components/navigator/base";
 
 
 @pendingColor: #fdfce2;

server/sonar-web/src/main/less/api-documentation.less → server/sonar-web/src/main/less/pages/api-documentation.less

@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
 
 @apiDocumentationSidebarWidth: 230px;
 

server/sonar-web/src/main/less/coding-rules.less → server/sonar-web/src/main/less/pages/coding-rules.less

@@ -1,7 +1,8 @@
-@import (reference) 'mixins';
-@import (reference) 'variables';
-@import (reference) 'ui';
-@import (reference) 'navigator/config';
+@import (reference) '../mixins';
+@import (reference) '../variables';
+@import (reference) '../init/links';
+@import (reference) '../components/ui';
+@import (reference) '../components/navigator/config';
 
 @facetsHeight: 36px;
 

server/sonar-web/src/main/less/dashboard.less → server/sonar-web/src/main/less/pages/dashboard.less

@@ -1,8 +1,9 @@
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "ui";
+@import (reference) "../mixins";
+@import (reference) "../variables";
+@import (reference) "../components/ui";
 
-.dashboard-page {
+.dashboard-page,
+.dashboard-page body {
   background-color: @barBackgroundColor;
 }
 
@@ -12,12 +13,6 @@
 }
 
 /* LAYOUT */
-#dashboard {
-  position: relative;
-  width: 100%;
-  padding: 10px 0;
-}
-
 #dashboard .transparent {
   position: absolute;
   width: 100%;

server/sonar-web/src/main/less/dsm.less → server/sonar-web/src/main/less/pages/dsm.less

@@ -1,6 +1,6 @@
-@import (reference) 'variables';
-@import (reference) 'mixins';
-@import (reference) 'ui';
+@import (reference) '../variables';
+@import (reference) '../mixins';
+@import (reference) '../components/ui';
 
 @cellSize: 22px;
 

server/sonar-web/src/main/less/issues.less → server/sonar-web/src/main/less/pages/issues.less

@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "ui";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/ui";
 
 @sideWidth: 300px;
 

server/sonar-web/src/main/less/libraries.less → server/sonar-web/src/main/less/pages/libraries.less

@@ -1,5 +1,5 @@
-@import (reference) "variables";
-@import (reference) "mixins";
+@import (reference) "../variables";
+@import (reference) "../mixins";
 
 
 .libraries-header {

server/sonar-web/src/main/less/quality-gates.less → server/sonar-web/src/main/less/pages/quality-gates.less

@@ -1,6 +1,6 @@
-@import (reference) "variables";
-@import (reference) "mixins";
-@import (reference) "navigator/config";
+@import (reference) "../variables";
+@import (reference) "../mixins";
+@import (reference) "../components/navigator/config";
 
 @qualityGateSidebarWidth: 230px;
 

server/sonar-web/src/main/less/sonar-colorizer.less

@@ -1,12 +1,3 @@
-.code {
-  font-size: 12px;
-}
-.code pre {
-  font-family: Monospace;
-  padding: 0 5px;
-  color: #111;
-  margin: 0;
-}
 /* for example java annotations */
 .code .a {
   color: #808000;

server/sonar-web/src/main/less/variables.less

@@ -1,18 +1,37 @@
 /*
- * Fonts
+ * Base
  */
 
-@smallFontSize: 12px;
+@baseBackgroundColor: #fff;
+@baseFontColor: #444;
+@baseFontColorLight: #595959;
+@baseFontFamily: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 @baseFontSize: 13px;
+@baseLineHeight: unit(16px / @baseFontSize);
+
+
+/*
+ * Code
+ */
+
+@monoFontFamily: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+@monoFontSize: 12px;
+@monoLineHeight: 18px;
+
+
+/*
+ * Font Sizes
+ */
+
+@smallFontSize: 12px;
 @mediumFontSize: 14px;
 @bigFontSize: 16px;
-@baseFontColor: #444;
-@baseLightFontColor: #595959;
+
+
+
 @secondFontColor: #777;
 @headerFontSize: 16px;
 
-@monoFontFamily: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-
 
 
 /*
@@ -100,3 +119,12 @@
  */
 
 @defaultTransitionOptions: .2s ease;
+
+
+
+
+/*
+ * Page
+ */
+
+@pageFooterHeight: 60px;

server/sonar-web/src/main/webapp/WEB-INF/app/views/branding/_footer.html.erb

@@ -1,6 +1,6 @@
 <div>
   This application is based on
   <a href="http://www.sonarqube.org/" title="SonarQube&trade;">SonarQube&trade;</a>
-  but is <em>not</em> an official version provided by
+  but is <strong>not</strong> an official version provided by
   <a href="http://www.sonarsource.com" title="SonarSource SA">SonarSource SA</a>.
 </div>

server/sonar-web/src/main/webapp/WEB-INF/app/views/dashboard/index.html.erb

@@ -1,4 +1,4 @@
-<div id="dashboard">
+<div class="page" id="dashboard">
   <% if @resource -%>
   <span class="hidden" id="is-project-dashboard">&nbsp;</span>
   <% end -%>

server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb

@@ -1,6 +1,6 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
-<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">

server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb

@@ -6,20 +6,17 @@
    @project=@resource unless @project || selected_section==Navigation::SECTION_HOME
    period_param = "period=#{u(params[:period])}" if params[:period]
 %>
-<div id="container">
-  <nav class="navbar navbar-global"></nav>
+<div class="page-wrapper" id="container">
+  <nav class="navbar navbar-global page-container" id="global-navigation"></nav>
 
   <% if selected_section==Navigation::SECTION_RESOURCE || selected_section==Navigation::SECTION_CONFIGURATION %>
-    <nav class="navbar navbar-context"></nav>
+    <nav class="navbar navbar-context page-container" id="context-navigation"></nav>
   <% end %>
 
   <%= yield :header -%>
 
-  <div id="body">
+  <div id="body" class="page-container">
     <div id="content">
-      <% if @project %>
-        <div class="print"><h2><%= h @project.name() %></h2></div>
-      <% end %>
       <div class="error" id="error" style="display:none">
         <span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#error').hide();return false;"><%= message('hide').downcase -%></a>]
       </div>
@@ -36,28 +33,26 @@
 
 <% unless params[:hd]=='false' %>
   <%= yield :footer %>
-  <div id="footer">
+  <div id="footer" class="page-footer page-container">
     <% controller.java_facade.getWebFooters().each do |footer| %>
       <% if footer.getHtml() %>
         <div><%= footer.getHtml().to_s %></div>
       <% end %>
     <% end %>
-    <div id="ftlinks">
-      <%= render 'branding/footer' -%>
-      <div>
-        Version <%= sonar_version -%> -
-        <a href="http://www.gnu.org/licenses/lgpl-3.0.txt" target="lgpl_v3">LGPL v3</a> -
-        <a href="http://www.sonarqube.org" target="sonar">Community</a> -
-        <a href="http://www.sonarqube.org/documentation" target="sonar_doc">Documentation</a> -
-        <a href="http://www.sonarqube.org/support" target="support">Get Support</a> -
-        <a href="http://sonar-plugins.codehaus.org" target="plugins">Plugins</a> -
-        <a href="<%= ApplicationController.root_context -%>/api_documentation">Web Service API</a>
-        <% unless DatabaseVersion.production? %>
-          <br><br><span class="error big" id="evaluation_warning">Embedded database should be used for evaluation purpose only</span>
-          <br><br><span class="error">The embedded database will not scale, it will not support upgrading to newer versions of SonarQube, and there is no support for migrating your data out of it into a different database engine.</span>
-        <% end %>
-      </div>
-      <!--[if lte IE 8 ]><br/><span class="ie-warn">IE 8 is not supported. Some widgets may not be properly displayed. Please switch to a <a target="_blank" href="http://redirect.sonarsource.com/doc/requirements.html">supported version or another supported browser</a>.</span><!--<![endif]-->
+    <%= render 'branding/footer' -%>
+    <div>
+      Version <%= sonar_version -%> -
+      <a href="http://www.gnu.org/licenses/lgpl-3.0.txt" target="lgpl_v3">LGPL v3</a> -
+      <a href="http://www.sonarqube.org" target="sonar">Community</a> -
+      <a href="http://www.sonarqube.org/documentation" target="sonar_doc">Documentation</a> -
+      <a href="http://www.sonarqube.org/support" target="support">Get Support</a> -
+      <a href="http://sonar-plugins.codehaus.org" target="plugins">Plugins</a> -
+      <a href="<%= ApplicationController.root_context -%>/api_documentation">Web Service API</a>
+      <% unless DatabaseVersion.production? %>
+        <br><br><span class="error big" id="evaluation_warning">Embedded database should be used for evaluation purpose only</span>
+        <br><br><span class="error">The embedded database will not scale, it will not support upgrading to newer versions of SonarQube, and there is no support for migrating your data out of it into a different database engine.</span>
+      <% end %>
     </div>
+    <!--[if lte IE 8 ]><br/><span class="ie-warn">IE 8 is not supported. Some widgets may not be properly displayed. Please switch to a <a target="_blank" href="http://redirect.sonarsource.com/doc/requirements.html">supported version or another supported browser</a>.</span><!--<![endif]-->
   </div>
 <% end %>

server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/_nolayout.html.erb

@@ -1,7 +1,7 @@
-<div id="body" class="nolayout">
+<div id="body" class="page">
   <% if @snapshot %><div class="print"><h2><%= h @snapshot.project.name(true) %></h2></div><% end %>
   <div class="error" id="error" style="display:none"><span id="errormsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#error').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <div class="warning" id="warning" style="display:none"><span id="warningmsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#warning').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <div class="notice" id="info" style="display:none"><span id="infomsg"></span> &nbsp;&nbsp;[<a href="#" onclick="javascript:$j('#info').hide();return false;"><%= message('hide').downcase -%></a>]</div>
   <%= yield %>
-</div>
+</div>

server/sonar-web/src/main/webapp/WEB-INF/app/views/layouts/application.html.erb

@@ -10,10 +10,10 @@
    end
   %>
 <%= render :partial => 'layouts/head' unless params[:hd]=='false' %>
-<%= render :partial => 'layouts/navbar' %>
 <% if params[:layout]=='false' %>
   <%= render :partial => 'layouts/nolayout' %>
 <% else %>
   <%= render :partial => 'layouts/layout' %>
 <% end %>
+<%= render :partial => 'layouts/navbar' %>
 <%= render :partial => 'layouts/footer' unless params[:hd]=='false' %>