naive-ui/styles/Popover.scss

@import "./mixins/mixins.scss";

@mixin popover-content-transition {
  &#{&}-transition-enter-to, &#{&}-transition-leave {
    transform: $--n-transform-debounce-scale;
    opacity: 1;
  }
  &#{&}-transition-enter, &#{&}-transition-leave-to {
    opacity: 0;
    transform: scale(.85);
  }
  &#{&}-transition-enter-active {
    transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
  }
  &#{&}-transition-leave-active {
    transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
  }
}

@include themes-mixin {
  @include b(popover-content) {
    @include once {
      @include popover-content-transition;
      transition:
        background-color .3s $--n-ease-in-out-cubic-bezier,
        color .3s $--n-ease-in-out-cubic-bezier;
      transform-origin: inherit;
      transform: $--n-transform-debounce-scale;
      position: relative;
      font-size: 13px;
      @include m(styled) {
        border-radius: $--n-popover-border-radius;
        padding: 8px 14px;
      }
      @include m(fix-width) {
        white-space: normal;
        width: max-content;
        box-sizing: border-box;
      }
      @include b(popover-arrow-wrapper) {
        position: absolute;
        overflow: hidden;
        pointer-events: none;
        @include b(popover-arrow) {
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
          position: absolute;
          display: block;
          width: $--n-popover-arrow-width * 2;
          height: $--n-popover-arrow-width * 2;
          box-shadow: $--n-popover-arrow-box-shadow;
          transform: rotate(45deg);
        }
      }
      @include m(no-arrow) {
        &[n-placement$="top-start"] {
          margin-bottom: 6px;
        }
        &[n-placement$="top"] {
          margin-bottom: 6px;
        }
        &[n-placement$="top-end"] {
          margin-bottom: 6px;
        }
        &[n-placement$="bottom-start"] {
          margin-top: 6px;
        }
        &[n-placement$="bottom"] {
          margin-top: 6px;
        }
        &[n-placement$="bottom-end"] {
          margin-top: 6px;
        }
        &[n-placement$="left-start"] {
          margin-right: 6px;
        }&[n-placement$="left"] {
          margin-right: 6px;
        }
        &[n-placement$="left-end"] {
          margin-right: 6px;
        }
        &[n-placement$="right-start"] {
          margin-left: 6px;
        }
        &[n-placement$="right"] {
          margin-left: 6px;
        }
        &[n-placement$="right-end"] {
          margin-left: 6px;
        }
      } 
      &[n-placement$="top-start"] {
        margin-bottom: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          top: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            top: -$--n-popover-arrow-width;
            left: 10px;
          }
        }
      }
      &[n-placement$="top"] {
        margin-bottom: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          top: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            top: -$--n-popover-arrow-width;
            transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
            left: 50%;
          }
        }
      }
      &[n-placement$="top-end"] {
        margin-bottom: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          top: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            top: -$--n-popover-arrow-width;
            right: 10px;
          }
        }
      }
      &[n-placement$="bottom-start"] {
        margin-top: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          bottom: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            bottom: -$--n-popover-arrow-width;
            left: 10px;
          }
        }
      }
      &[n-placement$="bottom"] {
        margin-top: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          bottom: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            bottom: -$--n-popover-arrow-width;
            transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
            left: 50%;
          }
        }
      }
      &[n-placement$="bottom-end"] {
        margin-top: 10px;
        @include b(popover-arrow-wrapper) {
          right: 0;
          left: 0;
          bottom: 100%;
          height: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            bottom: -$--n-popover-arrow-width;
            right: 10px;
          }
        }
      }
      &[n-placement$="left-start"] {
        margin-right: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          left: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            left: -$--n-popover-arrow-width;
            top: 10px;
          }
        }
      }
      &[n-placement$="left"] {
        margin-right: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          left: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            left: -$--n-popover-arrow-width;
            transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
            top: 50%;
          }
        }
      }
      &[n-placement$="left-end"] {
        margin-right: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          left: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            left: -$--n-popover-arrow-width;
            bottom: 10px;
          }
        }
      }
      &[n-placement$="right-start"] {
        margin-left: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          right: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            right: -$--n-popover-arrow-width;
            top: 10px;
          }
        }
      }
      &[n-placement$="right"] {
        margin-left: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          right: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            right: -$--n-popover-arrow-width;
            transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
            top: 50%;
          }
        }
      }
      &[n-placement$="right-end"] {
        margin-left: 10px;
        @include b(popover-arrow-wrapper) {
          top: 0;
          bottom: 0;
          right: 100%;
          width: $--n-popover-arrow-width * 2;
          @include b(popover-arrow) {
            right: -$--n-popover-arrow-width;
            bottom: 10px;
          }
        }
      }
    }
    @include m(styled) {
      background-color: $--popover-background-color;
    }
    color: $--popover-text-color;
    @include b(popover-arrow-wrapper) {
      @include b(popover-arrow) {
        background-color: $--popover-background-color;
      }
    }
    @include m(shadow) {
      box-shadow: $--popover-box-shadow;
    }
  }
}