SONAR-9608 SONAR-9634 Create the measure list view

1 files changed, 34 insertions, 13 deletions

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 fc294c55dee..1e3aa63a269 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/style.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/style.css
@@ -1,19 +1,45 @@
-.measures-domains-leak-header {
-  float: right;
+.domain-measures-leak {
   background-color: #fbf3d5;
   border: 1px solid #eae3c7;
-  padding: 4px 10px;
-  white-space: nowrap;
+  padding: 4px 6px;
 }
 
-.domain-measures-leak {
-  background-color: #fbf3d5;
-  border: 1px solid #eae3c7;
+.facet .domain-measures-leak {
   padding: 4px 4px;
   margin: -5px -5px;
 }
 
-.domain-measures-value .rating {
+.domain-measures-leak-header {
+  background-color: #fbf3d5;
+  border: 1px solid #eae3c7;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+.measure-details-header {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.measure-details-metric {
+  display: flex;
+  align-items: center;
+}
+
+.measure-details-secondary {
+  display: inline-block;
+  width: 260px;
+  margin-left: 4px;
+}
+
+.measure-details-secondary .bar-chart {
+  margin-top: -10px;
+}
+
+.domain-measures-value .rating,
+.measure-details-value .rating {
   width: 18px;
   height: 18px;
   line-height: 18px;
@@ -21,8 +47,3 @@
   margin-bottom: -2px;
   font-size: 12px;
 }
-
-.domain-measures-leak .rating {
-  margin-top: -3px;
-  margin-bottom: -3px;
-}