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 a6fbd7d..eb6f48c 100644 (file)
--- a/src/stylesheets/base.scss
+++ b/src/stylesheets/base.scss
@@ -7,11 +7,6 @@ body {
 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,6 +30,11 @@ svg {
   }
 
   text {
+    &.first { fill: $green; }
+    &.second { fill: $blue; }
+    &.third { fill: $orange; }
+    &.fourth { fill: $violet; }
+
     &.first, &.second, &.third, &.fourth {
       font-size: 16px;
       font-weight: bold;
@@ -39,6 +46,13 @@ svg {
       fill: $white;
     }
 
+    &.blip-name {
+      font-size: 12px;
+      font-weight: bold;
+      fill: $black;
+      display: none;
+    }
+
     &.line-text {
       font-weight: bold;
       text-transform: uppercase;