improve css management (#2746)

server/sonar-web/config/webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -11,6 +10,28 @@ const cssMinimizeOptions = {
   discardComments: { removeAll: true }
 };
 
+const cssLoader = ({ production, fast }) => ({
+  loader: 'css-loader',
+  options: {
+    importLoaders: 1,
+    minimize: production && !fast && cssMinimizeOptions,
+    url: false
+  }
+});
+
+const postcssLoader = () => ({
+  loader: 'postcss-loader',
+  options: {
+    ident: 'postcss',
+    plugins: () => [
+      require('autoprefixer'),
+      require('postcss-custom-properties')({
+        variables: require('../src/main/js/app/theme')
+      })
+    ]
+  }
+});
+
 module.exports = ({ production = true, fast = false }) => ({
   bail: production,
 
@@ -97,41 +118,18 @@ module.exports = ({ production = true, fast = false }) => ({
           }
         ]
       },
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: { minimize: production && !fast && cssMinimizeOptions }
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              plugins: () => [autoprefixer]
-            }
+      production
+        ? {
+            test: /\.css$/,
+            loader: ExtractTextPlugin.extract({
+              fallback: 'style-loader',
+              use: [cssLoader({ production, fast }), postcssLoader()]
+            })
           }
-        ]
-      },
-      {
-        test: /\.less$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: [
-            {
-              loader: 'css-loader',
-              options: { url: false, minimize: production && !fast && cssMinimizeOptions }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                plugins: () => [autoprefixer]
-              }
-            },
-            'less-loader'
-          ]
-        })
-      },
+        : {
+            test: /\.css$/,
+            use: ['style-loader', cssLoader({ production, fast }), postcssLoader()]
+          },
       { test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery' },
       { test: require.resolve('underscore'), loader: 'expose-loader?_' },
       { test: require.resolve('backbone'), loader: 'expose-loader?Backbone' },
@@ -143,10 +141,10 @@ module.exports = ({ production = true, fast = false }) => ({
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }),
 
-    new ExtractTextPlugin({
-      filename: production ? 'css/sonar.[chunkhash:8].css' : 'css/sonar.css',
-      allChunks: true
-    }),
+    production &&
+      new ExtractTextPlugin({
+        filename: production ? 'css/sonar.[chunkhash:8].css' : 'css/sonar.css'
+      }),
 
     !production && new InterpolateHtmlPlugin({ WEB_CONTEXT: '' }),
 

server/sonar-web/package.json

@@ -64,7 +64,7 @@
     "@types/react-redux": "5.0.3",
     "@types/react-router": "3.0.5",
     "@types/react-select": "1.0.51",
-    "autoprefixer": "7.1.1",
+    "autoprefixer": "7.1.6",
     "awesome-typescript-loader": "3.2.3",
     "babel-core": "^6.22.1",
     "babel-jest": "20.0.3",
@@ -95,9 +95,8 @@
     "handlebars-loader": "1.5.0",
     "html-webpack-plugin": "2.28.0",
     "jest": "20.0.4",
-    "less": "2.7.1",
-    "less-loader": "4.0.4",
-    "postcss-loader": "2.0.6",
+    "postcss-custom-properties": "6.2.0",
+    "postcss-loader": "2.0.8",
     "prettier": "1.6.1",
     "react-dev-utils": "3.0.0",
     "react-error-overlay": "1.0.7",
@@ -117,7 +116,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "coverage": "npm test -- --coverage",
-    "format": "prettier --write --list-different 'src/main/{js,less}/!(libs)/**/*.{js,ts,tsx,css,less}'",
+    "format": "prettier --write --list-different 'src/main/js/!(libs)/**/*.{js,ts,tsx,css}'",
     "lint": "eslint --ext js,ts,tsx --quiet src/main/js",
     "typecheck": "flow src/main/js",
     "validate": "eslint src/main/js && flow check src/main/js && NODE_ENV=test jest"

server/sonar-web/pom.xml

@@ -13,7 +13,7 @@
 
   <properties>
     <!-- self-analysis -->
-    <sonar.sources>src/main/js,src/main/less</sonar.sources>
+    <sonar.sources>src/main/js</sonar.sources>
     <sonar.tests>src/main/js</sonar.tests>
     <sonar.test.inclusions>src/main/js/**/__tests__/**</sonar.test.inclusions>
     <sonar.exclusions>src/main/js/libs/third-party/**/*,src/main/js/libs/require.js,src/main/js/**/__tests__/**</sonar.exclusions>
@@ -122,7 +122,7 @@
         <configuration>
           <packagingExcludes>
             **/*.log,*.iml,WEB-INF/script/,WEB-INF/test/,javascripts/*-min.js,stylesheets/*-min.css,javascripts/tests/**/*,
-            build/**,less/**,templates/**
+            build/**,templates/**
           </packagingExcludes>
           <warSourceExcludes>
             js/**,css/**

server/sonar-web/src/main/js/app/components/nav/component/ComponentNavBranch.tsx

@@ -24,6 +24,7 @@ import ComponentNavBranchesMenu from './ComponentNavBranchesMenu';
 import SingleBranchHelperPopup from './SingleBranchHelperPopup';
 import NoBranchSupportPopup from './NoBranchSupportPopup';
 import { Branch, Component } from '../../../types';
+import * as theme from '../../../theme';
 import BranchIcon from '../../../../components/icons-components/BranchIcon';
 import { isShortLivingBranch } from '../../../../helpers/branches';
 import { translate } from '../../../../helpers/l10n';
@@ -160,7 +161,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
   renderSingleBranchPopup = () => (
     <div className="display-inline-block spacer-left">
       <a className="link-no-underline" href="#" onClick={this.handleSingleBranchClick}>
-        <HelpIcon fill="#4b9fd5" />
+        <HelpIcon fill={theme.blue} />
       </a>
       <BubblePopupHelper
         isOpen={this.state.singleBranchPopupOpen}
@@ -174,7 +175,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
   renderNoBranchSupportPopup = () => (
     <div className="display-inline-block spacer-left">
       <a className="link-no-underline" href="#" onClick={this.handleNoBranchSupportClick}>
-        <HelpIcon fill="#cdcdcd" />
+        <HelpIcon fill={theme.gray80} />
       </a>
       <BubblePopupHelper
         isOpen={this.state.noBranchSupportPopupOpen}
@@ -195,7 +196,7 @@ export default class ComponentNavBranch extends React.PureComponent<Props, State
     if (!this.context.branchesEnabled) {
       return (
         <div className="navbar-context-branches">
-          <BranchIcon branch={currentBranch} className="little-spacer-right" color="#cdcdcd" />
+          <BranchIcon branch={currentBranch} className="little-spacer-right" color={theme.gray80} />
           <span className="note">{currentBranch.name}</span>
           {this.renderNoBranchSupportPopup()}
         </div>

server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css

@@ -44,7 +44,7 @@
   line-height: 14px;
   border: none;
   color: #ccc;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   letter-spacing: 0.05em;
   transition: none;
 }
@@ -52,7 +52,7 @@
 .global-navbar-menu > li > a.active,
 .global-navbar-menu > li > a:hover,
 .global-navbar-menu > li > a:focus {
-  background-color: #4b9fd5;
+  background-color: var(--blue);
   color: #fff;
 }
 

server/sonar-web/src/main/js/app/components/search/Search.css

@@ -15,9 +15,9 @@
   position: absolute;
   top: 4px;
   right: 30px;
-  line-height: 24px;
-  font-size: 12px;
-  color: #777;
+  line-height: var(--controlHeight);
+  font-size: var(--smallFontSize);
+  color: var(--secondFontColor);
 }
 .navbar-search-input-hint.is-shifted {
   z-index: 7501;
@@ -29,11 +29,11 @@
   vertical-align: middle;
   width: 16px;
   margin-right: -20px;
-  color: #777;
+  color: var(--secondFontColor);
 }
 
 .navbar-search-icon:before {
-  font-size: 14px;
+  font-size: var(--mediumFontSize);
 }
 
 .navbar-search-item-link {

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

@@ -23,7 +23,10 @@ import startReactApp from './utils/startReactApp';
 import installExtensionsHandler from './utils/installExtensionsHandler';
 import { installGlobal } from '../helpers/l10n';
 import '../helpers/isolatedScroll';
-import './styles/index';
+// styles
+import '../components/ui/Level.css';
+import '../components/ui/Rating.css';
+import './styles/sonar.css';
 
 startAjaxMonitoring();
 installGlobal();

server/sonar-web/src/main/less/components/alerts.less → server/sonar-web/src/main/js/app/styles/components/alerts.css

@@ -17,16 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
-// Base
-
 .alert {
   display: block;
   margin-bottom: 8px;
   padding: 5px 8px;
-  border: 1px solid @secondFontColor;
+  border: 1px solid var(--secondFontColor);
 }
 
 .alert:empty {
@@ -46,24 +41,28 @@
   border-right: none;
 }
 
-// Color
-
-.alert-emphasis-variant(@color, @background-color, @border-color) {
-  border-color: @border-color;
-  background-color: @background-color;
-  color: @color;
-}
 .alert-danger {
-  .alert-emphasis-variant(#a94442, #f2dede, #ebccd1);
+  border-color: #ebccd1;
+  background-color: #f2dede;
+  color: #a94442;
 }
+
 .alert-warning {
-  .alert-emphasis-variant(#8a6d3b, #fcf8e3, #faebcc);
+  border-color: #faebcc;
+  background-color: #fcf8e3;
+  color: #8a6d3b;
 }
+
 .alert-info {
-  .alert-emphasis-variant(#31708f, #d9edf7, #bce8f1);
+  border-color: #bce8f1;
+  background-color: #d9edf7;
+  color: #31708f;
 }
+
 .alert-success {
-  .alert-emphasis-variant(#3c763d, #dff0d8, #d6e9c6);
+  border-color: #d6e9c6;
+  background-color: #dff0d8;
+  color: #3c763d;
 }
 
 .page-notifs .alert {

server/sonar-web/src/main/less/components/badges.less → server/sonar-web/src/main/js/app/styles/components/badges.css

@@ -17,10 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../init/links";
-
 .badge {
   display: inline-block;
   min-width: 10px;
@@ -28,43 +24,43 @@
   font-size: 11px;
   font-weight: normal;
   letter-spacing: 0.03em;
-  color: @white;
-  line-height: 12px;
+  color: #ffffff;
+  line-height: var(--smallFontSize);
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
-  background-color: @blue;
+  background-color: var(--blue);
+}
 
-  &:empty {
-    display: none;
-  }
+.badge:empty {
+  display: none;
+}
 
-  a&:hover,
-  a&:focus,
-  a&:active {
-    color: @white;
-  }
+a.badge:hover,
+a.badge:focus,
+a.badge:active {
+  color: #ffffff;
+}
 
-  a& {
-    .link-no-underline;
-  }
+a.badge {
+  border-bottom: none;
+}
 
-  &.is-rounded {
-    padding-left: 5px;
-    padding-right: 5px;
-    border-radius: 50px;
-  }
+.badge.is-rounded {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-radius: 50px;
+}
 
-  .list-group-item > &,
-  .list-group-item-heading > & {
-    float: right;
-    margin-top: 3px;
-  }
+.list-group-item > .badge,
+.list-group-item-heading > .badge {
+  float: right;
+  margin-top: 3px;
+}
 
-  .list-group-item > & + &,
-  .list-group-item-heading > & + & {
-    margin-right: 5px;
-  }
+.list-group-item > .badge + .badge,
+.list-group-item-heading > .badge + .badge {
+  margin-right: 5px;
 }
 
 .badge-normal-size {
@@ -74,28 +70,28 @@
 
 .badge-muted {
   background-color: transparent;
-  color: @secondFontColor;
+  color: var(--secondFontColor);
+}
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: @blue;
-  }
+.badge-muted:hover,
+.badge-muted:focus,
+.badge-muted:active {
+  color: var(--blue);
 }
 
 .badge-success,
 .badge-ok {
-  background-color: @green;
+  background-color: var(--green);
 }
 
 .badge-warning,
 .badge-warn {
-  background-color: @orange;
+  background-color: var(--orange);
 }
 
 .badge-danger,
 .badge-error {
-  background-color: @red;
+  background-color: var(--red);
 }
 
 .badge-danger-light {
@@ -103,12 +99,12 @@
   border-radius: 3px;
   background-color: #f2dede;
   color: #a94442;
+}
 
-  a&:hover,
-  a&:focus,
-  a&:active {
-    color: #a94442;
-  }
+a.badge-danger-light:hover,
+a.badge-danger-light:focus,
+a.badge-danger-light:active {
+  color: #a94442;
 }
 
 .badge-focus {
@@ -117,16 +113,16 @@
   background-color: #fcf8e3;
   color: #8a6d3b;
   font-weight: 400;
+}
 
-  a&:hover,
-  a&:focus,
-  a&:active {
-    color: #8a6d3b;
-  }
+a.badge-focus:hover,
+a.badge-focus:focus,
+a.badge-focus:active {
+  color: #8a6d3b;
 }
 
 .badge-secondary {
-  background-color: @middleGrey;
+  background-color: var(--gray71);
 }
 
 .outline-badge {
@@ -135,10 +131,10 @@
   height: 20px;
   line-height: 19px;
   padding: 0 8px;
-  border: 1px solid #cdcdcd;
+  border: 1px solid var(--gray80);
   border-radius: 2px;
   box-sizing: border-box;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   font-weight: 400;
 }

server/sonar-web/src/main/js/app/styles/boxed-group.css → server/sonar-web/src/main/js/app/styles/components/boxed-group.css

@@ -1,18 +1,18 @@
 .boxed-group {
   margin-bottom: 20px;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   border-radius: 2px;
   background-color: #fff;
 }
 
 .boxed-group > h2 {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   padding: 15px 20px 0;
 }
 
 .boxed-group hr {
   height: 0;
-  border-top: 1px solid #efefef;
+  border-top: 1px solid var(--gray94);
   margin: 15px -20px;
 }
 
@@ -25,7 +25,7 @@
 .boxed-group-header > h2 {
   display: inline-block;
   vertical-align: middle;
-  line-height: 24px;
+  line-height: var(--controlHeight);
 }
 
 .boxed-group-header [class^='icon-'] {

server/sonar-web/src/main/less/components/bubble-popup.less → server/sonar-web/src/main/js/app/styles/components/bubble-popup.css

@@ -17,22 +17,17 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
-@popupArrowSize: 8px;
-
 .bubble-popup {
   position: absolute;
-  z-index: @bubble-popup-z-index;
+  z-index: var(--bubblePopupZIndex);
   margin-top: -16px;
-  margin-left: @popupArrowSize;
+  margin-left: 8px;
   padding: 10px;
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
   border-radius: 3px;
   box-sizing: border-box;
-  background-color: @white;
-  box-shadow: @defaultShadow;
+  background-color: #ffffff;
+  box-shadow: var(--defaultShadow);
   cursor: default;
 }
 
@@ -46,79 +41,98 @@
   display: block;
   width: 0;
   height: 0;
-  border: @popupArrowSize solid transparent;
+  border: 8px solid transparent;
 }
 
 .bubble-popup-arrow {
   top: 15px;
-  left: -@popupArrowSize;
+  left: -8px;
   border-left-width: 0;
-  border-right-color: @barBorderColor;
+  border-right-color: var(--barBorderColor);
+}
 
-  &:after {
-    content: ' ';
-    left: 1px;
-    bottom: -@popupArrowSize;
-    border-left-width: 0;
-    border-right-color: @white;
-  }
+.bubble-popup-arrow:after {
+  content: ' ';
+  left: 1px;
+  bottom: -8px;
+  border-left-width: 0;
+  border-right-color: #ffffff;
 }
 
 .bubble-popup-bottom {
-  margin-top: @popupArrowSize;
+  margin-top: 8px;
   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 .bubble-popup-arrow {
+  top: -8px;
+  left: 15px;
+  border-left-width: 8px;
+  border-top-width: 0;
+  border-right-color: transparent;
+  border-bottom-color: var(--barBorderColor);
+}
+
+.bubble-popup-bottom .bubble-popup-arrow:after {
+  left: -8px;
+  bottom: -9px;
+  border-left-width: 8px;
+  border-top-width: 0;
+  border-right-color: transparent;
+  border-bottom-color: #ffffff;
 }
 
 .bubble-popup-bottom-right {
-  .bubble-popup-bottom;
+  margin-top: 8px;
+  margin-left: -16px;
   margin-left: 0;
   margin-right: -16px;
+}
 
-  .bubble-popup-arrow {
-    left: auto;
-    right: 15px;
-  }
+.bubble-popup-bottom-right .bubble-popup-arrow {
+  top: -8px;
+  left: 15px;
+  border-left-width: 8px;
+  border-top-width: 0;
+  border-right-color: transparent;
+  border-bottom-color: var(--barBorderColor);
+}
+
+.bubble-popup-bottom-right .bubble-popup-arrow:after {
+  left: -8px;
+  bottom: -9px;
+  border-left-width: 8px;
+  border-top-width: 0;
+  border-right-color: transparent;
+  border-bottom-color: #ffffff;
+}
+
+.bubble-popup-bottom-right .bubble-popup-arrow {
+  left: auto;
+  right: 15px;
 }
 
 .bubble-popup-right {
-  margin-left: -@popupArrowSize;
-
-  .bubble-popup-arrow {
-    right: -@popupArrowSize;
-    left: auto;
-    border-right-width: 0;
-    border-left-width: @popupArrowSize;
-    border-left-color: @barBorderColor;
-    border-right-color: transparent;
-
-    &:after {
-      left: auto;
-      right: 1px;
-      bottom: -@popupArrowSize;
-      border-right-width: 0;
-      border-left-width: @popupArrowSize;
-      border-left-color: @white;
-      border-right-color: transparent;
-    }
-  }
+  margin-left: -8px;
+}
+
+.bubble-popup-right .bubble-popup-arrow {
+  right: -8px;
+  left: auto;
+  border-right-width: 0;
+  border-left-width: 8px;
+  border-left-color: var(--barBorderColor);
+  border-right-color: transparent;
+}
+
+.bubble-popup-right .bubble-popup-arrow:after {
+  left: auto;
+  right: 1px;
+  bottom: -8px;
+  border-right-width: 0;
+  border-left-width: 8px;
+  border-left-color: #ffffff;
+  border-right-color: transparent;
 }
 
 .bubble-popup-container {
@@ -130,10 +144,10 @@
 
 .bubble-popup-helper {
   position: relative;
+}
 
-  &:focus {
-    outline: none;
-  }
+.bubble-popup-helper:focus {
+  outline: none;
 }
 
 .bubble-popup-helper-inline {
@@ -151,11 +165,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
 
-  &.fluid {
-    width: auto;
-    max-width: 450px;
-  }
+.bubble-popup-section.fluid {
+  width: auto;
+  max-width: 450px;
 }
 
 .bubble-popup-section + .bubble-popup-section,
@@ -165,8 +179,8 @@
 
 .bubble-popup-list {
   margin-top: 5px;
+}
 
-  & > li {
-    padding: 2px 0;
-  }
+.bubble-popup-list > li {
+  padding: 2px 0;
 }

server/sonar-web/src/main/less/components/columns.less → server/sonar-web/src/main/js/app/styles/components/columns.css

@@ -17,16 +17,23 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 .columns {
-  .clearfix;
   margin-left: -10px;
   margin-right: -10px;
   overflow: hidden;
 }
 
+.columns:before,
+.columns:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.columns:after {
+  clear: both;
+}
+
 .columns-overflow-visible {
   overflow: visible !important;
 }
@@ -36,10 +43,10 @@
   width: 50%;
   padding: 0 10px;
   box-sizing: border-box;
+}
 
-  &.column-one {
-    margin: 0 25%;
-  }
+.column-half.column-one {
+  margin: 0 25%;
 }
 
 .column-third {
@@ -69,9 +76,9 @@
 }
 
 .flex-column-third {
-  width: ~'calc(100% / 3)';
+  width: calc(100% / 3);
 }
 
 .flex-column-two-thirds {
-  width: ~'calc(100% / 3 * 2)';
+  width: calc(100% / 3 * 2);
 }

server/sonar-web/src/main/less/components/component-name.less → server/sonar-web/src/main/js/app/styles/components/component-name.css

@@ -17,23 +17,29 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "ui";
-
 .component-name {
-  .clearfix;
   line-height: 16px;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
+}
+
+.component-name:before,
+.component-name:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.component-name:after {
+  clear: both;
 }
 
 .component-name-parent {
   float: left;
   margin-right: 20px;
+}
 
-  &:last-child {
-    margin-right: 0;
-  }
+.component-name-parent:last-child {
+  margin-right: 0;
 }
 
 .component-name-path {
@@ -45,9 +51,6 @@
   margin-top: 4px;
 }
 
-.component-name-file {
-}
-
 .component-name-favorite {
   position: relative;
   top: -1px;

server/sonar-web/src/main/js/app/styles/components/dropdowns.css

@@ -0,0 +1,173 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+.dropdown-menu {
+  min-width: 160px;
+  padding: 5px 0;
+  list-style: none;
+  font-size: var(--smallFontSize);
+  text-align: left;
+  background-color: #fff;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--dropdownMenuZIndex);
+  display: none;
+  float: left;
+  border: 1px solid var(--barBorderColor);
+  background-clip: padding-box;
+  box-shadow: var(--defaultShadow);
+}
+
+.dropdown-menu:focus {
+  outline: none;
+}
+
+.dropdown-menu > li > a,
+.dropdown-menu > li > span {
+  display: block;
+  padding: 4px 16px;
+  line-height: 16px;
+  clear: both;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-menu > li > a {
+  color: var(--baseFontColor);
+  border-bottom: none;
+  transition: none;
+}
+
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 6px 0;
+  overflow: hidden;
+  background-color: var(--barBorderColor);
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  text-decoration: none;
+  color: var(--baseFontColor);
+  background-color: var(--barBackgroundColor);
+}
+
+.dropdown-menu > .active > a,
+.dropdown-menu > li > .active,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > li > .active:hover,
+.dropdown-menu > .active > a:focus,
+.dropdown-menu > li > .active:focus {
+  color: var(--baseFontColor);
+  text-decoration: none;
+  outline: 0;
+  background-color: var(--barBackgroundColor);
+}
+
+.dropdown-menu .menu-vertically-limited {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.dropdown-menu .menu-footer > a > span {
+  border-bottom: 1px solid var(--gray80);
+  color: var(--secondFontColor);
+}
+
+.dropdown-menu .menu-footer-note {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.dropdown-menu .menu-footer.active .menu-footer-note {
+  opacity: 1;
+}
+
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.open > .dropdown-menu {
+  display: block;
+}
+
+.open > a {
+  outline: 0;
+}
+
+.dropdown-menu-right {
+  left: auto;
+  right: 0;
+}
+
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
+.dropdown-header {
+  display: block;
+  padding: 3px 8px 5px;
+  font-size: var(--smallFontSize);
+  color: var(--secondFontColor);
+  white-space: nowrap;
+}
+
+.dropdown-item {
+  padding: 5px 16px;
+}
+
+.dropdown-menu .small-divider {
+  height: 1px;
+  margin: 4px 20px;
+  overflow: hidden;
+  background-color: var(--barBackgroundColor);
+}
+
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 990;
+}
+
+.dropdown-bottom-hint {
+  line-height: 16px;
+  margin-top: 5px;
+  margin-bottom: -5px;
+  padding: 5px 10px;
+  border-top: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  font-size: 11px;
+}

server/sonar-web/src/main/less/components/graphics.less → server/sonar-web/src/main/js/app/styles/components/graphics.css

@@ -17,10 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../init/links";
-
 .sonar-d3 .treemap-container {
   position: relative;
 }
@@ -31,10 +27,10 @@
   border-bottom: 1px solid #fff;
   box-sizing: border-box;
   text-align: center;
+}
 
-  &:focus {
-    outline: none;
-  }
+.sonar-d3 .treemap-cell:focus {
+  outline: none;
 }
 
 .sonar-d3 .treemap-inner {
@@ -46,37 +42,36 @@
   padding: 0 4px;
   box-sizing: border-box;
   line-height: 1.2;
+}
 
-  .treemap-icon {
-    flex-shrink: 0;
-  }
+.sonar-d3 .treemap-inner .treemap-icon {
+  flex-shrink: 0;
+}
 
-  .treemap-icon svg {
-    margin-top: 2px;
-  }
+.sonar-d3 .treemap-inner .treemap-icon svg {
+  margin-top: 2px;
+}
 
-  .treemap-text {
-    flex-shrink: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: left;
-  }
+.sonar-d3 .treemap-inner .treemap-text {
+  flex-shrink: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
 }
 
 .sonar-d3 .treemap-link {
   position: absolute;
-  z-index: @treemap-link-z-index;
+  z-index: var(--normalZIndex);
   top: 5px;
   right: 5px;
-  line-height: @iconSmallFontSize;
-  font-size: 12px;
-
-  .link-no-underline;
+  line-height: 14px;
+  font-size: var(--smallFontSize);
+  border-bottom: none;
+}
 
-  &:hover {
-    color: #d1eafb;
-  }
+.sonar-d3 .treemap-link:hover {
+  color: #d1eafb;
 }
 
 .sonar-d3 .treemap-link i,
@@ -91,108 +86,99 @@
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
+}
 
-  a {
-    padding: 5px;
-    .link-no-underline;
-  }
+.word-cloud a {
+  padding: 5px;
+  border-bottom: none;
 }
 
 /*
  * Line Chart
  */
-@defaultSerieColor: @blue;
-@serieColor1: @darkBlue;
-@serieColor2: #24c6e0;
-
-.line-chart {
-}
 
 .line-chart-path {
   fill: none;
-  stroke: @defaultSerieColor;
+  stroke: var(--blue);
   stroke-width: 2px;
+}
 
-  &.line-chart-path-1 {
-    stroke: @serieColor1;
-  }
+.line-chart-path.line-chart-path-1 {
+  stroke: var(--darkBlue);
+}
 
-  &.line-chart-path-2 {
-    stroke: @serieColor2;
-  }
+.line-chart-path.line-chart-path-2 {
+  stroke: #24c6e0;
 }
 
 .line-chart-area {
-  fill: fade(@defaultSerieColor, 30%);
+  fill: rgba(75, 159, 213, 0.3);
   stroke-width: 0;
+}
 
-  &.line-chart-area-1 {
-    fill: fade(@serieColor1, 30%);
-  }
+.line-chart-area.line-chart-area-1 {
+  fill: rgba(35, 106, 151, 0.3);
+}
 
-  &.line-chart-area-2 {
-    fill: fade(@serieColor2, 30%);
-  }
+.line-chart-area.line-chart-area-2 {
+  fill: rgba(36, 198, 224, 0.3);
 }
 
 .line-chart-legend {
-  color: @defaultSerieColor;
+  color: var(--blue);
+}
 
-  &.line-chart-legend-1 {
-    color: @serieColor1;
-  }
+.line-chart-legend.line-chart-legend-1 {
+  color: var(--darkBlue);
+}
 
-  &.line-chart-legend-2 {
-    color: @serieColor2;
-  }
+.line-chart-legend.line-chart-legend-2 {
+  color: #24c6e0;
 }
 
 .line-chart-dot {
-  fill: @defaultSerieColor;
+  fill: var(--blue);
+}
 
-  &.line-chart-dot-1 {
-    fill: @serieColor1;
-  }
+.line-chart-dot.line-chart-dot-1 {
+  fill: var(--darkBlue);
+}
 
-  &.line-chart-dot-2 {
-    fill: @serieColor2;
-  }
+.line-chart-dot.line-chart-dot-2 {
+  fill: #24c6e0;
 }
 
 .line-chart-point {
   fill: #fff;
-  stroke: @defaultSerieColor;
+  stroke: var(--blue);
   stroke-width: 2px;
 }
 
 .line-chart-event {
   fill: #fff;
-  stroke: @defaultSerieColor;
+  stroke: var(--blue);
   stroke-width: 2px;
+}
 
-  &.VERSION {
-    stroke: @blue;
-  }
-
-  &.QUALITY_GATE {
-    stroke: @green;
-  }
+.line-chart-event.VERSION {
+  stroke: var(--blue);
+}
 
-  &.QUALITY_PROFILE {
-    stroke: @orange;
-  }
+.line-chart-event.QUALITY_GATE {
+  stroke: var(--green);
+}
 
-  &.OTHER {
-    stroke: @purple;
-  }
+.line-chart-event.QUALITY_PROFILE {
+  stroke: var(--orange);
 }
 
-.line-chart-backdrop {
+.line-chart-event.OTHER {
+  stroke: var(--purple);
 }
 
 .line-chart-tick {
-  fill: @secondFontColor;
-  font-size: 12px;
+  fill: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   text-anchor: middle;
 }
 
@@ -213,19 +199,16 @@
  * Bubble Chart
  */
 
-.bubble-chart {
-}
-
 .bubble-chart-bubble {
-  fill: @blue;
+  fill: var(--blue);
   fill-opacity: 0.2;
-  stroke: @blue;
+  stroke: var(--blue);
   cursor: pointer;
   transition: all 0.2s ease;
+}
 
-  &:hover {
-    fill-opacity: 0.8;
-  }
+.bubble-chart-bubble:hover {
+  fill-opacity: 0.8;
 }
 
 .bubble-chart-grid {
@@ -234,8 +217,8 @@
 }
 
 .bubble-chart-tick {
-  fill: @secondFontColor;
-  font-size: 12px;
+  fill: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   text-anchor: middle;
 }
 
@@ -250,60 +233,56 @@
 .color-box-legend {
   display: flex;
   justify-content: center;
+}
 
-  & > *:not(:first-child) {
-    margin-left: 24px;
-  }
+.color-box-legend > *:not(:first-child) {
+  margin-left: 24px;
+}
 
-  .color-box-legend-rect {
-    display: inline-block;
-    margin-top: 1px;
-    margin-right: 4px;
-    border: 1px solid;
-  }
+.color-box-legend .color-box-legend-rect {
+  display: inline-block;
+  margin-top: 1px;
+  margin-right: 4px;
+  border: 1px solid;
+}
 
-  .color-box-legend-rect-inner {
-    display: block;
-    width: 8px;
-    height: 8px;
-    opacity: 0.2;
-  }
+.color-box-legend .color-box-legend-rect-inner {
+  display: block;
+  width: 8px;
+  height: 8px;
+  opacity: 0.2;
+}
 
-  &.color-box-full .color-box-legend-rect-inner {
-    opacity: 1;
-  }
+.color-box-legend.color-box-full .color-box-legend-rect-inner {
+  opacity: 1;
 }
 
 .gradient-legend-text,
 .gradient-legend-na {
   text-anchor: middle;
-  fill: @secondFontColor;
+  fill: var(--secondFontColor);
   font-size: 10px;
 }
 
-.gradient-legend-text {
-  &:first-of-type {
-    text-anchor: start;
-  }
+.gradient-legend-text:first-of-type {
+  text-anchor: start;
+}
 
-  &:last-of-type {
-    text-anchor: end;
-  }
+.gradient-legend-text:last-of-type {
+  text-anchor: end;
 }
 
 /*
  * Bar Chart
  */
-.bar-chart {
-}
 
 .bar-chart-bar {
-  fill: @blue;
+  fill: var(--blue);
 }
 
 .bar-chart-tick {
-  fill: @secondFontColor;
-  font-size: 12px;
+  fill: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   text-anchor: middle;
 }
 
@@ -323,22 +302,20 @@
  * Charts zooming
  */
 
-.chart-zoomed {
-  .line-chart-area {
-    clip-path: url(#chart-clip);
-  }
+.chart-zoomed .line-chart-area {
+  clip-path: url(#chart-clip);
+}
 
-  .line-chart-path {
-    clip-path: url(#chart-clip);
-  }
+.chart-zoomed .line-chart-path {
+  clip-path: url(#chart-clip);
+}
 
-  .leak-chart-rect {
-    clip-path: url(#chart-clip);
-  }
+.chart-zoomed .leak-chart-rect {
+  clip-path: url(#chart-clip);
 }
 
 .chart-zoom-tick {
-  fill: @secondFontColor;
+  fill: var(--secondFontColor);
   font-size: 10px;
   text-anchor: middle;
   user-select: none;
@@ -350,27 +327,25 @@
   pointer-events: all;
 }
 
-.chart-zoom {
-  .zoom-overlay {
-    fill: none;
-    stroke: none;
-    cursor: crosshair;
-    pointer-events: all;
-  }
+.chart-zoom .zoom-overlay {
+  fill: none;
+  stroke: none;
+  cursor: crosshair;
+  pointer-events: all;
+}
 
-  .zoom-selection {
-    fill: @secondFontColor;
-    fill-opacity: 0.2;
-    stroke: @secondFontColor;
-    shape-rendering: crispEdges;
-    cursor: move;
-  }
+.chart-zoom .zoom-selection {
+  fill: var(--secondFontColor);
+  fill-opacity: 0.2;
+  stroke: var(--secondFontColor);
+  shape-rendering: crispEdges;
+  cursor: move;
+}
 
-  .zoom-selection-handle {
-    cursor: ew-resize;
-    fill-opacity: 0;
-    stroke: none;
-  }
+.chart-zoom .zoom-selection-handle {
+  cursor: ew-resize;
+  fill-opacity: 0;
+  stroke: none;
 }
 
 /*
@@ -379,7 +354,7 @@
 
 .line-tooltip {
   fill: none;
-  stroke: @secondFontColor;
+  stroke: var(--secondFontColor);
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }

server/sonar-web/src/main/less/components/issues.less → server/sonar-web/src/main/js/app/styles/components/issues.css

@@ -17,27 +17,16 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../init/type";
-@import (reference) "ui";
-@import (reference) "../components/typography";
-
-@leftPadding: 10px;
-@rightPadding: 10px;
-@topPadding: 8px;
-@bottomPadding: 8px;
-
 .issue-list {
   margin: 10px 0;
 }
 
 .issue {
   position: relative;
-  padding-top: @topPadding;
-  padding-bottom: @bottomPadding;
-  background-color: @issueBackgroundColor;
-  box-shadow: 0px 0px 0px 1px @issueBackgroundColor;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  background-color: #ffeaea;
+  box-shadow: 0px 0px 0px 1px #ffeaea;
   transition: all 0.3s ease;
 }
 
@@ -47,7 +36,7 @@
 }
 
 .issue.selected {
-  box-shadow: 0px 0px 0px 1px @issueBorderColor;
+  box-shadow: 0px 0px 0px 1px #dd4040;
 }
 
 .issue + .issue,
@@ -66,10 +55,10 @@
 
 .issue-table {
   width: 100%;
+}
 
-  td {
-    vertical-align: top;
-  }
+.issue-table td {
+  vertical-align: top;
 }
 
 .issue-row {
@@ -91,10 +80,10 @@
 
 .issue-message {
   flex-grow: 1;
-  padding-left: @leftPadding;
-  padding-right: @rightPadding;
+  padding-left: 10px;
+  padding-right: 10px;
   line-height: 1.5;
-  font-size: @baseFontSize;
+  font-size: var(--baseFontSize);
   font-weight: 600;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -104,48 +93,48 @@
   vertical-align: top;
   margin-top: 2px;
   padding: 0 3px;
-  background: fade(@blue, 30%);
+  background: rgba(75, 159, 213, 0.3);
   opacity: 0.5;
+}
 
-  &:hover {
-    background: fade(@blue, 30%);
-  }
+.issue-rule:hover {
+  background: rgba(75, 159, 213, 0.3);
 }
 
 .issue-component {
   margin-top: 5px;
-  padding-left: @leftPadding;
-  padding-right: @rightPadding;
+  padding-left: 10px;
+  padding-right: 10px;
   line-height: 1.5;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
 }
 
 .issue-age {
   position: relative;
   float: right;
-  margin-top: -@baseFontSize * 1.5;
-  padding-right: @rightPadding;
+  margin-top: -19.5px;
+  padding-right: 10px;
   line-height: 1.5;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
+}
 
-  &:before {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 100%;
-    width: 10px;
-    background-image: linear-gradient(to right, fade(#fff, 0%), #fff 75%);
-  }
+.issue-age:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 10px;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 75%);
 }
 
 .issue-meta-list {
-  padding-left: @leftPadding;
+  padding-left: 10px;
 }
 
 .issue-meta {
   line-height: 16px;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
 }
 
 .issue-meta-on-right {
@@ -159,8 +148,8 @@
 
 .issue-meta-in-corner {
   position: absolute;
-  top: @topPadding;
-  right: @rightPadding;
+  top: 8px;
+  right: 10px;
   margin: 0 !important;
 }
 
@@ -168,7 +157,9 @@
   display: inline-block;
   vertical-align: top;
   max-width: 180px;
-  .text-ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .issue-changelog {
@@ -181,9 +172,9 @@
 
 .issue-comments {
   margin-top: 5px;
-  padding-left: @leftPadding;
-  padding-right: @rightPadding;
-  font-size: @smallFontSize;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: var(--smallFontSize);
 }
 
 .issue-comment {
@@ -201,9 +192,11 @@
   max-width: 130px;
   width: 1px;
   line-height: 18px;
-  color: @secondFontColor;
+  color: var(--secondFontColor);
   font-weight: 600;
-  .text-ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .issue-comment-age {
@@ -212,7 +205,7 @@
   width: 1px;
   line-height: 18px;
   white-space: nowrap;
-  color: @secondFontColor;
+  color: var(--secondFontColor);
 }
 
 .issue-comment-text {
@@ -221,8 +214,102 @@
   padding-left: 5px;
   padding-right: 5px;
   line-height: 18px;
-  .formatted;
-  .no-outline;
+  line-height: 1.5;
+  outline: none;
+}
+
+.issue-comment-text p,
+.issue-comment-text ul,
+.issue-comment-text ol,
+.issue-comment-text pre,
+.issue-comment-text blockquote,
+.issue-comment-text table,
+.issue-comment-text h2,
+.issue-comment-text h3,
+.issue-comment-text h4,
+.issue-comment-text h5,
+.issue-comment-text h6 {
+  margin: 1em 0;
+}
+
+.issue-comment-text h2 {
+  font-size: var(--bigFontSize);
+  font-weight: 400;
+}
+
+.issue-comment-text h3,
+.issue-comment-text h4,
+.issue-comment-text h5,
+.issue-comment-text h6 {
+  font-size: var(--baseFontSize);
+  font-weight: 600;
+}
+
+.issue-comment-text pre,
+.issue-comment-text code {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
+}
+
+.issue-comment-text pre {
+  padding: 10px;
+  border-top: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
+  line-height: 18px;
+  overflow: auto;
+}
+
+.issue-comment-text code {
+  padding: 0.2em 0.45em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.06);
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.issue-comment-text pre > code {
+  padding: 0;
+  background-color: transparent;
+  white-space: pre;
+}
+
+.issue-comment-text blockquote {
+  line-height: 1.5;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.issue-comment-text ul {
+  padding-left: 40px;
+  list-style: disc;
+}
+
+.issue-comment-text li > ul {
+  margin: 0.3em 0;
+}
+
+.issue-comment-text ol {
+  padding-left: 40px;
+  list-style: decimal;
+}
+
+.issue-comment-text table {
+  min-width: 50%;
+  border-collapse: collapse;
+  border: 1px solid var(--barBorderColor);
+}
+
+.issue-comment-text th {
+  padding: 5px 10px;
+  border: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+  font-weight: 600;
+  text-align: center;
+}
+
+.issue-comment-text td {
+  padding: 5px 10px;
+  border: 1px solid var(--barBorderColor);
 }
 
 .issue-comment-actions {
@@ -243,29 +330,26 @@ input.issue-action-options-search {
   position: absolute;
   top: 3px;
   left: 10px;
-  color: @secondFontColor;
+  color: var(--secondFontColor);
+}
 
-  &:before {
-    font-size: @iconSmallFontSize;
-  }
+.issue-action-options-search-icon:before {
+  font-size: var(--mediumFontSize);
 }
 
 .issue-comment-bubble-popup {
   width: 440px;
   margin-left: -220px;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
+}
 
-  .bubble-popup-arrow {
-    left: 220px;
-  }
+.issue-comment-bubble-popup .bubble-popup-arrow {
+  left: 220px;
 }
 
 .issue-edit-comment-bubble-popup {
   width: 440px;
-  font-size: @smallFontSize;
-}
-
-.issue-comment-form-text {
+  font-size: var(--smallFontSize);
 }
 
 .issue-comment-form-text textarea {
@@ -274,11 +358,21 @@ input.issue-action-options-search {
 }
 
 .issue-comment-form-footer {
-  .clearfix;
   margin-top: 5px;
   line-height: 22px;
 }
 
+.issue-comment-form-footer:before,
+.issue-comment-form-footer:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.issue-comment-form-footer:after {
+  clear: both;
+}
+
 .issue-comment-form-actions {
   float: right;
 }
@@ -289,7 +383,7 @@ input.issue-action-options-search {
 
 .issue-more-actions {
   line-height: 1.5;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
 }
 
 .issue-navigate {
@@ -299,22 +393,23 @@ input.issue-action-options-search {
   top: 0;
   bottom: 0;
   border-bottom: none;
+}
 
-  .issue-navigate-to-left,
-  .issue-navigate-to-right {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin: -8px 0 0 -3px;
+.issue-navigate .issue-navigate-to-left,
+.issue-navigate .issue-navigate-to-right {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -8px 0 0 -3px;
+}
 
-    &:before {
-      font-size: 18px;
-    }
-  }
+.issue-navigate .issue-navigate-to-left:before,
+.issue-navigate .issue-navigate-to-right:before {
+  font-size: 18px;
+}
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
+.issue-navigate:hover {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .issue-navigate-right .issue-meta-in-corner {
@@ -323,36 +418,36 @@ input.issue-action-options-search {
 
 .issue-navigate-left {
   padding-left: 24px;
+}
 
-  .issue-navigate {
-    display: block;
-    left: 0;
+.issue-navigate-left .issue-navigate {
+  display: block;
+  left: 0;
+}
 
-    .issue-navigate-to-right {
-      display: none;
-    }
-  }
+.issue-navigate-left .issue-navigate .issue-navigate-to-right {
+  display: none;
 }
 
 .issue-navigate-right {
   padding-right: 24px;
+}
 
-  .issue-navigate {
-    display: block;
-    right: 0;
+.issue-navigate-right .issue-navigate {
+  display: block;
+  right: 0;
+}
 
-    .issue-navigate-to-left {
-      display: none;
-    }
-  }
+.issue-navigate-right .issue-navigate .issue-navigate-to-left {
+  display: none;
 }
 
 .issue-with-checkbox {
   padding-left: 24px;
+}
 
-  .issue-checkbox-container {
-    display: block;
-  }
+.issue-with-checkbox .issue-checkbox-container {
+  display: block;
 }
 
 .issue-checkbox-container {
@@ -363,10 +458,10 @@ input.issue-action-options-search {
   bottom: 0;
   left: 0;
   border: none;
+}
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
+.issue-checkbox-container:hover {
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .issue-checkbox {

server/sonar-web/src/main/less/components/list-groups.less → server/sonar-web/src/main/js/app/styles/components/list-groups.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;
@@ -27,31 +24,31 @@
 
 .list-group-item {
   position: relative;
-  z-index: @normal-z-index;
+  z-index: var(--normalZIndex);
   display: block;
   margin-bottom: -1px;
   padding: 5px 10px;
   border: 1px solid transparent;
+}
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+.list-group-item:last-child {
+  margin-bottom: 0;
+}
 
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    z-index: @above-normal-z-index;
-    border-color: @blue !important;
-    background-color: @lightBlue;
-  }
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  z-index: var(--aboveNormalZIndex);
+  border-color: var(--blue) !important;
+  background-color: var(--lightBlue);
 }
 
 .list-group-item + .list-group-item {
-  border-top-color: @barBorderColor;
+  border-top-color: var(--barBorderColor);
 }
 
 a.list-group-item {
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 .list-group-item-heading {

server/sonar-web/src/main/js/app/styles/components/menu.css

@@ -0,0 +1,138 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.menu {
+  min-width: 160px;
+  padding: 5px 0;
+  list-style: none;
+  font-size: var(--smallFontSize);
+  text-align: left;
+  background-color: #fff;
+  background-clip: padding-box;
+}
+
+.menu:focus {
+  outline: none;
+}
+
+.menu > li > a,
+.menu > li > span {
+  display: block;
+  padding: 4px 16px;
+  line-height: 16px;
+  clear: both;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu > li > a {
+  color: var(--baseFontColor);
+  border-bottom: none;
+  transition: none;
+}
+
+.menu .divider {
+  height: 1px;
+  margin: 6px 0;
+  overflow: hidden;
+  background-color: var(--barBorderColor);
+}
+
+.menu > li > a:hover,
+.menu > li > a:focus {
+  text-decoration: none;
+  color: var(--baseFontColor);
+  background-color: var(--barBackgroundColor);
+}
+
+.menu > .active > a,
+.menu > li > .active,
+.menu > .active > a:hover,
+.menu > li > .active:hover,
+.menu > .active > a:focus,
+.menu > li > .active:focus {
+  color: var(--baseFontColor);
+  text-decoration: none;
+  outline: 0;
+  background-color: var(--barBackgroundColor);
+}
+
+.menu .menu-vertically-limited {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.menu .menu-footer > a > span {
+  border-bottom: 1px solid var(--gray80);
+  color: var(--secondFontColor);
+}
+
+.menu .menu-footer-note {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.menu .menu-footer.active .menu-footer-note {
+  opacity: 1;
+}
+
+.menu-search {
+  position: relative;
+  padding: 4px 16px 0;
+}
+
+.menu-search .search-box-input {
+  font-size: var(--smallFontSize);
+}
+
+.menu-search .search-box-submit {
+  vertical-align: baseline;
+}
+
+.menu-search-full-width {
+  display: flex;
+  align-items: center;
+}
+
+.menu-search-full-width .search-box-input {
+  flex-grow: 1;
+  width: auto;
+}
+
+.menu-search ~ .menu > li > a:hover,
+.menu-search ~ .menu > li > a:focus {
+  background-color: transparent;
+}
+
+.menu-search ~ .menu > .active > a,
+.menu-search ~ .menu > li > .active,
+.menu-search ~ .menu > .active > a:hover,
+.menu-search ~ .menu > li > .active:hover,
+.menu-search ~ .menu > .active > a:focus,
+.menu-search ~ .menu > li > .active:focus {
+  background-color: var(--barBackgroundColor);
+}
+
+.menu-message {
+  display: block;
+  padding: 4px 16px;
+  line-height: 16px;
+}

server/sonar-web/src/main/less/components/modals.less → server/sonar-web/src/main/js/app/styles/components/modals.css

@@ -17,13 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../mixins";
-@import (reference) "../variables";
-
 .modal,
 .ReactModal__Content {
   position: fixed;
-  z-index: @modal-z-index;
+  z-index: var(--modalZIndex);
   top: 0;
   left: 50%;
   margin-left: -270px;
@@ -31,10 +28,11 @@
   background-color: #fff;
   opacity: 0;
   transition: all 0.2s ease;
+}
 
-  &:focus {
-    outline: none;
-  }
+.modal:focus,
+.ReactModal__Content:focus {
+  outline: none;
 }
 
 .modal.in,
@@ -49,7 +47,7 @@
 }
 
 .modal-large {
-  width: ~'calc(100% - 40px)';
+  width: calc(100% - 40px);
   max-width: 1280px;
   min-width: 1040px;
   margin-left: 0;
@@ -59,7 +57,7 @@
 .modal-overlay,
 .ReactModal__Overlay {
   position: fixed;
-  z-index: @modal-overlay-z-index;
+  z-index: var(--modalOverlayZIndex);
   top: 0;
   bottom: 0;
   left: 0;
@@ -89,7 +87,7 @@
 
 .modal-head {
   padding: 0 10px;
-  background-color: #efefef;
+  background-color: var(--gray94);
   border-bottom: 1px solid #ddd;
 }
 
@@ -108,7 +106,7 @@ ul.modal-head-metadata li {
   float: left;
   position: relative;
   font-size: 85%;
-  color: #777;
+  color: var(--secondFontColor);
 }
 
 .modal-body {
@@ -149,16 +147,16 @@ ul.modal-head-metadata li {
   text-align: right;
   overflow: hidden;
   text-overflow: ellipsis;
+}
 
-  &.simple-label {
-    display: inline-block;
-    vertical-align: middle;
-    float: none;
-    position: static;
-    margin: 0 0 0 -5px;
-    padding: 0;
-    text-align: left;
-  }
+.modal-field label.simple-label {
+  display: inline-block;
+  vertical-align: middle;
+  float: none;
+  position: static;
+  margin: 0 0 0 -5px;
+  padding: 0;
+  text-align: left;
 }
 
 .modal-large-field label {
@@ -173,72 +171,72 @@ ul.modal-head-metadata li {
   line-height: 1;
 }
 
-.modal-field,
-.modal-large-field {
-  input,
-  select,
-  textarea,
-  .Select {
-    margin-right: 5px;
-    margin-bottom: 10px;
-  }
-
-  input[type='radio'],
-  input[type='checkbox'] {
-    margin-top: 5px;
-    margin-bottom: 4px;
-  }
-
-  & > .icon-checkbox {
-    padding-top: 6px;
-    padding-right: 8px;
-  }
+.modal-field input,
+.modal-large-field input,
+.modal-field select,
+.modal-large-field select,
+.modal-field textarea,
+.modal-large-field textarea,
+.modal-field .Select,
+.modal-large-field .Select {
+  margin-right: 5px;
+  margin-bottom: 10px;
 }
 
-.modal-field {
-  input[type='text'],
-  input[type='email'],
-  input[type='password'],
-  textarea,
-  select,
-  .Select {
-    width: 250px;
-  }
+.modal-field input[type='radio'],
+.modal-large-field input[type='radio'],
+.modal-field input[type='checkbox'],
+.modal-large-field input[type='checkbox'] {
+  margin-top: 5px;
+  margin-bottom: 4px;
 }
 
-.modal-large-field {
-  input[type='text'],
-  input[type='email'],
-  input[type='password'],
-  textarea,
-  select,
-  .Select {
-    width: 100%;
-  }
+.modal-field > .icon-checkbox,
+.modal-large-field > .icon-checkbox {
+  padding-top: 6px;
+  padding-right: 8px;
+}
+
+.modal-field input[type='text'],
+.modal-field input[type='email'],
+.modal-field input[type='password'],
+.modal-field textarea,
+.modal-field select,
+.modal-field .Select {
+  width: 250px;
+}
+
+.modal-large-field input[type='text'],
+.modal-large-field input[type='email'],
+.modal-large-field input[type='password'],
+.modal-large-field textarea,
+.modal-large-field select,
+.modal-large-field .Select {
+  width: 100%;
 }
 
 .modal-field-description {
   padding-bottom: 4px;
   line-height: 1.4;
-  color: @secondFontColor;
-  font-size: @smallFontSize;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .modal-foot {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   padding: 10px;
   border-top: 1px solid #ccc;
-  background-color: #efefef;
+  background-color: var(--gray94);
   text-align: right;
+}
 
-  button,
-  .button,
-  input[type='submit'],
-  input[type='button'] {
-    margin-right: 10px;
-  }
+.modal-foot button,
+.modal-foot .button,
+.modal-foot input[type='submit'],
+.modal-foot input[type='button'] {
+  margin-right: 10px;
 }
 
 .modal-error,

server/sonar-web/src/main/less/components/page.less → server/sonar-web/src/main/js/app/styles/components/page.css

@@ -17,10 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../init/links";
-
 .global-container {
   display: flex;
   flex-direction: column;
@@ -29,11 +25,21 @@
 }
 
 .page {
-  .clearfix;
   position: relative;
   padding: 10px 20px;
 }
 
+.page:before,
+.page:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.page:after {
+  clear: both;
+}
+
 .page-limited {
   max-width: 1280px;
   margin-left: auto;
@@ -61,42 +67,51 @@
 .page-simple {
   width: 400px;
   padding: 40px;
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
 }
 
 .page-header {
   position: relative;
-
-  .clearfix;
   margin-bottom: 20px;
+}
 
-  .spinner {
-    position: relative;
-    top: 3px;
-    margin-left: 8px;
-  }
+.page-header:before,
+.page-header:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.page-header:after {
+  clear: both;
+}
+
+.page-header .spinner {
+  position: relative;
+  top: 3px;
+  margin-left: 8px;
 }
 
 .page-title {
   float: left;
   margin-bottom: 0;
-  line-height: @formControlHeight;
+  line-height: var(--controlHeight);
 }
 
 .page-actions {
   float: right;
   margin-bottom: 10px;
   margin-left: 10px;
-  line-height: @formControlHeight;
+  line-height: var(--controlHeight);
+}
 
-  .badge {
-    margin: 3px 0;
-  }
+.page-actions .badge {
+  margin: 3px 0;
+}
 
-  .spinner {
-    top: 0 !important;
-  }
+.page-actions .spinner {
+  top: 0 !important;
 }
 
 .page-description {
@@ -108,27 +123,43 @@
 }
 
 .page-footer {
-  min-height: @pageFooterHeight;
+  min-height: 60px;
   padding: 10px;
   line-height: 1.5;
-  border-top: 1px solid @barBorderColor;
+  border-top: 1px solid var(--barBorderColor);
   box-sizing: border-box;
-  background-color: @barBackgroundColor;
-  color: @baseFontColorLight;
-  font-size: @smallFontSize;
+  background-color: var(--barBackgroundColor);
+  color: #595959;
+  font-size: var(--smallFontSize);
   text-align: center;
+}
 
-  a {
-    .link-base-color;
-  }
+.page-footer a {
+  border-bottom: 1px solid #d0d0d0;
+  color: var(--baseFontColor);
+}
+
+.page-footer a:hover,
+.page-footer a:active,
+.page-footer a:focus {
+  color: var(--blue);
+}
+
+.page-footer a:hover {
+  border-bottom-color: var(--lightBlue);
+}
+
+.page-footer a:active,
+.page-footer a:focus {
+  border-bottom-color: var(--lightBlue);
 }
 
 .page-footer-with-sidebar {
-  padding-left: ~'calc(50vw - 370px + 10px)' !important;
+  padding-left: calc(50vw - 370px + 10px) !important;
+}
 
-  div {
-    max-width: 980px;
-  }
+.page-footer-with-sidebar div {
+  max-width: 980px;
 }
 
 .page-with-sidebar {
@@ -148,51 +179,55 @@
 }
 
 .page-sidebar-fixed {
-  .page-sidebar;
+  width: 30%;
+  min-width: 300px;
+  flex-shrink: 0;
+  padding-left: 40px;
+  box-sizing: border-box;
   width: 300px;
 }
 
 .page-sidebar-sticky {
   width: 320px !important;
   padding-right: 0;
+}
+
+.page-limited .page-sidebar-sticky {
+  margin: -20px 0 -20px -20px;
+  padding-right: 0 !important;
+}
 
-  .page-limited & {
-    margin: -20px 0 -20px -20px;
-    padding-right: 0 !important;
+.page-limited .page-sidebar-sticky .page-sidebar-sticky-inner {
+  padding: 20px 0;
+}
+
+.page-sidebar-sticky .page-sidebar-sticky-inner {
+  position: fixed;
+  z-index: 10;
+  top: 30px;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  width: calc(50vw - 640px + 280px + 3px);
+  border-right: 1px solid var(--barBorderColor);
+  box-sizing: border-box;
+  background: var(--barBackgroundColor);
+}
 
-    .page-sidebar-sticky-inner {
-      padding: 20px 0;
-    }
+@media (max-width: 1335px) {
+  .page-sidebar-sticky .page-sidebar-sticky-inner {
+    width: 310px;
   }
+}
+
+.page-sidebar-sticky .page-sidebar-sticky-inner .search-navigator-facets-list {
+  width: 260px;
+  margin-left: calc(50vw - 640px + 290px - 260px - 37px);
+}
 
-  .page-sidebar-sticky-inner {
-    position: fixed;
-    z-index: 10;
-    top: 30px;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    width: ~'calc(50vw - 640px + 280px + 3px)';
-    border-right: 1px solid #e6e6e6;
-    box-sizing: border-box;
-    background: #f3f3f3;
-
-    @media (max-width: 1335px) {
-      & {
-        width: 310px;
-      }
-    }
-
-    .search-navigator-facets-list {
-      width: 260px;
-      margin-left: ~'calc(50vw - 640px + 290px - 260px - 37px)';
-
-      @media (max-width: 1335px) {
-        & {
-          margin-left: 20px;
-        }
-      }
-    }
+@media (max-width: 1335px) {
+  .page-sidebar-sticky .page-sidebar-sticky-inner .search-navigator-facets-list {
+    margin-left: 20px;
   }
 }
 
@@ -220,10 +255,10 @@
 }
 
 .layout-page-side-outer {
-  width: ~'calc(50vw - 370px)';
+  width: calc(50vw - 370px);
   flex-grow: 0;
   flex-shrink: 0;
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
 }
 
 .layout-page-side {
@@ -232,17 +267,17 @@
   top: 30px;
   bottom: 0;
   left: 0;
-  width: ~'calc(50vw - 370px)';
-  border-right: 1px solid #e6e6e6;
+  width: calc(50vw - 370px);
+  border-right: 1px solid var(--barBorderColor);
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
 }
 
 .layout-page-side-inner {
   width: 300px;
-  margin-left: ~'calc(50vw - 670px)';
-  background-color: #f3f3f3;
+  margin-left: calc(50vw - 670px);
+  background-color: var(--barBackgroundColor);
 }
 
 .layout-page-header-panel,
@@ -258,11 +293,11 @@
 .layout-page-header-panel-inner {
   position: fixed;
   z-index: 30;
-  line-height: 24px;
+  line-height: var(--controlHeight);
   padding-top: 16px;
   padding-bottom: 16px;
-  border-bottom: 1px solid #e6e6e6;
-  background-color: #f3f3f3;
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
 }
 
 .layout-page-main-header {
@@ -270,11 +305,11 @@
 }
 
 .layout-page-main-header .component-name {
-  line-height: 24px;
+  line-height: var(--controlHeight);
 }
 
 .layout-page-main-header-inner {
-  left: ~'calc(50vw - 370px + 1px)';
+  left: calc(50vw - 370px + 1px);
   right: 0;
   padding-left: 20px;
   padding-right: 20px;
@@ -298,6 +333,6 @@
   }
 
   .page-footer-with-sidebar {
-    padding-left: 300px + 10px !important;
+    padding-left: 310px !important;
   }
 }

server/sonar-web/src/main/less/components/panels.less → server/sonar-web/src/main/js/app/styles/components/panels.css

@@ -17,16 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../init/misc";
-
 .panel {
   padding: 10px;
 }
 
 .panel:not(:last-child) {
-  border-bottom: 1px solid @barBorderColor;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .panel-vertical {
@@ -35,13 +31,13 @@
 }
 
 .panel-white {
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
 }
 
 .panel-info {
-  border: 1px solid @blue;
-  background-color: @lightBlue;
+  border: 1px solid var(--blue);
+  background-color: var(--lightBlue);
 }
 
 .panel-warning {

server/sonar-web/src/main/less/components/react-select.less → server/sonar-web/src/main/js/app/styles/components/react-select.css

@@ -17,13 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-
 .Select {
   position: relative;
   display: inline-block;
   vertical-align: middle;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
   text-align: left;
 }
 
@@ -51,12 +49,12 @@
   position: relative;
   display: table;
   width: 100%;
-  height: @formControlHeight;
-  border: 1px solid @darkGrey;
+  height: var(--controlHeight);
+  border: 1px solid var(--gray80);
   border-collapse: separate;
   border-radius: 2px;
   background-color: #fff;
-  color: @baseFontColor;
+  color: var(--baseFontColor);
   cursor: default;
   outline: none;
   overflow: hidden;
@@ -82,14 +80,14 @@
 }
 
 .is-focused:not(.is-open) > .Select-control {
-  border-color: @blue;
+  border-color: var(--blue);
 }
 
 .Select-placeholder,
 :not(.Select--multi) > .Select-control .Select-value {
   bottom: 0;
   left: 0;
-  line-height: @formControlHeight - 1px;
+  line-height: 23px;
   padding-left: 8px;
   padding-right: 24px;
   position: absolute;
@@ -121,7 +119,7 @@
   > .Select-control
   > .Select-value
   .Select-value-label {
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 .has-value:not(.Select--multi) > .Select-control > .Select-value a.Select-value-label,
@@ -150,7 +148,7 @@
 
 .Select-input {
   vertical-align: top;
-  height: @formControlHeight - 2px;
+  height: 22px;
   padding-left: 8px;
   padding-right: 8px;
   outline: none;
@@ -162,8 +160,8 @@
   cursor: default;
   display: inline-block;
   font-family: inherit;
-  font-size: @smallFontSize;
-  height: @formControlHeight - 2px;
+  font-size: var(--smallFontSize);
+  height: 22px;
   margin: 0;
   outline: none;
   padding: 0;
@@ -200,7 +198,7 @@
   box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid #ccc;
-  border-right-color: @baseFontColor;
+  border-right-color: var(--baseFontColor);
   display: inline-block;
   position: relative;
   vertical-align: middle;
@@ -266,6 +264,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -275,6 +274,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -285,16 +285,16 @@
   border-bottom-left-radius: 4px;
   background-color: #fff;
   border: 1px solid #ccc;
-  border-top-color: #e6e6e6;
+  border-top-color: var(--barBorderColor);
   box-sizing: border-box;
   margin-top: -1px;
   max-height: 200px;
   position: absolute;
   top: 100%;
   width: 100%;
-  z-index: @dropdown-menu-z-index;
+  z-index: var(--dropdownMenuZIndex);
   -webkit-overflow-scrolling: touch;
-  box-shadow: @defaultShadow;
+  box-shadow: var(--defaultShadow);
 }
 
 .Select-menu {
@@ -308,8 +308,8 @@
   line-height: 20px;
   padding: 0 8px;
   box-sizing: border-box;
-  color: @baseFontColor;
-  font-size: @smallFontSize;
+  color: var(--baseFontColor);
+  font-size: var(--smallFontSize);
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
@@ -322,7 +322,7 @@
 }
 
 .Select-option.is-focused {
-  background-color: @barBackgroundColor;
+  background-color: var(--barBackgroundColor);
 }
 
 .Select-option.is-disabled {
@@ -342,16 +342,16 @@
   background-color: rgba(0, 126, 255, 0.08);
   border-radius: 2px;
   border: 1px solid rgba(0, 126, 255, 0.24);
-  color: @baseFontColor;
+  color: var(--baseFontColor);
   display: inline-block;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   line-height: 14px;
   margin: 1px 4px 1px 1px;
   vertical-align: top;
 }
 
 .Select-value-label {
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
 }
 
 .is-searchable.is-open .Select-value-label {
@@ -428,7 +428,7 @@
 .Select--multi.is-disabled .Select-value {
   background-color: #fcfcfc;
   border: 1px solid #e3e3e3;
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 .Select--multi.is-disabled .Select-value-icon {

server/sonar-web/src/main/js/app/styles/components/search-navigator.css

@@ -0,0 +1,820 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.search-navigator.sticky .search-navigator-workspace-header {
+  position: fixed;
+  z-index: 50;
+  top: 0;
+  left: 300px;
+  right: 0;
+}
+
+.search-navigator.sticky .search-navigator-workspace-list,
+.search-navigator.sticky .search-navigator-workspace-details {
+  padding-top: 43px;
+}
+
+.search-navigator.sticky .search-navigator-side {
+  position: fixed;
+  z-index: 51;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+.search-navigator-side {
+  position: fixed;
+  z-index: 51;
+  width: 300px;
+  left: 0;
+  bottom: 0;
+  border-right: 1px solid var(--barBorderColor);
+  box-sizing: border-box;
+  background-color: var(--barBorderColor);
+  overflow-x: hidden;
+}
+
+.search-navigator-side-light {
+  background-color: var(--barBackgroundColor);
+}
+
+.search-navigator-facet-box {
+  background-color: var(--barBackgroundColor);
+  font-size: var(--baseFontSize);
+}
+
+.search-navigator-facet-box.leak-facet-box {
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
+}
+
+.leak-facet-box:not(.hidden) + .leak-facet-box {
+  border-top: none;
+}
+
+.search-navigator-facet-box-collapsed {
+  background-color: transparent;
+}
+
+.search-navigator-facet-box-collapsed .search-navigator-facet-list,
+.search-navigator-facet-box-collapsed .search-navigator-facet-empty,
+.search-navigator-facet-box-collapsed .search-navigator-facet-container {
+  display: none;
+}
+
+.search-navigator-facet-box-collapsed .search-navigator-facet-header {
+  color: var(--secondFontColor);
+  font-weight: 400;
+}
+
+.search-navigator-facet-box-collapsed .search-navigator-facet-header:hover {
+  color: var(--blue);
+}
+
+.search-navigator-facet-box-forbidden {
+  background-color: transparent;
+  opacity: 0.5;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-list,
+.search-navigator-facet-box-forbidden .search-navigator-facet-empty,
+.search-navigator-facet-box-forbidden .search-navigator-facet-container {
+  display: none;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header {
+  color: var(--secondFontColor);
+  font-weight: 400;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover {
+  color: var(--blue);
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header {
+  cursor: default;
+}
+
+.search-navigator-facet-box-forbidden .search-navigator-facet-header:hover {
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  margin: 0 0 1px 0;
+  padding: 4px 6px;
+  border: none;
+  border-radius: 2px;
+  box-sizing: border-box;
+  white-space: normal;
+  overflow: hidden;
+  font-size: 0;
+  opacity: 0.3;
+  cursor: not-allowed;
+  transition: none;
+}
+
+a.search-navigator-facet {
+  opacity: 1;
+  cursor: pointer;
+}
+
+a.search-navigator-facet .facet-name {
+  color: var(--baseFontColor);
+}
+
+a.search-navigator-facet:hover,
+a.search-navigator-facet:focus {
+  border: 1px solid var(--blue);
+  padding: 3px 5px;
+}
+
+a.search-navigator-facet:hover .facet-stat,
+a.search-navigator-facet:focus .facet-stat {
+  top: -1px;
+  right: -1px;
+}
+
+.search-navigator-facet.facet-category {
+  opacity: 1;
+  cursor: default;
+}
+
+.search-navigator-facet.facet-category .facet-name {
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet .facet-name {
+  line-height: 16px;
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+  white-space: nowrap;
+}
+
+.search-navigator-facet .facet-stat {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-left: 5px;
+  padding: 5px 5px;
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-facet .facet-stat:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 10px;
+  background-image: linear-gradient(to right, rgba(243, 243, 243, 0), var(--barBackgroundColor) 75%);
+}
+
+.search-navigator-facet .facet-toggle {
+  display: none;
+  float: left;
+  height: 16px;
+  line-height: 16px;
+  margin-top: -1px;
+  padding: 0 5px;
+  border-radius: 2px;
+  font-size: 11px;
+  text-transform: lowercase;
+}
+
+.search-navigator-facet .facet-toggle:hover {
+  color: var(--baseFontColor);
+}
+
+.search-navigator-facet .facet-toggle-active.facet-toggle-green {
+  background-color: var(--green);
+  color: #ffffff;
+}
+
+.search-navigator-facet .facet-toggle-active.facet-toggle-red {
+  background-color: var(--red);
+  color: #ffffff;
+}
+
+.leak-facet-box .search-navigator-facet .facet-name {
+  background-color: var(--leakColor);
+}
+
+.leak-facet-box .search-navigator-facet .facet-stat {
+  background-color: var(--leakColor);
+}
+
+.leak-facet-box .search-navigator-facet .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(251, 243, 213, 0), var(--leakColor) 75%);
+}
+
+.search-navigator-facet.active {
+  border: 1px solid var(--blue);
+  padding: 3px 5px;
+  background-color: var(--lightBlue);
+  text-decoration: none;
+}
+
+.search-navigator-facet.active .facet-name {
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet.active .facet-stat {
+  border-color: var(--blue);
+  background-color: var(--lightBlue);
+  top: -1px;
+  right: -1px;
+}
+
+.search-navigator-facet.active .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%);
+}
+
+.search-navigator-facet.active .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet.compare .facet-toggle {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.search-navigator-facet.compare .facet-toggle.facet-toggle-green {
+  background-color: var(--green);
+  color: #ffffff;
+}
+
+.search-navigator-facet.compare .facet-toggle.facet-toggle-red {
+  background-color: transparent;
+  color: var(--secondFontColor);
+}
+
+.search-navigator-facet-indent {
+  width: calc(100% - 30px);
+  margin-left: 30px;
+}
+
+.search-navigator-facet-half {
+  width: 45%;
+}
+
+.search-navigator-facet-half:nth-child(odd) {
+  margin-right: 10%;
+}
+
+.search-navigator-facet-highlight-under-container {
+  margin-bottom: 1px;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet {
+  margin-bottom: 0;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet:hover,
+.search-navigator-facet-highlight-under-container .search-navigator-facet.active {
+  border-bottom: none;
+  padding-bottom: 4px;
+  border-radius: 2px 2px 0 0;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-left: 1px solid var(--blue);
+  border-right: 1px solid var(--blue);
+  border-radius: 0;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat {
+  right: -1px;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet:hover
+  ~ .search-navigator-facet:last-of-type,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:last-of-type {
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--blue);
+  border-radius: 0 0 2px 2px;
+}
+
+.search-navigator-facet-highlight-under-container .search-navigator-facet:hover:last-of-type,
+.search-navigator-facet-highlight-under-container .search-navigator-facet.active:last-of-type {
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--blue);
+  border-radius: 2px;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet {
+  background-color: var(--lightBlue);
+  text-decoration: none;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-name {
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat {
+  border-color: var(--blue);
+  background-color: var(--lightBlue);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(202, 227, 242, 0), var(--lightBlue) 75%);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet
+  .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet {
+  background-color: #a1cde8;
+  text-decoration: none;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-name,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-name {
+  background-color: #a1cde8;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-stat,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat {
+  border-color: var(--blue);
+  background-color: #a1cde8;
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-stat:before,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-stat:before {
+  background-image: linear-gradient(to right, rgba(161, 205, 232, 0), #a1cde8 75%);
+}
+
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  .facet-toggle,
+.search-navigator-facet-highlight-under-container
+  .search-navigator-facet.active
+  ~ .search-navigator-facet:hover
+  ~ .search-navigator-facet
+  .facet-toggle {
+  display: inline;
+}
+
+.search-navigator-facet-header {
+  display: block;
+  flex-shrink: 0;
+  padding: 8px 0;
+  color: var(--baseFontColor);
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.search-navigator-facet-header > a {
+  border-bottom: none;
+  color: var(--baseFontColor);
+}
+
+.search-navigator-facet-header > a:hover {
+  color: var(--blue);
+}
+
+.search-navigator-facet-header > .note {
+  font-weight: 400;
+}
+
+.search-navigator-facet-header-value {
+  display: block;
+  padding: 8px 0;
+  overflow: hidden;
+}
+
+.search-navigator-facet-header-value > .badge {
+  display: block;
+}
+
+.search-navigator-facet-header-button {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.search-navigator-facet-header-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.search-navigator-facet-list {
+  padding-bottom: 10px;
+  font-size: 0;
+}
+
+.search-navigator-facet-empty {
+  margin: 0 0 0 0;
+  padding: 0 10px 10px;
+  color: var(--baseFontColor);
+  font-size: var(--smallFontSize);
+  white-space: nowrap;
+}
+
+.search-navigator-facet-footer {
+  display: block;
+  padding: 6px 10px;
+  border-bottom: none;
+}
+
+.search-navigator-facet-list-align-right .facet-name {
+  float: right;
+}
+
+.search-navigator-facet-list-align-right .facet-name:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  background-image: linear-gradient(to left, rgba(243, 243, 243, 0), var(--barBackgroundColor) 75%);
+}
+
+.search-navigator-facet-list-align-right .facet-stat:before {
+  display: none;
+}
+
+.search-navigator-facet-list-align-right .facet.active .facet-name:before {
+  background-image: linear-gradient(to left, rgba(202, 227, 242, 0), var(--lightBlue) 75%);
+}
+
+.search-navigator-facet-container {
+  margin-top: 6px;
+  padding: 0 10px 16px;
+}
+
+.search-navigator-facet-container-center {
+  text-align: center;
+}
+
+.search-navigator-facet-query {
+  padding: 7px 10px 27px;
+}
+
+.search-navigator-facet-query input {
+  width: 100%;
+}
+
+.search-navigator-facet-custom-value {
+  padding: 0 0 5px;
+  font-size: var(--baseFontSize);
+}
+
+.search-navigator-facet-input {
+  width: 120px;
+}
+
+.search-navigator-facet-histogram {
+  font-size: 0;
+}
+
+.search-navigator-facet-histogram > li {
+  display: inline-block;
+  vertical-align: bottom;
+  width: 24px;
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-facet-histogram > li > a {
+  display: block;
+  padding-bottom: 3px;
+  border-bottom: none;
+  transition: none;
+}
+
+.search-navigator-facet-histogram > li > a:hover,
+.search-navigator-facet-histogram > li > a:focus,
+.search-navigator-facet-histogram > li > a:hover .search-navigator-facet-histogram-bar-inner,
+.search-navigator-facet-histogram > li > a:focus .search-navigator-facet-histogram-bar-inner {
+  background-color: var(--barBorderColor);
+}
+
+.search-navigator-facet-histogram > li > a:hover .search-navigator-facet-histogram-bar,
+.search-navigator-facet-histogram > li > a:focus .search-navigator-facet-histogram-bar {
+  background-color: var(--blue);
+}
+
+.search-navigator-facet-histogram-large > li {
+  width: 48px;
+}
+
+.search-navigator-facet-histogram-bar {
+  display: block;
+  height: 60px;
+  background-color: var(--darkBlue);
+}
+
+.search-navigator-facet-histogram-bar-inner {
+  display: block;
+  max-height: 59px;
+  background-color: var(--barBackgroundColor);
+}
+
+.search-navigator-facet-histogram-label {
+  display: block;
+  text-align: center;
+}
+
+.search-navigator-date-facet-selection {
+  position: relative;
+  padding: 0 10px;
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-date-facet-selection:before,
+.search-navigator-date-facet-selection:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.search-navigator-date-facet-selection:after {
+  clear: both;
+}
+
+.search-navigator-date-facet-selection-input {
+  width: 115px !important;
+}
+
+.search-navigator-date-facet-selection-dropdown-left {
+  float: left;
+  border-bottom: none;
+}
+
+.search-navigator-date-facet-selection-dropdown-right {
+  float: right;
+  border-bottom: none;
+}
+
+.search-navigator-date-facet-selection-input-left {
+  position: absolute;
+  left: 0;
+  width: 100px;
+  visibility: hidden;
+}
+
+.search-navigator-date-facet-selection-input-right {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  visibility: hidden;
+}
+
+.search-navigator-filters {
+  position: relative;
+  padding: 5px 10px;
+  background-color: var(--barBackgroundColor);
+}
+
+.search-navigator-filters:before,
+.search-navigator-filters:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.search-navigator-filters:after {
+  clear: both;
+}
+
+.search-navigator-filters-selected {
+  margin-bottom: 5px;
+}
+
+.search-navigator-filters-selected .search-navigator-filters-header {
+  float: none;
+}
+
+.search-navigator-filters-selected .search-navigator-filters-actions {
+  float: none;
+  margin-top: 5px;
+}
+
+.search-navigator-filters-list {
+  display: none;
+  position: absolute;
+  z-index: var(--dropdownMenuZIndex);
+  top: 31px;
+  left: 0;
+  right: 10px;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border: 1px solid #e8e8e8;
+  box-sizing: border-box;
+  line-height: 1.5;
+  background-color: #ffffff;
+  box-shadow: var(--defaultShadow);
+}
+
+.search-navigator-filters-header {
+  float: left;
+  line-height: 22px;
+}
+
+.search-navigator-filters-name {
+  vertical-align: top;
+  font-size: var(--bigFontSize);
+}
+
+.search-navigator-filters-description {
+  margin: 4px 0;
+  font-size: var(--smallFontSize);
+  font-style: italic;
+}
+
+.search-navigator-filters-show-list {
+  margin-right: 4px;
+  border-bottom: none;
+  color: var(--baseFontColor);
+}
+
+.search-navigator-filters-show-list > .icon-list {
+  position: relative;
+  top: -2px;
+}
+
+.search-navigator-filters-actions {
+  float: right;
+}
+
+.search-navigator-filters-manage {
+  display: inline-block;
+  margin-top: 4px;
+  border-bottom: none;
+}
+
+.search-navigator-workspace {
+  padding-left: 300px;
+}
+
+.search-navigator-workspace-header {
+  position: relative;
+  margin-bottom: 10px;
+  padding: 5px 0;
+  line-height: var(--controlHeight);
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+  font-size: var(--smallFontSize);
+}
+
+.search-navigator-workspace-header .button-group,
+.search-navigator-workspace-header .button-group > button,
+.search-navigator-workspace-header .button-group > .button {
+  vertical-align: top;
+}
+
+.search-navigator-header-component {
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.search-navigator-header-actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 5px 10px;
+  background-color: var(--barBackgroundColor);
+  white-space: nowrap;
+}
+
+.search-navigator-header-actions:before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 10px;
+  background-image: linear-gradient(to right, rgba(243, 243, 243, 0), var(--barBackgroundColor) 75%);
+}
+
+.search-navigator-header-pagination {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.search-navigator-header-buttons {
+  vertical-align: top;
+}
+
+.search-navigator-workspace-list {
+  padding: 0 5px;
+}
+
+.search-navigator-workspace-list .issue {
+  max-width: none;
+}
+
+.search-navigator-workspace-details {
+  display: none;
+  min-height: 100vh;
+  padding: 0 10px;
+}
+
+.search-navigator-workspace-list-more {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  text-align: center;
+}
+
+.search-navigator-no-results {
+  padding-top: 10%;
+  color: var(--secondFontColor);
+  text-align: center;
+}
+
+.search-navigator-extended-view .search-navigator-workspace-list {
+  display: none;
+}
+
+.search-navigator-extended-view .search-navigator-workspace-details {
+  display: block;
+}
+
+.search-navigator-intro {
+  width: 500px;
+  margin: 0 auto;
+  padding-top: 100px;
+}

server/sonar-web/src/main/less/components/search.less → server/sonar-web/src/main/js/app/styles/components/search.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 .search-box {
   position: relative;
   font-size: 0;
@@ -30,31 +27,31 @@
   vertical-align: middle;
   width: 250px;
   border: none !important;
-  font-size: @baseFontSize;
+  font-size: var(--baseFontSize);
+}
 
-  & ~ .note {
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
+.search-box-input ~ .note {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
 
-  &.touched ~ .note {
-    opacity: 1;
-  }
+.search-box-input.touched ~ .note {
+  opacity: 1;
 }
 
 .search-box-submit {
   display: inline-block;
   vertical-align: middle;
+}
 
-  .icon-search:before {
-    color: @secondFontColor;
-    font-size: @iconSmallFontSize;
-  }
+.search-box-submit .icon-search:before {
+  color: var(--secondFontColor);
+  font-size: var(--mediumFontSize);
+}
 
-  .icon-search-new {
-    position: relative;
-    top: 1px;
-  }
+.search-box-submit .icon-search-new {
+  position: relative;
+  top: 1px;
 }
 
 .search-box-input-note {
@@ -62,7 +59,7 @@
   top: 100%;
   left: 0;
   line-height: 1;
-  color: #777;
-  font-size: @smallFontSize;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   white-space: nowrap;
 }

server/sonar-web/src/main/less/components/side-tabs.less → server/sonar-web/src/main/js/app/styles/components/side-tabs.css

@@ -17,40 +17,37 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../mixins";
-@import (reference) "../variables";
-
 .side-tabs-layout {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
+}
 
-  .modal & {
-    padding-left: 10px;
-    background-color: @barBackgroundColor;
-  }
+.modal .side-tabs-layout {
+  padding-left: 10px;
+  background-color: var(--barBackgroundColor);
 }
 
 .side-tabs-main {
   position: relative;
-  z-index: 2;
+  z-index: var(--normalZIndex);
   flex-grow: 1;
   padding: 15px 20px;
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
   box-sizing: border-box;
   background-color: #fff;
   overflow: auto;
+}
 
-  .modal & {
-    border-top: none;
-    border-bottom: none;
-    border-right: none;
-  }
+.modal .side-tabs-main {
+  border-top: none;
+  border-bottom: none;
+  border-right: none;
 }
 
 .side-tabs-side {
   position: relative;
-  z-index: 3;
+  z-index: var(--aboveNormalZIndex);
   width: 160px;
   flex-shrink: 0;
   padding: 10px 0;
@@ -68,7 +65,7 @@
   line-height: 1.5;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
   border-right: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -82,6 +79,6 @@
 }
 
 .side-tabs-menu > li > a.active {
-  color: #444;
+  color: var(--baseFontColor);
   cursor: default;
 }

server/sonar-web/src/main/less/components/tooltips.less → server/sonar-web/src/main/js/app/styles/components/tooltips.css

@@ -17,19 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../mixins";
-@import (reference) "../variables";
-@import (reference) "ui";
-
-@background: #475760;
-
 .tooltip,
 .rc-tooltip {
   position: absolute;
-  z-index: @tooltip-z-index;
+  z-index: var(--tooltipZIndex);
   display: block;
   height: auto;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
   font-weight: 300;
   line-height: 1.5;
   animation: fadeIn 0.3s forwards;
@@ -39,9 +33,6 @@
   display: none;
 }
 
-.tooltip.in {
-}
-
 .tooltip.top,
 .rc-tooltip-placement-top {
   padding: 5px 0;
@@ -73,16 +64,17 @@
   color: #fff;
   text-align: left;
   text-decoration: none;
-  background-color: @background;
+  background-color: #475760;
   border-radius: 4px;
   letter-spacing: 0.04em;
   overflow: hidden;
   word-break: break-word;
+}
 
-  .alert {
-    margin-bottom: 5px;
-    border-radius: 4px;
-  }
+.tooltip-inner .alert,
+.rc-tooltip-inner .alert {
+  margin-bottom: 5px;
+  border-radius: 4px;
 }
 
 .tooltip-arrow,
@@ -99,7 +91,7 @@
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
-  border-top-color: @background;
+  border-top-color: #475760;
 }
 
 .tooltip.top-left .tooltip-arrow,
@@ -108,7 +100,7 @@
   bottom: 0;
   margin-bottom: -5px;
   border-width: 5px 5px 0;
-  border-top-color: @background;
+  border-top-color: #475760;
 }
 
 .tooltip.top-right .tooltip-arrow,
@@ -117,7 +109,7 @@
   left: 5px;
   margin-bottom: -5px;
   border-width: 5px 5px 0;
-  border-top-color: @background;
+  border-top-color: #475760;
 }
 
 .tooltip.right .tooltip-arrow,
@@ -126,7 +118,7 @@
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
-  border-right-color: @background;
+  border-right-color: #475760;
 }
 
 .tooltip.left .tooltip-arrow,
@@ -135,7 +127,7 @@
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
-  border-left-color: @background;
+  border-left-color: #475760;
 }
 
 .tooltip.bottom .tooltip-arrow,
@@ -144,7 +136,7 @@
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: @background;
+  border-bottom-color: #475760;
 }
 
 .tooltip.bottom-left .tooltip-arrow,
@@ -153,7 +145,7 @@
   right: 5px;
   margin-top: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: @background;
+  border-bottom-color: #475760;
 }
 
 .tooltip.bottom-right .tooltip-arrow,
@@ -162,13 +154,14 @@
   left: 5px;
   margin-top: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: @background;
+  border-bottom-color: #475760;
 }
 
 @keyframes fadeIn {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }

server/sonar-web/src/main/less/components/ui.less → server/sonar-web/src/main/js/app/styles/components/ui.css

@@ -17,12 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 .processes-container {
   position: fixed;
-  z-index: @process-container-z-index;
+  z-index: var(--processContainerZIndex);
   top: 0;
   left: 50%;
   width: 350px;
@@ -32,17 +29,17 @@
 .process-spinner {
   position: relative;
   padding: 0 10px;
-  line-height: @formControlHeight;
+  line-height: var(--controlHeight);
   border-radius: 0 0 3px 3px;
   box-sizing: border-box;
   background-color: #f0e8ac;
   text-align: center;
   opacity: 0;
   transition: all 0.2s ease;
+}
 
-  &.shown {
-    opacity: 1;
-  }
+.process-spinner.shown {
+  opacity: 1;
 }
 
 .process-spinner + .process-spinner {
@@ -52,14 +49,14 @@
 
 .process-spinner-failed {
   padding-right: 30px;
-  background-color: @red;
-  color: @white;
+  background-color: var(--red);
+  color: #ffffff;
 }
 
 .process-spinner-success {
   padding-right: 30px;
-  background-color: @green;
-  color: @white;
+  background-color: var(--green);
+  color: #ffffff;
 }
 
 .process-spinner-close {
@@ -73,9 +70,6 @@
   color: #fff;
 }
 
-.shortcuts-section {
-}
-
 .shortcuts-section + .shortcuts-section {
   margin-top: 20px;
 }
@@ -84,16 +78,14 @@
   margin-bottom: 5px;
 }
 
-.shortcuts-list {
-  > li + li {
-    margin-top: 5px;
-  }
+.shortcuts-list > li + li {
+  margin-top: 5px;
 }
 
 .shortcut-button {
   display: inline-block;
   min-width: 24px;
-  height: 24px;
+  height: var(--controlHeight);
   line-height: 21px;
   padding: 0 4px;
   box-sizing: border-box;
@@ -101,7 +93,7 @@
   border-radius: 3px;
   background-image: linear-gradient(to bottom, #f5f5f5, #eee);
   box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
-  color: @secondFontColor;
+  color: var(--secondFontColor);
   font-size: 11px;
   text-align: center;
 }
@@ -117,10 +109,10 @@
 .flash {
   background-color: transparent;
   transition: all 0.5s ease;
+}
 
-  &.in {
-    background-color: #fcf8e3;
-  }
+.flash.in {
+  background-color: #fcf8e3;
 }
 
 .flash-heavy.in {
@@ -132,6 +124,6 @@
   line-height: 14px;
   padding: 3px 5px;
   border-radius: 3px;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
   color: #fff;
 }

server/sonar-web/src/main/less/init/base.less → server/sonar-web/src/main/js/app/styles/init/base.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 *,
 *:before,
 *:after {
@@ -29,7 +26,7 @@
 
 html,
 body {
-  background-color: @baseBackgroundColor;
+  background-color: #fff;
 }
 
 body {
@@ -103,9 +100,9 @@ code,
 kbd,
 samp,
 tt {
-  font-family: @monoFontFamily;
-  font-size: @monoFontSize;
-  line-height: @monoLineHeight;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
+  line-height: 18px;
 }
 
 svg,
@@ -118,5 +115,5 @@ hr {
   padding: 0;
   height: 1px;
   border: none;
-  background-color: @barBorderColor;
+  background-color: var(--barBorderColor);
 }

server/sonar-web/src/main/js/app/styles/init/forms.css

@@ -0,0 +1,468 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+/*
+ * Inputs
+ */
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='search'],
+input[type='date'],
+input[type='number'],
+textarea,
+select {
+  border: 1px solid var(--gray80);
+  box-sizing: border-box;
+  border-radius: 2px;
+  background: #fff;
+  color: var(--baseFontColor);
+  transition: border-color 0.2s ease;
+}
+
+input[type='text']:active,
+input[type='password']:active,
+input[type='email']:active,
+input[type='search']:active,
+input[type='date']:active,
+input[type='number']:active,
+textarea:active,
+select:active,
+input[type='text']:focus,
+input[type='password']:focus,
+input[type='email']:focus,
+input[type='search']:focus,
+input[type='date']:focus,
+input[type='number']:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--blue);
+  box-shadow: none;
+  outline: none;
+}
+
+input[type='text']:invalid,
+input[type='password']:invalid,
+input[type='email']:invalid,
+input[type='search']:invalid,
+input[type='date']:invalid,
+input[type='number']:invalid,
+textarea:invalid,
+select:invalid {
+  box-shadow: none;
+  outline: none;
+}
+
+input[type='text'].invalid,
+input[type='password'].invalid,
+input[type='email'].invalid,
+input[type='search'].invalid,
+input[type='date'].invalid,
+input[type='number'].invalid,
+textarea.invalid,
+select.invalid {
+  border-color: var(--red);
+}
+
+input[type='text'],
+input[type='password'],
+input[type='email'],
+input[type='search'],
+input[type='date'],
+input[type='number'] {
+  height: var(--controlHeight);
+  padding: 0 6px;
+}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+}
+
+input[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+textarea {
+  padding: 3px;
+}
+
+textarea.width-100 {
+  max-width: 100%;
+}
+
+select {
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
+}
+
+button,
+.button,
+input[type='submit'],
+input[type='button'] {
+  display: inline-block;
+  vertical-align: baseline;
+  height: var(--controlHeight);
+  line-height: 22px;
+  padding: 0 12px;
+  border: 1px solid var(--darkBlue);
+  border-radius: 2px;
+  box-sizing: border-box;
+  background: transparent;
+  color: var(--darkBlue);
+  font-weight: 600;
+  font-size: var(--smallFontSize);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+button:hover,
+.button:hover,
+input[type='submit']:hover,
+input[type='button']:hover,
+button:focus,
+.button:focus,
+input[type='submit']:focus,
+input[type='button']:focus,
+button.button-active,
+.button.button-active,
+input[type='submit'].button-active,
+input[type='button'].button-active {
+  background: var(--darkBlue);
+  color: #fff;
+}
+
+button:active,
+.button:active,
+input[type='submit']:active,
+input[type='button']:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+button.disabled,
+.button.disabled,
+input[type='submit'].disabled,
+input[type='button'].disabled,
+button:disabled,
+.button:disabled,
+input[type='submit']:disabled,
+input[type='button']:disabled,
+button:disabled:hover,
+.button:disabled:hover,
+input[type='submit']:disabled:hover,
+input[type='button']:disabled:hover,
+button:disabled:active,
+.button:disabled:active,
+input[type='submit']:disabled:active,
+input[type='button']:disabled:active,
+button:disabled:focus,
+.button:disabled:focus,
+input[type='submit']:disabled:focus,
+input[type='button']:disabled:focus {
+  color: #bbb;
+  border-color: #ddd;
+  background: #ebebeb;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.button-red,
+input[type='submit'].button-red {
+  border-color: var(--red);
+  color: var(--red);
+}
+
+.button-red:hover,
+input[type='submit'].button-red:hover,
+.button-red:focus,
+input[type='submit'].button-red:focus,
+.button-red.active,
+input[type='submit'].button-red.active {
+  background: var(--red);
+  color: #fff;
+}
+
+.button-success,
+input[type='submit'].button-success {
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.button-success:hover,
+input[type='submit'].button-success:hover,
+.button-success:focus,
+input[type='submit'].button-success:focus,
+.button-success.active,
+input[type='submit'].button-success.active {
+  background: var(--green);
+  color: #fff;
+}
+
+.button-grey,
+input[type='submit'].button-grey {
+  border-color: var(--gray71);
+  color: var(--secondFontColor);
+}
+
+.button-grey:hover,
+input[type='submit'].button-grey:hover,
+.button-grey:focus,
+input[type='submit'].button-grey:focus,
+.button-grey.active,
+input[type='submit'].button-grey.active {
+  background: var(--gray71);
+  color: #ffffff;
+}
+
+.button-grey.button-active,
+input[type='submit'].button-grey.button-active {
+  background: var(--secondFontColor);
+  border-color: var(--secondFontColor);
+  color: #ffffff;
+}
+
+.button-clean,
+.button-clean:hover,
+.button-clean:focus {
+  padding: 0;
+  line-height: 1;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+  color: var(--baseFontColor);
+}
+
+.button-clean path {
+  transition: opacity 0.3s ease;
+}
+
+.button-clean:hover path {
+  opacity: 0.8;
+}
+
+.button-link {
+  display: inline;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--darkBlue);
+  font-weight: 400;
+  font-size: inherit;
+  line-height: inherit;
+  transition: all 0.2s ease;
+}
+
+.button-link:hover,
+.button-link:focus {
+  background: transparent;
+  color: var(--blue);
+}
+
+.button-link:active {
+  box-shadow: none;
+  outline: thin dotted #ccc;
+}
+
+.button-link:disabled,
+.button-link:disabled:hover,
+.button-link:disabled:active,
+.button-link:disabled:focus {
+  color: var(--secondFontColor);
+  background: transparent;
+  cursor: default;
+}
+
+.button-icon {
+  border: none;
+  color: var(--secondFontColor);
+}
+
+.button-small {
+  height: 20px;
+  line-height: 18px;
+}
+
+.button-small > svg {
+  margin-top: 2px;
+}
+
+.button-compact {
+  padding: 0 6px;
+}
+
+.button-group {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.button-group > button,
+.button-group > .button {
+  position: relative;
+  z-index: var(--normalZIndex);
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  cursor: pointer;
+}
+
+.button-group > button:hover:not(:disabled),
+.button-group > .button:hover:not(:disabled),
+.button-group > button:focus:not(:disabled),
+.button-group > .button:focus:not(:disabled),
+.button-group > button:active:not(:disabled),
+.button-group > .button:active:not(:disabled),
+.button-group > button.active:not(:disabled),
+.button-group > .button.active:not(:disabled) {
+  z-index: var(--aboveNormalZIndex);
+}
+
+.button-group > button:disabled,
+.button-group > .button:disabled {
+  z-index: var(--belowNormalZIndex);
+}
+
+.button-group > button:not(:first-child),
+.button-group > .button:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group > button:not(:last-child):not(.dropdown-toggle),
+.button-group > .button:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group > button + button,
+.button-group > button + .button,
+.button-group > .button + button,
+.button-group > .button + .button {
+  margin-left: -1px;
+}
+
+.button-group > a:not(.button) {
+  vertical-align: middle;
+  margin: 0 8px;
+  font-size: var(--smallFontSize);
+}
+
+.input-tiny {
+  width: 60px !important;
+}
+
+.input-small {
+  width: 100px !important;
+}
+
+.input-medium {
+  width: 150px !important;
+}
+
+.input-large {
+  width: 200px !important;
+}
+
+.input-super-large {
+  width: 100%;
+  max-width: 300px;
+  min-width: 200px;
+}
+
+textarea.input-super-large {
+  max-width: 600px;
+  min-width: 300px;
+}
+
+.input-clear {
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+}
+
+.input-code {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
+}
+
+em.mandatory {
+  color: #990000;
+  font-style: italic;
+}
+
+label[for] {
+  cursor: pointer;
+}
+
+.radio-toggle {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.radio-toggle > li {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--smallFontSize);
+}
+
+.radio-toggle > li:first-child > label {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.radio-toggle > li:last-child > label {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.radio-toggle > li + li > label {
+  border-left: none;
+}
+
+.radio-toggle > li > label {
+  display: inline-block;
+  padding: 3px 12px 5px;
+  margin: 0;
+  border: 1px solid var(--darkBlue);
+  color: var(--darkBlue);
+}
+
+.radio-toggle input[type='radio'] {
+  display: none;
+}
+
+.radio-toggle input[type='radio']:checked + label {
+  background-color: var(--darkBlue);
+  color: #fff;
+  font-weight: 600;
+}
+
+.radio-toggle input[type='radio']:disabled + label {
+  color: #bbb;
+  border-color: #ddd;
+  background: #ebebeb;
+  cursor: not-allowed;
+}

server/sonar-web/src/main/less/init/icons.less → server/sonar-web/src/main/js/app/styles/init/icons.css

@@ -17,10 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../components/ui";
-
 @font-face {
   font-family: 'sonar';
   src: url('../../fonts/sonar-5.2.eot?');
@@ -42,7 +38,6 @@
   text-transform: none;
   line-height: 1;
   vertical-align: middle;
-
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -50,7 +45,7 @@
 
 a[class^='icon-'],
 a[class*=' icon-'] {
-  .link-no-underline;
+  border-bottom: none;
 }
 
 .icon-half-transparent {
@@ -60,30 +55,33 @@ a[class*=' icon-'] {
 /*
  * Colors
  */
-
 .icon-black {
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
+
 .icon-gray {
   color: #999;
 }
+
 .icon-gray path {
   fill: #999;
 }
+
 .icon-red {
-  color: @red;
+  color: var(--red);
 }
+
 .icon-green {
-  color: @green;
+  color: var(--green);
 }
+
 .icon-color-link {
-  color: @darkBlue;
+  color: var(--darkBlue);
 }
 
 /*
  * Severity
  */
-
 [class^='icon-severity-'],
 [class*=' icon-severity'] {
   display: inline-block;
@@ -93,22 +91,27 @@ a[class*=' icon-'] {
   background-size: 12px 12px;
   background: no-repeat center center;
 }
+
 .icon-severity-blocker,
 .icon-severity-4 {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cg%20transform%3D%22matrix(-1%2C1.22465e-16%2C-1.22465e-16%2C-1%2C12%2C12)%22%3E%3Cpath%20fill%3D%22%23d4333f%22%20d%3D%22M6%2C0C9.311%2C0%2012%2C2.689%2012%2C6C12%2C9.311%209.311%2C12%206%2C12C2.689%2C12%200%2C9.311%200%2C6C0%2C2.689%202.689%2C0%206%2C0ZM7%2C5L5%2C5L5%2C10L7%2C10L7%2C5ZM7%2C2L5%2C2L5%2C4L7%2C4L7%2C2Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
 }
+
 .icon-severity-critical,
 .icon-severity-3 {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%23d4333f%22%20d%3D%22M6%2C0C9.311%2C0%2012%2C2.689%2012%2C6C12%2C9.311%209.311%2C12%206%2C12C2.689%2C12%200%2C9.311%200%2C6C0%2C2.689%202.689%2C0%206%2C0ZM7%2C10L7%2C5.414L8.893%2C7.307C9.023%2C7.431%209.175%2C7.523%209.35%2C7.568C9.717%2C7.663%2010.116%2C7.537%2010.361%2C7.248C10.43%2C7.167%2010.486%2C7.075%2010.526%2C6.977C10.573%2C6.861%2010.598%2C6.738%2010.6%2C6.613C10.602%2C6.489%2010.58%2C6.365%2010.536%2C6.248C10.485%2C6.113%2010.406%2C5.997%2010.307%2C5.893C9.095%2C4.681%207.913%2C3.437%206.669%2C2.257C6.616%2C2.211%206.561%2C2.169%206.5%2C2.134C6.362%2C2.054%206.211%2C2.014%206.052%2C2.001C6%2C2%206%2C2%205.948%2C2.001C5.772%2C2.015%205.604%2C2.065%205.455%2C2.161C5.396%2C2.2%205.344%2C2.245%205.293%2C2.293C4.08%2C3.505%202.836%2C4.687%201.656%2C5.932C1.563%2C6.041%201.49%2C6.161%201.447%2C6.299C1.409%2C6.417%201.394%2C6.542%201.402%2C6.667C1.409%2C6.773%201.433%2C6.878%201.474%2C6.977C1.507%2C7.059%201.551%2C7.136%201.605%2C7.207C1.813%2C7.478%202.153%2C7.627%202.493%2C7.596C2.691%2C7.577%202.871%2C7.498%203.028%2C7.378C3.069%2C7.343%203.068%2C7.344%203.107%2C7.307L5%2C5.414L5%2C10L7%2C10Z%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-severity-major,
 .icon-severity-2 {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2012%2012%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.41421%3B%22%3E%3Cpath%20fill%3D%22%23d4333f%22%20d%3D%22M6%2C0C9.311%2C0%2012%2C2.689%2012%2C6C12%2C9.311%209.311%2C12%206%2C12C2.689%2C12%200%2C9.311%200%2C6C0%2C2.689%202.689%2C0%206%2C0ZM6.08%2C2.903C6.151%2C2.911%206.22%2C2.922%206.288%2C2.942C6.426%2C2.984%206.548%2C3.056%206.658%2C3.147C7.902%2C4.293%209.084%2C5.504%2010.297%2C6.683C10.397%2C6.786%2010.478%2C6.901%2010.531%2C7.035C10.576%2C7.151%2010.6%2C7.275%2010.6%2C7.399C10.6%2C7.524%2010.577%2C7.648%2010.532%2C7.763C10.493%2C7.863%2010.438%2C7.956%2010.37%2C8.038C10.129%2C8.33%209.732%2C8.461%209.363%2C8.372C9.188%2C8.329%209.035%2C8.239%208.903%2C8.117L6%2C5.295L3.097%2C8.117C3.058%2C8.153%203.058%2C8.153%203.017%2C8.187C2.902%2C8.273%202.777%2C8.337%202.637%2C8.372C2.516%2C8.401%202.39%2C8.408%202.267%2C8.391C1.928%2C8.345%201.63%2C8.124%201.489%2C7.813C1.452%2C7.732%201.427%2C7.646%201.413%2C7.558C1.396%2C7.453%201.396%2C7.345%201.413%2C7.24C1.445%2C7.044%201.535%2C6.87%201.666%2C6.721C2.847%2C5.51%204.09%2C4.362%205.303%2C3.183C5.355%2C3.135%205.409%2C3.09%205.47%2C3.052C5.623%2C2.956%205.794%2C2.91%205.973%2C2.9C6.027%2C2.9%206.027%2C2.9%206.08%2C2.903Z%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-severity-minor,
 .icon-severity-1 {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%2387bb43%22%20d%3D%22M6%2C0C9.311%2C0%2012%2C2.689%2012%2C6C12%2C9.311%209.311%2C12%206%2C12C2.689%2C12%200%2C9.311%200%2C6C0%2C2.689%202.689%2C0%206%2C0ZM7%2C6.586L7%2C2L5%2C2L5%2C6.586L3.107%2C4.693C3.055%2C4.644%203.002%2C4.598%202.942%2C4.559C2.79%2C4.461%202.619%2C4.413%202.44%2C4.401C2.386%2C4.4%202.334%2C4.402%202.28%2C4.407C2.121%2C4.431%201.97%2C4.482%201.836%2C4.574C1.748%2C4.634%201.67%2C4.708%201.605%2C4.793C1.398%2C5.064%201.344%2C5.432%201.464%2C5.752C1.515%2C5.887%201.594%2C6.003%201.693%2C6.107C2.905%2C7.319%204.087%2C8.563%205.331%2C9.743C5.425%2C9.823%205.526%2C9.889%205.642%2C9.934C5.904%2C10.034%206.203%2C10.019%206.454%2C9.891C6.548%2C9.843%206.631%2C9.78%206.707%2C9.707C7.92%2C8.495%209.164%2C7.313%2010.344%2C6.068C10.437%2C5.959%2010.51%2C5.839%2010.553%2C5.701C10.591%2C5.583%2010.606%2C5.458%2010.598%2C5.333C10.591%2C5.227%2010.567%2C5.122%2010.526%2C5.023C10.493%2C4.941%2010.449%2C4.864%2010.395%2C4.793C10.187%2C4.522%209.847%2C4.373%209.507%2C4.404C9.309%2C4.423%209.129%2C4.502%208.972%2C4.622C8.932%2C4.656%208.932%2C4.656%208.893%2C4.693L7%2C6.586Z%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-severity-info,
 .icon-severity-0 {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20fill%3D%22%234b9fd5%22%20d%3D%22M6%2C0C9.311%2C0%2012%2C2.689%2012%2C6C12%2C9.311%209.311%2C12%206%2C12C2.689%2C12%200%2C9.311%200%2C6C0%2C2.689%202.689%2C0%206%2C0ZM7%2C5L5%2C5L5%2C10L7%2C10L7%2C5ZM7%2C2L5%2C2L5%2C4L7%2C4L7%2C2Z%22%2F%3E%3C%2Fsvg%3E');
@@ -117,7 +120,6 @@ a[class*=' icon-'] {
 /*
  * Status
  */
-
 [class^='icon-status-'],
 [class*=' icon-status'] {
   display: inline-block;
@@ -127,18 +129,23 @@ a[class*=' icon-'] {
   background-size: 14px 14px;
   background: no-repeat center center;
 }
+
 .icon-status-open {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M7%202.75c-.77%200-1.482.19-2.133.57-.65.38-1.166.896-1.547%201.547-.38.65-.57%201.362-.57%202.133%200%20.77.19%201.482.57%202.133.38.65.896%201.167%201.547%201.547.65.38%201.362.57%202.133.57.77%200%201.482-.19%202.133-.57.65-.38%201.167-.896%201.547-1.547.38-.65.57-1.362.57-2.133%200-.77-.19-1.482-.57-2.133-.38-.65-.896-1.166-1.547-1.547-.65-.38-1.362-.57-2.133-.57zM13%207c0%201.09-.268%202.092-.805%203.012-.536.92-1.264%201.647-2.183%202.183C9.092%2012.732%208.09%2013%207%2013c-1.09%200-2.092-.268-3.012-.805-.92-.536-1.647-1.264-2.183-2.183C1.268%209.092%201%208.09%201%207c0-1.09.268-2.092.805-3.012.536-.92%201.264-1.647%202.183-2.183C4.908%201.268%205.91%201%207%201c1.09%200%202.092.268%203.012.805.92.536%201.647%201.264%202.183%202.183C12.732%204.908%2013%205.91%2013%207z%22%20fill%3D%22%234B9FD5%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-status-confirmed {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M9%207c0%20.552-.195%201.023-.586%201.414C8.024%208.804%207.552%209%207%209c-.552%200-1.023-.195-1.414-.586C5.196%208.024%205%207.552%205%207c0-.552.195-1.023.586-1.414C5.976%205.196%206.448%205%207%205c.552%200%201.023.195%201.414.586.39.39.586.862.586%201.414zM7%202.75c-.77%200-1.482.19-2.133.57-.65.38-1.166.896-1.547%201.547-.38.65-.57%201.362-.57%202.133%200%20.77.19%201.482.57%202.133.38.65.896%201.167%201.547%201.547.65.38%201.362.57%202.133.57.77%200%201.482-.19%202.133-.57.65-.38%201.167-.896%201.547-1.547.38-.65.57-1.362.57-2.133%200-.77-.19-1.482-.57-2.133-.38-.65-.896-1.166-1.547-1.547-.65-.38-1.362-.57-2.133-.57zM13%207c0%201.09-.268%202.092-.805%203.012-.536.92-1.264%201.647-2.183%202.183C9.092%2012.732%208.09%2013%207%2013c-1.09%200-2.092-.268-3.012-.805-.92-.536-1.647-1.264-2.183-2.183C1.268%209.092%201%208.09%201%207c0-1.09.268-2.092.805-3.012.536-.92%201.264-1.647%202.183-2.183C4.908%201.268%205.91%201%207%201c1.09%200%202.092.268%203.012.805.92.536%201.647%201.264%202.183%202.183C12.732%204.908%2013%205.91%2013%207z%22%20fill%3D%22%234B9FD5%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-status-reopened {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M7%2011.25v-8.5c-.77%200-1.482.19-2.133.57-.65.38-1.166.896-1.547%201.547-.38.65-.57%201.362-.57%202.133%200%20.77.19%201.482.57%202.133.38.65.896%201.167%201.547%201.547.65.38%201.362.57%202.133.57zM13%207c0%201.09-.268%202.092-.805%203.012-.536.92-1.264%201.647-2.183%202.183C9.092%2012.732%208.09%2013%207%2013c-1.09%200-2.092-.268-3.012-.805-.92-.536-1.647-1.264-2.183-2.183C1.268%209.092%201%208.09%201%207c0-1.09.268-2.092.805-3.012.536-.92%201.264-1.647%202.183-2.183C4.908%201.268%205.91%201%207%201c1.09%200%202.092.268%203.012.805.92.536%201.647%201.264%202.183%202.183C12.732%204.908%2013%205.91%2013%207z%22%20fill%3D%22%234B9FD5%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-status-resolved {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M11.03%205.734c0-.145-.046-.265-.14-.36l-.71-.702c-.1-.1-.216-.15-.352-.15-.135%200-.252.05-.35.15l-3.19%203.18-1.765-1.766c-.1-.1-.216-.15-.35-.15-.137%200-.254.05-.353.15l-.71.703c-.094.093-.14.213-.14.358%200%20.14.046.258.14.352l2.828%202.828c.098.1.216.15.35.15.142%200%20.26-.05.36-.15l4.243-4.242c.094-.094.14-.21.14-.352zM13%207c0%201.09-.268%202.092-.805%203.012-.536.92-1.264%201.647-2.183%202.183C9.092%2012.732%208.09%2013%207%2013c-1.09%200-2.092-.268-3.012-.805-.92-.536-1.647-1.264-2.183-2.183C1.268%209.092%201%208.09%201%207c0-1.09.268-2.092.805-3.012.536-.92%201.264-1.647%202.183-2.183C4.908%201.268%205.91%201%207%201c1.09%200%202.092.268%203.012.805.92.536%201.647%201.264%202.183%202.183C12.732%204.908%2013%205.91%2013%207z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-status-closed {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M13%207c0%201.09-.268%202.092-.805%203.012-.536.92-1.264%201.647-2.183%202.183C9.092%2012.732%208.09%2013%207%2013c-1.09%200-2.092-.268-3.012-.805-.92-.536-1.647-1.264-2.183-2.183C1.268%209.092%201%208.09%201%207c0-1.09.268-2.092.805-3.012.536-.92%201.264-1.647%202.183-2.183C4.908%201.268%205.91%201%207%201c1.09%200%202.092.268%203.012.805.92.536%201.647%201.264%202.183%202.183C12.732%204.908%2013%205.91%2013%207z%22%20fill%3D%22%23444%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
@@ -146,69 +153,76 @@ a[class*=' icon-'] {
 /*
  * Test Status
  */
-
 .icon-test-status-ok:before {
   content: '\f013';
-  color: @green;
-  font-size: @iconFontSize;
+  color: var(--green);
+  font-size: var(--bigFontSize);
 }
+
 .icon-test-status-failure:before {
   content: '\f000';
-  color: @orange;
-  font-size: @iconFontSize;
+  color: var(--orange);
+  font-size: var(--bigFontSize);
 }
+
 .icon-test-status-error:before {
   content: '\f057';
-  color: @red;
-  font-size: @iconFontSize;
+  color: var(--red);
+  font-size: var(--bigFontSize);
 }
+
 .icon-test-status-skipped:before {
   content: '\f056';
-  color: @middleGrey;
-  font-size: @iconFontSize;
+  color: var(--gray71);
+  font-size: var(--bigFontSize);
 }
 
 /*
  * Alert
  */
-
 .icon-alert-ok {
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-ok:before {
   content: '\f013';
-  color: @green;
-  font-size: @iconFontSize;
+  color: var(--green);
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-warn {
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-warn:before {
   content: '\f000';
-  color: @orange;
-  font-size: @iconFontSize;
+  color: var(--orange);
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-error {
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-error:before {
   content: '\f057';
-  color: @red;
-  font-size: @iconFontSize;
+  color: var(--red);
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-none {
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-alert-none:before {
   content: '\f056';
-  color: @middleGrey;
-  font-size: @iconFontSize;
+  color: var(--gray71);
+  font-size: var(--bigFontSize);
 }
 
 /*
  * Qualifier
  */
-
 [class^='icon-qualifier-'],
 [class*=' icon-qualifier-'] {
   display: inline-block;
@@ -218,36 +232,46 @@ a[class*=' icon-'] {
   background-size: 16px 16px;
   background: no-repeat center center;
 }
+
 .icon-qualifier-dir,
 .icon-qualifier-pac {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M14%2012.286V5.703c0-.198-.058-.36-.195-.5S13.512%205%2013.315%205H6.704c-.196%200-.36-.075-.5-.214-.136-.14-.203-.312-.203-.51v-.57c0-.2-.07-.363-.207-.502C5.655%203.064%205.487%203%205.29%203H2.707c-.196%200-.363.065-.5.204-.137.14-.206.302-.206.5v8.582c0%20.2.07.367.206.506.137.14.304.208.5.208h10.61c.196%200%20.352-.07.49-.208.137-.14.194-.307.194-.506zm1-6.598v6.65c0%20.458-.152.83-.475%201.16-.324.326-.7.502-1.15.502H2.647c-.452%200-.84-.175-1.162-.503-.324-.328-.486-.7-.486-1.158V3.654c0-.457.162-.842.486-1.17C1.81%202.158%202.196%202%202.648%202h2.7c.45%200%20.84.157%201.164.485.324.328.488.714.488%201.17V4h6.373c.452%200%20.83.174%201.152.5.323.33.475.73.475%201.187z%22%20fill%3D%22%23F90%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-trk,
 .icon-qualifier-dev_prj {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M14.985%2013.988L1%2014.005%201.02%205h13.966v8.988zM1.998%205.995l.006%207.02L14.022%2013%2014%206.004l-12.002-.01zM3%204.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2%204.5zm1-2v-.504h8.002L12%202.5h1l-.004-1.495H3.003L3%202.5z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-brc {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M16%2016H6v-6h10v6zm-9-1h8v-4H7v4zM7%209h8v1H7zM8%208h6v1H8z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M5%2012H1V5h12v2h1V4H0v9h5zM3%201h8v.5h1V0H2v1.5h1zM2%203h10v.5h1V2H1v1.5h1z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-cla,
 .icon-qualifier-uts {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M3%2014h10V6H9V2H3zm7.012-9h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96zM14%204.995V15H2V1l7.997.02c1.013-.03%201.57.893%202.239%201.555.667.663%201.75%201.47%201.763%202.42z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20d%3D%22M7%208l-3%202.5L7%2013zM8%2013l3-2.5L8%208z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-fil {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M3%2014h10V6H9V2H3zm7.012-9h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96zM14%204.995V15H2V1l7.997.02c1.013-.03%201.57.893%202.239%201.555.667.663%201.75%201.47%201.763%202.42z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3Cpath%20fill%3D%22%232D88C0%22%20d%3D%22M4%2011h8v1H4zM4%209h8v1H4z%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-lib {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M1%2013h4V3H1zm3-1H2v-2h2v2zM2%204h2v4H2zM6%2013h4V3H6zm3-1H7v-2h2v2zM7%204h2v4H7zM11%2013h4V3h-4zm3-1h-2v-2h2v2zm-2-8h2v4h-2z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-vw {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M1.016%2014.97V1.015H14.97V14.97H1.015zm1-1H13.97V2.015H2.015V13.97z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M3.006%207V3.006H7V7H3.006zm1-1H6V4.006H4.006V6zM9%207V3.015h3.985V7H9zm1-1h1.985V4.015H10V6zM3.004%2012.996V9H7v3.996H3.004zm1-1H6V10H4.004v1.996zM9%2012.997V9h3.997v3.997H9zm1-1h1.997V10H10v1.997z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-svw {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M13%207.2V1H1v12h7v1H0V0h14v7.2%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M2%206V2h4v4H2zm1-1h2V3H3v2zm5%201V2h4v4H8zm1-1h2V3H9v2zm-7%207V8h4v4H2zm1-1h2V9H3v2zM16%2016H7V7h9v9zm-8-1h7V8H8v7z%22%20fill%3D%22%232D88C0%22%2F%3E%3Cpath%20d%3D%22M9%209h2v2H9zM12%209h2v2h-2zM9%2012h2v2H9zM12%2012h2v2h-2z%22%20fill%3D%22%232D88C0%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-dev {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M7.974%208.02c-.938%200-1.82-.36-2.482-1.017-.663-.655-1.028-1.527-1.028-2.455%200-.927.365-1.8%201.028-2.455.663-.656%201.544-1.017%202.482-1.017.937%200%201.82.36%202.482%201.017.662.656%201.027%201.528%201.027%202.455%200%20.928-.365%201.8-1.027%202.455C9.793%207.66%208.91%208.02%207.974%208.02zm0-5.778c-1.286%200-2.332%201.034-2.332%202.306s1.046%202.307%202.332%202.307c1.285%200%202.332-1.035%202.332-2.307S9.258%202.242%207.974%202.242zm3.534%206.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862%200%20.532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233%200-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88%200-.294.01-.584.03-.863.018-.263.056-.554.112-.867.055-.303.125-.585.207-.838.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4%201.265.564.523.166%201.06.25%201.59.25.534%200%201.07-.084%201.592-.25.51-.164.923-.348%201.266-.565.25-.158.48-.304.682-.435zm-.244-1.18c-.055%200-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41%200-.82-.065-1.228-.196-.408-.13-.74-.276-.993-.437-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374%200-.716.06-1.026.183-.31.12-.572.283-.787.487-.213.203-.404.45-.57.737-.165.288-.297.584-.395.888-.098.303-.18.633-.244.988-.063.355-.106.685-.128.992-.02.306-.032.62-.032.942%200%20.73.224%201.304.672%201.726.448.42%201.043.632%201.785.632h8.044c.743%200%201.34-.21%201.787-.633.447-.42.67-.996.67-1.725%200-.32-.01-.635-.03-.942-.022-.307-.065-.637-.13-.992-.064-.355-.146-.685-.244-.988-.098-.304-.23-.6-.395-.888-.166-.288-.356-.534-.57-.737-.216-.204-.478-.366-.788-.487-.31-.122-.652-.183-1.026-.183z%22%20fill%3D%22%232D88C0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-qualifier-app {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20height%3D%2216%22%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20.st0%7Bfill%3Anone%3Bstroke%3A%234A9ED5%3Bstroke-miterlimit%3A10%3B%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Ccircle%20cx%3D%223%22%20cy%3D%223%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%223%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2213%22%20cy%3D%223%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%223%22%20cy%3D%228%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2213%22%20cy%3D%228%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%223%22%20cy%3D%2213%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%2213%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%2213%22%20cy%3D%2213%22%20r%3D%221.5%22%20class%3D%22st0%22%2F%3E%0A%3C%2Fsvg%3E%0A');
 }
@@ -255,39 +279,37 @@ a[class*=' icon-'] {
 /*
  * Checkbox
  */
-
 .icon-checkbox {
   display: inline-block;
   vertical-align: top;
   padding: 2px;
   box-sizing: border-box;
+}
 
-  &:before {
-    content: ' ';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border: 1px solid @darkBlue;
-    border-radius: 2px;
-    transition: all 0.2s ease;
-  }
+.icon-checkbox:before {
+  content: ' ';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--darkBlue);
+  border-radius: 2px;
+  transition: all 0.2s ease;
 }
 
 .icon-checkbox-checked:before {
-  background-color: @blue;
+  background-color: var(--blue);
   background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M12%204.665c0%20.172-.06.318-.18.438l-5.55%205.55c-.12.12-.266.18-.438.18s-.318-.06-.438-.18L2.18%207.438C2.06%207.317%202%207.17%202%207s.06-.318.18-.44l.878-.876c.12-.12.267-.18.44-.18.17%200%20.317.06.437.18l1.897%201.903%204.233-4.24c.12-.12.266-.18.438-.18s.32.06.44.18l.876.88c.12.12.18.265.18.438z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
-  border-color: @blue;
+  border-color: var(--blue);
+}
 
-  .ie9 & {
-    background-position: -3px 0;
-  }
+.ie9 .icon-checkbox-checked:before {
+  background-position: -3px 0;
 }
 
 .icon-checkbox-checked.icon-checkbox-single:before {
   background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M10%204.698C10%204.312%209.688%204%209.302%204H4.698C4.312%204%204%204.312%204%204.698v4.604c0%20.386.312.698.698.698h4.604c.386%200%20.698-.312.698-.698V4.698z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
 }
 
-// Used for align elements
 .icon-checkbox-invisible {
   visibility: hidden;
 }
@@ -295,7 +317,6 @@ a[class*=' icon-'] {
 /*
  * Radio
  */
-
 .icon-radio {
   position: relative;
   display: inline-block;
@@ -303,28 +324,28 @@ a[class*=' icon-'] {
   width: 14px;
   height: 14px;
   margin: 1px;
-  border: 1px solid #cdcdcd;
+  border: 1px solid var(--gray80);
   border-radius: 12px;
   box-sizing: border-box;
   transition: border-color 0.3s ease;
+}
 
-  &:after {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    display: block;
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-    background-color: @darkBlue;
-    content: '';
-    opacity: 0;
-    transition: opacity 0.3s ease;
-  }
+.icon-radio:after {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--darkBlue);
+  content: '';
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 a:hover > .icon-radio {
-  border-color: @blue;
+  border-color: var(--blue);
 }
 
 .icon-radio.is-checked:after {
@@ -334,87 +355,105 @@ a:hover > .icon-radio {
 /*
  * Common
  */
-
 .icon-list:before {
   content: '\f039';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-bullet-list:before {
   content: '\f03a';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-bulk-change:before {
   content: '\f085';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-arrow-down:before {
   content: '\f0d7';
   position: relative;
   top: -2px;
 }
+
 .icon-arrow-up:before {
   content: '\f0d8';
   position: relative;
   top: -2px;
 }
+
 .icon-arrow-left:before {
   content: '\f0d9';
 }
+
 .icon-arrow-right:before {
   content: '\f0da';
 }
+
 .icon-dropdown:before {
   content: '\f0d7';
   position: relative;
   top: -1px;
 }
+
 .icon-sort-desc:before {
   content: '\f0d7';
   position: relative;
   top: -1px;
 }
+
 .icon-sort-asc:before {
   content: '\f0d8';
   position: relative;
   top: -1px;
 }
+
 .icon-emoticon-smiley:before {
   content: '\f118';
 }
+
 .icon-emoticon-sad:before {
   content: '\f119';
 }
+
 .icon-emoticon-speechless:before {
   content: '\f11a';
 }
+
 .icon-rect-check:before {
   content: '\f046';
 }
+
 .icon-check:before {
   content: '\f00c';
-  color: @green;
-  font-size: @iconFontSize;
+  color: var(--green);
+  font-size: var(--bigFontSize);
 }
+
 .icon-default:before {
   position: relative;
   top: -0.1em;
   content: '\f00c';
 }
+
 .icon-lang:before {
   content: '\f024';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-quality-profile:before {
   content: '\f022';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-tags:before {
   content: '\f02c';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-calendar:before {
   content: '\f073';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
 
 .icon-favorite,
@@ -427,10 +466,12 @@ a:hover > .icon-radio {
   background: no-repeat center center;
   transition: all 0.2s ease !important;
 }
+
 .icon-favorite {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M15.428%205.777c0%20.13-.078.274-.233.428l-3.24%203.16.767%204.465c.006.042.01.102.01.18%200%20.124-.032.23-.095.316-.062.086-.153.13-.272.13-.113%200-.232-.036-.357-.108l-4.01-2.107L3.99%2014.35c-.13.072-.25.107-.357.107-.125%200-.22-.043-.28-.13-.064-.085-.095-.19-.095-.316%200-.037.006-.096.018-.18l.768-4.464-3.25-3.16C.644%206.045.57%205.9.57%205.775c0-.22.167-.356.5-.41l4.482-.652L7.562.652c.112-.244.258-.366.437-.366.177%200%20.323.122.436.366l2.01%204.062%204.48.652c.335.054.5.19.5.41h.002z%22%20fill%3D%22%23F90%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
   transform: rotate(72deg);
 }
+
 .icon-not-favorite {
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M15.428%205.777c0%20.13-.078.274-.233.428l-3.24%203.16.767%204.465c.006.042.01.102.01.18%200%20.124-.032.23-.095.316-.062.086-.153.13-.272.13-.113%200-.232-.036-.357-.108l-4.01-2.107L3.99%2014.35c-.13.072-.25.107-.357.107-.125%200-.22-.043-.28-.13-.064-.085-.095-.19-.095-.316%200-.037.006-.096.018-.18l.768-4.464-3.25-3.16C.644%206.045.57%205.9.57%205.775c0-.22.167-.356.5-.41l4.482-.652L7.562.652c.112-.244.258-.366.437-.366.177%200%20.323.122.436.366l2.01%204.062%204.48.652c.335.054.5.19.5.41h.002z%22%20fill%3D%22%23CDCDCD%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
@@ -440,18 +481,15 @@ a:hover > .icon-radio {
 }
 
 .icon-star path {
-  stroke: #777;
-  stroke-width: sqrt(2);
+  stroke: var(--secondFontColor);
+  stroke-width: 1.41421356;
   stroke-opacity: 1;
   fill-opacity: 0;
   transition: all 0.2s ease;
 }
 
-.icon-star-favorite {
-}
-
 .icon-star-favorite path {
-  fill: rgb(255, 153, 0);
+  fill: #ff9900;
   stroke-opacity: 0;
   fill-opacity: 1;
 }
@@ -460,6 +498,7 @@ a:hover > .icon-radio {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(144deg);
   }
@@ -467,77 +506,94 @@ a:hover > .icon-radio {
 
 .icon-help:before {
   content: '\f059';
-  color: @blue;
-  font-size: @iconFontSize;
+  color: var(--blue);
+  font-size: var(--bigFontSize);
 }
+
 .icon-info:before {
   content: '\f05a';
-  color: @blue;
-  font-size: @iconFontSize;
+  color: var(--blue);
+  font-size: var(--bigFontSize);
 }
+
 .icon-uniF060:before {
   content: '\f060';
 }
+
 .icon-uniF061:before {
   content: '\f061';
 }
+
 .icon-uniF062:before {
   content: '\f062';
 }
+
 .icon-uniF063:before {
   content: '\f063';
 }
+
 .icon-comment:before {
   content: '\f075';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-delete:before {
   content: '\f00d';
-  color: @red;
-  font-size: @iconFontSize;
+  color: var(--red);
+  font-size: var(--bigFontSize);
 }
+
 .icon-close:before {
   content: '\f00d';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-compare:before {
   content: '\f0c5';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-restore:before {
   content: '\f122';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-inheritance:before {
   content: '\f126';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-inheritance-overridden:before {
-  color: @red !important;
+  color: var(--red) !important;
 }
+
 .icon-plus:before {
   content: '\f067';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-move-down:before {
   content: '\f063';
-  color: @darkBlue;
-  font-size: @iconFontSize;
+  color: var(--darkBlue);
+  font-size: var(--bigFontSize);
 }
+
 .icon-move-up:before {
   content: '\f062';
-  color: @darkBlue;
-  font-size: @iconFontSize;
+  color: var(--darkBlue);
+  font-size: var(--bigFontSize);
 }
+
 .icon-move-left:before {
   content: '\f060';
-  color: @darkBlue;
-  font-size: @iconFontSize;
+  color: var(--darkBlue);
+  font-size: var(--bigFontSize);
 }
+
 .icon-move-right:before {
   content: '\f061';
-  color: @darkBlue;
-  font-size: @iconFontSize;
+  color: var(--darkBlue);
+  font-size: var(--bigFontSize);
 }
 
 .icon-scm,
@@ -546,97 +602,118 @@ a:hover > .icon-radio {
 .icon-issue,
 .icon-homepage {
   display: inline-block;
-  width: @iconSmallFontSize;
+  width: 14px;
   margin-top: -1px;
   text-align: center;
 }
+
 .icon-scm:before {
   content: '\f017';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-scm_dev:before {
   content: '\f015';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-ci:before {
   content: '\f021';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-issue:before {
   content: '\f188';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-homepage:before {
   content: '\f016';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
 
 .icon-resizer:before {
   content: '\f142';
-  color: @darkGrey;
-  font-size: @iconFontSize;
+  color: var(--gray80);
+  font-size: var(--bigFontSize);
 }
+
 .icon-expand:before {
   content: '\e60b';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-period:before {
   content: '\f018';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-filter:before {
   content: '\f03a';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-detach:before {
   content: '\f08e';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-chevron-left:before {
   content: '\f104';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-chevron-right:before {
   content: '\f105';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-double-chevron-left:before {
   content: '\f100';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-double-chevron-right:before {
   content: '\f101';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-extension:before {
   content: '\f069';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-home:before {
   content: '\f016';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-component-viewer-filter:before {
   content: '\e60e';
   color: #999;
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-filters:before {
   content: '\f039';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-next:before {
   content: '\f0d7';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-prev:before {
   content: '\f0d8';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-search:before {
   content: '\f002';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-search-new {
   display: inline-block;
   vertical-align: top;
@@ -646,42 +723,51 @@ a:hover > .icon-radio {
   background: no-repeat center center;
   background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2214%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%221.414%22%3E%3Cpath%20d%3D%22M9%206.5c0-.964-.342-1.788-1.027-2.473C7.288%203.342%206.463%203%205.5%203c-.964%200-1.788.342-2.473%201.027C2.342%204.712%202%205.537%202%206.5c0%20.964.342%201.788%201.027%202.473C3.712%209.658%204.537%2010%205.5%2010c.964%200%201.788-.342%202.473-1.027C8.658%208.288%209%207.463%209%206.5zm4%206.5c0%20.27-.1.505-.297.703-.198.198-.432.297-.703.297-.28%200-.516-.1-.703-.297l-2.68-2.672c-.932.647-1.97.97-3.117.97-.745%200-1.457-.145-2.137-.434-.68-.29-1.265-.68-1.758-1.171-.492-.493-.882-1.08-1.17-1.758C.144%207.957%200%207.245%200%206.5c0-.745.145-1.457.434-2.137.29-.68.68-1.265%201.17-1.758.494-.492%201.08-.882%201.76-1.17C4.043%201.144%204.753%201%205.5%201c.745%200%201.457.145%202.137.434.68.29%201.265.68%201.758%201.17.492.494.882%201.08%201.17%201.76.29.68.435%201.39.435%202.136%200%201.146-.323%202.185-.97%203.117l2.68%202.68c.194.193.29.427.29.703z%22%20fill%3D%22%23777%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E');
 }
+
 .icon-edit:before {
   content: '\f040';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-ellipsis-h:before {
   position: relative;
   top: 1px;
   content: '\f141';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-bigger-size:before {
   content: '\f065';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-smaller-size:before {
   content: '\f066';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-minimize:before {
   content: '\f068';
-  font-size: @iconSmallFontSize;
+  font-size: var(--mediumFontSize);
 }
+
 .icon-filter:before {
   content: '\f0b0';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-lock:before {
   content: '\f023';
-  font-size: @iconFontSize;
+  font-size: var(--bigFontSize);
 }
+
 .icon-issues {
   display: inline-block;
   width: 60px;
   height: 60px;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iNjBweCIgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiPiAgICA8ZyBpZD0iTGF5ZXJfMSI+ICAgICAgICA8Zz4gICAgICAgICAgICA8cGF0aCBkPSJNMzAsMS43NzYzNmUtMTVDNDYuNTY4NSwxLjc3NjM2ZS0xNSA2MCwxMy40MzE1IDYwLDMwQzYwLDQ2LjU2ODUgNDYuNTY4NSw2MCAzMCw2MEMxMy40MzE1LDYwIDAsNDYuNTY4NSAwLDMwQzAsMTMuNDMxNSAxMy40MzE1LDEuNzc2MzZlLTE1IDMwLDEuNzc2MzZlLTE1WiIgc3R5bGU9ImZpbGw6dXJsKCN0YWcxKTsiLz4gICAgICAgICAgICA8cGF0aCBkPSJNNDgsNkM0Mi45ODY0LDIuMjMzMiAzNi43NTQyLDEuNzc2MzZlLTE1IDMwLDEuNzc2MzZlLTE1QzIzLjI0NTgsMS43NzYzNmUtMTUgMTcuMDE0MiwyLjIzMzIgMTIsNkwxMiw1NC4wMDA2QzE3LjAxNDIsNTcuNzY2OCAyMy4yNDU4LDYwIDMwLDYwQzM2Ljc1NDIsNjAgNDIuOTg2NCw1Ny43NjY4IDQ4LDU0LjAwMDZaIiBzdHlsZT0iZmlsbDpyZ2IoMjM0LDIzNCwyMzQpO2ZpbGwtcnVsZTpub256ZXJvOyIvPiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Miw5QzQyLDkuNDk1IDQxLjQ2LDkuOSA0MC44LDkuOUwxOS4yLDkuOUMxOC41NCw5LjkgMTgsOS40OTUgMTgsOUMxOCw4LjUwNSAxOC41NCw4LjEgMTkuMiw4LjFMNDAuOCw4LjFDNDEuNDYsOC4xIDQyLDguNTA1IDQyLDlaIiBzdHlsZT0iZmlsbDpyZ2IoMTMyLDEzMiwxMzIpO2ZpbGwtcnVsZTpub256ZXJvOyIvPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy42LDE1QzI3LjYsMTUuNDk1IDI3LjA2LDE1LjkgMjYuNCwxNS45TDE5LjIsMTUuOUMxOC41NCwxNS45IDE4LDE1LjQ5NSAxOCwxNUMxOCwxNC41MDUgMTguNTQsMTQuMSAxOS4yLDE0LjFMMjYuNCwxNC4xQzI3LjA2LDE0LjEgMjcuNiwxNC41MDUgMjcuNiwxNVoiIHN0eWxlPSJmaWxsOnJnYigxMzIsMTMyLDEzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgICAgICAgICAgPHBhdGggZD0iTTQyLDIxQzQyLDIxLjQ5NSA0MS40NiwyMS45IDQwLjgsMjEuOUwxOS4yLDIxLjlDMTguNTQsMjEuOSAxOCwyMS40OTUgMTgsMjFDMTgsMjAuNTA1IDE4LjU0LDIwLjEgMTkuMiwyMC4xTDQwLjgsMjAuMUM0MS40NiwyMC4xIDQyLDIwLjUwNSA0MiwyMVoiIHN0eWxlPSJmaWxsOnJnYigxMzIsMTMyLDEzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgICAgICAgICAgPGc+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOS4yLDM0LjJDMTguODY5NCwzNC4yIDE4LjYsMzMuOTMxMiAxOC42LDMzLjZMMTguNiwyN0MxOC42LDI2LjY2OTQgMTguODY5NCwyNi40IDE5LjIsMjYuNEw0MC44LDI2LjRDNDEuMTMxMiwyNi40IDQxLjQsMjYuNjY5NCA0MS40LDI3TDQxLjQsMzMuNkM0MS40LDMzLjkzMTIgNDEuMTMxMiwzNC4yIDQwLjgsMzQuMloiIHN0eWxlPSJmaWxsOnJnYigyNTMsMjM0LDIzNCk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik00MC44LDI3TDQwLjgsMzMuNkwxOS4yLDMzLjZMMTkuMiwyN000MC44LDI1LjhMMTkuMiwyNS44QzE4LjU0LDI1LjggMTgsMjYuMzQgMTgsMjdMMTgsMzMuNkMxOCwzNC4yNiAxOC41NCwzNC44IDE5LjIsMzQuOEw0MC44LDM0LjhDNDEuNDYsMzQuOCA0MiwzNC4yNiA0MiwzMy42TDQyLDI3QzQyLDI2LjM0IDQxLjQ2LDI1LjggNDAuOCwyNS44WiIgc3R5bGU9ImZpbGw6cmdiKDIyMSw2NCw2NCk7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy42LDM5QzI3LjYsMzkuNDk1IDI3LjA2LDM5LjkgMjYuNCwzOS45TDE5LjIsMzkuOUMxOC41NCwzOS45IDE4LDM5LjQ5NSAxOCwzOUMxOCwzOC41MDUgMTguNTQsMzguMSAxOS4yLDM4LjFMMjYuNCwzOC4xQzI3LjA2LDM4LjEgMjcuNiwzOC41MDUgMjcuNiwzOVoiIHN0eWxlPSJmaWxsOnJnYigxMzIsMTMyLDEzMik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+ICAgICAgICAgICAgPHBhdGggZD0iTTM3LjIsNDVDMzcuMiw0NS40OTUgMzYuNjYsNDUuOSAzNiw0NS45TDE5LjIsNDUuOUMxOC41NCw0NS45IDE4LDQ1LjQ5NSAxOCw0NUMxOCw0NC41MDUgMTguNTQsNDQuMSAxOS4yLDQ0LjFMMzYsNDQuMUMzNi42Niw0NC4xIDM3LjIsNDQuNTA1IDM3LjIsNDVaIiBzdHlsZT0iZmlsbDpyZ2IoMTMyLDEzMiwxMzIpO2ZpbGwtcnVsZTpub256ZXJvOyIvPiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Miw1MUM0Miw1MS40OTUgNDEuNDYsNTEuOSA0MC44LDUxLjlMMTkuMiw1MS45QzE4LjU0LDUxLjkgMTgsNTEuNDk1IDE4LDUxQzE4LDUwLjUwNSAxOC41NCw1MC4xIDE5LjIsNTAuMUw0MC44LDUwLjFDNDEuNDYsNTAuMSA0Miw1MC41MDUgNDIsNTFaIiBzdHlsZT0iZmlsbDpyZ2IoMTMyLDEzMiwxMzIpO2ZpbGwtcnVsZTpub256ZXJvOyIvPiAgICAgICAgPC9nPiAgICA8L2c+ICAgIDxkZWZzPiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJ0YWcxIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMy42NzM5NmUtMTUsNjAuMDAwMywtNjAuMDAwMywzLjY3Mzk2ZS0xNSwyOS45OTk3LDEuNzc2MzZlLTE1KSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDIyOSwyMDksMzQpO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMjE1LDE5NywzMyk7c3RvcC1vcGFjaXR5OjEiLz48L2xpbmVhckdyYWRpZW50PiAgICA8L2RlZnM+PC9zdmc+);
 }
+
 .icon-workspace-doc {
   display: inline-block;
   vertical-align: top;
@@ -691,6 +777,7 @@ a:hover > .icon-radio {
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgOSAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7Ij4gICAgPHBhdGggZD0iTTYuNTcxNDMsNS4xNDI4NkM2LjU3MTQzLDUuMjIwMjQgNi41NDMxNSw1LjI4NzIgNi40ODY2MSw1LjM0Mzc1QzYuNDMwMDYsNS40MDAzIDYuMzYzMSw1LjQyODU3IDYuMjg1NzEsNS40Mjg1N0M2LjIwODMzLDUuNDI4NTcgNi4xNDEzNyw1LjQwMDMgNi4wODQ4Miw1LjM0Mzc1QzYuMDI4MjcsNS4yODcyIDYsNS4yMjAyNCA2LDUuMTQyODZDNiw0Ljg2OTA1IDUuODM5MjksNC42NTc3NCA1LjUxNzg2LDQuNTA4OTNDNS4xOTY0Myw0LjM2MDEyIDQuODgwOTUsNC4yODU3MSA0LjU3MTQzLDQuMjg1NzFDNC40OTQwNSw0LjI4NTcxIDQuNDI3MDgsNC4yNTc0NCA0LjM3MDU0LDQuMjAwODlDNC4zMTM5OSw0LjE0NDM1IDQuMjg1NzEsNC4wNzczOCA0LjI4NTcxLDRDNC4yODU3MSwzLjkyMjYyIDQuMzEzOTksMy44NTU2NSA0LjM3MDU0LDMuNzk5MTFDNC40MjcwOCwzLjc0MjU2IDQuNDk0MDUsMy43MTQyOSA0LjU3MTQzLDMuNzE0MjlDNC44NjkwNSwzLjcxNDI5IDUuMTY1MTgsMy43NjE5IDUuNDU5ODIsMy44NTcxNEM1Ljc1NDQ2LDMuOTUyMzggNi4wMTMzOSw0LjExMzEgNi4yMzY2MSw0LjMzOTI5QzYuNDU5ODIsNC41NjU0OCA2LjU3MTQzLDQuODMzMzMgNi41NzE0Myw1LjE0Mjg2Wk04LDUuMTQyODZDOCw0LjcxNDI5IDcuODk3MzIsNC4zMTU0OCA3LjY5MTk2LDMuOTQ2NDNDNy40ODY2MSwzLjU3NzM4IDcuMjE4NzUsMy4yNzUzIDYuODg4MzksMy4wNDAxOEM2LjU1ODA0LDIuODA1MDYgNi4xOTE5NiwyLjYyMDU0IDUuNzkwMTgsMi40ODY2MUM1LjM4ODM5LDIuMzUyNjggNC45ODIxNCwyLjI4NTcxIDQuNTcxNDMsMi4yODU3MUM0LjE2MDcxLDIuMjg1NzEgMy43NTQ0NiwyLjM1MjY4IDMuMzUyNjgsMi40ODY2MUMyLjk1MDg5LDIuNjIwNTQgMi41ODQ4MiwyLjgwNTA2IDIuMjU0NDYsMy4wNDAxOEMxLjkyNDExLDMuMjc1MyAxLjY1NjI1LDMuNTc3MzggMS40NTA4OSwzLjk0NjQzQzEuMjQ1NTQsNC4zMTU0OCAxLjE0Mjg2LDQuNzE0MjkgMS4xNDI4Niw1LjE0Mjg2QzEuMTQyODYsNS43NDQwNSAxLjM0NTI0LDYuMjc5NzYgMS43NSw2Ljc1QzEuODA5NTIsNi44MTU0OCAxLjkwMDMsNi45MTM2OSAyLjAyMjMyLDcuMDQ0NjRDMi4xNDQzNSw3LjE3NTYgMi4yMzUxMiw3LjI3MzgxIDIuMjk0NjQsNy4zMzkyOUMzLjA1NjU1LDguMjUgMy40NzYxOSw5LjEzNjkgMy41NTM1NywxMEw1LjU4OTI5LDEwQzUuNjY2NjcsOS4xMzY5IDYuMDg2MzEsOC4yNSA2Ljg0ODIxLDcuMzM5MjlDNi45MDc3NCw3LjI3MzgxIDYuOTk4NTEsNy4xNzU2IDcuMTIwNTQsNy4wNDQ2NEM3LjI0MjU2LDYuOTEzNjkgNy4zMzMzMyw2LjgxNTQ4IDcuMzkyODYsNi43NUM3Ljc5NzYyLDYuMjc5NzYgOCw1Ljc0NDA1IDgsNS4xNDI4NlpNOS4xNDI4Niw1LjE0Mjg2QzkuMTQyODYsNi4wNjU0OCA4LjgzNjMxLDYuODYzMSA4LjIyMzIxLDcuNTM1NzFDNy45NTUzNiw3LjgyNzM4IDcuNzMzNjMsOC4wODYzMSA3LjU1ODA0LDguMzEyNUM3LjM4MjQ0LDguNTM4NjkgNy4yMDUzNiw4LjgyMjkyIDcuMDI2NzksOS4xNjUxOEM2Ljg0ODIxLDkuNTA3NDQgNi43NDcwMiw5LjgyNzM4IDYuNzIzMjEsMTAuMTI1QzcuMDAyOTgsMTAuMjkxNyA3LjE0Mjg2LDEwLjUzNTcgNy4xNDI4NiwxMC44NTcxQzcuMTQyODYsMTEuMDc3NCA3LjA2ODQ1LDExLjI2NzkgNi45MTk2NCwxMS40Mjg2QzcuMDY4NDUsMTEuNTg5MyA3LjE0Mjg2LDExLjc3OTggNy4xNDI4NiwxMkM3LjE0Mjg2LDEyLjMwOTUgNy4wMDg5MywxMi41NTA2IDYuNzQxMDcsMTIuNzIzMkM2LjgxODQ1LDEyLjg2MDEgNi44NTcxNCwxMyA2Ljg1NzE0LDEzLjE0MjlDNi44NTcxNCwxMy40MTY3IDYuNzYzMzksMTMuNjI4IDYuNTc1ODksMTMuNzc2OEM2LjM4ODM5LDEzLjkyNTYgNi4xNTc3NCwxNCA1Ljg4MzkzLDE0QzUuNzY0ODgsMTQuMjYxOSA1LjU4NjMxLDE0LjQ3MDIgNS4zNDgyMSwxNC42MjVDNS4xMTAxMiwxNC43Nzk4IDQuODUxMTksMTQuODU3MSA0LjU3MTQzLDE0Ljg1NzFDNC4yOTE2NywxNC44NTcxIDQuMDMyNzQsMTQuNzc5OCAzLjc5NDY0LDE0LjYyNUMzLjU1NjU1LDE0LjQ3MDIgMy4zNzc5OCwxNC4yNjE5IDMuMjU4OTMsMTRDMi45ODUxMiwxNCAyLjc1NDQ2LDEzLjkyNTYgMi41NjY5NiwxMy43NzY4QzIuMzc5NDYsMTMuNjI4IDIuMjg1NzEsMTMuNDE2NyAyLjI4NTcxLDEzLjE0MjlDMi4yODU3MSwxMyAyLjMyNDQsMTIuODYwMSAyLjQwMTc5LDEyLjcyMzJDMi4xMzM5MywxMi41NTA2IDIsMTIuMzA5NSAyLDEyQzIsMTEuNzc5OCAyLjA3NDQsMTEuNTg5MyAyLjIyMzIxLDExLjQyODZDMi4wNzQ0LDExLjI2NzkgMiwxMS4wNzc0IDIsMTAuODU3MUMyLDEwLjUzNTcgMi4xMzk4OCwxMC4yOTE3IDIuNDE5NjQsMTAuMTI1QzIuMzk1ODMsOS44MjczOCAyLjI5NDY0LDkuNTA3NDQgMi4xMTYwNyw5LjE2NTE4QzEuOTM3NSw4LjgyMjkyIDEuNzYwNDIsOC41Mzg2OSAxLjU4NDgyLDguMzEyNUMxLjQwOTIzLDguMDg2MzEgMS4xODc1LDcuODI3MzggMC45MTk2NDMsNy41MzU3MUMwLjMwNjU0OCw2Ljg2MzEgMCw2LjA2NTQ4IDAsNS4xNDI4NkMwLDQuNTUzNTcgMC4xMzI0NCw0LjAwNDQ2IDAuMzk3MzIxLDMuNDk1NTRDMC42NjIyMDIsMi45ODY2MSAxLjAxMDQyLDIuNTYzOTkgMS40NDE5NiwyLjIyNzY4QzEuODczNTEsMS44OTEzNyAyLjM2MTYxLDEuNjI2NDkgMi45MDYyNSwxLjQzMzA0QzMuNDUwODksMS4yMzk1OCA0LjAwNTk1LDEuMTQyODYgNC41NzE0MywxLjE0Mjg2QzUuMTM2OSwxLjE0Mjg2IDUuNjkxOTYsMS4yMzk1OCA2LjIzNjYxLDEuNDMzMDRDNi43ODEyNSwxLjYyNjQ5IDcuMjY5MzUsMS44OTEzNyA3LjcwMDg5LDIuMjI3NjhDOC4xMzI0NCwyLjU2Mzk5IDguNDgwNjUsMi45ODY2MSA4Ljc0NTU0LDMuNDk1NTRDOS4wMTA0Miw0LjAwNDQ2IDkuMTQyODYsNC41NTM1NyA5LjE0Mjg2LDUuMTQyODZaIiBzdHlsZT0iZmlsbDpyZ2IoNDUsMTM1LDE5Mik7ZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9zdmc+);
   background-repeat: no-repeat;
 }
+
 .icon-issue-flow {
   position: relative;
   top: 1px;
@@ -706,32 +793,35 @@ a:hover > .icon-radio {
   position: relative;
   top: -1px;
 }
+
 .icon-pending path {
-  fill: #777;
+  fill: var(--secondFontColor);
   animation: animation-pending 2s linear infinite;
 }
+
 @keyframes animation-pending {
   0% {
-    fill: #777;
+    fill: var(--secondFontColor);
   }
+
   50% {
     fill: #aaa;
   }
+
   100% {
-    fill: #777;
+    fill: var(--secondFontColor);
   }
 }
 
 /*
  * Spinner
  */
-
 .spinner {
   position: relative;
   vertical-align: middle;
   width: 16px;
   height: 16px;
-  border: 2px solid @blue;
+  border: 2px solid var(--blue);
   border-radius: 50%;
   animation: spin 0.75s infinite linear;
 }
@@ -764,12 +854,14 @@ a:hover > .icon-radio {
   display: inline-block;
   box-sizing: border-box;
   border-color: transparent;
-  border-top-color: @blue;
+  border-top-color: var(--blue);
   animation-duration: 1.2s;
 }
+
 .spinner:before {
   transform: rotate(120deg);
 }
+
 .spinner:after {
   transform: rotate(240deg);
 }
@@ -782,6 +874,7 @@ a:hover > .icon-radio {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

server/sonar-web/src/main/less/init/links.less → server/sonar-web/src/main/js/app/styles/init/links.css

@@ -17,70 +17,70 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
-// Base
-
-.link-variant(@baseColor, @hoverColor, @borderColor) {
-  border-bottom: 1px solid @borderColor;
-  color: @baseColor;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: @hoverColor;
-  }
-}
-
 a {
-  .link-variant(@darkBlue, @blue, @lightBlue);
+  border-bottom: 1px solid var(--lightBlue);
+  color: var(--darkBlue);
   cursor: pointer;
   outline: none;
   text-decoration: none;
   transition: all 0.2s ease;
 }
 
+a:hover,
+a:active,
+a:focus {
+  color: var(--blue);
+}
+
 .link-base-color {
-  .link-variant(@baseFontColor, @blue, mix(@baseFontColor, @barBackgroundColor, 20%));
+  border-bottom: 1px solid #d0d0d0;
+  color: var(--baseFontColor);
+}
 
-  &:hover {
-    border-bottom-color: @lightBlue;
-  }
-  &:active,
-  &:focus {
-    border-bottom-color: @lightBlue;
-  }
+.link-base-color:hover,
+.link-base-color:active,
+.link-base-color:focus {
+  color: var(--blue);
 }
 
-.tooltip a {
-  color: @lightBlue;
+.link-base-color:hover {
+  border-bottom-color: var(--lightBlue);
 }
 
-// Misc
+.link-base-color:active,
+.link-base-color:focus {
+  border-bottom-color: var(--lightBlue);
+}
+
+.tooltip a {
+  color: var(--lightBlue);
+}
 
 .link-no-underline {
   border-bottom: none;
 }
+
 .link-underline {
-  border-bottom: 1px solid #cae3f2 !important;
+  border-bottom: 1px solid var(--lightBlue) !important;
 }
 
 .link-with-icon {
   border-bottom: none;
 }
+
 .link-with-icon > span:last-child {
-  border-bottom: 1px solid @lightBlue;
+  border-bottom: 1px solid var(--lightBlue);
 }
 
 .link-checkbox {
   color: inherit;
   border-bottom: none;
-  &:hover,
-  &:active,
-  &:focus {
-    color: inherit;
-  }
+}
+
+.link-checkbox:hover,
+.link-checkbox:active,
+.link-checkbox:focus {
+  color: inherit;
 }
 
 .link-checkbox-control {
@@ -91,24 +91,54 @@ a {
 
 a.active-link,
 .link-active {
-  .link-no-underline;
+  border-bottom: none;
   cursor: default;
 }
 
-// Color
-
 .link-red,
-/* deprecated */ a.text-danger {
-  .link-variant(@red, darken(@red, 10%), lighten(@red, 40%));
+a.text-danger {
+  border-bottom: 1px solid #f8dbde;
+  color: var(--red);
+}
+
+.link-red:hover,
+a.text-danger:hover,
+.link-red:active,
+a.text-danger:active,
+.link-red:focus,
+a.text-danger:focus {
+  color: #af252f;
 }
+
 a.text-muted {
-  .link-variant(@secondFontColor, darken(@secondFontColor, 10%), lighten(@secondFontColor, 40%));
+  border-bottom: 1px solid #dddddd;
+  color: var(--secondFontColor);
 }
+
+a.text-muted:hover,
+a.text-muted:active,
+a.text-muted:focus {
+  color: #5e5e5e;
+}
+
 a.text-warning {
-  .link-variant(@orange, lighten(@orange, 10%), lighten(@orange, 40%));
+  border-bottom: 1px solid #fcebdd;
+  color: var(--orange);
 }
-a.text-info {
+
+a.text-warning:hover,
+a.text-warning:active,
+a.text-warning:focus {
+  color: #f1994f;
 }
+
 a.text-success {
-  .link-variant(@green, darken(@green, 10%), lighten(@green, 40%));
+  border-bottom: 1px solid #77ff77;
+  color: var(--green);
+}
+
+a.text-success:hover,
+a.text-success:active,
+a.text-success:focus {
+  color: #007700;
 }

server/sonar-web/src/main/less/init/lists.less → server/sonar-web/src/main/js/app/styles/init/lists.css

@@ -17,31 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../components/ui";
-
 ol,
 ul {
   padding-left: 0;
   list-style: none;
 }
 
-// Styled lists
-
 .list-styled {
   margin-bottom: 10px;
   padding-left: 40px;
+}
 
-  ul& {
-    list-style: disc;
-  }
-  ol& {
-    list-style: decimal;
-  }
+ul.list-styled {
+  list-style: disc;
 }
 
-// Inline lists
+ol.list-styled {
+  list-style: decimal;
+}
 
 .list-inline {
   padding-left: 0;
@@ -56,34 +49,31 @@ ul {
   padding-left: 5px;
 }
 
-// Spaced list
 .list-spaced {
   margin-bottom: 10px;
   list-style: none;
+}
 
-  & > li {
-    margin-top: 10px;
-  }
+.list-spaced > li {
+  margin-top: 10px;
 }
 
 .list-item-checkable-link {
   cursor: pointer;
+}
 
-  &:focus {
-    outline: none;
-  }
-
-  &[disabled] {
-    opacity: 0.7;
+.list-item-checkable-link:focus {
+  outline: none;
+}
 
-    a::before {
-      background-color: @darkGrey;
-      border-color: @darkGrey;
-    }
-  }
+.list-item-checkable-link[disabled] {
+  opacity: 0.7;
 }
 
-// Definition lists
+.list-item-checkable-link[disabled] a::before {
+  background-color: var(--gray80);
+  border-color: var(--gray80);
+}
 
 dl {
   margin-top: 0;

server/sonar-web/src/main/less/init/misc.less → server/sonar-web/src/main/js/app/styles/init/misc.css

@@ -17,16 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../components/ui";
-
 .vertical-top {
   vertical-align: top;
 }
+
 .vertical-bottom {
   vertical-align: bottom;
 }
+
 .vertical-middle {
   vertical-align: middle;
 }
@@ -34,6 +32,7 @@
 .nowrap {
   white-space: nowrap;
 }
+
 table.nowrap td,
 td.nowrap,
 th.nowrap {
@@ -46,23 +45,26 @@ th.nowrap {
 }
 
 .note {
-  color: @secondFontColor;
-  font-size: @smallFontSize;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
 
-  a {
-    color: @secondFontColor;
-  }
+.note a {
+  color: var(--secondFontColor);
 }
 
 .spacer-left {
   margin-left: 8px;
 }
+
 .spacer-right {
   margin-right: 8px;
 }
+
 .spacer-bottom {
   margin-bottom: 8px;
 }
+
 .spacer-top {
   margin-top: 8px;
 }
@@ -70,12 +72,15 @@ th.nowrap {
 .big-spacer-left {
   margin-left: 16px;
 }
+
 .big-spacer-right {
   margin-right: 16px;
 }
+
 .big-spacer-bottom {
   margin-bottom: 16px;
 }
+
 .big-spacer-top {
   margin-top: 16px;
 }
@@ -83,6 +88,7 @@ th.nowrap {
 .huge-spacer-top {
   margin-top: 40px;
 }
+
 .huge-spacer-left {
   margin-left: 40px;
 }
@@ -90,12 +96,15 @@ th.nowrap {
 .little-spacer-left {
   margin-left: 4px;
 }
+
 .little-spacer-right {
   margin-right: 4px;
 }
+
 .little-spacer-bottom {
   margin-bottom: 4px;
 }
+
 .little-spacer-top {
   margin-top: 4px;
 }
@@ -103,6 +112,7 @@ th.nowrap {
 td.little-spacer-left {
   padding-left: 4px;
 }
+
 td.little-spacer-right {
   padding-right: 4px;
 }
@@ -110,12 +120,15 @@ td.little-spacer-right {
 td.spacer-left {
   padding-left: 8px;
 }
+
 td.spacer-right {
   padding-right: 8px;
 }
+
 td.spacer-bottom {
   padding-bottom: 8px;
 }
+
 td.spacer-top {
   padding-top: 8px;
 }
@@ -123,12 +136,15 @@ td.spacer-top {
 td.big-spacer-left {
   padding-left: 16px;
 }
+
 td.big-spacer-right {
   padding-right: 16px;
 }
+
 td.big-spacer-bottom {
   padding-bottom: 16px;
 }
+
 td.big-spacer-top {
   padding-top: 16px;
 }
@@ -136,24 +152,29 @@ td.big-spacer-top {
 .pull-left {
   float: left !important;
 }
+
 .pull-right {
   float: right !important;
 }
 
 .bordered {
-  border: 1px solid @barBorderColor;
+  border: 1px solid var(--barBorderColor);
 }
+
 .bordered-left {
-  border-left: 1px solid @barBorderColor;
+  border-left: 1px solid var(--barBorderColor);
 }
+
 .bordered-right {
-  border-right: 1px solid @barBorderColor;
+  border-right: 1px solid var(--barBorderColor);
 }
+
 .bordered-bottom {
-  border-bottom: 1px solid @barBorderColor;
+  border-bottom: 1px solid var(--barBorderColor);
 }
+
 .bordered-top {
-  border-top: 1px solid @barBorderColor;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .overflow-hidden {
@@ -163,33 +184,43 @@ td.big-spacer-top {
 .width-100 {
   width: 100%;
 }
+
 .width-80 {
   width: 80%;
 }
+
 .width-60 {
   width: 60%;
 }
+
 .width-55 {
   width: 55%;
 }
+
 .width-50 {
   width: 50%;
 }
+
 .width-40 {
   width: 40%;
 }
+
 .width-30 {
   width: 30%;
 }
+
 .width-25 {
   width: 25%;
 }
+
 .width-20 {
   width: 20%;
 }
+
 .width-15 {
   width: 15%;
 }
+
 .width-10 {
   width: 10%;
 }
@@ -200,9 +231,11 @@ td.big-spacer-top {
 .abs-width-240 {
   width: 240px;
 }
+
 .abs-width-300 {
   width: 300px;
 }
+
 .abs-width-400 {
   width: 400px;
 }
@@ -210,15 +243,16 @@ td.big-spacer-top {
 .justify {
   margin-bottom: -1em;
   text-align: justify;
+}
+
+.justify > .ib {
+  display: inline-block;
+}
 
-  & > .ib {
-    display: inline-block;
-  }
-  &:after {
-    display: inline-block;
-    width: 100%;
-    content: ' ';
-  }
+.justify:after {
+  display: inline-block;
+  width: 100%;
+  content: ' ';
 }
 
 .first-letter-uppercase::first-letter {
@@ -262,11 +296,11 @@ td.big-spacer-top {
 .slash-separator {
   margin-left: 5px;
   margin-right: 5px;
+}
 
-  &:after {
-    content: '/';
-    color: rgba(68, 68, 68, 0.3);
-  }
+.slash-separator:after {
+  content: '/';
+  color: rgba(68, 68, 68, 0.3);
 }
 
 .capitalize {
@@ -282,25 +316,27 @@ td.big-spacer-top {
   outline: none;
 }
 
-// Background Color
-
-.bg-variant(@color, @fontColor: #fff) {
-  background-color: @color;
-  color: @fontColor;
-}
-
 .bg-danger {
-  .bg-variant(@red);
+  background-color: var(--red);
+  color: #fff;
 }
+
 .bg-warning {
-  .bg-variant(@orange);
+  background-color: var(--orange);
+  color: #fff;
 }
+
 .bg-info {
-  .bg-variant(@blue);
+  background-color: var(--blue);
+  color: #fff;
 }
+
 .bg-success {
-  .bg-variant(@green);
+  background-color: var(--green);
+  color: #fff;
 }
+
 .bg-muted {
-  .bg-variant(@barBackgroundColor, inherit);
+  background-color: var(--barBackgroundColor);
+  color: inherit;
 }

server/sonar-web/src/main/less/init/tables.less → server/sonar-web/src/main/js/app/styles/init/tables.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -28,7 +25,6 @@ table {
 .table > thead > tr > th {
   border-top: 0 none;
   font-weight: bold;
-  vertical-align: bottom;
   line-height: 16px;
   padding: 4px 5px;
   vertical-align: bottom;
@@ -42,12 +38,12 @@ table {
 
 .table > tfoot > tr > td {
   font-size: 93%;
-  color: #777;
+  color: var(--secondFontColor);
   padding: 4px 5px;
 }
 
 .table > tfoot > tr > td a {
-  color: #777;
+  color: var(--secondFontColor);
 }
 
 .odd {
@@ -65,7 +61,7 @@ table {
 .even.selected span:not(.rating),
 .odd.selected span:not(.rating) {
   background-color: #d9edf7;
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 table.data,
@@ -83,19 +79,19 @@ table.data > thead > tr > th {
   vertical-align: top;
   line-height: 18px;
   padding: 8px 10px;
-  border-bottom: 1px solid @barBorderColor;
+  border-bottom: 1px solid var(--barBorderColor);
   font-weight: 600;
+}
 
-  & > .small {
-    display: block;
-    line-height: 1.4;
-    font-weight: 400;
-  }
+table.data > thead > tr > th > .small {
+  display: block;
+  line-height: 1.4;
+  font-weight: 400;
 }
 
 table.data > tfoot > tr > td {
   font-size: 93%;
-  color: #777;
+  color: var(--secondFontColor);
   padding: 5px;
 }
 
@@ -103,10 +99,10 @@ table.data > tbody > tr > td {
   padding: 8px 10px;
   vertical-align: text-top;
   line-height: 16px;
+}
 
-  &.text-middle {
-    vertical-align: middle;
-  }
+table.data > tbody > tr > td.text-middle {
+  vertical-align: middle;
 }
 
 table.data td.small,
@@ -115,13 +111,12 @@ table.data th.small {
   white-space: nowrap;
 }
 
-table.data.zebra {
-  &:not(.zebra-inversed) > tbody > tr:nth-child(even) {
-    background-color: #f5f5f5;
-  }
-  &.zebra-inversed > tbody > tr:nth-child(odd) {
-    background-color: #f5f5f5;
-  }
+table.data.zebra:not(.zebra-inversed) > tbody > tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+
+table.data.zebra.zebra-inversed > tbody > tr:nth-child(odd) {
+  background-color: #f5f5f5;
 }
 
 table.data.zebra-hover > tbody > tr:hover {
@@ -137,28 +132,24 @@ table.data.condensed > tbody > tr > td {
   padding-bottom: 5px;
 }
 
-table.data.no-outer-padding > thead > tr {
-  > th:first-child {
-    padding-left: 0;
-  }
+table.data.no-outer-padding > thead > tr > th:first-child {
+  padding-left: 0;
+}
 
-  > th:last-child {
-    padding-right: 0;
-  }
+table.data.no-outer-padding > thead > tr > th:last-child {
+  padding-right: 0;
 }
 
-table.data.no-outer-padding > tbody > tr {
-  > td:first-child {
-    padding-left: 0;
-  }
+table.data.no-outer-padding > tbody > tr > td:first-child {
+  padding-left: 0;
+}
 
-  > td:last-child {
-    padding-right: 0;
-  }
+table.data.no-outer-padding > tbody > tr > td:last-child {
+  padding-right: 0;
 }
 
 .data thead tr.total {
-  background-color: #efefef;
+  background-color: var(--gray94);
   font-weight: normal;
   border: 1px solid #ddd;
 }
@@ -174,7 +165,7 @@ table.data.no-outer-padding > tbody > tr {
 }
 
 .data tr.highlight {
-  background-color: @lightBlue;
+  background-color: var(--lightBlue);
 }
 
 .data input,
@@ -184,7 +175,7 @@ table.data.no-outer-padding > tbody > tr {
 }
 
 .hoverable:hover {
-  background-color: #cae3f2;
+  background-color: var(--lightBlue);
 }
 
 .hoverable:hover a {
@@ -233,7 +224,7 @@ td.sep {
 
 .formError {
   display: inline-block;
-  background-color: #ed7d20;
+  background-color: var(--orange);
   color: #000;
   padding: 0 5px;
 }

server/sonar-web/src/main/less/init/type.less → server/sonar-web/src/main/js/app/styles/init/type.css

@@ -17,77 +17,125 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../mixins";
-@import (reference) "../components/ui";
-
-// Top Level
-
 html,
 body {
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 body {
-  font-family: @baseFontFamily;
-  font-size: @baseFontSize;
-  line-height: @baseLineHeight;
-}
-
-// Headers
-
-.header(@h) {
-  line-height: @formControlHeight;
-  color: ~'@{@{h}-font-color}';
-  font-size: ~'@{@{h}-font-size}';
-  font-weight: ~'@{@{h}-font-weight}';
-
-  img,
-  svg {
-    vertical-align: middle;
-    transform: translateY(-1px);
-  }
+  font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+  font-size: var(--baseFontSize);
+  line-height: 1.23076923;
 }
 
 h1,
 .h1 {
-  .header(h1);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: var(--bigFontSize);
+  font-weight: 400;
+}
+
+h1 img,
+.h1 img,
+h1 svg,
+.h1 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
 }
+
 h2,
 .h2 {
-  .header(h2);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: 15px;
+  font-weight: 400;
+}
+
+h2 img,
+.h2 img,
+h2 svg,
+.h2 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
 }
+
 h3,
 .h3 {
-  .header(h3);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: var(--mediumFontSize);
+  font-weight: 600;
 }
+
+h3 img,
+.h3 img,
+h3 svg,
+.h3 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
 h4,
 .h4 {
-  .header(h4);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: var(--baseFontSize);
+  font-weight: 600;
 }
+
+h4 img,
+.h4 img,
+h4 svg,
+.h4 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
 h5,
 .h5 {
-  .header(h5);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: var(--baseFontSize);
+  font-weight: 600;
 }
+
+h5 img,
+.h5 img,
+h5 svg,
+.h5 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
 h6,
 .h6 {
-  .header(h6);
+  line-height: var(--controlHeight);
+  color: var(--baseFontColor);
+  font-size: var(--baseFontSize);
+  font-weight: 600;
 }
 
-// Superset & Subset
+h6 img,
+.h6 img,
+h6 svg,
+.h6 svg {
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
 
 sup {
   vertical-align: text-top;
 }
+
 sub {
   vertical-align: text-bottom;
 }
 
-// Emphasising
-
 em {
   font-style: italic;
 }
+
 strong {
   font-weight: 600;
 }
@@ -102,46 +150,43 @@ mark {
   font-weight: 300;
 }
 
-// Quotes
-
 blockquote {
-  border-left: 3px solid @barBorderColor;
+  border-left: 3px solid var(--barBorderColor);
   padding: 0 8px;
   line-height: 1.5;
 }
 
 blockquote cite {
   line-height: 1.5;
-  color: @secondFontColor;
-  font-size: @smallFontSize;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }
 
-// Size
-
 small,
 .small {
-  font-size: (100% * (@smallFontSize / @baseFontSize));
+  font-size: 92.30769231%;
 }
 
 .big {
-  font-size: (100% * (@bigFontSize / @baseFontSize));
+  font-size: 123.07692308%;
 }
 
 .zero-font-size {
   font-size: 0 !important;
 }
 
-// Alignment
-
 .text-left {
   text-align: left;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-justify {
   text-align: justify;
 }
@@ -149,21 +194,23 @@ small,
 .text-top {
   vertical-align: top !important;
 }
+
 .text-middle {
   vertical-align: middle !important;
 }
+
 .text-bottom {
   vertical-align: bottom !important;
 }
+
 .text-text-top {
   vertical-align: text-top !important;
 }
+
 .text-text-bottom {
   vertical-align: text-bottom !important;
 }
 
-// Overflow
-
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -173,17 +220,19 @@ small,
 .text-limited {
   display: inline-block;
   max-width: 16vw;
-  .text-ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-// Transformation
-
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-no-transform {
   text-transform: none;
 }
@@ -192,34 +241,32 @@ small,
   font-weight: normal;
 }
 
-// Color
-
-.text-emphasis-variant(@color) {
-  color: @color;
-}
 .text-muted {
-  .text-emphasis-variant(@secondFontColor);
+  color: var(--secondFontColor);
 }
+
 .text-muted-2 {
-  .text-emphasis-variant(@middleGrey);
+  color: var(--gray71);
 }
+
 .text-danger {
-  .text-emphasis-variant(@red);
+  color: var(--red);
 }
+
 .text-warning {
-  .text-emphasis-variant(@orange);
+  color: var(--orange);
 }
+
 .text-info {
-  .text-emphasis-variant(@blue);
+  color: var(--blue);
 }
+
 .text-success {
-  .text-emphasis-variant(@green);
+  color: var(--green);
 }
 
-// Font
-
 .monospaced {
-  line-height: @monoLineHeight;
-  font-family: @monoFontFamily;
-  font-size: @monoFontSize;
+  line-height: 18px;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
 }

server/sonar-web/src/main/less/jquery-ui.less → server/sonar-web/src/main/js/app/styles/jquery-ui.css

@@ -17,16 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import "variables";
-
 /*! jQuery UI - v1.10.3 - 2013-06-18
 * http://jqueryui.com
 * Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.button.css, jquery.ui.dialog.css
 * Copyright 2013 jQuery Foundation and other contributors Licensed MIT */
-
 /* Layout helpers
 ----------------------------------*/
-
 /* SONAR */
 .no-close .ui-dialog-titlebar-close {
   display: none;
@@ -49,7 +45,7 @@
   margin: -5px 0 0 -5px;
   padding: 5px;
   background: #000000 50% 50% repeat-x;
-  opacity: .20;
+  opacity: 0.2;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -61,14 +57,14 @@
   width: 300px;
   overflow: hidden;
   box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
-  background-color: #FFF
+  background-color: #fff;
 }
 
 /* /SONAR */
-
 .ui-helper-hidden {
   display: none;
 }
+
 .ui-helper-hidden-accessible {
   border: 0;
   clip: rect(0 0 0 0);
@@ -79,6 +75,7 @@
   position: absolute;
   width: 1px;
 }
+
 .ui-helper-reset {
   margin: 0;
   padding: 0;
@@ -89,18 +86,23 @@
   font-size: 100%;
   list-style: none;
 }
+
 .ui-helper-clearfix:before,
 .ui-helper-clearfix:after {
-  content: "";
+  content: '';
   display: table;
   border-collapse: collapse;
 }
+
 .ui-helper-clearfix:after {
   clear: both;
 }
+
 .ui-helper-clearfix {
-  min-height: 0; /* support: IE7 */
+  min-height: 0;
+  /* support: IE7 */
 }
+
 .ui-helper-zfix {
   width: 100%;
   height: 100%;
@@ -114,17 +116,14 @@
   z-index: 1000;
 }
 
-
 /* Interaction Cues
 ----------------------------------*/
 .ui-state-disabled {
   cursor: default !important;
 }
 
-
 /* Icons
 ----------------------------------*/
-
 /* states and images */
 .ui-icon {
   display: block;
@@ -133,10 +132,8 @@
   background-repeat: no-repeat;
 }
 
-
 /* Misc visuals
 ----------------------------------*/
-
 /* Overlays */
 .ui-widget-overlay {
   position: fixed;
@@ -153,15 +150,18 @@
 .ui-resizable {
   position: relative;
 }
+
 .ui-resizable-handle {
   position: absolute;
   font-size: 0.1px;
   display: block;
 }
+
 .ui-resizable-disabled .ui-resizable-handle,
 .ui-resizable-autohide .ui-resizable-handle {
   display: none;
 }
+
 .ui-resizable-n {
   cursor: n-resize;
   height: 7px;
@@ -169,6 +169,7 @@
   top: -5px;
   left: 0;
 }
+
 .ui-resizable-s {
   cursor: s-resize;
   height: 7px;
@@ -176,6 +177,7 @@
   bottom: -5px;
   left: 0;
 }
+
 .ui-resizable-e {
   cursor: e-resize;
   width: 7px;
@@ -183,6 +185,7 @@
   top: 0;
   height: 100%;
 }
+
 .ui-resizable-w {
   cursor: w-resize;
   width: 7px;
@@ -190,6 +193,7 @@
   top: 0;
   height: 100%;
 }
+
 .ui-resizable-se {
   cursor: se-resize;
   width: 12px;
@@ -197,6 +201,7 @@
   right: 1px;
   bottom: 1px;
 }
+
 .ui-resizable-sw {
   cursor: sw-resize;
   width: 9px;
@@ -204,6 +209,7 @@
   left: -5px;
   bottom: -5px;
 }
+
 .ui-resizable-nw {
   cursor: nw-resize;
   width: 9px;
@@ -211,6 +217,7 @@
   left: -5px;
   top: -5px;
 }
+
 .ui-resizable-ne {
   cursor: ne-resize;
   width: 9px;
@@ -218,17 +225,20 @@
   right: -5px;
   top: -5px;
 }
+
 .ui-button {
   display: inline-block;
   position: relative;
   padding: 0;
   line-height: normal;
-  margin-right: .1em;
+  margin-right: 0.1em;
   cursor: pointer;
   vertical-align: middle;
   text-align: center;
-  overflow: visible; /* removes extra width in IE */
+  overflow: visible;
+  /* removes extra width in IE */
 }
+
 .ui-button,
 .ui-button:link,
 .ui-button:visited,
@@ -236,17 +246,21 @@
 .ui-button:active {
   text-decoration: none;
 }
+
 /* to make room for the icon, a width needs to be set here */
 .ui-button-icon-only {
   width: 2.2em;
 }
+
 /* button elements seem to need a little more width */
 button.ui-button-icon-only {
   width: 2.4em;
 }
+
 .ui-button-icons-only {
   width: 3.4em;
 }
+
 button.ui-button-icons-only {
   width: 3.7em;
 }
@@ -256,29 +270,35 @@ button.ui-button-icons-only {
   display: block;
   line-height: normal;
 }
+
 .ui-button-text-only .ui-button-text {
-  padding: .4em 1em;
+  padding: 0.4em 1em;
 }
+
 .ui-button-icon-only .ui-button-text,
 .ui-button-icons-only .ui-button-text {
-  padding: .4em;
+  padding: 0.4em;
   text-indent: -9999999px;
 }
+
 .ui-button-text-icon-primary .ui-button-text,
 .ui-button-text-icons .ui-button-text {
-  padding: .4em 1em .4em 2.1em;
+  padding: 0.4em 1em 0.4em 2.1em;
 }
+
 .ui-button-text-icon-secondary .ui-button-text,
 .ui-button-text-icons .ui-button-text {
-  padding: .4em 2.1em .4em 1em;
+  padding: 0.4em 2.1em 0.4em 1em;
 }
+
 .ui-button-text-icons .ui-button-text {
   padding-left: 2.1em;
   padding-right: 2.1em;
 }
+
 /* no icon support for input elements, provide padding by default */
 input.ui-button {
-  padding: .4em 1em;
+  padding: 0.4em 1em;
 }
 
 /* button icon element(s) */
@@ -291,28 +311,32 @@ input.ui-button {
   top: 50%;
   margin-top: -8px;
 }
+
 .ui-button-icon-only .ui-icon {
   left: 50%;
   margin-left: -8px;
 }
+
 .ui-button-text-icon-primary .ui-button-icon-primary,
 .ui-button-text-icons .ui-button-icon-primary,
 .ui-button-icons-only .ui-button-icon-primary {
-  left: .5em;
+  left: 0.5em;
 }
+
 .ui-button-text-icon-secondary .ui-button-icon-secondary,
 .ui-button-text-icons .ui-button-icon-secondary,
 .ui-button-icons-only .ui-button-icon-secondary {
-  right: .5em;
+  right: 0.5em;
 }
 
 /* button sets */
 .ui-buttonset {
   margin-right: 7px;
 }
+
 .ui-buttonset .ui-button {
   margin-left: 0;
-  margin-right: -.3em;
+  margin-right: -0.3em;
 }
 
 /* workarounds */
@@ -322,6 +346,7 @@ button.ui-button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
+
 .ui-dialog {
   position: absolute;
   top: 0;
@@ -331,11 +356,13 @@ button.ui-button::-moz-focus-inner {
   */
   outline: 0;
 }
+
 /* sonar
 .ui-dialog .ui-dialog-titlebar {
   padding: .4em 1em;
   position: relative;
 }
+
 .ui-dialog .ui-dialog-title {
   float: left;
   margin: .1em 0;
@@ -344,6 +371,7 @@ button.ui-button::-moz-focus-inner {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .ui-dialog .ui-dialog-titlebar-close {
   position: absolute;
   right: .3em;
@@ -353,6 +381,7 @@ button.ui-button::-moz-focus-inner {
   padding: 1px;
   height: 20px;
 }
+
 */
 .ui-dialog .ui-dialog-content {
   position: relative;
@@ -363,20 +392,24 @@ button.ui-button::-moz-focus-inner {
   background: none;
   overflow: auto;
 }
+
 .ui-dialog .ui-dialog-buttonpane {
   text-align: left;
   border-width: 1px 0 0 0;
   background-image: none;
-  margin-top: .5em;
-  padding: .3em 1em .5em .4em;
+  margin-top: 0.5em;
+  padding: 0.3em 1em 0.5em 0.4em;
 }
+
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   float: right;
 }
+
 .ui-dialog .ui-dialog-buttonpane button {
-  margin: .5em .4em .5em 0;
+  margin: 0.5em 0.4em 0.5em 0;
   cursor: pointer;
 }
+
 .ui-dialog .ui-resizable-se {
   width: 12px;
   height: 12px;
@@ -384,12 +417,11 @@ button.ui-button::-moz-focus-inner {
   bottom: -5px;
   background-position: 16px 16px;
 }
+
 .ui-draggable .ui-dialog-titlebar {
   cursor: move;
 }
 
-
-
 .ui-datepicker {
   width: 17em;
   padding: 5px 5px 0;
@@ -397,118 +429,150 @@ button.ui-button::-moz-focus-inner {
   background-color: #fff;
   border: 1px solid #e1e1e1;
 }
+
 .ui-datepicker .ui-datepicker-header {
   position: relative;
-  padding: .2em 0;
-  color: @baseFontColor;
+  padding: 0.2em 0;
+  color: var(--baseFontColor);
 }
+
 .ui-datepicker .ui-widget-header a {
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
+
 .ui-datepicker .ui-datepicker-prev,
 .ui-datepicker .ui-datepicker-next {
   position: absolute;
   top: 7px;
 }
+
 .ui-datepicker .ui-datepicker-prev {
   left: 2px;
 }
+
 .ui-datepicker .ui-datepicker-next {
   right: 2px;
 }
+
 .ui-datepicker .ui-datepicker-title {
   margin: 0 48px;
   line-height: 1.8em;
-  color: #444;
+  color: var(--baseFontColor);
   text-align: center;
 }
+
 .ui-datepicker .ui-datepicker-title select {
   font-size: 1em;
   margin: 1px 0;
 }
+
 .ui-datepicker select.ui-datepicker-month,
 .ui-datepicker select.ui-datepicker-year {
   width: 49%;
 }
+
 .ui-datepicker table {
   width: 100%;
-  font-size: .9em;
+  font-size: 0.9em;
   border-collapse: collapse;
-  margin: 0 0 .4em;
+  margin: 0 0 0.4em;
 }
+
 .ui-datepicker th {
-  padding: .7em .3em;
+  padding: 0.7em 0.3em;
   text-align: center;
   font-weight: bold;
   border: 0;
 }
+
 .ui-datepicker td {
   border: 0;
   padding: 1px;
 }
+
 .ui-datepicker td span,
 .ui-datepicker td a {
   display: block;
-  padding: .2em;
+  padding: 0.2em;
   text-align: right;
   text-decoration: none;
 }
+
 .ui-datepicker .ui-datepicker-buttonpane {
   background-image: none;
-  margin: .7em 0 0 0;
-  padding: 0 .2em;
+  margin: 0.7em 0 0 0;
+  padding: 0 0.2em;
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
 }
+
 .ui-datepicker .ui-datepicker-buttonpane button {
   float: right;
-  margin: .5em .2em .4em;
+  margin: 0.5em 0.2em 0.4em;
   cursor: pointer;
-  padding: .2em .6em .3em .6em;
+  padding: 0.2em 0.6em 0.3em 0.6em;
   width: auto;
   overflow: visible;
 }
+
 .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
   float: left;
 }
 
-.ui-datepicker-today { background-color: @contextBackground; }
-.ui-datepicker-current-day { background-color: @highlighted; }
-.ui-datepicker-current-day a { color: #fff; }
+.ui-datepicker-today {
+  background-color: #eee1f8;
+}
+
+.ui-datepicker-current-day {
+  background-color: var(--blue);
+}
+
+.ui-datepicker-current-day a {
+  color: #fff;
+}
 
 /* with multiple calendars */
 .ui-datepicker.ui-datepicker-multi {
   width: auto;
 }
+
 .ui-datepicker-multi .ui-datepicker-group {
   float: left;
 }
+
 .ui-datepicker-multi .ui-datepicker-group table {
   width: 95%;
-  margin: 0 auto .4em;
+  margin: 0 auto 0.4em;
 }
+
 .ui-datepicker-multi-2 .ui-datepicker-group {
   width: 50%;
 }
+
 .ui-datepicker-multi-3 .ui-datepicker-group {
   width: 33.3%;
 }
+
 .ui-datepicker-multi-4 .ui-datepicker-group {
   width: 25%;
 }
+
 .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
 .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
   border-left-width: 0;
 }
+
 .ui-datepicker-multi .ui-datepicker-buttonpane {
   clear: left;
 }
+
 .ui-datepicker-row-break {
   clear: both;
   width: 100%;
   font-size: 0;
 }
+
 .ui-datepicker .ui-icon {
   text-indent: 0;
 }
@@ -517,32 +581,40 @@ button.ui-button::-moz-focus-inner {
 .ui-datepicker-rtl {
   direction: rtl;
 }
+
 .ui-datepicker-rtl .ui-datepicker-prev {
   right: 2px;
   left: auto;
 }
+
 .ui-datepicker-rtl .ui-datepicker-next {
   left: 2px;
   right: auto;
 }
+
 .ui-datepicker-rtl .ui-datepicker-prev:hover {
   right: 1px;
   left: auto;
 }
+
 .ui-datepicker-rtl .ui-datepicker-next:hover {
   left: 1px;
   right: auto;
 }
+
 .ui-datepicker-rtl .ui-datepicker-buttonpane {
   clear: right;
 }
+
 .ui-datepicker-rtl .ui-datepicker-buttonpane button {
   float: left;
 }
+
 .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
 .ui-datepicker-rtl .ui-datepicker-group {
   float: right;
 }
+
 .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
 .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
   border-right-width: 0;

server/sonar-web/src/main/less/mixins.less → server/sonar-web/src/main/js/app/styles/mixins.css

@@ -17,9 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "variables";
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
 
-.clearfix {
-  &:before, &:after { display: table; content: ""; line-height: 0; }
-  &:after { clear: both; }
+.clearfix:after {
+  clear: both;
 }

server/sonar-web/src/main/less/print.less → server/sonar-web/src/main/js/app/styles/print.css

@@ -17,22 +17,18 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "mixins";
-@import (reference) "variables";
-@import (reference) "init/links";
-
 @media print {
   .noprint {
     display: none !important;
   }
 
   a {
-    color: @baseFontColor;
-    .link-no-underline;
+    color: var(--baseFontColor);
+    border-bottom: none;
   }
 
   .page-footer {
-    .noprint;
+    display: none !important;
   }
 
   .dashboard-page,
@@ -40,7 +36,6 @@
     background-color: #fff;
   }
 
-  // see https://github.com/ariya/phantomjs/issues/10927
   .widget thead,
   .widget tfoot {
     display: table-row-group;

server/sonar-web/src/main/less/select2-sonar.less → server/sonar-web/src/main/js/app/styles/select2-sonar.css

@@ -17,25 +17,18 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "mixins";
-@import (reference) "variables";
-
-@imagesPath: '../images/select2.png';
-@imagesPath2x: '../images/select2x2.png';
-@spinnerPath: '../images/loading.gif';
-
 .select2-container {
   vertical-align: middle;
 }
 
 .select2-container .select2-choice {
-  height: @formControlHeight;
-  line-height: @formControlHeight - 2px;
-  border-color: @darkGrey;
+  height: var(--controlHeight);
+  line-height: 22px;
+  border-color: var(--gray80);
   border-radius: 2px;
   box-sizing: border-box;
   background: #fff;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   text-align: left;
 }
 
@@ -71,7 +64,7 @@
 
 .select2-container-active .select2-choice,
 .select2-container-active .select2-choices {
-  border-color: @highlighted;
+  border-color: var(--blue);
   box-shadow: none;
 }
 
@@ -80,24 +73,24 @@
 }
 
 .select2-drop {
-  z-index: @select2-drop-z-index;
-  border-color: @darkGrey;
+  z-index: var(--dropdownMenuZIndex);
+  border-color: var(--gray80);
   border-radius: 0;
 }
 
 .select2-drop-active {
-  border-color: @highlighted;
+  border-color: var(--blue);
 }
 
 .select2-dropdown-open.select2-drop-above .select2-choice,
 .select2-dropdown-open.select2-drop-above .select2-choices {
-  border-color: @highlighted;
+  border-color: var(--blue);
   border-radius: 0;
   background: #fff;
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-color: @highlighted;
+  border-color: var(--blue);
   border-radius: 0;
 }
 
@@ -108,15 +101,14 @@
 .select2-results {
   margin: 0;
   padding: 5px 0;
-  border-top: 1px solid @darkGrey;
+  border-top: 1px solid var(--gray80);
 }
 
 .select2-results .select2-result-label {
   height: 20px;
   line-height: 20px;
   padding: 0 8px;
-  color: @baseFontColor;
-
+  color: var(--baseFontColor);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -133,11 +125,11 @@
 
 .select2-results .select2-highlighted {
   background: transparent;
-  color: @baseFontColor;
+  color: var(--baseFontColor);
 }
 
 .select2-results .select2-highlighted .select2-result-label {
-  background: darken(@grey, 5%);
+  background: #e2e2e2;
 }
 
 .select2-search {
@@ -147,19 +139,19 @@
 .select2-search input {
   height: 20px;
   padding: 0 7px;
-  border-color: @darkGrey;
+  border-color: var(--gray80);
   background: #fff !important;
 }
 
 .select2-container-multi .select2-choices {
   min-height: 19px;
   padding-bottom: 1px;
-  border-color: @darkGrey;
+  border-color: var(--gray80);
   background: #fff;
 }
 
 .select2-container-multi.select2-container-active .select2-choices {
-  border-color: @highlighted;
+  border-color: var(--blue);
   box-shadow: none;
 }
 
@@ -172,8 +164,8 @@
   margin: 1px 1px 0 1px;
   padding: 1px 5px 2px 18px;
   border-radius: 0;
-  border-color: @darkGrey;
-  background: @grey;
+  border-color: var(--gray80);
+  background: var(--gray94);
   box-shadow: none;
 }
 
@@ -184,21 +176,17 @@
 .select2-search-choice-close,
 .select2-container .select2-choice abbr,
 .select2-container .select2-choice div b {
-  background-image: url(@imagesPath2x);
+  background-image: url('../images/select2x2.png');
   background-size: 60px 40px;
 }
 
 .select2-search input.select2-active,
 .select2-more-results.select2-active,
 .select2-container-multi .select2-choices .select2-search-field input.select2-active {
-  background-image: url(@spinnerPath);
+  background-image: url('../images/loading.gif');
 }
 
 .select2-offscreen {
   left: 0;
   top: -100000px;
 }
-
-
-
-

server/sonar-web/src/main/less/select2.less → server/sonar-web/src/main/js/app/styles/select2.css

@@ -45,7 +45,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   height: 26px;
   line-height: 26px;
   padding: 0 0 0 8px;
-  color: #444;
+  color: var(--baseFontColor);
   text-decoration: none;
 }
 
@@ -90,7 +90,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   border-top: 0;
   position: absolute;
   top: 100%;
-  box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
   z-index: 9999;
   width: 100%;
   margin-top: -1px;
@@ -102,7 +102,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   margin-top: 1px;
   border-top: 1px solid #aaa;
   border-bottom: 0;
-  box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
+  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
 }
 
 .select2-container .select2-choice div {
@@ -143,7 +143,8 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
 }
 
 .select2-search input {
-  background: #fff url('../images/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%);
+  background: #fff url('../images/select2.png') no-repeat 100% -22px,
+    linear-gradient(to bottom, #fff 85%, #eee 99%);
   padding: 4px 20px 4px 5px;
   outline: 0;
   border: 1px solid #aaa;
@@ -162,12 +163,13 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
 }
 
 .select2-search input.select2-active {
-  background: #ffff url('../images/loading.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%);
+  background: #ffff f url('../images/loading.gif') no-repeat 100%,
+    linear-gradient(to bottom, #fff 85%, #eee 99%);
 }
 
 .select2-container-active .select2-choice,
 .select2-container-active .select2-choices {
-  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   border: 1px solid #5897fb;
   outline: none;
 }
@@ -204,19 +206,68 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   margin: 0 0 0 0;
 }
 
-.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
+.select2-results ul.select2-result-sub > li .select2-result-label {
+  padding-left: 20px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
+.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
+  padding-left: 40px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
+.select2-results
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  > li
+  .select2-result-label {
+  padding-left: 60px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
+.select2-results
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  > li
+  .select2-result-label {
+  padding-left: 80px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
+.select2-results
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  > li
+  .select2-result-label {
+  padding-left: 100px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
+.select2-results
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  > li
+  .select2-result-label {
+  padding-left: 110px;
+}
 
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
+.select2-results
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  ul.select2-result-sub
+  > li
+  .select2-result-label {
+  padding-left: 120px;
+}
 
 .select2-results li {
   list-style: none;
@@ -268,7 +319,6 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
 }
 
 /* disabled styles */
-
 .select2-container.select2-container-disabled .select2-choice {
   background-color: #f4f4f4;
   background-image: none;
@@ -283,7 +333,6 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
 }
 
 /* multiselect */
-
 .select2-container-multi .select2-choices {
   background: #fff linear-gradient(to bottom, #eee 1%, #fff 15%);
   border: 1px solid #aaa;
@@ -301,7 +350,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
 }
 
 .select2-container-multi.select2-container-active .select2-choices {
-  box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   border: 1px solid #5897fb;
   outline: none;
 }
@@ -345,7 +394,7 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
   color: #333;
   border: 1px solid #aaaaaa;
-  line-height: 13px;
+  line-height: var(--baseFontSize);
   padding: 3px 5px 3px 18px;
   margin: 3px 0 3px 5px;
   position: relative;
@@ -376,16 +425,21 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   left: 3px;
 }
 
-.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
+.select2-container-multi
+  .select2-choices
+  .select2-search-choice
+  .select2-search-choice-close:hover {
   background-position: right -11px;
 }
 
-.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
+.select2-container-multi
+  .select2-choices
+  .select2-search-choice-focus
+  .select2-search-choice-close {
   background-position: right -11px;
 }
 
 /* disabled styles */
-
 .select2-container-multi.select2-container-disabled .select2-choices {
   background-color: #f4f4f4;
   background-image: none;
@@ -400,23 +454,34 @@ Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012
   padding: 3px 5px 3px 5px;
 }
 
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
+.select2-container-multi.select2-container-disabled
+  .select2-choices
+  .select2-search-choice
+  .select2-search-choice-close {
   display: none;
 }
 
 /* end multiselect */
-
 .select2-result-selectable .select2-match,
-.select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; }
+.select2-result-unselectable .select2-result-selectable .select2-match {
+  text-decoration: underline;
+}
 
-.select2-result-unselectable .select2-match { text-decoration: none; }
+.select2-result-unselectable .select2-match {
+  text-decoration: none;
+}
 
-.select2-offscreen { position: absolute; left: -10000px; }
+.select2-offscreen {
+  position: absolute;
+  left: -10000px;
+}
 
 /* Retina-ize icons */
-
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
+  .select2-search input,
+  .select2-search-choice-close,
+  .select2-container .select2-choice abbr,
+  .select2-container .select2-choice div b {
     background-image: url(../images/select2x2.png) !important;
     background-repeat: no-repeat !important;
     background-size: 60px 40px !important;

server/sonar-web/src/main/less/sonar-colorizer.less → server/sonar-web/src/main/js/app/styles/sonar-colorizer.css

@@ -17,58 +17,65 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) 'variables';
-@import (reference) 'mixins';
-
 /* for example java annotations */
 .code .a {
   color: #808000;
 }
+
 /* constants */
 .code .c {
   color: #660e80;
   font-style: normal;
   font-weight: bold;
 }
+
 /* javadoc */
 .code .j {
   color: #666666;
   font-style: normal;
 }
+
 /* classic comment */
 .code .cd {
   color: #666666;
   font-style: italic;
 }
+
 /* C++ doc */
 .code .cppd {
   color: #666666;
   font-style: italic;
 }
+
 /* keyword */
 .code .k {
-  color: saturate(@darkBlue, 50%);
+  color: #0071ba;
   font-weight: 600;
 }
+
 /* string */
 .code .s {
   color: #277b31;
   font-weight: normal;
 }
+
 /* keyword light*/
 .code .h {
   color: #000080;
   font-weight: normal;
 }
+
 /* preprocessing directive */
 .code .p {
   color: #347235;
   font-weight: normal;
 }
+
 .sym {
   cursor: hand;
   cursor: pointer;
 }
+
 .highlighted {
   background-color: #b3d4ff;
   animation: highlightedFadeIn 0.3s forwards;
@@ -78,6 +85,7 @@
   from {
     background-color: transparent;
   }
+
   to {
     background-color: #b3d4ff;
   }

server/sonar-web/src/main/js/app/styles/sonar.css

@@ -0,0 +1,58 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+@import './jquery-ui.css';
+@import './select2.css';
+@import './select2-sonar.css';
+
+@import './init/base.css';
+@import './init/type.css';
+@import './init/links.css';
+@import './init/tables.css';
+@import './init/lists.css';
+@import './init/forms.css';
+@import './init/icons.css';
+@import './init/misc.css';
+
+@import './components/ui.css';
+@import './components/global-loading.css';
+@import './components/bubble-popup.css';
+@import './components/modals.css';
+@import './components/alerts.css';
+@import './components/issues.css';
+@import './components/search-navigator.css';
+@import './components/tooltips.css';
+@import './components/dropdowns.css';
+@import './components/menu.css';
+@import './components/page.css';
+@import './components/component-name.css';
+@import './components/graphics.css';
+@import './components/list-groups.css';
+@import './components/panels.css';
+@import './components/badges.css';
+@import './components/columns.css';
+@import './components/search.css';
+@import './components/react-select.css';
+@import './components/side-tabs.css';
+@import './components/boxed-group.css';
+
+@import './style.css';
+@import './print.css';
+@import './sonar-colorizer.css';
+@import './mixins.css';

server/sonar-web/src/main/js/app/styles/style.css

@@ -0,0 +1,270 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.dashboard-page,
+.dashboard-page body {
+  background-color: var(--barBackgroundColor);
+}
+
+.tabs {
+  height: 20px;
+  border-bottom: 1px solid #ddd;
+  margin: 0;
+  padding: 0;
+  font-size: 93%;
+}
+
+.tabs li {
+  display: inline;
+  list-style-type: none;
+  font-weight: normal;
+  color: var(--secondFontColor);
+  vertical-align: baseline;
+  white-space: nowrap;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+.tabs li a {
+  float: left;
+  color: var(--secondFontColor);
+  vertical-align: bottom;
+  height: 17px;
+  margin: 0 1px 0 0;
+  padding: 1px 5px;
+  border-bottom: none;
+  transition: none;
+}
+
+.tabs li a.selected,
+.tabs .ui-tabs-active a {
+  text-decoration: none;
+  color: #555 !important;
+  font-weight: bold;
+  margin: 0 1px 0 0;
+}
+
+.markdown-tips {
+  font-size: var(--smallFontSize);
+  color: var(--secondFontColor);
+}
+
+.rule-desc,
+.markdown {
+  line-height: 1.5;
+}
+
+.rule-desc p,
+.markdown p,
+.rule-desc ul,
+.markdown ul,
+.rule-desc ol,
+.markdown ol,
+.rule-desc pre,
+.markdown pre,
+.rule-desc blockquote,
+.markdown blockquote,
+.rule-desc table,
+.markdown table,
+.rule-desc h2,
+.markdown h2,
+.rule-desc h3,
+.markdown h3,
+.rule-desc h4,
+.markdown h4,
+.rule-desc h5,
+.markdown h5,
+.rule-desc h6,
+.markdown h6 {
+  margin: 1em 0;
+}
+
+.rule-desc h2,
+.markdown h2 {
+  font-size: var(--bigFontSize);
+  font-weight: 400;
+}
+
+.rule-desc h3,
+.markdown h3,
+.rule-desc h4,
+.markdown h4,
+.rule-desc h5,
+.markdown h5,
+.rule-desc h6,
+.markdown h6 {
+  font-size: var(--baseFontSize);
+  font-weight: 600;
+}
+
+.rule-desc pre,
+.markdown pre,
+.rule-desc code,
+.markdown code {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
+}
+
+.rule-desc pre,
+.markdown pre {
+  padding: 10px;
+  border-top: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
+  line-height: 18px;
+  overflow: auto;
+}
+
+.rule-desc code,
+.markdown code {
+  padding: 0.2em 0.45em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.06);
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.rule-desc pre > code,
+.markdown pre > code {
+  padding: 0;
+  background-color: transparent;
+  white-space: pre;
+}
+
+.rule-desc blockquote,
+.markdown blockquote {
+  line-height: 1.5;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.rule-desc ul,
+.markdown ul {
+  padding-left: 40px;
+  list-style: disc;
+}
+
+.rule-desc li > ul,
+.markdown li > ul {
+  margin: 0.3em 0;
+}
+
+.rule-desc ol,
+.markdown ol {
+  padding-left: 40px;
+  list-style: decimal;
+}
+
+.rule-desc table,
+.markdown table {
+  min-width: 50%;
+  border-collapse: collapse;
+  border: 1px solid var(--barBorderColor);
+}
+
+.rule-desc th,
+.markdown th {
+  padding: 5px 10px;
+  border: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+  font-weight: 600;
+  text-align: center;
+}
+
+.rule-desc td,
+.markdown td {
+  padding: 5px 10px;
+  border: 1px solid var(--barBorderColor);
+}
+
+.property p {
+  margin-top: 10px;
+}
+
+.property pre,
+.bubble-popup pre,
+.coding-rules-detail-parameter pre {
+  display: inline-block;
+  min-width: 100%;
+  margin: 10px 0 !important;
+  padding: 10px !important;
+  border: 1px dashed #aaa;
+  box-sizing: border-box;
+  font-size: var(--smallFontSize);
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+.property blockquote,
+.bubble-popup blockquote,
+.coding-rules-detail-parameter blockquote {
+  margin-top: 10px;
+  padding: 10px;
+}
+
+.property ul {
+  list-style-type: disc;
+  list-style-position: inside;
+  margin: 10px;
+}
+
+.property ol {
+  list-style-type: decimal;
+  list-style-position: inside;
+  margin: 10px;
+}
+
+.width100 {
+  width: 100%;
+}
+
+textarea.width100 {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.property {
+  margin-bottom: 10px;
+}
+
+.property h3 {
+  float: none;
+  max-width: 20em;
+}
+
+.property > th,
+.property > td {
+  vertical-align: top;
+  padding: 10px;
+}
+
+.property > th {
+  text-align: right;
+}
+
+.property table.data {
+  width: 480px;
+}
+
+.property textarea {
+  vertical-align: text-top;
+}
+
+.property .note {
+  margin-top: 5px;
+}

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

@@ -0,0 +1,82 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+// IMPORTANT: any change in this file requires restart of the dev server
+
+module.exports = {
+  // colors
+  blue: '#4b9fd5',
+  lightBlue: '#cae3f2',
+  darkBlue: '#236a97',
+  green: '#00aa00',
+  lightGreen: '#b0d513',
+  yellow: '#eabe06',
+  orange: '#ed7d20',
+  red: '#d4333f',
+  purple: '#9139d4',
+
+  gray94: '#efefef',
+  gray80: '#cdcdcd',
+  gray71: '#b4b4b4',
+
+  barBackgroundColor: '#f3f3f3',
+  barBorderColor: '#e6e6e6',
+
+  baseFontColor: '#444',
+  secondFontColor: '#777',
+
+  leakColor: '#fbf3d5',
+  leakBorderColor: '#eae3c7',
+
+  // sizes
+  baseFontSize: '13px',
+  smallFontSize: '12px',
+  mediumFontSize: '14px',
+  bigFontSize: '16px',
+
+  controlHeight: '24px',
+
+  // different
+  defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)',
+
+  // z-index
+  // =======
+  //    1 -  100  for page elements (e.g. sidebars, panels)
+  //  101 -  500  for generic page fixed elements (e.g. navigation, workspace)
+  //  501 - 3000  for page ui elements
+  // 3001 - 8000  for generic ui elements (e.g. dropdowns, tooltips)
+
+  // common
+  aboveNormalZIndex: '3',
+  normalZIndex: '2',
+  belowNormalZIndex: '1',
+
+  // ui elements
+  tooltipZIndex: '8000',
+
+  dropdownMenuZIndex: '7500',
+
+  processContainerZIndex: '7000',
+
+  modalZIndex: '6001',
+  modalOverlayZIndex: '6000',
+
+  bubblePopupZIndex: '5000'
+};

server/sonar-web/src/main/js/apps/about/styles.css

@@ -1,5 +1,5 @@
 .about-page {
-  font-size: 14px;
+  font-size: var(--mediumFontSize);
 }
 
 .about-page .boxed-group {
@@ -28,12 +28,12 @@
   align-items: center;
   margin-bottom: 45px;
   padding: 65px 0 65px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .about-page-intro {
   padding-right: 65px;
-  border-right: 1px solid #e6e6e6;
+  border-right: 1px solid var(--barBorderColor);
 }
 
 .about-page-intro > h1 {
@@ -48,7 +48,7 @@
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 3px;
-  font-size: 13px;
+  font-size: var(--baseFontSize);
   font-weight: 400;
 }
 
@@ -60,7 +60,7 @@
 .about-page-projects {
   margin-left: 65px;
   line-height: 1.4;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
   text-align: center;
   min-width: 128px;
 }
@@ -91,7 +91,7 @@
 }
 
 .about-page-issue-type-link {
-  font-size: 16px;
+  font-size: var(--bigFontSize);
   font-weight: bold;
 }
 
@@ -109,7 +109,7 @@
 }
 
 .about-page-link-more > span {
-  border-bottom: 1px solid #cae3f2;
+  border-bottom: 1px solid var(--lightBlue);
 }
 
 .about-page-languages {
@@ -125,7 +125,7 @@
 .about-quality-model .flex-column + .flex-column {
   margin-left: 30px;
   padding-left: 30px;
-  border-left: 1px solid #e6e6e6;
+  border-left: 1px solid var(--barBorderColor);
 }
 
 .about-quality-model svg {

server/sonar-web/src/main/js/apps/account/account.css

@@ -7,8 +7,8 @@
 .account-header {
   padding-top: 20px;
   padding-bottom: 20px;
-  border-bottom: 1px solid #e6e6e6;
-  background-color: #f3f3f3;
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
 }
 
 .account-nav {
@@ -43,16 +43,16 @@
 .account-separator {
   height: 0;
   margin: 40px 0;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .account-bar-chart .bar-chart-bar {
-  fill: #4b9fd5;
+  fill: var(--blue);
 }
 
 .account-bar-chart .bar-chart-tick {
-  fill: #777;
-  font-size: 12px;
+  fill: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   text-anchor: middle;
 }
 
@@ -74,7 +74,7 @@
 }
 
 .account-projects-list > li + li {
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .account-project-side {
@@ -84,9 +84,9 @@
 }
 
 .account-project-analysis {
-  line-height: 24px;
-  color: #777;
-  font-size: 12px;
+  line-height: var(--controlHeight);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }
 
 .account-project-card {
@@ -105,18 +105,18 @@
 
 .account-project-name > a {
   border-bottom-color: #d0d0d0;
-  color: #444;
+  color: var(--baseFontColor);
 }
 
 .account-project-name > a:hover {
-  border-bottom-color: #cae3f2;
-  color: #4b9fd5;
+  border-bottom-color: var(--lightBlue);
+  color: var(--blue);
 }
 
 .account-project-quality-gate {
   display: inline-block;
   vertical-align: top;
-  line-height: 24px;
+  line-height: var(--controlHeight);
   margin-left: 8px;
 }
 
@@ -131,8 +131,8 @@
 
 .account-project-key {
   margin-top: 6px;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }
 
 .my-activity-issues {
@@ -149,7 +149,7 @@
   left: 50%;
   width: 1px;
   height: 100px;
-  background-color: #e6e6e6;
+  background-color: var(--barBorderColor);
   transform: rotate(30deg);
   content: '';
 }
@@ -159,11 +159,11 @@
   padding: 15px 20px;
   border: none;
   border-radius: 2px;
-  color: #444;
+  color: var(--baseFontColor);
 }
 
 .my-activity-issues > a:hover {
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
 }
 
 .my-activity-recent-issues {
@@ -193,7 +193,7 @@
   padding-left: 10px;
   padding-top: 2px;
   line-height: 16px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .my-activity-projects {
@@ -203,13 +203,13 @@
 }
 
 .my-activity-projects-header {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   margin-bottom: 15px;
   padding: 0 10px;
 }
 
 .my-activity-projects > ul > li + li {
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .my-activity-projects > ul > li > a {
@@ -219,7 +219,7 @@
 }
 
 .my-activity-projects > ul > li > a:hover {
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
 }
 
 .my-activity-projects .level {

server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx

@@ -20,6 +20,7 @@
 import * as React from 'react';
 import WorkersForm from './WorkersForm';
 import NoWorkersSupportPopup from './NoWorkersSupportPopup';
+import * as theme from '../../../app/theme';
 import Tooltip from '../../../components/controls/Tooltip';
 import { getWorkers } from '../../../api/ce';
 import { translate } from '../../../helpers/l10n';
@@ -121,7 +122,7 @@ export default class Workers extends React.PureComponent<{}, State> {
         !canSetWorkerCount && (
           <span className="spacer-left">
             <a className="link-no-underline" href="#" onClick={this.handleHelpClick}>
-              <HelpIcon className="text-text-bottom" fill="#cdcdcd" />
+              <HelpIcon className="text-text-bottom" fill={theme.gray80} />
             </a>
             <BubblePopupHelper
               isOpen={this.state.noSupportPopup}

server/sonar-web/src/main/js/apps/code/code.css

@@ -15,7 +15,7 @@
   position: relative;
   top: -1px;
   padding-left: 10px;
-  color: #777;
+  color: var(--secondFontColor);
   font-size: 11px;
   content: '>';
 }

server/sonar-web/src/main/js/apps/code/components/ComponentName.tsx

@@ -20,6 +20,7 @@
 import * as React from 'react';
 import { Link } from 'react-router';
 import Truncated from './Truncated';
+import * as theme from '../../../app/theme';
 import QualifierIcon from '../../../components/shared/QualifierIcon';
 import { Component } from '../types';
 
@@ -64,7 +65,7 @@ export default function ComponentName(props: Props) {
       : '';
   const name = prefix ? (
     <span>
-      <span style={{ color: '#777' }}>{prefix}</span>
+      <span style={{ color: theme.secondFontColor }}>{prefix}</span>
       <span>{component.name.substr(prefix.length)}</span>
     </span>
   ) : (

server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesAppContainer.js

@@ -25,6 +25,7 @@ import { withRouter } from 'react-router';
 import { getAppState } from '../../../store/rootReducer';
 import { translate } from '../../../helpers/l10n';
 import init from '../init';
+import '../styles.css';
 
 class CodingRulesAppContainer extends React.PureComponent {
   /*:: stop: ?() => void; */

server/sonar-web/src/main/less/pages/coding-rules.less → server/sonar-web/src/main/js/apps/coding-rules/styles.css

@@ -17,19 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) '../mixins';
-@import (reference) '../variables';
-@import (reference) '../init/links';
-@import (reference) '../components/ui';
-
-.coding-rules-extended-view {
-  .coding-rules-list {
-    display: none;
-  }
+.coding-rules-extended-view .coding-rules-list {
+  display: none;
+}
 
-  .coding-rules-details {
-    display: block;
-  }
+.coding-rules-extended-view .coding-rules-details {
+  display: block;
 }
 
 /*
@@ -40,7 +33,7 @@
   position: relative;
   display: inline-block;
   margin: 16px 0;
-  font-size: @bigFontSize;
+  font-size: var(--bigFontSize);
   font-weight: 400;
 }
 
@@ -48,64 +41,63 @@
   display: block;
   height: 100%;
   padding-top: 0;
-  padding-right: @navigatorPadding;
-
-  .key,
-  .value,
-  .sep {
-    display: inline;
-    vertical-align: top;
-  }
-
-  .value {
-    display: inline-block;
-    vertical-align: top;
-    line-height: 23px;
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: @monoFontFamily;
-  }
+  padding-right: 10px;
+}
+
+.coding-rules-detail-quality-profile-parameter .key,
+.coding-rules-detail-quality-profile-parameter .value,
+.coding-rules-detail-quality-profile-parameter .sep {
+  display: inline;
+  vertical-align: top;
 }
+
+.coding-rules-detail-quality-profile-parameter .value {
+  display: inline-block;
+  vertical-align: top;
+  line-height: 23px;
+  max-width: 300px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
 .coding-rules-detail-quality-profile-parameter + .coding-rules-detail-quality-profile-parameter {
   margin-top: 0;
 }
 
 .coding-rules-detail-properties {
-  margin: @navigatorPadding 0;
+  margin: 10px 0;
   font-size: 0;
 }
 
 .coding-rules-detail-properties + .coding-rules-detail-properties {
-  margin-top: -@navigatorPadding;
+  margin-top: -10px;
 }
 
 .coding-rules-detail-property {
   display: inline-block;
   vertical-align: middle;
-  margin-right: 2 * @navigatorPadding;
-  font-size: @smallFontSize;
+  margin-right: 20px;
+  font-size: var(--smallFontSize);
   height: 22px;
   line-height: 18px;
+}
 
-  .select2-search-field {
-    line-height: 1;
-  }
+.coding-rules-detail-property .select2-search-field {
+  line-height: 1;
 }
 
 .coding-rules-detail-tag + .coding-rules-detail-tag {
-  margin-left: @navigatorPadding;
+  margin-left: 10px;
 }
 
 .coding-rules-detail-tags-change {
   cursor: pointer;
+}
 
-  &:hover {
-    span {
-      text-decoration: underline;
-    }
-  }
+.coding-rules-detail-tags-change:hover span {
+  text-decoration: underline;
 }
 
 .coding-rules-detail-tag-edit {
@@ -117,20 +109,20 @@
 }
 
 .coding-rules-detail-description {
-  margin: 2 * @navigatorPadding 0;
+  margin: 20px 0;
 }
 
 .coding-rules-detail-description-extra {
-  margin-top: -@navigatorPadding;
+  margin-top: -10px;
 }
 
 .coding-rules-detail-extend-description-form {
-  margin: @navigatorPadding 0;
+  margin: 10px 0;
 }
 
 .coding-rules-detail-parameters {
   width: 100%;
-  margin: @navigatorPadding 0 @navigatorPadding * 2;
+  margin: 10px 0 20px;
 }
 
 .coding-rules-detail-parameter-name {
@@ -146,24 +138,24 @@
 }
 
 .coding-rules-detail-parameter-value {
-  font-family: @monoFontFamily;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   word-break: break-all;
 }
 
-// Quality Profiles
-
 .coding-rules-detail-quality-profiles,
 .coding-rules-detail-list {
   width: 100%;
   line-height: 22px;
+}
 
-  td {
-    border-top: 1px solid @barBorderColor;
-  }
+.coding-rules-detail-quality-profiles td,
+.coding-rules-detail-list td {
+  border-top: 1px solid var(--barBorderColor);
+}
 
-  tr:first-child td {
-    border-top: none;
-  }
+.coding-rules-detail-quality-profiles tr:first-child td,
+.coding-rules-detail-list tr:first-child td {
+  border-top: none;
 }
 
 .coding-rules-detail-quality-profile-name,
@@ -204,22 +196,21 @@
 
 .coding-rules-detail-quality-profile-inheritance {
   margin-top: 4px;
-  font-size: @smallFontSize;
+  font-size: var(--smallFontSize);
   font-weight: normal;
+}
 
-  i {
-    position: relative;
-    top: -1px;
-    font-size: @iconSmallFontSize;
-  }
+.coding-rules-detail-quality-profile-inheritance i {
+  position: relative;
+  top: -1px;
+  font-size: var(--mediumFontSize);
 }
 
 .coding-rules-detail-quality-profiles-activation {
   margin-top: -3px;
-  margin-left: @navigatorPadding;
+  margin-left: 10px;
 }
 
-// Bulk Change
 input.coding-rules-name-key {
   width: 100%;
 }
@@ -229,16 +220,88 @@ textarea.coding-rules-markdown-description {
   margin-bottom: 4px;
 }
 
-.coding-rules-most-violated-projects {
-  td {
-    border-top-color: transparent;
-  }
+.coding-rules-most-violated-projects td {
+  border-top-color: transparent;
+}
+
+.coding-rules-most-violated-projects tr:first-child + tr td {
+  border-top-color: var(--barBorderColor);
+}
+
+.coding-rules-most-violated-projects .coding-rules-detail-list-name {
+  font-weight: 400;
+}
+
+.coding-rule {
+  padding: 8px 10px 8px 8px;
+  border: 1px solid transparent;
+  background-color: #fff;
+}
+
+.coding-rule.selected {
+  border-color: var(--blue) !important;
+}
 
-  tr:first-child + tr td {
-    border-top-color: @barBorderColor;
-  }
+.coding-rule + .coding-rule {
+  border-top-color: var(--barBorderColor);
+}
+
+.coding-rule.selected + .coding-rule {
+  border-top-color: transparent;
+}
+
+.coding-rule-table {
+  width: 100%;
+}
+
+.coding-rule-table td {
+  vertical-align: top;
+}
+
+.coding-rule-table + .coding-rule-table {
+  margin-top: 5px;
+}
+
+.coding-rule-table-meta-cell {
+  width: 1px;
+  white-space: nowrap;
+}
+
+.coding-rule-title {
+  line-height: 19.5px;
+  font-size: var(--baseFontSize);
+}
+
+.coding-rule-meta {
+  padding-left: 30px;
+  line-height: 19.5px;
+  font-size: var(--smallFontSize);
+}
+
+.coding-rule-meta .icon-tags:before {
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
+
+.coding-rule-meta .js-tag:after {
+  content: ',';
+}
+
+.coding-rule-meta .js-tag:last-child:after {
+  content: '';
+}
+
+.coding-rule-activation {
+  width: 40px;
+  line-height: 19.5px;
+}
+
+.coding-rule-activation-actions {
+  padding-left: 20px;
+}
 
-  .coding-rules-detail-list-name {
-    font-weight: 400;
-  }
+.coding-rule-section-separator {
+  height: 0;
+  margin: 10px 0;
+  border-top: 1px solid var(--barBorderColor);
 }

server/sonar-web/src/main/js/apps/component-measures/drilldown/TreeMapView.js

@@ -21,6 +21,7 @@
 import React from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import { scaleLinear, scaleOrdinal } from 'd3-scale';
+import * as theme from '../../../app/theme';
 import ColorBoxLegend from '../../../components/charts/ColorBoxLegend';
 import ColorGradientLegend from '../../../components/charts/ColorGradientLegend';
 import EmptyResult from './EmptyResult';
@@ -45,8 +46,8 @@ import { getProjectUrl } from '../../../helpers/urls';
 }; */
 
 const HEIGHT = 500;
-const COLORS = ['#00aa00', '#b0d513', '#eabe06', '#ed7d20', '#d4333f'];
-const LEVEL_COLORS = ['#d4333f', '#ed7d20', '#00aa00', '#b4b4b4'];
+const COLORS = [theme.green, theme.lightGreen, theme.yellow, theme.orange, theme.red];
+const LEVEL_COLORS = [theme.red, theme.orange, theme.green, theme.gray71];
 
 export default class TreeMapView extends React.PureComponent {
   /*:: props: Props; */
@@ -84,8 +85,8 @@ export default class TreeMapView extends React.PureComponent {
         return {
           key: component.refKey || component.key,
           size: sizeValue,
-          color: colorValue != null ? colorScale(colorValue) : '#777',
-          icon: <QualifierIcon color="#444" qualifier={component.qualifier} />,
+          color: colorValue != null ? colorScale(colorValue) : theme.secondFontColor,
+          icon: <QualifierIcon color={theme.baseFontColor} qualifier={component.qualifier} />,
           tooltip: this.getTooltip(
             component.name,
             colorMeasure.metric,
@@ -162,7 +163,7 @@ export default class TreeMapView extends React.PureComponent {
       <ColorGradientLegend
         className="measure-details-treemap-legend"
         colorScale={colorScale}
-        colorNA="#777"
+        colorNA={theme.secondFontColor}
         direction={metric.direction}
         height={20}
         width={200}

server/sonar-web/src/main/js/apps/component-measures/style.css

@@ -12,8 +12,8 @@
 }
 
 .domain-measures-leak {
-  background-color: #fbf3d5;
-  border: 1px solid #eae3c7;
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
   padding: 4px 6px;
 }
 
@@ -24,8 +24,8 @@
 
 .domain-measures-leak-header {
   display: inline-block;
-  background-color: #fbf3d5;
-  border: 1px solid #eae3c7;
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
   padding: 4px 10px;
   white-space: nowrap;
 }
@@ -63,7 +63,7 @@
 }
 
 .measure-details-component-row.selected {
-  background-color: #cae3f2 !important;
+  background-color: var(--lightBlue) !important;
 }
 
 .measure-details-component-cell {
@@ -81,7 +81,7 @@
   line-height: 18px;
   margin-top: -2px;
   margin-bottom: -2px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .domain-measures-value .level {
@@ -122,7 +122,7 @@
 
 .measure-overview-bubble-chart {
   position: relative;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
 }
 
@@ -135,7 +135,7 @@
   display: flex;
   align-items: center;
   padding: 16px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .measure-overview-bubble-chart-title {
@@ -151,15 +151,15 @@
 
 .measure-overview-bubble-chart-footer {
   padding: 15px 60px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
   text-align: center;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   line-height: 1.4;
 }
 
 .measure-overview-bubble-chart-axis {
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }
 
 .measure-overview-bubble-chart-axis.x {

server/sonar-web/src/main/js/apps/issues/styles.css

@@ -1,5 +1,5 @@
 .issues-main-header .component-name {
-  line-height: 24px;
+  line-height: var(--controlHeight);
 }
 
 .issues-main-header-spinner {
@@ -29,12 +29,12 @@
 }
 
 .concise-issues-list-header-button path {
-  fill: #777;
+  fill: var(--secondFontColor);
   transition: fill 0.3s ease;
 }
 
 .concise-issues-list-header-button:hover path {
-  fill: #4b9fd5;
+  fill: var(--blue);
 }
 
 .concise-issue-component {
@@ -46,10 +46,10 @@
 
 .concise-issue-box {
   position: relative;
-  z-index: 1;
+  z-index: var(--belowNormalZIndex);
   margin-bottom: 4px;
   padding: 8px;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
   cursor: pointer;
   transition: background-color 0.3s ease, border-color 0.3s ease;
@@ -64,7 +64,7 @@
 }
 
 .concise-issue-box.selected {
-  z-index: 2;
+  z-index: var(--normalZIndex);
   border-color: #dd4040;
   background-color: #ffeaea;
   cursor: default;
@@ -79,7 +79,7 @@
 .concise-issue-box-attributes {
   margin-top: 8px;
   line-height: 16px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .concise-issue-box:not(.selected) .location-index {
@@ -105,7 +105,7 @@
 .issues-filters-header {
   margin-bottom: 12px;
   padding-bottom: 11px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .issues-my-issues-filter {

server/sonar-web/src/main/js/apps/maintenance/components/MaintenanceAppContainer.tsx

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import init from '../init';
+import '../styles.css';
 
 interface Props {
   location: { query: { return_to: string } };

server/sonar-web/src/main/js/apps/maintenance/components/SetupAppContainer.tsx

@@ -19,6 +19,7 @@
  */
 import * as React from 'react';
 import init from '../init';
+import '../styles.css';
 
 interface Props {
   location: { query: { return_to: string } };

server/sonar-web/src/main/less/pages/maintenance.less → server/sonar-web/src/main/js/apps/maintenance/styles.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) "../variables";
-@import (reference) "../init/links";
-
 .maintenance-title {
   margin-bottom: 40px;
   line-height: 1.5;
@@ -31,7 +28,7 @@
 .maintenance-text {
   margin-bottom: 16px;
   line-height: 1.5;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
   font-weight: 300;
 }
 

server/sonar-web/src/main/js/apps/overview/qualityGate/ApplicationQualityGateProject.css

@@ -22,5 +22,5 @@
   margin-right: -9px;
   padding-left: 9px;
   padding-right: 9px;
-  background-color: #fbf3d5;
+  background-color: var(--leakColor);
 }

server/sonar-web/src/main/js/apps/overview/qualityGate/QualityGate.js

@@ -21,6 +21,7 @@
 import React from 'react';
 import QualityGateConditions from './QualityGateConditions';
 import EmptyQualityGate from './EmptyQualityGate';
+import * as theme from '../../../app/theme';
 import { translate } from '../../../helpers/l10n';
 import Level from '../../../components/ui/Level';
 import Tooltip from '../../../components/controls/Tooltip';
@@ -73,7 +74,7 @@ export default function QualityGate({ branch, component, measures } /*: Props */
           {translate('overview.quality_gate.ignored_conditions')}
           <Tooltip overlay={translate('overview.quality_gate.ignored_conditions.tooltip')}>
             <span className="spacer-left">
-              <HelpIcon fill="#4b9fd5" />
+              <HelpIcon fill={theme.blue} />
             </span>
           </Tooltip>
         </div>

server/sonar-web/src/main/js/apps/overview/styles.css

@@ -3,7 +3,7 @@
 }
 
 .overview-main {
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
   transition: transform 0.5s ease, opacity 0.5s ease;
 }
 
@@ -12,7 +12,7 @@
  */
 
 .overview-title {
-  font-size: 16px;
+  font-size: var(--bigFontSize);
   font-weight: 400;
 }
 
@@ -27,8 +27,8 @@
 
 .overview-quality-gate {
   padding-bottom: 15px;
-  border-bottom: 1px solid #e6e6e6;
-  background-color: #f3f3f3;
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
 }
 
 .overview-quality-gate-conditions-list {
@@ -46,13 +46,13 @@
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   background-color: #fff;
-  color: #444;
+  color: var(--baseFontColor);
   transition: none;
 }
 
 .overview-quality-gate-condition:hover,
 .overview-quality-gate-condition:focus {
-  color: #444;
+  color: var(--baseFontColor);
 }
 
 .overview-quality-gate-condition:hover .overview-quality-gate-condition-container,
@@ -61,14 +61,14 @@
 }
 
 .overview-quality-gate-condition-leak {
-  background-color: #fbf3d5;
+  background-color: var(--leakColor);
 }
 
 .overview-quality-gate-condition-metric,
 .overview-quality-gate-condition-period {
   max-width: 125px;
   line-height: 16px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .overview-quality-gate-condition-period {
@@ -84,9 +84,9 @@
   /* three lines by 16px and 4px margin */
   min-height: 52px;
   padding: 10px;
-  border-top: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
-  border-right: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
+  border-right: 1px solid var(--barBorderColor);
   transition: border-color 0.3s ease;
 }
 
@@ -108,8 +108,8 @@
 
 .overview-quality-gate-threshold {
   margin-top: 4px;
-  font-size: 12px;
-  color: #777;
+  font-size: var(--smallFontSize);
+  color: var(--secondFontColor);
 }
 
 .overview-quality-gate-warning {
@@ -117,11 +117,11 @@
 }
 
 .overview-quality-gate-condition-error {
-  border-color: #d4333f;
+  border-color: var(--red);
 }
 
 .overview-quality-gate-condition-warn {
-  border-color: #ed7d20;
+  border-color: var(--orange);
 }
 
 /*
@@ -138,7 +138,7 @@
 
 .overview-card-special {
   padding-bottom: 26px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .overview-card-header {
@@ -146,13 +146,13 @@
   align-items: baseline;
   justify-content: space-between;
   margin-bottom: 10px;
-  line-height: 24px;
+  line-height: var(--controlHeight);
 }
 
 .overview-domain-panel {
   display: flex;
   margin-top: 10px;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
 }
 
@@ -173,7 +173,7 @@
 
 .overview-domain-leak {
   flex: 2;
-  background-color: #fbf3d5;
+  background-color: var(--leakColor);
 }
 
 .overview-domain-leak .overview-domain-measures {
@@ -186,7 +186,7 @@
 
 .overview-domain-measures {
   position: relative;
-  z-index: 2;
+  z-index: var(--normalZIndex);
   display: flex;
   flex: 1;
   align-items: center;
@@ -198,7 +198,7 @@
 }
 
 .overview-domain-measures + .overview-domain-measures .overview-domain-measure-value {
-  font-size: 14px;
+  font-size: var(--mediumFontSize);
   font-weight: 400;
 }
 
@@ -254,12 +254,12 @@
   vertical-align: top;
   margin-top: -4px;
   margin-left: 6px;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
 }
 
 .overview-domain-timeline {
   position: absolute;
-  z-index: 1;
+  z-index: var(--belowNormalZIndex);
   bottom: 0;
   left: 0;
   right: 0;
@@ -284,7 +284,7 @@
  */
 
 .overview-meta {
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
 }
 
 .overview-meta-card {
@@ -298,7 +298,7 @@
 }
 
 .overview-meta-header {
-  color: #444;
+  color: var(--baseFontColor);
 }
 
 .overview-meta-list > li {
@@ -327,7 +327,7 @@
 }
 
 .overview-meta-size-ncloc a {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   font-size: 18px;
   font-weight: 300;
 }
@@ -337,18 +337,18 @@
   vertical-align: middle;
   width: 160px;
   min-height: 40px;
-  border-left: 1px solid #e6e6e6;
+  border-left: 1px solid var(--barBorderColor);
   box-sizing: border-box;
 }
 
 .overview-analysis {
-  color: #777;
+  color: var(--secondFontColor);
 }
 
 .overview-analysis + .overview-analysis {
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .overview-analysis-graph {
@@ -370,7 +370,7 @@
 .overview-analysis-graph-tooltip {
   padding: 4px;
   pointer-events: none;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   overflow: hidden;
 }
 
@@ -403,7 +403,7 @@
   box-sizing: border-box;
   border-radius: 2px;
   font-weight: bold;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   letter-spacing: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -423,9 +423,9 @@
   left: 0;
   right: -1px;
   padding: 5px 0 2px;
-  border: 1px solid #e6e6e6;
-  background-color: #fbf3d5;
-  font-size: 14px;
+  border: 1px solid var(--barBorderColor);
+  background-color: var(--leakColor);
+  font-size: var(--mediumFontSize);
   text-align: center;
   transform: translateY(-4px);
 }

server/sonar-web/src/main/js/apps/portfolio/styles.css

@@ -1,5 +1,5 @@
 .portfolio-measure-secondary-value {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   font-size: 18px;
   font-weight: 300;
 }
@@ -23,17 +23,17 @@
 }
 
 .portfolio-freshness {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   margin-top: 12px;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   white-space: nowrap;
 }
 
 .portfolio-effort {
   margin-top: 12px;
   padding-top: 12px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .portfolio-boxes {
@@ -42,7 +42,7 @@
   align-items: stretch;
   margin-bottom: 20px;
   padding: 15px 0;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   background-color: #fff;
 }
 
@@ -57,7 +57,7 @@
 
 .portfolio-box-title {
   margin-bottom: 25px;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
 }
 
 .portfolio-box-title > .button-small > svg {
@@ -84,7 +84,7 @@
 }
 
 .portfolio-sub-components table.data > thead > tr > th {
-  font-size: 13px;
+  font-size: var(--baseFontSize);
   text-transform: none;
 }
 

server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css

@@ -78,7 +78,7 @@
 }
 
 .project-activity-graph-legend-actionable:not(.alert-warning) {
-  border-color: #e6e6e6;
+  border-color: var(--barBorderColor);
 }
 
 .project-activity-graph-tooltip {
@@ -142,8 +142,8 @@
   position: relative;
   min-height: 20px;
   padding: 4px;
-  border-top: 1px solid #e6e6e6;
-  border-bottom: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
   cursor: pointer;
 }
 
@@ -172,7 +172,7 @@
   width: 54px;
   line-height: 20px;
   box-sizing: border-box;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   font-weight: bold;
   text-align: right;
 }
@@ -182,7 +182,7 @@
   width: 10px;
   height: 10px;
   margin-top: 5px;
-  border: 2px solid #4b9fd5;
+  border: 2px solid var(--blue);
   border-radius: 10px;
   box-sizing: border-box;
   content: '';
@@ -236,11 +236,11 @@
 }
 
 .project-activity-event-icon.VERSION {
-  color: #4b9fd5;
+  color: var(--blue);
 }
 
 .project-activity-event-icon.QUALITY_GATE {
-  color: #9139d4;
+  color: var(--purple);
 }
 
 .project-activity-event-icon.QUALITY_PROFILE {
@@ -265,7 +265,7 @@
   left: 12px;
   right: 16px;
   padding-top: 24px;
-  z-index: 1;
+  z-index: var(--belowNormalZIndex);
 }
 
 .project-activity-version-badge.sticky + .project-activity-days-list {
@@ -279,7 +279,7 @@
   box-sizing: border-box;
   border-radius: 0 2px 2px 0;
   font-weight: bold;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   letter-spacing: 0;
   overflow: hidden;
   text-overflow: ellipsis;

server/sonar-web/src/main/js/apps/projects/styles.css

@@ -52,7 +52,7 @@
   position: absolute;
   top: 1px;
   left: 80px;
-  line-height: 24px;
+  line-height: var(--controlHeight);
   pointer-events: none;
 }
 
@@ -79,8 +79,8 @@
 .project-card-leak-date {
   padding: 4px 8px;
   margin: -5px -4px -5px 24px;
-  background-color: #fbf3d5;
-  border: 1px solid #eae3c7;
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
 }
 
 .project-card-measures {
@@ -93,17 +93,17 @@
   display: flex;
   padding: 8px 0;
   margin: 4px -4px;
-  background-color: #fbf3d5;
-  border: 1px solid #eae3c7;
+  background-color: var(--leakColor);
+  border: 1px solid var(--leakBorderColor);
 }
 
 .projects-leak-sorting-option {
-  background-color: #fbf3d5;
+  background-color: var(--leakColor);
   margin-bottom: 2px;
 }
 
 .projects-leak-sorting-option.is-focused {
-  background-color: #eae3c7;
+  background-color: var(--leakBorderColor);
 }
 
 .project-card-measure {
@@ -128,9 +128,9 @@
   top: 50%;
   left: 0;
   width: 0;
-  height: 24px;
+  height: var(--controlHeight);
   margin-top: -12px;
-  border-left: 1px solid #e6e6e6;
+  border-left: 1px solid var(--barBorderColor);
   content: '';
 }
 
@@ -152,12 +152,12 @@
 
 .project-card-measure-label {
   margin-top: 4px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
 }
 
 .project-card-measure-label-with-icon {
   margin-top: 2px;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   white-space: nowrap;
 }
 
@@ -183,7 +183,7 @@
 }
 
 .project-card-quality-gate {
-  line-height: 24px;
+  line-height: var(--controlHeight);
 }
 
 .project-card-not-analyzed {
@@ -204,7 +204,7 @@
   float: right;
   font-weight: normal;
   font-size: 11px;
-  color: #777;
+  color: var(--secondFontColor);
   text-transform: lowercase;
 }
 
@@ -221,7 +221,7 @@
 .projects-facets-header {
   margin-bottom: 10px;
   padding: 10px 0;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .projects-facets-reset {
@@ -240,7 +240,7 @@
 .projects-facet-bar-inner {
   min-width: 1px;
   height: 10px;
-  background-color: #b4b4b4;
+  background-color: var(--gray71);
   transition: width 0.3s ease;
 }
 
@@ -249,7 +249,7 @@
   .search-navigator-facet.active
   ~ .search-navigator-facet
   .projects-facet-bar-inner {
-  background-color: #4b9fd5;
+  background-color: var(--blue);
 }
 
 .projects-visualization {
@@ -268,8 +268,8 @@
 .projects-visualizations-footer {
   margin-top: 8px;
   padding: 15px 60px;
-  border-top: 1px solid #e6e6e6;
-  font-size: 12px;
+  border-top: 1px solid var(--barBorderColor);
+  font-size: var(--smallFontSize);
   line-height: 1.4;
   text-align: center;
 }
@@ -280,8 +280,8 @@
 
 .measure-details-bubble-chart-axis {
   position: absolute;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }
 
 .measure-details-bubble-chart-axis.x {

server/sonar-web/src/main/js/apps/quality-profiles/styles.css

@@ -16,10 +16,10 @@
 }
 
 .quality-profiles-list-header {
-  line-height: 24px;
+  line-height: var(--controlHeight);
   margin-bottom: 20px;
   padding: 5px 10px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .quality-profile-grid {

server/sonar-web/src/main/js/app/styles/index.js → server/sonar-web/src/main/js/apps/sessions/components/LoginForm.css

@@ -17,9 +17,24 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import '../../components/ui/Level.css';
-import '../../components/ui/Rating.css';
-import './boxed-group.css';
+.login-title {
+  margin-bottom: 40px;
+  line-height: 1.5;
+  font-size: 24px;
+  font-weight: 300;
+  text-align: center;
+}
 
-// these styles are extracted to a separate file
-import '../../../less/sonar.less';
+.login-input {
+  width: 100% !important;
+  height: auto !important;
+  padding: 5px 12px !important;
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.login-label {
+  display: none;
+  margin-bottom: 8px;
+  font-size: 15px;
+}

server/sonar-web/src/main/js/apps/sessions/components/LoginForm.tsx

@@ -23,6 +23,7 @@ import OAuthProviders from './OAuthProviders';
 import GlobalMessagesContainer from '../../../app/components/GlobalMessagesContainer';
 import { translate } from '../../../helpers/l10n';
 import { IdentityProvider } from '../../../api/users';
+import './LoginForm.css';
 
 interface Props {
   onSonarCloud: boolean;

server/sonar-web/src/main/less/components/pills.less → server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.css

@@ -17,40 +17,42 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) '../variables';
-
-.pills {
+.oauth-providers > ul {
   display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
 }
 
-.pills > li {
-}
-
-.pills > li + li {
-  margin-left: 2px;
+.oauth-providers > ul > li {
+  margin-bottom: 30px;
 }
 
-.pills > li > a {
+.oauth-providers > ul > li > a {
   display: block;
-  height: @formControlHeight;
-  max-width: 135px;
-  line-height: @formControlHeight;
-  padding: 0 10px;
+  width: 180px;
+  line-height: 22px;
+  padding: 8px 12px;
   border: none;
-  border-radius: @formControlHeight;
+  border-radius: 2px;
+  box-sizing: border-box;
+  background-color: var(--darkBlue);
+  color: #fff;
+  white-space: nowrap;
   overflow: hidden;
+  text-align: center;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: none;
 }
 
-.pills > li.active > a,
-.pills > li > a:hover,
-.pills > li > a:focus {
-  background-color: @darkBlue;
-  color: #fff;
+.oauth-providers > ul > li > a:hover,
+.oauth-providers > ul > li > a:focus {
+  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.3);
+}
+
+.oauth-providers > ul > li > a > span {
+  padding-left: 6px;
 }
 
-.pill-right {
-  margin-left: auto !important;
+.oauth-providers + form {
+  padding-top: 30px;
+  border-top: 1px solid var(--barBorderColor);
 }

server/sonar-web/src/main/js/apps/sessions/components/OAuthProviders.tsx

@@ -21,6 +21,7 @@ import * as React from 'react';
 import { translateWithParameters } from '../../../helpers/l10n';
 import { IdentityProvider } from '../../../api/users';
 import { getBaseUrl } from '../../../helpers/urls';
+import './OAuthProviders.css';
 
 interface Props {
   formatLabel?: (name: string) => string;

server/sonar-web/src/main/js/apps/settings/styles.css

@@ -58,7 +58,7 @@
 .settings-definition-changes {
   margin-top: 20px;
   padding-top: 20px;
-  border-top: 1px dotted #e6e6e6;
+  border-top: 1px dotted var(--barBorderColor);
 }
 
 .settings-sub-categories-list {
@@ -70,18 +70,18 @@
 .settings-sub-categories-list > li + li {
   margin: 30px -20px 0;
   padding: 30px 20px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .settings-sub-category-name {
   margin-bottom: 20px;
-  font-size: 16px;
+  font-size: var(--bigFontSize);
 }
 
 .settings-sub-category-description {
   margin-top: -15px;
   margin-bottom: 20px;
-  color: #777;
+  color: var(--secondFontColor);
 }
 
 .settings-large-input {

server/sonar-web/src/main/js/apps/system/styles.css

@@ -9,11 +9,11 @@
 }
 
 .system-info-health-card:not(.no-hover):hover {
-  border-color: #4b9fd5;
+  border-color: var(--blue);
 }
 
 .system-info-health-card:not(.no-hover):hover .system-info-health-card-title {
-  color: #4b9fd5;
+  color: var(--blue);
 }
 
 .system-info-health-card .boxed-group-header {

server/sonar-web/src/main/js/apps/tutorials/onboarding/styles.css

@@ -12,8 +12,8 @@
 }
 
 .onboarding-step .boxed-group-actions {
-  height: 24px;
-  line-height: 24px;
+  height: var(--controlHeight);
+  line-height: var(--controlHeight);
 }
 
 .onboarding-step-number {
@@ -26,12 +26,12 @@
   border-radius: 24px;
   background-color: #b9b9b9;
   color: #fff;
-  font-size: 14px;
+  font-size: var(--mediumFontSize);
   text-align: center;
 }
 
 .onboarding-step.is-open .onboarding-step-number {
-  background-color: #236a97;
+  background-color: var(--darkBlue);
 }
 
 .onboarding-step.is-finished {

server/sonar-web/src/main/js/apps/web-api/styles/web-api.css

@@ -5,12 +5,12 @@
 .web-api-search {
   margin: 20px 10px 0;
   padding: 0 10px 20px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
   white-space: nowrap;
 }
 
 .web-api-search .icon-search {
-  color: #cdcdcd;
+  color: var(--gray80);
 }
 
 .web-api-domain-header,
@@ -66,7 +66,7 @@
 .web-api-params td {
   vertical-align: top;
   padding: 8px 10px;
-  border-top: 1px solid #e6e6e6;
+  border-top: 1px solid var(--barBorderColor);
 }
 
 .web-api-params tr:first-child td {

server/sonar-web/src/main/js/components/SelectList/index.js

@@ -24,6 +24,7 @@ import escapeHtml from 'escape-html';
 import { translate } from '../../helpers/l10n';
 import ItemTemplate from './templates/item.hbs';
 import ListTemplate from './templates/list.hbs';
+import './styles.css';
 
 let showError = null;
 

server/sonar-web/src/main/less/components/select-list.less → server/sonar-web/src/main/js/components/SelectList/styles.css

@@ -17,9 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-@import (reference) '../variables';
-@import (reference) '../mixins';
-
 .select-list-container {
   min-width: 500px;
   box-sizing: border-box;
@@ -84,7 +81,7 @@
 .select-list-list > li.empty-message {
   padding: 6px 5px;
   border: 1px solid #ddd;
-  background-color: #efefef;
+  background-color: var(--gray94);
 }
 
 .select-list-list-checkbox {
@@ -120,16 +117,16 @@
 
 .select-list-control-button {
   position: relative;
-  z-index: @normal-z-index;
+  z-index: var(--normalZIndex);
   display: inline-block;
   vertical-align: middle;
   height: 27px;
   line-height: 25px;
   padding: 0 12px;
   box-sizing: border-box;
-  border: 1px solid @darkBlue;
-  color: @darkBlue;
-  font-size: @smallFontSize;
+  border: 1px solid var(--darkBlue);
+  color: var(--darkBlue);
+  font-size: var(--smallFontSize);
   text-align: center;
   cursor: pointer;
   transition: none;
@@ -146,13 +143,13 @@
 }
 
 .select-list-control-button:hover {
-  color: @darkBlue;
+  color: var(--darkBlue);
 }
 
 .select-list-control-button:active,
 .select-list-control-button.active {
-  z-index: @above-normal-z-index;
-  background-color: @darkBlue;
+  z-index: var(--aboveNormalZIndex);
+  background-color: var(--darkBlue);
   color: #fff;
   font-weight: 600;
 }
@@ -170,7 +167,7 @@
 
 .select-list-wrapper {
   height: 30vw;
-  border-top: 1px solid @barBorderColor;
-  border-bottom: 1px solid @barBorderColor;
+  border-top: 1px solid var(--barBorderColor);
+  border-bottom: 1px solid var(--barBorderColor);
   overflow: auto;
 }

server/sonar-web/src/main/js/components/SourceViewer/styles.css

@@ -1,3 +1,508 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2017 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+.source-viewer {
+  width: 100%;
+  min-height: 200px;
+  border: 1px solid var(--barBorderColor);
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.source-table {
+  width: 100%;
+  border: none;
+  border-collapse: collapse;
+}
+
+.source-line:hover .source-line-number,
+.source-line:hover .source-line-issues,
+.source-line:hover .source-line-coverage,
+.source-line:hover .source-line-duplications,
+.source-line:hover .source-line-duplications-extra,
+.source-line:hover .source-line-scm {
+  border-color: #e9e9e9;
+  background-color: #e9e9e9;
+}
+
+.source-line:hover .source-line-code {
+  background-color: #f5f5f5;
+}
+
+.source-line-highlighted .source-line-number,
+.source-line-highlighted:hover .source-line-number,
+.source-line-highlighted .source-line-issues,
+.source-line-highlighted:hover .source-line-issues,
+.source-line-highlighted .source-line-coverage,
+.source-line-highlighted:hover .source-line-coverage,
+.source-line-highlighted .source-line-duplications,
+.source-line-highlighted:hover .source-line-duplications,
+.source-line-highlighted .source-line-duplications-extra,
+.source-line-highlighted:hover .source-line-duplications-extra,
+.source-line-highlighted .source-line-scm,
+.source-line-highlighted:hover .source-line-scm {
+  border-color: #c4dfec !important;
+  background-color: #c4dfec;
+}
+
+.source-line-highlighted .source-line-code,
+.source-line-highlighted:hover .source-line-code {
+  background-color: #d9edf7;
+}
+
+.source-line-filtered .source-line-code {
+  background-color: var(--leakColor) !important;
+}
+
+.source-line-filtered.source-line-filtered-dark .source-line-code {
+  background-color: #f9ebb7 !important;
+}
+
+.source-line-last .source-line-code {
+  padding-bottom: 80px;
+}
+
+.source-viewer pre {
+  height: 18px;
+  padding: 0;
+}
+
+.source-viewer pre,
+.source-meta {
+  line-height: 18px;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: var(--smallFontSize);
+}
+
+.source-line-code {
+  position: relative;
+  padding: 0 10px;
+}
+
+.source-line-code pre {
+  float: left;
+}
+
+.source-line-code .issue-list {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+.source-line-code-inner:before,
+.source-line-code-inner:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.source-line-code-inner:after {
+  clear: both;
+}
+
+.source-line-code-issue {
+  display: inline-block;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAGCAYAAAAPDoR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1M0M2Rjk4M0M3QUYxMUUzODkzRUREMUM5OTNDMjY4QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1M0M2Rjk4NEM3QUYxMUUzODkzRUREMUM5OTNDMjY4QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzQzZGOTgxQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUzQzZGOTgyQzdBRjExRTM4OTNFREQxQzk5M0MyNjhBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bcqJtQAAAEhJREFUeNpi+G+swwDGDAwgbAWlwZiJAQFCgfgwEIfDRaC67ID4NRDnQ2kQnwFZwgFqnANMAQOUYY9sF0wBiCGH5CBkrAgQYACuWi4sSGW8yAAAAABJRU5ErkJggg==);
+  background-repeat: repeat-x;
+  background-size: 4px;
+  background-position: bottom;
+}
+
+.source-meta {
+  vertical-align: top;
+  width: 1px;
+  background-clip: padding-box;
+  user-select: none;
+}
+
+.source-meta:focus {
+  outline: none;
+}
+
+.source-meta[role='button'] {
+  cursor: pointer;
+}
+
+.source-meta + .source-meta {
+  border-left: 1px solid var(--barBackgroundColor);
+}
+
+.source-line-number {
+  min-width: 18px;
+  padding: 0 10px;
+  background-color: var(--barBackgroundColor);
+  color: var(--secondFontColor);
+  text-align: right;
+}
+
+.source-line-number:before {
+  content: attr(data-line-number);
+}
+
+.source-line-issues {
+  position: relative;
+  padding: 0 2px;
+  background-color: var(--barBackgroundColor);
+}
+
+.source-line-issues-counter {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  line-height: 8px;
+  font-size: 8px;
+}
+
+.source-line-coverage {
+  background-color: var(--barBackgroundColor);
+}
+
+.source-line-duplications,
+.source-line-duplications-extra {
+  background-color: var(--barBackgroundColor);
+}
+
+.source-line-duplications-extra {
+  display: none;
+}
+
+.source-duplications-expanded .source-line-duplications {
+  display: none;
+}
+
+.source-duplications-expanded .source-line-duplications-extra {
+  display: table-cell;
+}
+
+.source-line-scm {
+  padding: 0 5px;
+  background-color: var(--barBackgroundColor);
+}
+
+.source-line-scm-inner {
+  max-width: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source-line-scm-inner:before {
+  content: attr(data-author);
+}
+
+.source-line-bar {
+  width: 5px;
+  height: 18px;
+}
+
+.source-line-covered {
+  background-color: var(--green) !important;
+}
+
+.source-line-uncovered {
+  background-color: var(--red) !important;
+}
+
+.source-line-partially-covered {
+  background-color: var(--orange) !important;
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.5) 4px,
+    transparent 4px,
+    transparent 8px,
+    rgba(255, 255, 255, 0.5) 8px,
+    rgba(255, 255, 255, 0.5) 12px,
+    transparent 12px,
+    transparent 16px,
+    rgba(255, 255, 255, 0.5) 16px,
+    rgba(255, 255, 255, 0.5) 20px
+  ) !important;
+}
+
+.source-line-duplicated {
+  background-color: #797979 !important;
+}
+
+.source-viewer-header {
+  position: relative;
+  padding: 2px 10px 4px;
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+}
+
+.source-viewer-header:before,
+.source-viewer-header:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.source-viewer-header:after {
+  clear: both;
+}
+
+.source-viewer-header-bar + .source-viewer-header-bar {
+  border-top: 1px solid var(--barBorderColor);
+}
+
+.source-viewer-header-component {
+  float: left;
+  padding-top: 4px;
+}
+
+.source-viewer-header-component-project {
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
+
+.source-viewer-header-component-name {
+  font-weight: 600;
+}
+
+.source-viewer-header-favorite {
+  position: relative;
+  top: -2px;
+  margin-left: 4px;
+  border-bottom: none;
+}
+
+.source-viewer-header-measures {
+  float: right;
+}
+
+.source-viewer-header-measures-scope {
+  position: relative;
+  float: left;
+}
+
+.source-viewer-header-measure {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 3px 0;
+  font-size: var(--baseFontSize);
+}
+
+.source-viewer-header-measure .rating {
+  font-size: 18px;
+}
+
+.source-viewer-header-measure + .source-viewer-header-measure {
+  margin-left: 25px;
+}
+
+.source-viewer-header-measure-label {
+  display: block;
+  margin-top: 4px;
+  line-height: var(--smallFontSize);
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
+}
+
+.source-viewer-header-measure-value {
+  display: block;
+  line-height: 18px;
+  color: var(--baseFontColor);
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.source-viewer-header-external-link {
+  border-bottom: none;
+}
+
+.source-viewer-header-external-link i {
+  position: relative;
+  top: -4px;
+}
+
+.source-viewer-header-actions {
+  float: right;
+  display: block;
+  margin-left: 25px;
+  padding: 13px 5px;
+}
+
+.source-viewer-header-more-actions {
+  position: absolute;
+  z-index: var(--dropdownMenuZIndex);
+  right: 0;
+  top: 100%;
+  padding: 10px;
+  border: 1px solid var(--barBorderColor);
+  border-right: none;
+  background-color: #fff;
+  line-height: 1.8;
+}
+
+.source-viewer-measures-overlay {
+  width: 1100px;
+  left: 50%;
+  right: auto;
+  margin-left: -550px;
+  padding: 20px 10px;
+  background-color: var(--barBackgroundColor);
+}
+
+.source-viewer-measures-overlay .modal-foot {
+  width: 1100px;
+  left: 50%;
+  right: auto;
+  margin-left: -550px;
+}
+
+.source-viewer-measures-component {
+  float: none;
+  margin: 0 10px 30px;
+}
+
+.source-viewer-measures-modal {
+  background-color: var(--barBackgroundColor);
+}
+
+.source-viewer-measures {
+  margin: 0 -10px;
+  background-color: var(--barBackgroundColor);
+}
+
+.source-viewer-measures:before,
+.source-viewer-measures:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.source-viewer-measures:after {
+  clear: both;
+}
+
+.source-viewer-measures .bubble-popup-section {
+  width: 100%;
+}
+
+.source-viewer-measures + .source-viewer-measures {
+  margin-top: 40px;
+}
+
+.source-viewer-measures-secondary .source-viewer-measures-card {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+
+.source-viewer-measures-section {
+  float: left;
+  width: 25%;
+  margin: -20px 0;
+}
+
+.source-viewer-measures-section-big {
+  width: 50%;
+}
+
+.source-viewer-measures-section-full {
+  width: 100%;
+}
+
+.source-viewer-measures-section + .source-viewer-measures-section-full {
+  margin-top: 20px;
+}
+
+.source-viewer-measures-card {
+  margin: 20px 10px;
+  padding: 10px;
+  border: 1px solid var(--barBorderColor);
+  background-color: #fff;
+}
+
+.source-viewer-measures-card-overflow {
+  overflow: auto;
+}
+
+.source-viewer-measures-card-fixed-height {
+  max-height: 36vh;
+  overflow-y: scroll;
+}
+
+.source-viewer-tests-list {
+  width: 100%;
+  font-size: var(--baseFontSize);
+}
+
+.source-viewer-test-status,
+.source-viewer-test-duration,
+.source-viewer-test-covered-lines {
+  width: 1px;
+}
+
+.source-viewer-test-status,
+.source-viewer-test-duration,
+.source-viewer-test-covered-lines,
+.source-viewer-test-covered-name {
+  vertical-align: middle;
+  padding: 3px;
+}
+
+.source-viewer-test-name {
+  padding-left: 10px;
+  word-break: break-all;
+}
+
+.source-viewer-test-covered-lines {
+  text-align: right;
+}
+
+.source-viewer-issue-location {
+  max-width: 200px;
+  margin-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.source-viewer-flow-location + .source-viewer-flow-location {
+  z-index: 504;
+}
+
+.source-line-issue-locations {
+  float: right;
+  margin-right: -10px;
+}
+
+.source-line-issue-locations:empty {
+  display: none;
+}
+
+.source-viewer-more-code {
+  padding: 40px 0;
+  border-bottom: 1px solid var(--barBorderColor);
+  background-color: var(--barBackgroundColor);
+  text-align: center;
+}
+
+.source-viewer-more-code .spinner {
+  top: -1px;
+}
+
+.source-table + .source-viewer-more-code {
+  border-bottom: none;
+  border-top: 1px solid var(--barBorderColor);
+}
+
 .issue-location {
   display: inline-block;
   vertical-align: top;
@@ -17,3 +522,79 @@
   border-color: #f4b1b0;
   background-color: #f4b1b0;
 }
+
+.measures + .measures {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid var(--barBorderColor);
+}
+
+.measures-chart {
+  display: inline-block;
+  vertical-align: middle;
+  width: 70px;
+  margin-right: 20px;
+  text-align: center;
+}
+
+.measures-chart .rating {
+  font-size: 32px;
+}
+
+.measure {
+  line-height: 1.3333333333333;
+}
+
+.measure-name {
+  display: block;
+  font-size: var(--baseFontSize);
+}
+
+.measure-value {
+  color: var(--darkBlue);
+  font-size: var(--bigFontSize);
+  font-weight: 400;
+}
+
+.measure-big {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.measure-big .measure-name {
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.measure-big .measure-value {
+  font-size: 22px;
+  font-weight: 300;
+}
+
+.measure-big .rating {
+  font-size: 22px;
+}
+
+.measure-big + .measure-big {
+  margin-left: 20px;
+}
+
+.measure-one-line:before,
+.measure-one-line:after {
+  display: table;
+  content: '';
+  line-height: 0;
+}
+
+.measure-one-line:after {
+  clear: both;
+}
+
+.measure-one-line .measure-name {
+  float: left;
+}
+
+.measure-one-line .measure-value {
+  float: right;
+}

server/sonar-web/src/main/js/components/SourceViewer/views/measures-overlay.js

@@ -27,6 +27,7 @@ import { searchIssues } from '../../../api/issues';
 import { getMeasures } from '../../../api/measures';
 import { getMetrics } from '../../../api/metrics';
 import { getTests, getCoveredFiles } from '../../../api/tests';
+import * as theme from '../../../app/theme';
 import { getLocalizedMetricName, getLocalizedMetricDomain } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 
@@ -68,7 +69,7 @@ export default ModalView.extend({
       size: 40,
       thickness: 8,
       color: '#1f77b4',
-      baseColor: '#e6e6e6'
+      baseColor: theme.barBorderColor
     };
 
     this.$('.js-pie-chart').each(function() {

server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js

@@ -24,6 +24,7 @@ import { flatten, isEqual, sortBy, throttle, uniq } from 'lodash';
 import { bisector, extent, max } from 'd3-array';
 import { scaleLinear, scalePoint, scaleTime } from 'd3-scale';
 import { line as d3Line, area, curveBasis } from 'd3-shape';
+import * as theme from '../../app/theme';
 
 /*::
 type Event = { className?: string, name: string, date: Date };
@@ -381,7 +382,7 @@ export default class AdvancedTimeline extends React.PureComponent {
         y={yRange[yRange.length - 1]}
         width={leakWidth}
         height={yRange[0] - yRange[yRange.length - 1]}
-        fill="#fbf3d5"
+        fill={theme.leakColor}
       />
     );
   };

server/sonar-web/src/main/js/components/charts/ZoomTimeLine.js

@@ -27,6 +27,7 @@ import { line as d3Line, area, curveBasis } from 'd3-shape';
 import Draggable, { DraggableCore } from 'react-draggable';
 /*:: import type { DraggableData } from 'react-draggable'; */
 /*:: import type { Point, Serie } from './AdvancedTimeline'; */
+import * as theme from '../../app/theme';
 
 /*::
 type Scale = Function;
@@ -236,7 +237,7 @@ export default class ZoomTimeLine extends React.PureComponent {
         y={yRange[yRange.length - 1]}
         width={xScale.range()[1] - xScale(this.props.leakPeriodDate)}
         height={yRange[0] - yRange[yRange.length - 1]}
-        fill="#fbf3d5"
+        fill={theme.leakColor}
       />
     );
   };

server/sonar-web/src/main/js/components/common/EmptySearch.css

@@ -1,7 +1,7 @@
 .empty-search {
   padding: 60px 0;
-  border: 1px solid #e6e6e6;
+  border: 1px solid var(--barBorderColor);
   border-radius: 2px;
-  color: #777;
+  color: var(--secondFontColor);
   text-align: center;
 }

server/sonar-web/src/main/js/components/common/LocationIndex.css

@@ -9,7 +9,7 @@
   background-color: #d18582;
   color: #fff;
   font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   transition: background-color 0.3s ease;
 }
 

server/sonar-web/src/main/js/components/common/LocationMessage.css

@@ -7,7 +7,7 @@
   background-color: #9e9e9e;
   color: #fff;
   font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
-  font-size: 12px;
+  font-size: var(--smallFontSize);
   text-overflow: ellipsis;
   overflow: hidden;
   transition: background-color 0.3s ease;

server/sonar-web/src/main/js/components/common/StatusIndicator.css

@@ -15,20 +15,20 @@
 }
 
 .status-indicator.big-status-indicator {
-  width: 24px;
-  height: 24px;
-  border-radius: 24px;
+  width: var(--controlHeight);
+  height: var(--controlHeight);
+  border-radius: var(--controlHeight);
   margin: 0;
 }
 
 .status-indicator.red {
-  background-color: #d4333f;
+  background-color: var(--red);
 }
 
 .status-indicator.yellow {
-  background-color: #eabe06;
+  background-color: var(--yellow);
 }
 
 .status-indicator.green {
-  background-color: #00aa00;
+  background-color: var(--green);
 }

server/sonar-web/src/main/js/components/common/UpgradeOrganizationBox.css

@@ -1,4 +1,4 @@
 .upgrade-organization-box {
   max-width: 400px;
-  background-color: #f3f3f3 !important;
+  background-color: var(--barBackgroundColor) !important;
 }

server/sonar-web/src/main/js/components/controls/styles.css

@@ -6,7 +6,7 @@
 
 .date-input-control-input {
   width: 130px;
-  padding-left: 24px !important;
+  padding-left: var(--controlHeight) !important;
   cursor: pointer;
 }
 
@@ -17,12 +17,12 @@
 }
 
 .date-input-control-icon path {
-  fill: #cdcdcd;
+  fill: var(--gray80);
   transition: fill 0.3s ease;
 }
 
 .date-input-control-input:focus + .date-input-control-icon path {
-  fill: #4b9fd5;
+  fill: var(--blue);
 }
 
 .date-input-control-reset {
@@ -36,10 +36,10 @@
   display: inline-block;
   vertical-align: middle;
   width: 48px;
-  height: 24px;
+  height: var(--controlHeight);
   padding: 1px;
-  border: 1px solid #cdcdcd;
-  border-radius: 24px;
+  border: 1px solid var(--gray80);
+  border-radius: var(--controlHeight);
   box-sizing: border-box;
   background-color: #fff;
   cursor: pointer;
@@ -51,14 +51,14 @@
 }
 
 .boolean-toggle:focus {
-  border-color: #4b9fd5;
+  border-color: var(--blue);
   background-color: #f6f6f6;
 }
 
 .boolean-toggle-handle {
   width: 20px;
   height: 20px;
-  border: 1px solid #cdcdcd;
+  border: 1px solid var(--gray80);
   border-radius: 22px;
   box-sizing: border-box;
   background-color: #f6f6f6;
@@ -66,19 +66,19 @@
 }
 
 .boolean-toggle-on {
-  border-color: #236a97;
-  background-color: #236a97;
+  border-color: var(--darkBlue);
+  background-color: var(--darkBlue);
 }
 
 .boolean-toggle-on:hover {
-  background-color: #236a97;
+  background-color: var(--darkBlue);
 }
 
 .boolean-toggle-on:focus {
-  background-color: #236a97;
+  background-color: var(--darkBlue);
 }
 
 .boolean-toggle-on .boolean-toggle-handle {
   border-color: #f6f6f6;
-  transform: translateX(24px);
+  transform: translateX(var(--controlHeight));
 }

server/sonar-web/src/main/js/components/icons-components/AlertErrorIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -33,7 +34,7 @@ export default function AlertErrorIcon({ className, size = 16 }: Props) {
       width={size}
       viewBox="0 0 16 16">
       <path
-        style={{ fill: '#d4333f' }}
+        style={{ fill: theme.red }}
         d="M11.402 10.018q0-0.232-0.17-0.402l-1.616-1.616 1.616-1.616q0.17-0.17 0.17-0.402 0-0.241-0.17-0.411l-0.804-0.804q-0.17-0.17-0.411-0.17-0.232 0-0.402 0.17l-1.616 1.616-1.616-1.616q-0.17-0.17-0.402-0.17-0.241 0-0.411 0.17l-0.804 0.804q-0.17 0.17-0.17 0.411 0 0.232 0.17 0.402l1.616 1.616-1.616 1.616q-0.17 0.17-0.17 0.402 0 0.241 0.17 0.411l0.804 0.804q0.17 0.17 0.411 0.17 0.232 0 0.402-0.17l1.616-1.616 1.616 1.616q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l0.804-0.804q0.17-0.17 0.17-0.411zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
       />
     </svg>

server/sonar-web/src/main/js/components/icons-components/ChangeIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -33,7 +34,7 @@ export default function ChangeIcon({ className, size = 12 }: Props) {
       width={size}
       height={size}>
       <path
-        fill="#236a97"
+        fill={theme.darkBlue}
         d="M3.35 12.82l.85-.84L2.02 9.8l-.84.85v.98h1.2v1.2h.97zM8.2 4.24c0-.13-.08-.2-.22-.2-.06 0-.1.02-.15.06l-5 5c-.05.05-.08.1-.08.17 0 .13.07.2.2.2.07 0 .12-.02.16-.06l5.02-5c.05-.04.07-.1.07-.16zm-.5-1.77l3.83 3.84-7.7 7.7H0v-3.84l7.7-7.7zm6.3.88c0 .33-.1.6-.34.84L12.12 5.7 8.28 1.88 9.8.35c.24-.23.5-.35.85-.35.32 0 .6.12.84.35l2.16 2.16c.23.25.34.53.34.85z"
       />
     </svg>

server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -33,7 +34,7 @@ export default function DeleteIcon({ className, size = 12 }: Props) {
       width={size}
       height={size}>
       <path
-        fill="#d4333f"
+        fill={theme.red}
         d="M14 11.27c0 .3-.1.58-.33.8l-1.6 1.6c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33L7 10.2l-3.46 3.47c-.22.22-.5.33-.8.33-.32 0-.6-.1-.8-.33l-1.6-1.6c-.23-.22-.34-.5-.34-.8 0-.32.1-.6.33-.8L3.8 7 .32 3.54C.1 3.32 0 3.04 0 2.74c0-.32.1-.6.33-.8l1.6-1.6c.22-.23.5-.34.8-.34.32 0 .6.1.8.33L7 3.8 10.46.32c.22-.22.5-.33.8-.33.32 0 .6.1.8.33l1.6 1.6c.23.22.34.5.34.8 0 .32-.1.6-.33.8L10.2 7l3.47 3.46c.22.22.33.5.33.8z"
       />
     </svg>

server/sonar-web/src/main/js/components/icons-components/LongLivingBranchIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -25,7 +26,7 @@ interface Props {
   size?: number;
 }
 
-export default function LongLivingBranchIcon({ className, color = '#4b9fd5', size = 16 }: Props) {
+export default function LongLivingBranchIcon({ className, color = theme.blue, size = 16 }: Props) {
   /* eslint-disable max-len */
   return (
     <svg

server/sonar-web/src/main/js/components/icons-components/OrganizationIcon.js

@@ -19,6 +19,7 @@
  */
 // @flow
 import React from 'react';
+import * as theme from '../../app/theme';
 
 /*::
 type Props = { className?: string, size?: number };
@@ -34,7 +35,7 @@ export default function OrganizationIcon({ className, size = 16 } /*: Props */)
       width={size}
       viewBox="0 0 16 16">
       <path
-        style={{ fill: '#4b9fd5' }}
+        style={{ fill: theme.blue }}
         d="M13.5 6c-.4 0-.7.1-1.1.2L11 4.8v-.3C11 3.1 9.9 2 8.5 2S6 3.1 6 4.5v.2L4.5 6.2c-.3-.1-.7-.2-1-.2C2.1 6 1 7.1 1 8.5S2.1 11 3.5 11 6 9.9 6 8.5c0-.7-.3-1.3-.7-1.7l1-1c.4.6 1 1 1.7 1.1V9c-1.1.2-2 1.2-2 2.4C6 12.9 7.1 14 8.5 14s2.5-1.1 2.5-2.5c0-1.2-.9-2.2-2-2.4V6.9c.7-.1 1.2-.5 1.6-1.1l1 1c-.4.4-.6 1-.6 1.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1 2.5-2.4S14.9 6 13.5 6zm-10 4C2.7 10 2 9.3 2 8.5S2.7 7 3.5 7 5 7.7 5 8.5 4.3 10 3.5 10zm6.5 1.5c0 .8-.7 1.5-1.5 1.5S7 12.3 7 11.5 7.7 10 8.5 10s1.5.7 1.5 1.5zM8.5 6C7.7 6 7 5.3 7 4.5S7.7 3 8.5 3s1.5.7 1.5 1.5S9.3 6 8.5 6zm5 4c-.8 0-1.5-.7-1.5-1.5S12.7 7 13.5 7s1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"
       />
     </svg>

server/sonar-web/src/main/js/components/icons-components/PullRequestIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -25,7 +26,7 @@ interface Props {
   size?: number;
 }
 
-export default function PullRequestIcon({ className, color = '#4b9fd5', size = 16 }: Props) {
+export default function PullRequestIcon({ className, color = theme.blue, size = 16 }: Props) {
   /* eslint-disable max-len */
   return (
     <svg

server/sonar-web/src/main/js/components/icons-components/ShortLivingBranchIcon.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import * as theme from '../../app/theme';
 
 interface Props {
   className?: string;
@@ -25,7 +26,7 @@ interface Props {
   size?: number;
 }
 
-export default function ShortLivingBranchIcon({ className, color = '#4b9fd5', size = 16 }: Props) {
+export default function ShortLivingBranchIcon({ className, color = theme.blue, size = 16 }: Props) {
   /* eslint-disable max-len */
   return (
     <svg

server/sonar-web/src/main/js/components/nav/ContextNavBar.css

@@ -1,12 +1,12 @@
 .navbar-context,
 .navbar-context .navbar-inner {
-  background-color: #f3f3f3;
+  background-color: var(--barBackgroundColor);
   z-index: 420;
 }
 
 .navbar-context .navbar-inner {
   padding-top: 5px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid var(--barBorderColor);
 }
 
 .navbar-context .navbar-inner-with-notif {
@@ -25,17 +25,17 @@
   right: 0;
   line-height: 30px;
   padding: 0 10px;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
   text-align: right;
 }
 
 .navbar-context-description {
   display: inline-block;
-  line-height: 24px;
+  line-height: var(--controlHeight);
   margin-left: 16px;
   padding-top: 4px;
   padding-left: 4px;
-  color: #777;
-  font-size: 12px;
+  color: var(--secondFontColor);
+  font-size: var(--smallFontSize);
 }

server/sonar-web/src/main/js/components/nav/NavBarTabs.css

@@ -12,12 +12,12 @@
   display: block;
   padding: 7px 0 4px;
   border-bottom: 3px solid transparent;
-  color: #444;
+  color: var(--baseFontColor);
   transition: none;
 }
 
 .navbar-tabs > li > a.active,
 .navbar-tabs > li > a:hover,
 .navbar-tabs > li > a:focus {
-  border-bottom-color: #4b9fd5;
+  border-bottom-color: var(--blue);
 }

server/sonar-web/src/main/js/components/select-list/controls.js

@@ -1,77 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import { debounce } from 'lodash';
-import RadioToggle from '../controls/RadioToggle';
-import { translate } from '../../helpers/l10n';
-
-export default class Controls extends React.PureComponent {
-  componentWillMount() {
-    this.search = debounce(this.search, 100);
-  }
-
-  search = () => {
-    const query = this.refs.search.value;
-    this.props.search(query);
-  };
-
-  onCheck = value => {
-    switch (value) {
-      case 'selected':
-        this.props.loadSelected();
-        break;
-      case 'deselected':
-        this.props.loadDeselected();
-        break;
-      default:
-        this.props.loadAll();
-    }
-  };
-
-  render() {
-    const selectionOptions = [
-      { value: 'selected', label: 'Selected' },
-      { value: 'deselected', label: 'Not Selected' },
-      { value: 'all', label: 'All' }
-    ];
-
-    return (
-      <div className="select-list-control">
-        <div className="pull-left">
-          <RadioToggle
-            name="select-list-selection"
-            options={selectionOptions}
-            onCheck={this.onCheck}
-            value={this.props.selection}
-          />
-        </div>
-        <div className="pull-right">
-          <input
-            onChange={this.search}
-            ref="search"
-            type="search"
-            placeholder={translate('search_verb')}
-            initialValue={this.props.query}
-          />
-        </div>
-      </div>
-    );
-  }
-}

server/sonar-web/src/main/js/components/select-list/footer.js

@@ -1,55 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class Footer extends React.PureComponent {
-  static propTypes = {
-    count: PropTypes.number.isRequired,
-    total: PropTypes.number.isRequired,
-    loadMore: PropTypes.func.isRequired
-  };
-
-  loadMore = e => {
-    e.preventDefault();
-    this.props.loadMore();
-  };
-
-  renderLoadMoreLink = () => {
-    const hasMore = this.props.total > this.props.count;
-    if (!hasMore) {
-      return null;
-    }
-    return (
-      <a onClick={this.loadMore} className="spacer-left" href="#">
-        show more
-      </a>
-    );
-  };
-
-  render() {
-    return (
-      <footer className="spacer-top note text-center">
-        {this.props.count}/{this.props.total} shown
-        {this.renderLoadMoreLink()}
-      </footer>
-    );
-  }
-}

server/sonar-web/src/main/js/components/select-list/item.js

@@ -1,54 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Checkbox from '../controls/Checkbox';
-
-export default class Item extends React.PureComponent {
-  static propTypes = {
-    item: PropTypes.any.isRequired,
-    renderItem: PropTypes.func.isRequired,
-    selectItem: PropTypes.func.isRequired,
-    deselectItem: PropTypes.func.isRequired
-  };
-
-  onCheck = checked => {
-    if (checked) {
-      this.props.selectItem(this.props.item);
-    } else {
-      this.props.deselectItem(this.props.item);
-    }
-  };
-
-  render() {
-    const renderedItem = this.props.renderItem(this.props.item);
-    return (
-      <li className="panel panel-vertical">
-        <div className="display-inline-block text-middle spacer-right">
-          <Checkbox checked={!!this.props.item.selected} onCheck={this.onCheck} />
-        </div>
-        <div
-          className="display-inline-block text-middle"
-          dangerouslySetInnerHTML={{ __html: renderedItem }}
-        />
-      </li>
-    );
-  }
-}

server/sonar-web/src/main/js/components/select-list/list.js

@@ -1,40 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Item from './item';
-
-export default class List extends React.PureComponent {
-  static propTypes = {
-    items: PropTypes.array.isRequired,
-    renderItem: PropTypes.func.isRequired,
-    getItemKey: PropTypes.func.isRequired,
-    selectItem: PropTypes.func.isRequired,
-    deselectItem: PropTypes.func.isRequired
-  };
-
-  render() {
-    const renderedItems = this.props.items.map(item => {
-      const key = this.props.getItemKey(item);
-      return <Item key={key} {...this.props} item={item} />;
-    });
-    return <ul>{renderedItems}</ul>;
-  }
-}

server/sonar-web/src/main/js/components/select-list/main.js

@@ -1,109 +0,0 @@
-/*
- * SonarQube
- * Copyright (C) 2009-2017 SonarSource SA
- * mailto:info AT sonarsource DOT com
- *
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU Lesser General Public
- * License as published by the Free Software Foundation; either
- * version 3 of the License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program; if not, write to the Free Software Foundation,
- * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import Controls from './controls';
-import List from './list';
-import Footer from './footer';
-
-export default class Main extends React.PureComponent {
-  static propTypes = {
-    loadItems: PropTypes.func.isRequired,
-    renderItem: PropTypes.func.isRequired,
-    getItemKey: PropTypes.func.isRequired,
-    selectItem: PropTypes.func.isRequired,
-    deselectItem: PropTypes.func.isRequired
-  };
-
-  state = {
-    items: [],
-    total: 0,
-    selection: 'selected',
-    query: null
-  };
-
-  componentDidMount() {
-    this.loadItems();
-  }
-
-  loadItems = () => {
-    const options = {
-      selection: this.state.selection,
-      query: this.state.query,
-      page: 1
-    };
-    this.props.loadItems(options, (items, paging) => {
-      this.setState({ items, total: paging.total, page: paging.pageIndex });
-    });
-  };
-
-  loadMoreItems = () => {
-    const options = {
-      selection: this.state.selection,
-      query: this.state.query,
-      page: this.state.page + 1
-    };
-    this.props.loadItems(options, (items, paging) => {
-      const newItems = [].concat(this.state.items, items);
-      this.setState({ items: newItems, total: paging.total, page: paging.pageIndex });
-    });
-  };
-
-  loadSelected = () => {
-    this.setState({ selection: 'selected', query: null }, this.loadItems);
-  };
-
-  loadDeselected = () => {
-    this.setState({ selection: 'deselected', query: null }, this.loadItems);
-  };
-
-  loadAll = () => {
-    this.setState({ selection: 'all', query: null }, this.loadItems);
-  };
-
-  search = query => {
-    this.setState({ query }, this.loadItems);
-  };
-
-  render() {
-    return (
-      <div className="select-list-container">
-        <Controls
-          selection={this.state.selection}
-          query={this.state.query}
-          loadSelected={this.loadSelected}
-          loadDeselected={this.loadDeselected}
-          loadAll={this.loadAll}
-          search={this.search}
-        />
-
-        <div className="select-list-wrapper">
-          <List {...this.props} items={this.state.items} />
-        </div>
-
-        <Footer
-          count={this.state.items.length}
-          total={this.state.total}
-          loadMore={this.loadMoreItems}
-        />
-      </div>
-    );
-  }
-}