naive-ui/styles/List.scss

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

@include themes-mixin {
  @include b(list) {
    font-size: 14px;
    color: $--n-secondary-text-color;
    background-color: $--n-card-color;
    transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
    padding: 0;
    list-style-type: none;
    @include m(bordered) {
      border-radius: 6px;
      border: 1px solid $--n-border-color;
      @include b(list-item) {
        padding: 12px 20px;
        &:not(:last-child) {
          border-bottom: 1px solid $--n-border-color;
        }
      }
      @include e(header, footer) {
        padding: 12px 20px;
        &:not(:last-child) {
          border-bottom: 1px solid $--n-border-color;
        }
      }
    }
    @include e(header, footer) {
      padding: 12px 0;
      box-sizing: border-box;
      transition: border-color .3s $default-cubic-bezier;
      &:not(:last-child) {
        border-bottom: 1px solid $--n-border-color;
      }
    }
    @include b(list-item) {  
      padding: 12px 0;    
      box-sizing: border-box;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      transition: border-color .3s $default-cubic-bezier;
      &:not(:last-child) {
        border-bottom: 1px solid $--n-border-color;
      }
      @include e(prefix) {
        margin-right: 20px;
        flex: 0;
      }
      @include e(suffix) {
        margin-left: 20px;
        flex: 0;
      }
      @include e(main) {
        flex: 1;
      }
    }
  }
}