naive-ui/styles/Descriptions.scss

@import './mixins/mixins.scss';

@include themes-mixin {
  @include b(descriptions) {
    @include m(left-label-align) {
      th {
        text-align: left;
      }
    }
    @include m(center-label-align) {
      th {
        text-align: center;
      }
    }
    @include m(right-label-align) {
      th {
        text-align: right;
      }
    }
    @include m(bordered) {
      @include b(descriptions-table-wrapper) {
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid $--n-border-color;
        @include b(descriptions-table) {
          @include b(descriptions-table-row) {
            &:not(:last-child) {
              border-bottom: 1px solid $--n-border-color;
            }
            @include b(descriptions-table-header) {
              padding: 12px 16px;
              background: $--n-table-header-color;
              &:not(:last-child) {
                border-right: 1px solid $--n-border-color;
              }
            }
            @include b(descriptions-table-content) {
              padding: 12px 16px;
              &:not(:last-child) {
                border-right: 1px solid $--n-border-color;
              }
            }
            &:last-child {
              @include b(descriptions-table-content) {
                padding: 12px 16px;
              }
            }
          }
        }
      }
    }
    @include b(descriptions-header) {
      transition: color .3s $default-cubic-bezier;
      color: $--n-text-color;
      font-weight: 700;
      font-size: 18px;
      margin-bottom: 12px;
    }
    @include b(descriptions-table-wrapper) {
      transition: border-color .3s $default-cubic-bezier;
      @include b(descriptions-table) {
        width: 100%;
        border-collapse: collapse;
        box-sizing: border-box;
        @include b(descriptions-table-row) {
          box-sizing: border-box;
          transition: border-color .3s $default-cubic-bezier;
          @include b(descriptions-table-header) {
            font-weight: 400;
            line-height: 1.5;
            display: table-cell;
            box-sizing: border-box;
            color: $--n-text-color;
            transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
          }
          @include b(descriptions-table-content) {
            @include e(content) {
              color: $--n-secondary-text-color;
              transition: color .3s $default-cubic-bezier;
              display: inline-block;
            }
            @include e(label) {
              color: $--n-text-color;
              transition: color .3s $default-cubic-bezier;
              display: inline-block;
              margin-right: 14px;
            }
            vertical-align: top;
            line-height: 1.5;
            display: table-cell;
            box-sizing: border-box;
            transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
            color: $--n-secondary-text-color;
            padding: 0 0 16px 0;
          }
          &:last-child {
            @include b(descriptions-table-content) {
              padding: 0;
            }
          }
        }
      }
    }
  }
}