From 97c9e86ce83da5a98181466f60d0862eb4d84703 Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Tue, 10 Mar 2015 16:38:58 +0100 Subject: [PATCH] clean up css --- .../src/main/less/components/page.less | 1 + .../sonar-web/src/main/less/init/links.less | 22 +++- .../sonar-web/src/main/less/init/lists.less | 19 ++- server/sonar-web/src/main/less/init/misc.less | 18 ++- server/sonar-web/src/main/less/init/type.less | 118 +++++++++--------- server/sonar-web/src/main/less/variables.less | 27 ++++ 6 files changed, 133 insertions(+), 72 deletions(-) diff --git a/server/sonar-web/src/main/less/components/page.less b/server/sonar-web/src/main/less/components/page.less index 6defd6c11e6..342c99b49df 100644 --- a/server/sonar-web/src/main/less/components/page.less +++ b/server/sonar-web/src/main/less/components/page.less @@ -57,6 +57,7 @@ .page-title { float: left; + margin-bottom: 0; line-height: @formControlHeight; } diff --git a/server/sonar-web/src/main/less/init/links.less b/server/sonar-web/src/main/less/init/links.less index 92454d2c397..525c339e2c8 100644 --- a/server/sonar-web/src/main/less/init/links.less +++ b/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%)); } diff --git a/server/sonar-web/src/main/less/init/lists.less b/server/sonar-web/src/main/less/init/lists.less index 90a84a25624..dafabcc138d 100644 --- a/server/sonar-web/src/main/less/init/lists.less +++ b/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; diff --git a/server/sonar-web/src/main/less/init/misc.less b/server/sonar-web/src/main/less/init/misc.less index 69144c6dd04..28b11efdaea 100644 --- a/server/sonar-web/src/main/less/init/misc.less +++ b/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); } diff --git a/server/sonar-web/src/main/less/init/type.less b/server/sonar-web/src/main/less/init/type.less index 8ff06ac2843..756597cf14a 100644 --- a/server/sonar-web/src/main/less/init/type.less +++ b/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); } diff --git a/server/sonar-web/src/main/less/variables.less b/server/sonar-web/src/main/less/variables.less index 3483743ef54..6deab8de02e 100644 --- a/server/sonar-web/src/main/less/variables.less +++ b/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 */ -- 2.39.5