wetrade-design/lib/pie-chart/style/legend.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@chartLegend-prefix-cls: ~'@{wd-prefix}-pie-chart-legend';

.@{chartLegend-prefix-cls} {
  display: flex;
  flex: 1;
  flex-direction: column;

  &__list {
    display: flex;
    align-items: center;
    margin-bottom: @pie-chart-legend-margin-bottom;
    padding-right: @pie-chart-legend-padding-right;
    font-size: @pie-chart-legend-font-size;
    line-height: @pie-chart-legend-line-height;
    color: @text-primary;

    &:last-child {
      margin-bottom: 0;
    }

    &-dot {
      display: inline-block;
      flex-basis: @pie-chart-symbol-flex-basis;
      width: @pie-chart-symbol-width;
      height: @pie-chart-symbol-height;
      margin-right: @pie-chart-symbol-margin-right;
      background: @icon-disable;
      border-radius: 50%;
      flex: 0 0 @pie-chart-symbol-width;
    }

    &-label {
      margin-right: @pie-chart-symbol-margin-right;
      overflow: hidden;
      font-weight: normal;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-value {
      flex: 1;
      text-align: right;
      white-space: nowrap;
    }

    &-no-select {
      .@{chartLegend-prefix-cls}__list {
        &-dot {
          background-color: @pie-chart-legend-disabled !important;
        }
        &-label {
          color: @pie-chart-legend-disabled;
        }
        &-value {
          color: @pie-chart-legend-disabled;
        }
      }
    }
  }
}