| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 | @import '../style/var';.van-popover {  position: absolute;  overflow: visible;  background-color: transparent;  transition: opacity 0.15s, transform 0.15s;  &__wrapper {    display: inline-block;  }  &__arrow {    position: absolute;    width: 0;    height: 0;    border-color: transparent;    border-style: solid;    border-width: @popover-arrow-size;  }  &__content {    overflow: hidden;    border-radius: @popover-border-radius;  }  &__action {    position: relative;    display: flex;    align-items: center;    box-sizing: border-box;    width: @popover-action-width;    height: @popover-action-height;    padding: 0 @padding-md;    font-size: @popover-action-font-size;    line-height: @line-height-md;    cursor: pointer;    &:last-child {      .van-popover__action-text::after {        display: none;      }    }    &-text {      display: flex;      flex: 1;      align-items: center;      justify-content: center;      height: 100%;    }    &-icon {      margin-right: @padding-xs;      font-size: @popover-action-icon-size;    }    &--with-icon {      .van-popover__action-text {        justify-content: flex-start;      }    }  }  &[data-popper-placement^='top'] {    .van-popover__arrow {      bottom: 0;      border-top-color: currentColor;      border-bottom-width: 0;      transform: translate(-50%, 100%);    }  }  &[data-popper-placement='top'] {    transform-origin: 50% 100%;    .van-popover__arrow {      left: 50%;    }  }  &[data-popper-placement='top-start'] {    transform-origin: 0 100%;    .van-popover__arrow {      left: @padding-md;    }  }  &[data-popper-placement='top-end'] {    transform-origin: 100% 100%;    .van-popover__arrow {      right: @padding-md;    }  }  &[data-popper-placement^='left'] {    .van-popover__arrow {      right: 0;      border-right-width: 0;      border-left-color: currentColor;      transform: translate(100%, -50%);    }  }  &[data-popper-placement='left'] {    transform-origin: 100% 50%;    .van-popover__arrow {      top: 50%;    }  }  &[data-popper-placement='left-start'] {    transform-origin: 100% 0;    .van-popover__arrow {      top: @padding-md;    }  }  &[data-popper-placement='left-end'] {    transform-origin: 100% 100%;    .van-popover__arrow {      bottom: @padding-md;    }  }  &[data-popper-placement^='right'] {    .van-popover__arrow {      left: 0;      border-right-color: currentColor;      border-left-width: 0;      transform: translate(-100%, -50%);    }  }  &[data-popper-placement='right'] {    transform-origin: 0 50%;    .van-popover__arrow {      top: 50%;    }  }  &[data-popper-placement='right-start'] {    transform-origin: 0 0;    .van-popover__arrow {      top: @padding-md;    }  }  &[data-popper-placement='right-end'] {    transform-origin: 0 100%;    .van-popover__arrow {      bottom: @padding-md;    }  }  &[data-popper-placement^='bottom'] {    .van-popover__arrow {      top: 0;      border-top-width: 0;      border-bottom-color: currentColor;      transform: translate(-50%, -100%);    }  }  &[data-popper-placement='bottom'] {    transform-origin: 50% 0;    .van-popover__arrow {      left: 50%;    }  }  &[data-popper-placement='bottom-start'] {    transform-origin: 0 0;    .van-popover__arrow {      left: @padding-md;    }  }  &[data-popper-placement='bottom-end'] {    transform-origin: 100% 0;    .van-popover__arrow {      right: @padding-md;    }  }  &--light {    color: @popover-light-text-color;    .van-popover__content {      background-color: @popover-light-background-color;      box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);    }    .van-popover__arrow {      color: @popover-light-background-color;    }    .van-popover__action {      &:active {        background-color: @active-color;      }      &--disabled {        color: @popover-light-action-disabled-text-color;        cursor: not-allowed;        &:active {          background-color: transparent;        }      }    }  }  &--dark {    color: @popover-dark-text-color;    .van-popover__content {      background-color: @popover-dark-background-color;    }    .van-popover__arrow {      color: @popover-dark-background-color;    }    .van-popover__action {      &:active {        background-color: rgba(0, 0, 0, 0.2);      }      &--disabled {        color: @popover-dark-action-disabled-text-color;        &:active {          background-color: transparent;        }      }    }    .van-popover__action-text {      &::after {        border-color: @gray-7;      }    }  }  &-zoom-enter,  &-zoom-leave-active {    transform: scale(0.8);    opacity: 0;  }  &-zoom-enter-active {    transition-timing-function: @animation-timing-function-enter;  }  &-zoom-leave-active {    transition-timing-function: @animation-timing-function-leave;  }}
 |