ze-react-component-library/lib/styles/display-value.less

ZeroETP React Component Library

@import "~antd/es/style/themes/variable.less";

.ze-value-items {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.ze-value-item {
  border-radius: 17px;
  padding: 16px 24px;
  width: 100%/5;
  background: #f7f7f8;
  @valueFontSize: 30px;
  .ant-statistic-title {
    font-weight: 400;
    margin-bottom: 12px;
    color: #59596b;
    white-space: nowrap;
  }
  .ant-statistic-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    font-size: @valueFontSize;
    .ant-statistic-content-value {
      line-height: 1;
    }
    .ant-statistic-content-prefix {
      line-height: @valueFontSize;
    }
  }
  .ant-statistic-content-value-int,
  .ant-statistic-content-value-decimal {
    font-size: @valueFontSize;
    font-weight: 500;
  }
  .ant-statistic-content-suffix {
    font-size: 14px;
    font-weight: 500;
  }
}

.ze-value-item-highlight {
  background: var(--ant-primary-color);
  .ant-statistic-title,.ant-statistic-content {
    color: white;
  }
}

.ze-value-item-trend-icon {
  width: 0;
  height: 0;
  border-inline-end: 3.5px solid transparent;
  border-block-end: 9px solid #000;
  border-inline-start: 3.5px solid transparent;
}

.ze-value-items.screen-xl {
  flex-wrap: wrap;
  .ze-value-item {
    width: calc((100% - 10px) / 2);
  }
  .ze-value-item-highlight {
    width: 100%;
  }
}

.ze-value-items.screen-sm {
  flex-wrap: wrap;
  .ze-value-item {
    width: 100%;
  }
  .ze-value-item-highlight {
    width: 100%;
  }
}

.ze-multi-values {
  width: 100%;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  .ze-value-item {
    width: 100%;
  }
  .ze-value-item-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: calc((100% - 48px) / 3);
    flex-shrink: 1;
    min-width: 0;
    &.ze-value-item-multi {
      > .ze-value-item {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    &.ze-value-item-block-highlight {
      > .ze-value-item {
        .ze-value-item-highlight();
      }
      .ze-value-sub-items {
        .ze-value-item {
          background: color-mix(
            in srgb,
            var(--ant-primary-color),
            transparent 95%
          );
        }
      }
    }
    .ze-value-sub-items {
      display: flex;
      gap: 2px;
      .ze-value-item {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        width: calc((100% - 2px) / 2);
        flex-shrink: 1;
        min-width: 0;
        .ant-statistic-title {
          .anticon-question-circle {
            float: right;
          }
        }
        .ant-statistic-content {
          .ant-statistic-content-value,
          .ant-statistic-content-value-int,
          .ant-statistic-content-value-decimal {
            font-size: 20px;
          }
          .ant-statistic-content-suffix {
            font-size: 12px;
            line-height: 16px;
          }
        }
        .ze-value-sub-item-trend-content {
          .ant-statistic-content {
            position: relative;
            background: #0000000a;
            padding: 4px 8px;
            border-radius: 15px;
            width: max-content;
            padding-right: 24px;
            .ant-statistic-content-value,
            .ant-statistic-content-suffix {
              color: #59596b;
            }
            * {
              font-size: 14px;
              line-height: 14px;
            }
            .ant-statistic-content-prefix {
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
              .anticon{
                height: 14px;
              }
            }
          }
        }
      }
    }
  }
  &.screen-xl {
    .ze-value-item-block {
      width: calc((100% - 24px) / 2);
    }
  }
  &.screen-sm {
    .ze-value-item-block {
      width: 100%;
    }
  }
}

.screen-sm {
  .ze-value-item {
    padding: 16px 16px;
  }
}