taihu/app/containers/Widget/components/Pivot/Pivot.less

@import '~assets/less/variable';

.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.block {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;

  .leftSide {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    .corner {
      flex-shrink: 0;
      border: 0;

      &.raw {
        border-top: 1px;
        border-left: 1px;
      }
    }

    .rowHeader {
      flex: 1;
      display: flex;
      flex-direction: row;
      min-height: 0;

      .rowTitle {
        flex-shrink: 0;
        max-height: 100%;
        font-size: 1.16em;
        font-weight: bold;
        display: flex;
        align-items: center;
        .ellipsis;

        p {
          transform-origin: 0 center;
        }
      }

      .rowBody {
        flex-shrink: 0;
        overflow-y: auto;
        // display: flex;
        // flex-direction: row;
        .hideScrollbar;
      }
    }

    .rowFooter {
      flex-shrink: 0;
      height: 50px;
    }
  }

  .rightSide {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;

    .columnTitle {
      max-width: 100%;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      line-height: 27px;
      .ellipsis;
    }

    .columnHeader {
      flex-shrink: 0;
      overflow-x: auto;
      .hideScrollbar;
    }

    .columnBody {
      flex: 1;
      overflow: auto;

      &.bodyCollapsed {
        flex: none;
      }
    }

    .columnFooter {
      flex-shrink: 0;
      height: 50px;
      overflow-x: auto;
      .hideScrollbar;
    }
  }

  .xAxis {
    height: 100%;
    display: flex;
    flex-direction: row;
  }

  .yAxis {
    flex-shrink: 0;
    width: 64px;
  }

  .legend {
    flex-shrink: 0;
    max-width: 180px;
    margin-bottom: 50px;
    overflow-y: auto;
    display: none;

    &.shown {
      display: block;
    }
  }
}

.pivot {
  border-collapse: collapse;
  border-spacing: 0;

  tr {
    &:nth-child(even) > td {
      background-color: fade(@black, 5);
    }
  }

  th {
    border: 0;
    line-height: 26px;

    p {
      max-width: 200px;
      margin: 0 auto; // 单th 100%
      .ellipsis;

      &.colContent {
        height: 26px;
      }

      &.hasAuxiliaryLine {
        position: relative;
        overflow: visible;

        .line {
          width: 64px;
          border: 0;
          border-top: 1px;
          position: absolute;
          top: -1px;
          left: 100%;
          z-index: 1;
        }
      }
    }
  }

  td {
    padding: 4px;
    line-height: 18px;
  }

  .cellContent {
    text-align: right;
  }

  .topBorder {
    border-top: 1px;
  }

  .bottomBorder {
    border-top: 1px;
  }

  .leftBorder {
    border-left: 1px;
  }

  .rightBorder {
    border-right: 1px;
  }
}

.chartContainer {
  display: flex;
  flex-direction: column;

  .chartRow {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;

    .chartColumn {
      flex-shrink: 0;
    }
  }
}

.columnHeader,
.rowBody,
.columnBody {
  &.raw {
    th,
    td {
      border: 1px;
    }
  }
}

.columnHeader {
  &.raw {
    position: relative;
    top: 1px;
  }
}

.rowBody {
  &.raw {
    position: relative;
    left: 1px;
  }
}

.legendBox {
  padding: 8px 0 8px 16px;

  h3 {
    padding-left: 6px;
    line-height: 2.5em;
    .ellipsis;
  }

  .list {
    li {
      height: 2.25em;
      padding: 0 4px 0 28px;
      line-height: 2.25em;
      position: relative;
      cursor: pointer;
      .ellipsis;

      &:hover {
        background-color: fade(@black, 5);
      }

      &.disabled {
        color: @disabled-text-color !important;

        span {
          background-color: @disabled-text-color !important;
        }
      }

      span {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        position: absolute;
        top: 6px;
        left: 6px;
      }
    }
  }
}