src/stylesheets/base.scss

   1 @import 'colors';
   2
   3 body {
   4   font: 11px 'Open Sans';
   5 }
   6
   7 svg {
   8   padding: 20px;
   9
  10   circle {
  11     &:nth-child(1) { stroke: none; fill: $grey-light; }
  12     &:nth-child(2) { stroke: none; fill: $grey; }
  13     &:nth-child(3) { stroke: none; fill: $grey-dark; }
  14     &:nth-child(4) { stroke: none; fill: $grey-darkest; }
  15   }
  16
  17   .blip-group {
  18     cursor: pointer;
  19   }
  20
  21   circle, polygon {
  22     &.first { fill: $green; stroke: $white; }
  23     &.second { fill: $blue; stroke: $white; }
  24     &.third { fill: $orange; stroke: $white; }
  25     &.fourth { fill: $violet; stroke: $white; }
  26   }
  27
  28   line {
  29     stroke: $grey-alpha-03;
  30   }
  31
  32   text {
  33     &.first { fill: $green; }
  34     &.second { fill: $blue; }
  35     &.third { fill: $orange; }
  36     &.fourth { fill: $violet; }
  37
  38     &.first, &.second, &.third, &.fourth {
  39       font-size: 16px;
  40       font-weight: bold;
  41     }
  42
  43     &.blip-text {
  44       font-size: 9px;
  45       font-style: italic;
  46       fill: $white;
  47     }
  48
  49     &.blip-name {
  50       font-size: 12px;
  51       font-weight: bold;
  52       fill: $black;
  53       display: none;
  54     }
  55
  56     &.line-text {
  57       font-weight: bold;
  58       text-transform: uppercase;
  59       fill: $black;
  60     }
  61   }
  62 }
  63
  64 .radar-ref-table {
  65   width: 1080px;
  66   font-size: 16px;
  67   line-height: 26px;
  68   padding: 20px;
  69
  70   tr:nth-child(odd) {
  71     background: $grey-darkest;
  72   }
  73
  74   tr:nth-child(even) {
  75     background: $grey;
  76   }
  77
  78   td {
  79     padding: 10px 15px;
  80   }
  81
  82   tr.radar-ref-status-group {
  83     font-size: 20px;
  84     font-weight: bold;
  85     background: $grey-lightest;
  86   }
  87 }