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

/*
 * 
 *   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;
     }
   }