histogram/style.css at master · Daviste/histogram · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Roboto";
  margin: 0;
}

text {
  font-family: "Roboto";
}

.base-area {
  fill: #D7D7D7;
}

.domain {
  display: none;
}
.axis line {
  stroke: #808080;
  stroke-width: 4px;
  stroke-linecap: round;
}
.tick line {
  stroke: #808080;
  stroke-width: 3px;
  stroke-linecap: round;
}
.x-axis .tick {
  text {
    translate: 0 4px;
  }
}
.axis {
  .label {
    fill: black;
  }

  &.y-axis {
    .label {
      transform: translate(21px, 21px);
      text-anchor: end;
    }
    .tick {
      &:nth-of-type(1) {
        display: none;
      }
      text {
        translate: -4px 0;
      }
    }
  }
}

.legend {
  .label {
    text-anchor: start;
  }
}

.tooltip {
  text {
    fill: black;
    text-anchor: end;
  }
}

.shadow {
  filter: drop-shadow( 1px -1px 1px rgba(0, 0, 0, .5));
}