File size: 1,691 Bytes
76a7a50 | 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 | .singleMetricView {
margin: 5px 12px 10px;
display: inline-block;
&.loading {
opacity: 0.5;
}
span, .metric-sparkline {
margin-right: 3.5px;
}
.metric-value {
display: inline-block;
font-size: 14px;
line-height: 25px;
vertical-align: top;
margin-left: 3px;
}
.metric-sparkline {
display: inline-block;
vertical-align: top;
img {
width: 100px;
height: 25px;
}
}
.metricEvolution {
font-weight: bold;
font-size: 12px;
> span {
display: inline-block;
&:not(.positive-evolution):not(.negative-evolution) {
margin-left: 8px;
}
}
.evolution-up::before,
.evolution-down::before {
content: "";
display: inline-block;
height: 7px;
width: 12px;
margin-right: 3.5px;
background: no-repeat center center;
}
// arrow points up/down depending on the value change, its colour matches
// whether that change is good (positive) or bad (negative) for the metric
.evolution-up.positive-evolution::before {
background-image: url(plugins/MultiSites/images/arrow_up.svg);
}
.evolution-up.negative-evolution::before {
background-image: url(plugins/MultiSites/images/arrow_up_red.svg);
}
.evolution-down.positive-evolution::before {
background-image: url(plugins/MultiSites/images/arrow_down_green.svg);
}
.evolution-down.negative-evolution::before {
background-image: url(plugins/MultiSites/images/arrow_down.svg);
}
}
}
[vue-entry="CoreVisualizations.SingleMetricView"] {
display: block;
}
.single-metric-view-picker {
margin-left: 6px;
display: inline-block;
}
|