<template>
  <div class="kpi-list">
    <kpi-item v-for="(kpi, index) in kpis" :kpi="kpi" :key="index" class="kpi-item"/>
  </div>
</template>

<script>
import KpiItem from '@/components/kpi-item/KpiItem';

export default {
  name: 'kpi-list',
  props: ['kpis'],
  components: {KpiItem},
};
</script>

<style lang="scss" scoped>
  .kpi-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 10px 24px;
    background-color: #FFF;
    transition: transform 0.1s;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 20px 0 rgba(0,0,0,.05);
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.05);
    min-height: 140px;
    &.refreshing {
      transition: transform 1s;
      transform: scale(1.2);
      opacity: 0.3;
    }

    .kpi-item{
      flex: 1;
      min-width: 16%;
      padding-right: 2%;
    }
  }

</style>
