naive-ui/demo/styles/ComponentDemo.scss

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

@include themes-mixin {
  @include b(code-box) {
    color: $--n-secondary-text-color;
    background-color: $--n-card-color;
    border: 1px solid $--n-divider-color;
    background-clip: padding-box;
    @include e(title) {
      color: $--n-text-color;
    }
    @include e(code) {
      transition: border-color .3s $default-cubic-bezier;
      border-top: 1px solid $--n-divider-color;
      code {
        font-family: 'FiraCode';
        font-size: 14px;
      }
    }
    @include once {
      &:not(:last-child) {
        margin-bottom: 16px;
      }
      overflow: hidden;
      border-radius: 8px;
      padding-top: 16px;
      transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
      @include e(title) {
        transition: color .3s $default-cubic-bezier;
        position: relative;
        margin: 0 24px;
        font-size: 18px;
        font-weight: 700;
        @include b(button) {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      @include e(content) {
        margin: 12px 24px 0 24px;
        p {
          font-size: 14px;
          margin: 0;
          margin-bottom: 8px;
          line-height: 1.625;
        }
      }
      @include e(view) {
        font-size: 14px;
        margin: 16px 24px 12px 24px;
      }
      @include e(code) {
        padding: 0 24px 12px 24px;
        pre {
          margin-top: 18px;
          margin-bottom: 6px;
        }
      }
    }
  }
  code, pre {
    font-family: 'FiraCode';
    font-size: 14px;
  }
}