added blip name on blip hovering, fixed rings in the example

[tech-radar.git] / src / stylesheets / base.scss

diff --git a/src/stylesheets/base.scss b/src/stylesheets/base.scss
index 4a59d22..eb6f48c 100644 (file)
--- a/src/stylesheets/base.scss
+++ b/src/stylesheets/base.scss
@@ -1,17 +1,12 @@
 @import 'colors';
 
 body {
-  font: 9px 'Open Sans';
+  font: 11px 'Open Sans';
 }
 
 svg {
   padding: 20px;
 
-  .first { fill: $green; }
-  .second { fill: $blue; }
-  .third { fill: $orange; }
-  .fourth { fill: $violet; }
-
   circle {
     &:nth-child(1) { stroke: none; fill: $grey-light; }
     &:nth-child(2) { stroke: none; fill: $grey; }
@@ -19,8 +14,15 @@ svg {
     &:nth-child(4) { stroke: none; fill: $grey-darkest; }
   }
 
+  .blip-group {
+    cursor: pointer;
+  }
+
   circle, polygon {
-    stroke: $white;
+    &.first { fill: $green; stroke: $white; }
+    &.second { fill: $blue; stroke: $white; }
+    &.third { fill: $orange; stroke: $white; }
+    &.fourth { fill: $violet; stroke: $white; }
   }
 
   line {
@@ -28,16 +30,58 @@ svg {
   }
 
   text {
-    .blip-text {
+    &.first { fill: $green; }
+    &.second { fill: $blue; }
+    &.third { fill: $orange; }
+    &.fourth { fill: $violet; }
+
+    &.first, &.second, &.third, &.fourth {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    &.blip-text {
+      font-size: 9px;
       font-style: italic;
       fill: $white;
     }
 
-    .line-text {
-      font-size: 16px;
+    &.blip-name {
+      font-size: 12px;
+      font-weight: bold;
+      fill: $black;
+      display: none;
+    }
+
+    &.line-text {
       font-weight: bold;
       text-transform: uppercase;
       fill: $black;
     }
   }
 }
+
+.radar-ref-table {
+  width: 1080px;
+  font-size: 16px;
+  line-height: 26px;
+  padding: 20px;
+
+  tr:nth-child(odd) {
+    background: $grey-darkest;
+  }
+
+  tr:nth-child(even) {
+    background: $grey;
+  }
+
+  td {
+    padding: 10px 15px;
+  }
+
+  tr.radar-ref-status-group {
+    font-size: 20px;
+    font-weight: bold;
+    background: $grey-lightest;
+  }
+}