meri-design-dev/custom/theme/PopoverTip.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.selectDownUpExtend-enter-active
  animation: selectDownUpExtend .3s

.selectDownUpExtend-leave-active
  animation: selectDownUpExtend .3s reverse

.selectDownUpExtendTop-enter-active
  animation: selectDownUpExtendTop .3s

.selectDownUpExtendTop-leave-active
  animation: selectDownUpExtendTop .3s reverse

@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
.p-popover-tip
  position: absolute
  display: inline-block
  padding-top: 8px
  border-radius: 4px
  max-width: 480px
  z-index: 7000
  font-size: 0

.p-popover-tip .p-popover-tip-triangle
  position: absolute
  left: 50%
  border-style: solid
  width: 0
  height: 0

.p-popover-tip-split
  background-color: $theme

.p-popover-tip-split.p-popover-tip-top .p-popover-tip-triangle
  border-color: $theme transparent transparent transparent

.p-popover-tip-split.p-popover-tip-bottom .p-popover-tip-triangle
  border-color: transparent transparent $theme transparent

.p-popover-tip-words
  background-color: $popover-tip-bg

.p-popover-tip-words.p-popover-tip-top .p-popover-tip-triangle
  border-color: $popover-tip-bg transparent transparent transparent

.p-popover-tip-words.p-popover-tip-bottom .p-popover-tip-triangle
  border-color: transparent transparent $popover-tip-bg transparent

.p-popover-tip-top
  filter: drop-shadow($box-shadow-triangle-bottom)

.p-popover-tip-top .p-popover-tip-triangle
  bottom: -6px
  border-width: 6px 6px 0 6px

.p-popover-tip-bottom
  filter: drop-shadow($box-shadow-triangle-top)

.p-popover-tip-bottom .p-popover-tip-triangle
  top: -6px
  border-width: 0 6px 6px 6px

.p-popover-tip-content
  display: flex
  flex-wrap: wrap
  padding-left: 4px
  padding-right: 8px
  max-width: 480px
  max-height: 184px
  overflow-x: hidden
  overflow-y: auto

.p-popover-tip-content .p-popover-tip-content-item
  margin-left: 4px
  margin-bottom: 8px
  padding-left: 4px
  padding-right: 4px
  background-color: $grey-100
  border-radius: 2px
  max-width: 100%
  overflow: hidden
  white-space: nowrap

.p-popover-tip-content .p-popover-tip-content-item .p-popover-tip-item-text
  display: inline-block
  width: 100%
  line-height: 24px
  color: $grey-900
  font-size: 14px

.p-popover-tip-content .p-popover-tip-content-item-before
  position: relative

.p-popover-tip-content .p-popover-tip-content-item-before::before
  position: absolute
  top: 0
  left: 0
  display: inline-block
  background-color: $grey-100
  border-radius: 2px
  width: 20px
  height: 24px
  content: '...'
  color: $grey-900
  font-size: 14px
  text-align: center
  z-index: 1

.p-popover-tip-content-words
  display: inline-block
  padding-left: 4px
  padding-bottom: 8px
  width: 100%
  line-height: 24px
  color: $theme
  font-size: 14px