1 |
|
2 | .bb {
|
3 | svg {
|
4 | font: 10px sans-serif;
|
5 | -webkit-tap-highlight-color: rgba(0,0,0,0);
|
6 | }
|
7 |
|
8 | path, line {
|
9 | fill: none;
|
10 | stroke: #000;
|
11 | }
|
12 |
|
13 | text, .bb-button {
|
14 | -webkit-user-select: none;
|
15 | -moz-user-select: none;
|
16 | user-select: none;
|
17 | }
|
18 | }
|
19 |
|
20 | .bb-legend-item-tile,
|
21 | .bb-xgrid-focus,
|
22 | .bb-ygrid-focus,
|
23 | .bb-ygrid,
|
24 | .bb-event-rect,
|
25 | .bb-bars path {
|
26 | shape-rendering: crispEdges;
|
27 | }
|
28 |
|
29 | .bb-chart-arc {
|
30 | .bb-gauge-value {
|
31 | fill: #000;
|
32 | }
|
33 |
|
34 | path {
|
35 | stroke: #fff;
|
36 | }
|
37 |
|
38 | rect {
|
39 | stroke: #fff;
|
40 | stroke-width: 1;
|
41 | }
|
42 |
|
43 | text {
|
44 | fill: #fff;
|
45 | font-size: 13px;
|
46 | }
|
47 | }
|
48 |
|
49 |
|
50 | .bb-axis {
|
51 | shape-rendering: crispEdges;
|
52 | }
|
53 |
|
54 | .bb-axis-x .tick {}
|
55 | .bb-axis-x-label {}
|
56 |
|
57 | .bb-axis-y .tick {}
|
58 | .bb-axis-y-label {}
|
59 |
|
60 | .bb-axis-y2 .tick {}
|
61 | .bb-axis-y2-label {}
|
62 |
|
63 |
|
64 | .bb-grid {
|
65 | line {
|
66 | stroke: #aaa;
|
67 | }
|
68 |
|
69 | text {
|
70 | fill: #aaa;
|
71 | }
|
72 | }
|
73 |
|
74 | .bb-xgrid, .bb-ygrid {
|
75 | stroke-dasharray: 3 3;
|
76 | }
|
77 |
|
78 |
|
79 | .bb-text {
|
80 | &.bb-empty {
|
81 | fill: #808080;
|
82 | font-size: 2em;
|
83 | }
|
84 | }
|
85 |
|
86 |
|
87 | .bb-line {
|
88 | stroke-width: 1px;
|
89 | }
|
90 |
|
91 |
|
92 | .bb-circle._expanded_ {
|
93 | stroke-width: 1px;
|
94 | stroke: white;
|
95 | }
|
96 |
|
97 | .bb-selected-circle {
|
98 | fill: white;
|
99 | stroke-width: 2px;
|
100 | }
|
101 |
|
102 |
|
103 | .bb-bar {
|
104 | stroke-width: 0;
|
105 |
|
106 | &._expanded_ {
|
107 | fill-opacity: 0.75;
|
108 | }
|
109 | }
|
110 |
|
111 |
|
112 | .bb-target, .bb-circles {
|
113 | &.bb-focused {
|
114 | opacity: 1;
|
115 | }
|
116 |
|
117 | &.bb-focused {
|
118 | path.bb-line, path.bb-step {
|
119 | stroke-width: 2px;
|
120 | }
|
121 | }
|
122 |
|
123 | &.bb-defocused {
|
124 | opacity: 0.3 !important;
|
125 |
|
126 | .text-overlapping {
|
127 | opacity: .05 !important;
|
128 | }
|
129 | }
|
130 | }
|
131 |
|
132 | .bb-region {
|
133 | fill: steelblue;
|
134 | fill-opacity: .1;
|
135 | }
|
136 |
|
137 |
|
138 | .bb-zoom-brush {
|
139 | fill-opacity: .1;
|
140 | }
|
141 |
|
142 |
|
143 | .bb-brush .extent {
|
144 | fill-opacity: .1;
|
145 | }
|
146 |
|
147 |
|
148 | .bb-dragarea {}
|
149 |
|
150 |
|
151 | .bb-legend-item {
|
152 | font-size: 12px;
|
153 | user-select: none;
|
154 | }
|
155 |
|
156 | .bb-legend-item-hidden {
|
157 | opacity: 0.15;
|
158 | }
|
159 |
|
160 | .bb-legend-background {
|
161 | opacity: 0.75;
|
162 | fill: white;
|
163 | stroke: lightgray;
|
164 | stroke-width: 1;
|
165 | }
|
166 |
|
167 |
|
168 | .bb-title {
|
169 | font: 14px sans-serif;
|
170 | }
|
171 |
|
172 |
|
173 | .bb-tooltip-container {
|
174 | z-index: 10;
|
175 | user-select: none;
|
176 | }
|
177 |
|
178 | .bb-tooltip {
|
179 | border-collapse:collapse;
|
180 | border-spacing:0;
|
181 | background-color:#fff;
|
182 | empty-cells:show;
|
183 | opacity: 0.9;
|
184 | -webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
|
185 | -moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
|
186 | box-shadow: 7px 7px 12px -9px rgb(119,119,119);
|
187 |
|
188 | tr {
|
189 | border:1px solid #CCC;
|
190 | }
|
191 |
|
192 | th {
|
193 | background-color: #aaa;
|
194 | font-size:14px;
|
195 | padding:2px 5px;
|
196 | text-align:left;
|
197 | color:#FFF;
|
198 | }
|
199 |
|
200 | td {
|
201 | font-size:13px;
|
202 | padding: 3px 6px;
|
203 | background-color:#fff;
|
204 | border-left:1px dotted #999;
|
205 |
|
206 | > span, > svg {
|
207 | display: inline-block;
|
208 | width: 10px;
|
209 | height: 10px;
|
210 | margin-right: 6px;
|
211 | }
|
212 | }
|
213 |
|
214 | &.value {
|
215 | text-align: right;
|
216 | }
|
217 | }
|
218 |
|
219 |
|
220 | .bb-area {
|
221 | stroke-width: 0;
|
222 | opacity: 0.2;
|
223 | }
|
224 |
|
225 |
|
226 | .bb-chart-arcs-title {
|
227 | dominant-baseline: middle;
|
228 | font-size: 1.3em;
|
229 | }
|
230 |
|
231 | .bb-chart-arcs-gauge-title {
|
232 | dominant-baseline: middle;
|
233 | font-size: 2.7em;
|
234 | }
|
235 |
|
236 | .bb-chart-arcs {
|
237 | .bb-chart-arcs-background {
|
238 | fill: #e0e0e0;
|
239 | stroke: #fff;
|
240 | }
|
241 |
|
242 | .bb-chart-arcs-gauge-unit {
|
243 | fill: #000;
|
244 | font-size: 16px;
|
245 | }
|
246 |
|
247 | .bb-chart-arcs-gauge-max {
|
248 | fill: #777;
|
249 | }
|
250 |
|
251 | .bb-chart-arcs-gauge-min {
|
252 | fill: #777;
|
253 | }
|
254 | }
|
255 |
|
256 |
|
257 | .bb-chart-radars {
|
258 | .bb-levels {
|
259 | polygon {
|
260 | fill: none;
|
261 | stroke: #848282;
|
262 | stroke-width: .5px;
|
263 | }
|
264 |
|
265 | text {
|
266 | fill: #848282;
|
267 | }
|
268 | }
|
269 |
|
270 | .bb-axis {
|
271 | line {
|
272 | stroke: #848282;
|
273 | stroke-width: .5px;
|
274 | }
|
275 |
|
276 | text {
|
277 | font-size: 1.15em;
|
278 | cursor: default;
|
279 | }
|
280 | }
|
281 |
|
282 | .bb-shapes {
|
283 | polygon {
|
284 | fill-opacity: .2;
|
285 | stroke-width: 1px;
|
286 | }
|
287 | }
|
288 | }
|
289 |
|
290 |
|
291 | .bb-button {
|
292 | position: absolute;
|
293 | top: 10px;
|
294 | right: 10px;
|
295 |
|
296 | .bb-zoom-reset {
|
297 | font-size: 11px;
|
298 | border: solid 1px #ccc;
|
299 | background-color: #fff;
|
300 | padding: 5px;
|
301 | border-radius: 5px;
|
302 | cursor: pointer;
|
303 | }
|
304 | }
|