+
+/*
+ *
+ * Copyright 2016 RIFT.IO Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+@import "../../../framework/style/_colors.scss";
+.nfvi-metrics-tray {
+ flex: 1 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ margin: 10px 0;
+ padding: 0 15px 0 10px;
+ height: 165px;
+ .nvfi-metric-container {
+ flex: 1 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ margin: 0 10px 0 0;
+ }
+
+ .nfvi-metric-chart {
+ position: relative;
+ flex: 1 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #fff;
+ }
+
+ .nfvi-metric-chart-value {
+ font-size: 2rem;
+ font-weight: 700;
+ z-index: 2;
+ }
+
+ .nfvi-metric-chart-bar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 0%;
+ background: #00ACEE;
+ transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
+ }
+
+ .nfvi-metric-value {
+ padding: 5px 10px;
+ text-align: center;
+ font-size: 16px;
+ }
+
+ .nfvi-metric-label {
+ text-align: center;
+ font-size: 12px;
+ text-transform: uppercase;
+ }
+
+ }
+ .metricBars {
+ display:flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ padding: 1rem;
+ justify-content: space-around;
+ h3 {
+ text-align:center;
+ font-weight:bold;
+ }
+ .bar {
+ fill: $brand-blue-light;
+ stroke: black;
+ }
+ .y.axis {
+ .domain {
+ transform:scaleX(0.25);
+ }
+ }
+ .x.axis {
+ .domain {
+ transform:scaleY(0.25);
+ }
+ }
+ &>div {
+ flex: 1 1;
+ max-width:400px;
+ }
+ }