naive-ui/styles/List.scss

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

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