skyquake/framework/widgets/nfvi-metric-bars/nfviMetricBars.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import "../../../framework/style/_colors.scss";
  20 .nfvi-metrics-tray {
  21       flex: 1 0;
  22       display: flex;
  23       flex-direction: row;
  24       justify-content: space-around;
  25       margin: 10px 0;
  26       padding: 0 15px 0 10px;
  27       height: 165px;
  28      .nvfi-metric-container {
  29         flex: 1 0;
  30         display: flex;
  31         flex-direction: column;
  32         align-items: stretch;
  33         margin: 0 10px 0 0;
  34       }
  35
  36         .nfvi-metric-chart {
  37           position: relative;
  38           flex: 1 0;
  39           display: flex;
  40           justify-content: center;
  41           align-items: center;
  42           background: #fff;
  43         }
  44
  45           .nfvi-metric-chart-value {
  46             font-size: 2rem;
  47             font-weight: 700;
  48             z-index: 2;
  49           }
  50
  51           .nfvi-metric-chart-bar {
  52             position: absolute;
  53             bottom: 0;
  54             left: 0;
  55             right: 0;
  56             height: 0%;
  57             background: #00ACEE;
  58             transition: all 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
  59           }
  60
  61         .nfvi-metric-value {
  62           padding: 5px 10px;
  63           text-align: center;
  64           font-size: 16px;
  65         }
  66
  67         .nfvi-metric-label {
  68           text-align: center;
  69           font-size: 12px;
  70           text-transform: uppercase;
  71         }
  72
  73  }
  74     .metricBars {
  75       display:flex;
  76       flex-direction:row;
  77       flex-wrap:wrap;
  78       padding: 1rem;
  79       justify-content: space-around;
  80       h3 {
  81         text-align:center;
  82         font-weight:bold;
  83       }
  84       .bar {
  85         fill: $brand-blue-light;
  86         stroke: black;
  87       }
  88       .y.axis {
  89         .domain {
  90           transform:scaleX(0.25);
  91         }
  92       }
  93       .x.axis {
  94         .domain {
  95           transform:scaleY(0.25);
  96         }
  97      }
  98      &>div {
  99       flex: 1 1;
 100       max-width:400px;
 101      }
 102    }