[NO JIRA] Use flexbox for styling ratings

diff --git a/server/sonar-web/src/main/js/apps/component-measures/style.css b/server/sonar-web/src/main/js/apps/component-measures/style.css
index 2e7b5b50693653821abb338b134d7668de406340..91aa60374a38148940570278ad27f8ba182d8807 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -107,7 +107,6 @@ button.search-navigator-facet {
 .measure-details-value .rating {
   width: 18px;
   height: 18px;
-  line-height: 18px;
   margin-top: -2px;
   margin-bottom: -2px;
   font-size: var(--smallFontSize);

diff --git a/server/sonar-web/src/main/js/components/ui/Rating.css b/server/sonar-web/src/main/js/components/ui/Rating.css
index da2ce4dc66e32ce433a1eec27dcce9256f9a1a3f..ca0471320e2561f2e4713b4f009bd940d902b06a 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/Rating.css
+++ b/server/sonar-web/src/main/js/components/ui/Rating.css
@@ -18,16 +18,24 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 .rating {
-  display: inline-block;
+  display: inline-flex;
   width: var(--controlHeight);
   height: var(--controlHeight);
-  line-height: calc(var(--controlHeight) - 1px);
   border-radius: var(--controlHeight);
   border: 1px solid var(--blacka38);
   box-sizing: border-box;
   font-size: var(--bigFontSize);
   font-weight: 400;
-  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.rating-small {
+  width: 20px;
+  height: 20px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  font-size: var(--mediumFontSize);
 }
 
 .rating-muted {
@@ -64,12 +72,3 @@ a > .rating-E,
   color: var(--white);
   background-color: var(--error500);
 }
-
-.rating-small {
-  width: 20px;
-  height: 20px;
-  line-height: 19px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  font-size: var(--mediumFontSize);
-}