Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / framework / widgets / nfvi-metric-bars / nfviMetricBars.scss

diff --git a/skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.scss b/skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.scss
new file mode 100644 (file)
index 0000000..fcd77bb
--- /dev/null
+++ b/skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.scss
@@ -0,0 +1,102 @@
+
+/*
+ * 
+ *   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;
+     }
+   }