naive-ui/styles/Descriptions.scss

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

@mixin descriptions-size-mixin ($size) {
  @include m($size + '-size') {
    @include b(descriptions-header) {
      margin-bottom: map-get($--n-descriptions-padding, $size);
    }
    @include m(bordered) {
      @include b(descriptions-table-wrapper) {
        @include b(descriptions-table) {
          @include b(descriptions-table-row) {
            @include b(descriptions-table-header) {
              padding: map-get($--n-descriptions-bordered-padding, $size);
            }
            @include b(descriptions-table-content) {
              padding: map-get($--n-descriptions-bordered-padding, $size);
            }
            &:last-child {
              @include b(descriptions-table-content) {
                padding: map-get($--n-descriptions-bordered-padding, $size);
              }
            }
          }
        }
      }
    }
    @include b(descriptions-table-wrapper) {
      @include b(descriptions-table) {
        @include b(descriptions-table-row) {
          @include b(descriptions-table-content) {
            padding: 0 0 map-get($--n-descriptions-padding, $size) 0;  
          }
          &:last-child {
            @include b(descriptions-table-content) {
              padding: 0;
            }
          } 
        }
      }
    }
  }
}

@include themes-mixin {
  @include b(descriptions) {
    @include once {
      @include descriptions-size-mixin('small');
      @include descriptions-size-mixin('medium');
      @include descriptions-size-mixin('large');
      @include m(left-label-placement) {
        @include b(descriptions-table-content) {
          & > * {
            vertical-align: top;
          }
        }
      }
      @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) {
        @include once {
          border-radius: $--n-descriptions-border-radius;
          overflow: hidden;
        }
        background: map-get($--descriptions-content-background-color, 'default');
        border: 1px solid $--descriptions-border-color;
        @include b(descriptions-table) {
          @include b(descriptions-table-row) {
            &:not(:last-child) {
              @include b(descriptions-table-content) {
                border-bottom: 1px solid $--descriptions-border-color;
              }
              @include b(descriptions-table-header) {
                background-clip: padding-box;
                border-bottom: 1px solid $--descriptions-border-color;
              }
            }
            @include b(descriptions-table-header) {
              @include once {
                font-weight: 400;
              }
              background: $--descriptions-header-background-color;
              &:not(:last-child) {
                border-right: 1px solid $--descriptions-border-color;
              }
            }
            @include b(descriptions-table-content) {
              &:not(:last-child) {
                border-right: 1px solid $--descriptions-border-color;
              }
            }
          }
        }
      }
    }
    @include b(descriptions-header) {
      @include once {
        font-weight: $--n-strong-weight;
        font-size: 18px;
        transition: color .3s $--n-ease-in-out-cubic-bezier;
      }
      color: $--descriptions-header-text-color;
    }
    @include b(descriptions-table-wrapper) {
      @include once {
        transition: border-color .3s $--n-ease-in-out-cubic-bezier;
      }
      @include b(descriptions-table) {
        @include once {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0;
          box-sizing: border-box;
        }
        @include b(descriptions-table-row) {
          @include once {
            box-sizing: border-box;
            transition: border-color .3s $--n-ease-in-out-cubic-bezier;
          }
          @include b(descriptions-table-header) {
            @include once {
              font-weight: $--n-strong-weight;
              line-height: 1.75;
              display: table-cell;
              box-sizing: border-box;
              transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
            }
            color: $--descriptions-header-text-color;
          }
          @include b(descriptions-table-content) {
            @include e(content) {
              color: $--descriptions-content-text-color;
              @include once {
                transition: color .3s $--n-ease-in-out-cubic-bezier;
                display: inline-block;
              }
            }
            @include e(label) {
              color: $--descriptions-header-text-color;
              @include once {
                font-weight: $--n-strong-weight;
                transition: color .3s $--n-ease-in-out-cubic-bezier;
                display: inline-block;
                margin-right: 14px;
              } 
            }
            @include once {
              vertical-align: top;
              line-height: 1.75;
              display: table-cell;
              box-sizing: border-box;
              transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
              padding: 0 0 16px 0;  
            }
            color: $--descriptions-content-text-color;
          }
          @include once {
            &:last-child {
              @include b(descriptions-table-content) {
                padding: 0;
              }
            }
          } 
        }
      }
    }
  }
  @include as-modal-content {
    @include b(descriptions) {
      @include m(bordered) {
        @include b(descriptions-table-wrapper) {
          background: map-get($--descriptions-content-background-color, 'modal');
        }
      }
    }
  }
}