mazza/map.css at master · DevProgress/mazza · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
.map-container {
  background-color: #F1F1F1;
  overflow-y: hidden;
}

.map {
  background-color: #F1F1F1;
  width: 70%;
  position: relative;
  margin: 0 auto;

}
.map > .map-ol {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.map-bg img {
  width: 100%;
}

svg {
  display: block;
}
svg .state {
  /* stroke: #000000; */
  fill: rgba(255, 255, 255, 0.0);
}
svg .outline {
  stroke: none;
  fill: none;
}

.overlay {
  fill: none;
}

/* Hover is on <g> element for multi path states e.g., MI */
svg g g:hover .state {
  stroke: rgb(255, 255, 255);
  cursor: pointer;
  stroke-width: 3;
}

svg g#map-states g.active .state {
  stroke: rgb(255, 255, 255);
  cursor: pointer;
  stroke-width: 3;
}

svg g.mini-state-bubbles g.active rect
{
  stroke: rgb(255, 255, 255);
  stroke-width: 3;
}

#desktop-map {
  display: none;
}

@media only screen and (min-width: 768px) {
#desktop-map { display: block; }
#mobile-map { display: none; }
}

@media screen and (max-width: 768px) and (min-width: 0px) {
  .map {
    width: 100%;
  }
}
/*
.state:hover {
  stroke: rgb(255, 255, 255);
  cursor: pointer;
  stroke-width: 3;
}*/

.boundary {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


g.mini-state-bubbles
{
  transform: translate(760px,700px);
  -ms-transform: translate(760px,700px); /* IE 9 */
  -webkit-transform: translate(760px,700px); /* Safari and Chrome */
  -o-transform: translate(760px,700px); /* Opera */
  -moz-transform: translate(760px,700px); /* Firefox */
}

g.mini-state-bubble rect
{
  width: 50px;
  height: 50px;
  fill: green;
  stroke: rgb(44, 31, 55);
  stroke-width: 3;
  cursor: pointer;
}

g.mini-state-bubble text
{
  transform: translate(10px,30px);
  -ms-transform: translate(10px,30px); /* IE 9 */
  -webkit-transform: translate(10px,30px); /* Safari and Chrome */
  -o-transform: translate(10px,30px); /* Opera */
  -moz-transform: translate(10px,30px); /* Firefox */
  fill: black;
  font-size: 19px;
  cursor: pointer;
  font-weight: bold;
}

g.mini-state-bubble.state-nh rect { fill: rgb(78,77,73); }
g.mini-state-bubble.state-nh text { fill: rgb(225,212,76); }
g.mini-state-bubble.state-ri rect { fill: rgb(128,121,116); }
g.mini-state-bubble.state-ri text { fill: rgb(225,212,76); }
g.mini-state-bubble.state-nj rect { fill: rgb(177,177,181); }
g.mini-state-bubble.state-nj text { fill: rgb(188,28,38); }
g.mini-state-bubble.state-md rect { fill: rgb(15,156,73); }
g.mini-state-bubble.state-md text { fill: rgb(82,96,79); }
g.mini-state-bubble.state-vt rect { fill: rgb(188,28,38); }
g.mini-state-bubble.state-vt text { fill: rgb(177,177,181); }
g.mini-state-bubble.state-ma rect { fill: rgb(225,212,76); }
g.mini-state-bubble.state-ma text { fill: rgb(78,77,73); }
g.mini-state-bubble.state-ct rect { fill: rgb(61,41,105); }
g.mini-state-bubble.state-ct text { fill: rgb(225,64,5); }
g.mini-state-bubble.state-de rect { fill: rgb(2,159,215); }
g.mini-state-bubble.state-de text { fill: rgb(103,102,98); }