ice-frontend-react-mobx/src/components/Feeds/FeedCard/FeedCard.css

ICE Frontend REACT+MobX

@import 'react-toolbox/lib/colors.css';

.feedCard,
.feedCardThreePhase {
  margin-right: 1rem;
  margin-bottom: 1rem;
  .feedCardTitle {
    display: flex;
    padding: 2rem 1.6rem 1.4rem;
    .feedCardTitleTxt {
      padding: 0 0 0 1rem;
    }
  }
  .feedPhase {
    color: var(--border-light);
    padding-bottom: 0.5rem;
  }

  .threePhaseData {
    display: block;
  }

  .cardData {
    padding-top: 0;
    .feedPhase {
      color: var(--border-light);
      padding-bottom: 0.5rem;
    }
  }

  .feedData {
    display: flex;
    justify-content: space-between;
    .limitLabel {
      font-weight: 500;
    }
  }

  .threePhase {
    .usage {
      border-bottom: 1px solid var(--border-light);
      padding: 0 5rem 0.5rem;
    }
  }

  .singlePhase {
    .usage {
      margin-top: 1rem;
    }
  }

  .usage {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    .usageCol {
      display: inline-flex;
      .valueWrapper {
        margin-left: 0.5rem;
      }
    }
  }
}

.feedMetricsSymbolA { background-color: var(--palette-teal-300); }

.feedMetricsSymbolB { background-color: var(--palette-light-blue-300); }

.feedMetricsSymbolC { background-color: var(--palette-indigo-300); }

.feedMetricsSymbolD { background-color: var(--palette-pink-300); }

.feedMetricsSymbolE { background-color: var(--palette-blue-grey-300); }

.feedMetricsSymbolF { background-color: var(--palette-purple-300); }

.feedMetricsSymbolG { background-color: var(--palette-blue-300); }

.feedMetricsSymbolH { background-color: var(--palette-cyan-300); }

.feedMetricsSymbolI { background-color: var(--palette-deep-purple-300); }

.feedMetricsSymbolJ { background-color: var(--palette-grey-400); }

.feedMetricsSymbolK { background-color: var(--palette-brown-300); }

.feedMetricsSymbolL { background-color: var(--palette-teal-500); }

.feedMetricsSymbolM { background-color: var(--palette-light-blue-500); }

.feedMetricsSymbolN { background-color: var(--palette-indigo-500); }

.feedMetricsSymbolO { background-color: var(--palette-pink-500); }

.feedMetricsSymbolP { background-color: var(--palette-blue-grey-500); }

.feedMetricsSymbolQ { background-color: var(--palette-purple-500); }

.feedMetricsSymbolR { background-color: var(--palette-blue-500); }

.feedMetricsSymbolS { background-color: var(--palette-cyan-500); }

.feedMetricsSymbolT { background-color: var(--palette-deep-purple-500); }

.feedMetricsSymbolU { background-color: var(--palette-grey-600); }

.feedMetricsSymbolV { background-color: var(--palette-brown-500); }

.feedMetricsSymbolW { background-color: var(--palette-lime-300); }

.feedMetricsSymbolX { background-color: var(--palette-purple-700); }

.feedMetricsSymbolY { background-color: var(--palette-pink-700); }

.feedMetricsSymbolZ { background-color: var(--palette-teal-700); }

.ValueWrapper {
  color: red;
}