clean up css

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

@@ -57,6 +57,7 @@
 
 .page-title {
   float: left;
+  margin-bottom: 0;
   line-height: @formControlHeight;
 }
 

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

@@ -20,6 +20,9 @@
 @import (reference) "../variables";
 @import (reference) "../mixins";
 
+
+// Base
+
 .link-variant(@baseColor, @hoverColor, @borderColor) {
   border-bottom: 1px solid @borderColor;
   color: @baseColor;
@@ -42,12 +45,23 @@ a {
   &:active, &:focus { border-bottom-color: @lightBlue; }
 }
 
+
+// Misc
+
 .link-no-underline { border-bottom: none; }
 
-a.active-link {
-  border-bottom: none;
+a.active-link,
+.link-active {
+  .link-no-underline;
   font-weight: 500;
 }
 
-a.text-danger,
-.link-red /* deprecated */ { .link-variant(@red, @red, @lightRed); }
+
+// Color
+
+.link-red, /* deprecated */
+a.text-danger  { .link-variant(@red,             darken(@red, 10%),             lighten(@red, 40%)); }
+a.text-muted   { .link-variant(@secondFontColor, darken(@secondFontColor, 10%), lighten(@secondFontColor, 40%)); }
+a.text-warning { .link-variant(@orange,          lighten(@orange, 10%),         lighten(@orange, 40%)); }
+a.text-info    { }
+a.text-success { .link-variant(@green,           darken(@green, 10%),           lighten(@green, 40%)); }

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

@@ -22,14 +22,24 @@
 @import (reference) "../components/ui";
 
 ol, ul {
+  padding-left: 0;
   list-style: none;
 }
 
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
+
+// Styled lists
+
+.list-styled {
+  margin-bottom: 10px;
+  padding-left: 40px;
+
+  ul& { list-style: disc; }
+  ol& { list-style: decimal; }
 }
 
+
+// Inline lists
+
 .list-inline {
   padding-left: 0;
   margin-left: -5px;
@@ -42,6 +52,9 @@ ol, ul {
   padding-left: 5px;
 }
 
+
+// Definition lists
+
 dl {
   margin-top: 0;
   margin-bottom: 20px;

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

@@ -35,11 +35,6 @@
 .note {
   color: @secondFontColor;
   font-size: @smallFontSize;
-
-  img {
-    // FIXME why bottom?
-    vertical-align: bottom;
-  }
 }
 
 .spacer-left   { margin-left: 8px; }
@@ -78,3 +73,16 @@ td.spacer-top    { padding-top: 8px; }
 .disabled-pointer-events {
   pointer-events: none !important;
 }
+
+
+// Background Color
+
+.bg-variant(@color) {
+  background-color: @color;
+  color: #fff;
+}
+
+.bg-danger  { .bg-variant(@red); }
+.bg-warning { .bg-variant(@orange); }
+.bg-info    { .bg-variant(@blue); }
+.bg-success { .bg-variant(@green); }

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

@@ -21,6 +21,9 @@
 @import (reference) "../mixins";
 @import (reference) "../components/ui";
 
+
+// Top Level
+
 html, body {
   color: @baseFontColor;
 }
@@ -31,94 +34,76 @@ body {
   line-height: @baseLineHeight;
 }
 
-h1, .h1 {
-  line-height: @formControlHeight;
-  color: @baseFontColor;
-  font-size: @bigFontSize;
-  font-weight: 300;
-}
 
-h2, .h2 {
-  line-height: @formControlHeight;
-  color: @baseFontColor;
-  font-size: @bigFontSize;
-  font-weight: 300;
-}
+// Headers
 
-h3, .h3 {
+.header(@h) {
   line-height: @formControlHeight;
-  color: @baseFontColor;
-  font-size: @baseFontSize;
-  font-weight: 500;
-}
+  color: ~"@{@{h}-font-color}";
+  font-size: ~"@{@{h}-font-size}";
+  font-weight: ~"@{@{h}-font-weight}";
 
-h4, .h4, h5, .h5 {
-  line-height: @formControlHeight;
-  color: @secondFontColor;
-  font-size: @smallFontSize;
-  font-weight: 400;
+  img { vertical-align: middle; }
 }
 
-h6 {
-  line-height: inherit;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
+h1, .h1 { .header(h1); }
+h2, .h2 { .header(h2); }
+h3, .h3 { .header(h3); }
+h4, .h4 { .header(h4); }
+h5, .h5 { .header(h5); }
+h6, .h6 { .header(h6); }
 
-h1 img, .h1 img, h2 img, .h2 img, h3 img, .h3 img, h4 img, .h4 img {
-  vertical-align: middle;
-}
 
-sup {
-  vertical-align: text-top;
-}
+// Superset & Subset
 
-sub {
-  vertical-align: text-bottom;
-}
+sup { vertical-align: text-top; }
+sub { vertical-align: text-bottom; }
 
-em {
-  font-style: italic;
-}
 
-strong {
-  font-weight: bold;
-}
+// Emphasising
+
+em     { font-style: italic; }
+strong { font-weight: bold; }
+
+
+// Quotes
 
 blockquote {
-  border-left: 3px solid #E5E5E5;
+  border-left: 3px solid @barBorderColor;
   padding: 0 8px;
-  line-height: 16px;
+  line-height: 1.5;
 }
 
 blockquote cite {
-  line-height: 16px;
-  padding-left: 20px;
-  background: url('../images/reviews/comment.png') no-repeat left center;
-  font-size: 12px;
-  color: #888;
+  line-height: 1.5;
+  color: @secondFontColor;
+  font-size: @smallFontSize;
 }
 
+
+// Size
+
 small,
-.small {
-  font-size: (100% * (@smallFontSize / @baseFontSize));
-}
+.small { font-size: (100% * (@smallFontSize / @baseFontSize)); }
 
-.big {
-  font-size: (100% * (@bigFontSize / @baseFontSize));
-}
+.big   { font-size: (100% * (@bigFontSize / @baseFontSize)); }
 
 .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; }
 
-.text-top    { vertical-align: top; }
-.text-middle { vertical-align: middle; }
-.text-bottom { vertical-align: bottom; }
+.text-top     { vertical-align: top; }
+.text-middle  { vertical-align: middle; }
+.text-bottom  { vertical-align: bottom; }
+
+
+// Overflow
 
 .text-ellipsis {
   overflow: hidden;
@@ -126,6 +111,19 @@ small,
   white-space: nowrap;
 }
 
+
+// Transformation
+
+.text-uppercase    { text-transform: uppercase; }
+.text-lowercase    { text-transform: lowercase; }
 .text-no-transform { text-transform: none; }
 
-.text-danger { color: @red; }
+
+// Color
+
+.text-emphasis-variant(@color) { color: @color; }
+.text-muted   { .text-emphasis-variant(@secondFontColor); }
+.text-danger  { .text-emphasis-variant(@red); }
+.text-warning { .text-emphasis-variant(@orange); }
+.text-info    { .text-emphasis-variant(@blue); }
+.text-success { .text-emphasis-variant(@green); }

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

@@ -99,6 +99,33 @@
 
 
 
+/*
+ * Headers
+ */
+
+@h1-font-size: @baseFontSize + 3px;
+@h2-font-size: @baseFontSize + 2px;
+@h3-font-size: @baseFontSize + 1px;
+@h4-font-size: @baseFontSize;
+@h5-font-size: @baseFontSize;
+@h6-font-size: @baseFontSize;
+
+@h1-font-color: #000;
+@h2-font-color: #000;
+@h3-font-color: #000;
+@h4-font-color: #000;
+@h5-font-color: #000;
+@h6-font-color: #000;
+
+@h1-font-weight: 300;
+@h2-font-weight: 300;
+@h3-font-weight: 500;
+@h4-font-weight: 500;
+@h5-font-weight: 500;
+@h6-font-weight: 500;
+
+
+
 /*
  * Icons
  */