meri-design-dev/custom/theme/Table.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

.p-avatar
  position: relative
  display: inline-block
  padding-right: 12px

.p-avatar .p-avatar-content
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden

.p-avatar .p-avatar-large
  width: 32px
  height: 32px
  border-radius: 16px

.p-avatar .p-avatar-medium
  width: 28px
  height: 28px
  border-radius: 14px

.p-avatar .p-avatar-small
  width: 24px
  height: 24px
  border-radius: 14px

.p-avatar .p-avatar-minimum
  width: 20px
  height: 20px
  border-radius: 10px

.p-avatar .p-avatar-back-blue
  background-color: $blue-500

.p-avatar .p-avatar-back-cyan
  background-color: $cyan-500

.p-avatar .p-avatar-back-turquoise
  background-color: $turquoise-500

.p-avatar .p-avatar-back-green
  background-color: $green-500

.p-avatar .p-avatar-back-yellow
  background-color: $yellow-500

.p-avatar .p-avatar-back-orange
  background-color: $orange-500

.p-avatar .p-avatar-back-red
  background-color: $red-500

.p-avatar .p-avatar-back-carmine
  background-color: $carmine-500

.p-avatar .p-avatar-back-purple
  background-color: $purple-500

.p-avatar .p-avatar-image
  background-color: $grey-200

.p-avatar .p-avatar-image svg
  width: 100%
  height: 100%

.p-avatar .p-avatar-image img
  display: inline-block
  width: 100%
  height: 100%

.p-avatar .p-avatar-logo svg
  width: 100%
  height: 100%

.p-avatar .p-avatar-logo img
  display: inline-block
  width: 100%
  height: 100%

.p-avatar .p-avatar-text
  font-weight: 400
  color: $white
  line-height: 12px
  font-size: 12px

.p-avatar .p-avatar-large-font
  font-size: 14px

.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-select-not-found
  height: 54px
  padding: 16px 0 16px 12px
  border-radius: 4px
  line-height: 22px
  font-size: 14px
  color: $grey-400
  background: $theme
  box-sizing: border-box
  min-width: 180px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-option-box
  position: absolute
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  background: $theme
  font-size: 0

.p-select-option-box .p-select-option-menu
  font-size: 0
  padding-top: 8px
  padding-bottom: 8px
  max-height: 248px
  overflow: auto

.p-select-option-box .p-select-option-menu .p-select-option-selected
  background-color: $blue-100

.p-select-option-box .p-select-option-menu .p-select-option
  display: flex
  align-items: center
  justify-content: space-between
  position: relative
  width: 100%
  box-size: border-box
  border-radius: 0
  padding: 8px 0 8px 12px
  cursor: pointer
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  transition: background-color .3s

.p-select-option-box .p-select-option-menu .p-select-option:hover
  background-color: $hover-color-grey

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content
  display: flex
  align-items: center
  justify-content: flex-start
  font-size: 0

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-wraper
  display: flex
  align-items: center
  justify-content: center

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-wraper .p-select-option-avatar
  display: flex
  align-items: center
  justify-content: center
  margin: 4px 0 4px 0
  overflow: hidden

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-wraper .p-select-option-label
  display: inline-block
  width: 44px
  height: 24px
  margin-right: 8px
  line-height: 24px
  font-size: 14px
  text-align: center
  overflow: hidden

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-main
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  font-size: 14px
  line-height: 22px
  color: $grey-900

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-main-selected
  color: $blue-500

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-main-disabled
  color: $grey-400

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-desc
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  font-size: 12px
  line-height: 18px
  color: $grey-500

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-desc-selected
  color: $blue-500

.p-select-option-box .p-select-option-menu .p-select-option .p-select-option-content .p-select-option-desc-disabled
  color: $grey-400

.p-select-option-box .p-select-option-menu .p-select-option .p-select-multiple-icon
  position: absolute
  right: 12px
  top: 50%
  width: 12px
  height: 6px
  border: 2px solid #0091ff
  border-top: none
  border-right: none
  transform: translateY(-50%) rotate(-45deg)

.p-select-option-box .p-select-confirm-panel
  display: flex
  justify-content: flex-end
  align-items: center
  height: 46px
  width: 100%

.p-select-option-box .p-select-confirm-panel span
  font-size: 14px
  cursor: pointer

.p-select-option-box .p-select-confirm-panel span:first-child
  color: $grey-900
  margin-right: 16px

.p-select-option-box .p-select-confirm-panel span:last-child
  color: $blue-500
  margin-right: 12px

.p-select-option-box .p-select-confirm-panel span.disabled-confirm-button
  font-size: 14px
  color: $grey-400
  cursor: not-allowed

.p-select-option-box .p-select-panel-shadow
  position: relative

.p-select-option-box .p-select-panel-shadow::after
  content: ''
  display: block
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  pointer-events: none
  box-shadow: $box-shadow-top

.p-select-option-box .p-select-option-divider
  border-bottom: 1px solid $grey-200

.p-select-option-box .p-select-option-disabled
  color: $grey-400
  background: none
  cursor: not-allowed !important

.p-select-option-box .p-select-option-disabled:hover
  background: none !important

.p-select-option-box .p-select-option-classify
  padding: 8px 0 8px 12px
  color: $grey-500
  font-size: 14px
  line-height: 24px

.p-select
  position: relative
  display: inline-block
  vertical-align: middle
  cursor: pointer
  outline: none

.p-select+.p-select
  margin-left: 12px

.p-select-drop-down
  position: fixed

.p-select-drop-down .p-select-not-found
  height: 54px
  padding: 16px 0 16px 12px
  border: 1px solid $grey-300
  border-radius: 4px
  line-height: 22px
  font-size: 14px
  color: $grey-400
  background: $theme
  box-shadow: $box-shadow-bottom
  box-sizing: border-box

.p-select-header
  position: relative
  display: flex
  min-height: 32px
  height: 32px
  width: 100%
  box-sizing: border-box
  background-color: $theme
  border: 1px solid $grey-400
  border-radius: 4px
  cursor: pointer
  text-align: left

.p-select-header .p-select-count
  color: $grey-900
  font-size: 14px
  line-height: 30px
  padding-left: 12px

.p-select-header .p-select-count .p-select-count-active
  color: $blue-500
  margin: 0 4px

.p-select-header .p-select-caption
  display: inline-block
  padding: 0 0 0 12px
  height: 30px
  line-height: 30px
  font-size: 14px
  flex-shrink: 0
  color: $grey-500
  pointer-events: none
  max-width: 196px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-select-header .p-select-selected-box
  position: relative
  z-index: 10
  flex-shrink: 1
  display: inline-block
  width: 100%
  height: 30px
  overflow-x: hidden
  overflow-y: auto
  box-sizing: border-box
  color: $grey-900
  font-size: 14px

.p-select-header .p-select-selected-box .p-select-disabled-input
  cursor: not-allowed

.p-select-header .p-select-selected-box .p-select-input,
.p-select-header .p-select-selected-box .p-select-fake-placeholder
  display: inline-block
  position: absolute
  left: 0
  top: 0
  padding-left: 12px
  line-height: 30px
  width: 100%
  font-size: 14px
  border: none
  outline: none

.p-select-header .p-select-selected-box .p-select-fake-placeholder
  pointer-events: none
  color: $grey-400
  line-height: 30px
  padding-right: 32px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-header .p-select-selected-box .p-select-number
  color: $blue-500

.p-select-header .p-select-selected-box .p-select-input
  line-height: 30px
  padding-left: 12px
  height: 30px
  padding-right: 32px
  background: none

.p-select-header .p-select-selected-box .p-select-cursor-input
  cursor: pointer

.p-select-header .p-select-selected-box .p-select-input-fakePlaceholder
  color: $grey-900

.p-select-header .p-select-triangle
  position: absolute
  top: 7px
  right: 10px
  width: 16px
  height: 16px
  transform-origin: center center
  transform: rotate(180deg)
  transition: transform .3s
  will-change: rotate

.p-select-header .p-select-clear
  position: absolute
  top: 8px
  right: 10px
  z-index: 11
  width: 14px
  height: 14px

.p-select-header .p-select-clear path
  fill: $grey-300
  transition: fill .5s

.p-select-header .p-select-clear:hover path
  fill: $blue-500

.p-select-header .p-select-triangle-up
  transform: rotate(0)

.p-select-header .p-select-triangle-down
  transform: rotate(180deg)

.p-select-header:hover
  border: 1px solid $blue-500
  transition: .3s

.p-select-header .p-select-input-tip
  position: absolute
  padding: 16px 20px
  background-color: $white
  border-radius: 4px
  pointer-events: none
  max-width: 280px
  max-height: 104px
  z-index: 100

.p-select-header .p-select-input-tip:after
  position: absolute
  display: inline-block
  border-style: solid
  border-width: 4px
  width: 0
  height: 0
  transform: rotate(-45deg)
  z-index: 0
  content: ''

.p-select-header .p-select-input-tip .p-select-input-tip-item
  position: relative
  overflow: hidden
  max-height: 66px
  line-height: 22px
  font-size: 14px
  word-wrap: break-word
  word-break: break-all

.p-select-header .p-select-input-tip .p-select-input-tip-overflow:after
  position: absolute
  right: 0
  bottom: 0
  display: inline-block
  width: 20px
  height: 22px
  background-color: $white
  content: '...'

.p-select-header .p-select-input-tip-top
  box-shadow: $box-shadow-bottom

.p-select-header .p-select-input-tip-top:after
  bottom: -4px
  left: 58px
  border-color: transparent transparent $white $white
  box-shadow: $box-shadow-min-top
  z-index: -1

.p-select-header .p-select-input-tip-bottom
  box-shadow: $box-shadow-left

.p-select-header .p-select-input-tip-bottom:after
  top: -4px
  left: 58px
  border-color: $white $white transparent transparent
  box-shadow: $box-shadow-min-bottom

.p-select-header .p-select-input-tip-left
  box-shadow: $box-shadow-right

.p-select-header .p-select-input-tip-left:after
  top: 49%
  right: -4px
  border-color: transparent $white $white transparent
  box-shadow: $box-shadow-min-right

.p-select-header .p-select-input-tip-right
  box-shadow: $box-shadow-top

.p-select-header .p-select-input-tip-right:after
  top: 49%
  left: -4px
  border-color: $white transparent transparent $white
  box-shadow: $box-shadow-min-left

.p-select-header-radius
  border: 1px solid $grey-400
  border-radius: 16px

.p-select-header-focused
  border: 1px solid $blue-500
  box-shadow: $box-shadow-blue
  transition: .3s

.p-select-header-focused .p-select-normal
  color: $grey-400

.p-select-header-disabled
  background: $grey-200
  cursor: not-allowed

.p-select-header-disabled:hover
  border: 1px solid $grey-400

.p-select-header-disabled span
  color: $grey-400 !important

.p-select-header-disabled .p-select-triangle path
  fill: $grey-400

.p-select-normal
  color: $grey-900

.p-select-selected
  color: $grey-900

.p-select-highlight
  color: $blue-500

.p-select-highlight-margin
  margin-left: 4px
  margin-right: 4px

.p-trigger-error
  border-color: $red-500

.p-trigger-error-text
  position: absolute
  left: 0
  top: 36px
  line-height: 14px
  font-size: 14px
  color: $red-500

.lf
  float: left

.rf
  float: right

.clearfix:after
  content: ''
  display: block
  clear: both
  height: 0
  overflow: hidden
  visibility: hidden

.p-pagination
  display: flex
  align-items: center
  -moz-user-select: none
  -khtml-user-select: none
  user-select: none
  color: $grey-600
  font-size: 0

.p-pagination svg
  width: 16px
  height: 16px

.p-pagination .p-total
  height: 28px
  line-height: 27px
  text-align: center
  font-size: 14px
  margin-right: 13px

.p-pagination>div p
  display: flex
  align-items: center
  justify-content: center
  width: 28px
  height: 28px
  cursor: pointer
  background: $theme
  border-radius: 4px
  border: 1px solid $grey-400
  margin-right: 8px
  transition: all .3s

.p-pagination>div p:hover
  color: $blue-500
  background: $theme
  border: 1px solid $blue-500

.p-pagination>div p.p-disabled
  color: $grey-50
  cursor: not-allowed
  background-color: $grey-200
  border-color: $grey-400

.p-pagination>div p.p-simple
  border: 0
  background: $theme

.p-pagination>div .p-prev-btn svg
  width: 16px
  height: 16px
  transform: rotate(90deg)

.p-pagination>div .p-next-btn
  margin-right: 0

.p-pagination>div .p-next-btn svg
  width: 16px
  height: 16px
  transform: rotate(-90deg)

.p-pagination ul li
  display: flex
  align-items: center
  justify-content: center
  font-size: 14px
  min-width: 28px
  height: 28px
  text-align: center
  cursor: pointer
  background: $theme
  border-radius: 4px
  border: 1px solid $grey-400
  margin-right: 8px
  transition: all .3s

.p-pagination ul li:hover
  color: $blue-500
  background: $theme
  border: 1px solid $blue-500

.p-pagination ul li.active
  color: $blue-500
  background: $blue-100
  border: 1px solid $blue-500

.p-pagination ul li.p-simple
  border: 0
  background: $theme

.p-pagination ul .p-left-more svg
  transform: rotate(180deg)

.p-pagination .p-page-size-set
  margin-left: 8px

.p-pagination .p-resetting
  display: flex
  align-items: center
  justify-content: center
  margin-left: 12px
  cursor: pointer

.p-select-title-text
  color: $grey-600 !important

.p-checkbox
  display: inline-flex
  align-items: center
  min-width: 16px
  min-height: 16px
  vertical-align: middle
  cursor: pointer
  z-index: 1

.p-checkbox + .p-checkbox
  margin-left: 8px

.p-checkbox .p-checkbox-box
  position: relative
  vertical-align: middle
  border-width: 1px
  border-style: solid
  border-color: transparent
  border-radius: 2px
  width: 16px
  height: 16px
  transition: all .3s

.p-checkbox .p-checkbox-box:hover
  box-shadow: 0 0 4px 0 rgba(78,131,253,0.4)

.p-checkbox .p-checkbox-box::after
  position: absolute
  background: none
  transition: transform .2s ease-in-out
  transform: rotate(0) scale(0)
  z-index: 1
  content: ''
  pointer-events: none

.p-checkbox .p-checkbox-uncheck
  background-color: $theme
  border-color: $grey-400

.p-checkbox .p-checkbox-uncheck:hover
  border-color: $blue-500

.p-checkbox .p-checkbox-checked
  background-color: $blue-500
  border-color: $blue-500

.p-checkbox .p-checkbox-checked::after
  top: 2px
  left: 5px
  border-right: 2px solid $white
  border-bottom: 2px solid $white
  width: 4px
  height: 8px
  transform: rotate(45deg) scale(1)

.p-checkbox .p-checkbox-notNull
  background-color: $blue-500
  border-color: $blue-500

.p-checkbox .p-checkbox-notNull::after
  top: 6px
  left: 3px
  background-color: $white
  width: 8px
  height: 2px
  transform: scale(1)

.p-checkbox .p-checkbox-text
  padding-left: 8px
  width: calc(100% - 16px)
  color: $grey-900
  font-size: 14px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  user-select: none

.p-checkbox-disabled
  cursor: not-allowed

.p-checkbox-disabled > i
  pointer-events: none

.p-checkbox-disabled .p-checkbox-uncheck
  background-color: $grey-300

.p-checkbox-disabled .p-checkbox-checked
  background-color: $grey-400
  border-color: $grey-400

.p-checkbox-disabled .p-checkbox-notNull
  background-color: $grey-400
  border-color: $grey-400

.p-loading16px
  display: inline-block
  width: 100%
  height: 100%
  line-height: 100%
  text-align: center

.p-loading16px .p-loading16px-line
  width: 100%
  height: 100%
  min-width: 12px
  min-height: 12px
  animation: loading16px .5s linear infinite

@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
@keyframes loading16px
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
.p-icon
  text-align: center
  cursor: pointer
  font-size: 0

.p-icon + .p-icon
  margin-left: 8px

.p-icon svg
  vertical-align: middle

.p-icon svg path
  transition: fill .3s

.p-button
  position: relative
  display: inline-flex
  align-items: center
  justify-content: center
  padding-left: 8px
  padding-right: 8px
  background-color: $theme
  border-width: 1px
  border-style: solid
  border-radius: 4px
  transition: all .36s
  font-size: 0
  text-align: center

.p-button:after
  content: ''
  color: transparent

.p-button:before
  content: ''
  color: transparent

.p-button+.p-button
  margin-left: 12px

.p-button .p-btn-text
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
  position: relative
  z-index: 1
  user-select: none

.p-button .p-button-loading
  display: inline-block
  margin-left: 4px
  vertical-align: middle

.p-button-large
  max-width: 128px
  min-width: 80px
  height: 40px
  line-height: 38px

.p-button-large .p-btn-text
  font-size: 16px

.p-button-large .p-button-loading
  width: 20px
  height: 20px

.p-button-medium
  max-width: 116px
  min-width: 80px
  height: 32px
  line-height: 30px

.p-button-medium .p-btn-text
  font-size: 14px

.p-button-medium .p-button-loading
  width: 16px
  height: 16px

.p-button-small
  max-width: 108px
  min-width: 60px
  height: 28px
  line-height: 26px

.p-button-small .p-btn-text
  font-size: 14px

.p-button-small .p-button-loading
  width: 12px
  height: 12px

.p-button-default,
.p-button-icon-text
  background-color: $theme
  border-color: $grey-400
  color: $grey-900
  cursor: pointer

.p-button-default .p-button-loading path,
.p-button-icon-text .p-button-loading path
  fill: $grey-900

.p-button-default:hover,
.p-button-icon-text:hover
  border-color: $blue-500
  color: $blue-500

.p-button-default:active,
.p-button-icon-text:active
  border-color: $blue-600
  color: $blue-600

.p-button-default::after,
.p-button-icon-text::after
  background: radial-gradient(circle,$grey-200 10%,transparent 10%)

.p-button-default .loading path,
.p-button-icon-text .loading path
  stroke: $grey-400

.p-button-primary
  background-color: $blue-500
  border-color: $blue-500
  color: $white
  cursor: pointer

.p-button-primary:hover
  background-color: $blue-400
  border-color: $blue-400

.p-button-primary:active
  background-color: $blue-600
  border-color: $blue-600

.p-button-primary::after
  background: radial-gradient(circle,$blue-300 10%,transparent 10%)

.p-button-error
  background-color: $red-500
  border-color: $red-500
  color: $white
  cursor: pointer

.p-button-error:hover
  background-color: $red-400
  border-color: $red-400

.p-button-error:active
  background-color: $red-600
  border-color: $red-600

.p-button-error::after
  background: radial-gradient(circle,$red-300 10%,transparent 10%)

.p-button-disabled,
.p-button-default-disabled,
.p-button-primary-disabled,
.p-button-error-disabled
  background-color: $grey-200
  color: $grey-400
  cursor: not-allowed
  border-color: $grey-200

.p-button-disabled:hover,
.p-button-default-disabled:hover,
.p-button-primary-disabled:hover,
.p-button-error-disabled:hover
  background-color: $grey-200
  border-color: $grey-200
  color: $grey-400

.p-button-disabled:active,
.p-button-default-disabled:active,
.p-button-primary-disabled:active,
.p-button-error-disabled:active
  background-color: $grey-200
  border-color: $grey-200
  color: $grey-400

.p-button-text-blue
  border-style: none
  color: $blue-500
  cursor: pointer

.p-button-text-blue:hover
  color: $blue-500

.p-button-text-blue:active
  color: $blue-600

.p-button-text-red
  border-style: none
  color: $red-500
  cursor: pointer

.p-button-text-red:hover
  color: $red-400

.p-button-text-red:active
  color: $red-600

.min-size
  min-width: 0

.p-button-icon,
.p-button-icon-border
  border-color: $grey-400
  padding: 0
  cursor: pointer

.p-button-icon path,
.p-button-icon-border path
  fill: $grey-900
  transition: all .36s

.p-button-icon .p-icon svg,
.p-button-icon-border .p-icon svg
  width: 100% !important
  height: 100% !important

.p-button-icon
  border-color: transparent

.p-button-icon:hover
  color: $blue-500

.p-button-icon:hover path
  fill: $blue-500

.p-button-icon:active
  color: $blue-600

.p-button-icon:active path
  fill: $blue-600

.p-button-icon::after
  color: $blue-500

.p-button-icon::after path
  fill: $blue-500

.p-button-icon-border:hover
  border-color: $blue-500
  color: $blue-500

.p-button-icon-border:hover path
  fill: $blue-500

.p-button-icon-border:active
  border-color: $blue-600
  color: $blue-600

.p-button-icon-border:active path
  fill: $blue-600

.p-button-icon-border::after
  border-color: $blue-500
  color: $blue-500

.p-button-icon-border::after path
  fill: $blue-500

.p-button-icon.p-button-large,
.p-button-icon-border.p-button-large
  width: 40px
  min-width: 40px

.p-button-icon.p-button-large .p-icon,
.p-button-icon-border.p-button-large .p-icon
  width: 24px
  height: 24px
  line-height: 24px

.p-button-icon.p-button-medium,
.p-button-icon-border.p-button-medium
  width: 32px
  min-width: 32px

.p-button-icon.p-button-medium .p-icon,
.p-button-icon-border.p-button-medium .p-icon
  width: 16px
  height: 16px
  line-height: 16px

.p-button-icon.p-button-small,
.p-button-icon-border.p-button-small
  width: 28px
  min-width: 28px

.p-button-icon.p-button-small .p-icon,
.p-button-icon-border.p-button-small .p-icon
  width: 12px
  height: 12px
  line-height: 12px

.p-button-icon-text
  border-color: transparent

.p-button-icon-text:hover
  border-color: transparent

.p-button-icon-text path
  fill: $grey-900
  transition: all .36s

.p-button-icon-text:hover
  color: $blue-500

.p-button-icon-text:hover path
  fill: $blue-500

.p-button-icon-text:active
  color: $blue-600

.p-button-icon-text:active path
  fill: $blue-600

.p-button-icon-text::after
  color: $blue-500

.p-button-icon-text::after path
  fill: $blue-500

.p-button-icon-text .p-icon
  margin-right: 4px

.p-button-icon-text .p-icon svg
  width: 100% !important
  height: 100% !important

.p-button-icon-text.p-button-large .p-icon
  width: 20px
  height: 20px
  line-height: 20px

.p-button-icon-text.p-button-medium .p-icon
  width: 16px
  height: 16px
  line-height: 16px

.p-button-icon-text.p-button-small .p-icon
  width: 12px
  height: 12px
  line-height: 12px

.p-button-icon-border-disabled
  background-color: $grey-200
  color: $grey-400
  cursor: not-allowed
  border-color: $grey-200

.p-button-icon-border-disabled svg
  cursor: not-allowed

.p-button-icon-border-disabled svg path
  fill: $grey-400

.p-button-icon-border-disabled:hover
  border-color: $grey-200

.p-button-icon-border-disabled:hover path
  fill: $grey-400

.p-button-icon-disabled
  color: $grey-400
  cursor: not-allowed

.p-button-icon-disabled svg
  cursor: not-allowed

.p-button-icon-disabled svg path
  fill: $grey-400

.p-button-icon-disabled:hover path
  fill: $grey-400

.p-button-icon-text-disabled
  color: $grey-400
  cursor: not-allowed

.p-button-icon-text-disabled svg
  cursor: not-allowed

.p-button-icon-text-disabled svg path
  fill: $grey-400

.p-button-icon-text-disabled:hover
  color: $grey-400

.p-button-icon-text-disabled:hover path
  fill: $grey-400

.p-button-text
  border-color: transparent
  cursor: pointer
  color: $grey-900

.p-button-text:hover
  color: $blue-500
  border-color: transparent

.p-button-text:active
  color: $blue-600

.p-button-text-disabled,
.p-button-text-blue-disabled,
.p-button-text-red-disabled
  cursor: not-allowed
  color: $grey-400

.p-button-text-disabled:hover,
.p-button-text-blue-disabled:hover,
.p-button-text-red-disabled:hover
  color: $grey-400

.p-loading
  display: flex
  align-items: center
  justify-content: center
  font-size: 0
  z-index: 8000

.p-loading-bg
  position: absolute
  left: 0
  top: 0
  z-index: 1
  width: 100%
  height: 100%

.p-loading-global
  position: fixed
  left: 0
  top: 0
  background-color: $theme
  width: 100%
  height: 100%

.p-loading-item
  z-index: 2

.p-loading-item img
  width: 100%
  height: 100%

.p-loading-local
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%

.p-loading-local .p-loading-bg
  background-color: $grey-50

.p-table-box
  position: relative
  width: 100%
  padding: 2px
  font-size: 0
  text-align: left
  height: 300px
  user-select: none

.p-table-box .p-table-container
  position: relative
  height: 100%

.p-table-box .p-table-container .p-table-container-box
  display: flex
  flex-direction: column
  justify-content: space-between
  width: 100%
  height: 100%

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box
  position: relative
  min-height: 44px

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box
  display: flex
  justify-content: space-between

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review
  display: flex
  align-items: center
  justify-content: space-between
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 100
  color: $grey-600
  padding-left: 24px
  padding-right: 18px
  background: $blue-100
  border-radius: 4px
  border: 1px solid $blue-300

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-left
  display: flex
  align-items: center

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-left .p-checked-num
  margin-right: 20px
  font-size: 14px

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-left .p-checked-num span
  display: inline-block
  width: 25px
  text-align: center
  color: $black

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-left .p-review-tool
  display: flex
  align-items: center

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-left .p-review-tool .p-review-tool-delete
  margin-right: 12px

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-right
  display: flex
  align-items: center
  cursor: pointer

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-checked-review .p-review-right .p-clear-check
  font-size: 14px
  cursor: pointer

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-filter-box
  display: flex
  flex-wrap: wrap
  flex-grow: 1

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-more-filter-box
  display: flex
  width: 50px
  min-width: 50px
  padding-top: 6.5px
  justify-content: center
  font-size: 14px
  color: $blue-500
  cursor: pointer

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-more-filter-box span,
.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-more-filter-box i
  height: 16px

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-more-filter-box .off
  transform: rotate(180deg)
  transition: transform .3s

.p-table-box .p-table-container .p-table-container-box .p-checked-filter-box .p-checked-filter-inner-box .p-more-filter-box .on
  transform: rotate(-180deg)
  transition: transform .3s

.p-table-box .p-table-container .p-table-container-box .p-inner-container
  position: relative
  flex-grow: 1
  overflow-x: auto

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table
  position: absolute
  top: 0
  bottom: 0

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head
  display: flex
  align-items: center
  width: 100%
  height: 40px
  border-bottom: 1px solid $grey-300
  background: $grey-50

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head:hover .p-table-head-th
  border-color: $grey-300 !important

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-check-box,
.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-column-set-btn
  height: 100%
  text-align: center
  background: $grey-50

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-check-box
  display: flex
  align-items: center
  padding: 0 4px 0 24px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-column-set-btn
  display: flex
  align-items: center
  justify-content: center
  width: 48px
  min-width: 48px
  max-width: 48px
  cursor: pointer
  border-left: 1px solid $grey-300

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-column-set-btn svg
  width: 16px
  height: 16px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th
  display: flex
  align-items: center
  justify-content: space-between
  height: 100%
  line-height: 40px
  min-width: 80px
  padding-left: 20px
  color: $grey-300

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con
  width: calc(100% - 8px)
  display: flex
  align-items: center

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-head-title
  height: 100%
  font-size: 12px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box
  display: flex
  flex-direction: column
  justify-content: center
  height: 40px
  margin-left: 4px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box i
  display: flex
  flex-direction: column
  justify-content: flex-start
  cursor: pointer

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box i:hover path
  fill: $blue-500

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box i svg
  width: 8px
  height: 8px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box .order-active path
  fill: $blue-500

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .p-head-title-con .p-order-box .desc
  transform: rotate(180deg)

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-table-head-th .right
  width: 8px
  min-width: 8px
  height: 100%
  cursor: col-resize

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-head .p-high-btn-col
  display: flex
  align-items: center
  width: 90px
  min-width: 90px
  max-width: 90px
  height: 100%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body
  position: relative
  height: calc(100% - 40px)
  overflow-y: auto
  overflow-x: hidden

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .no-data
  height: 48px
  line-height: 48px
  width: 100%
  text-align: center
  font-size: 16px
  color: $grey-600
  border-bottom: 1px solid $grey-300

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-check-box,
.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-column-set-btn
  text-align: center

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-check-box
  display: flex
  align-items: center
  height: 100%
  padding: 0 4px 0 24px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-column-set-btn
  width: 50px
  background: $theme

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr
  display: flex
  align-items: center
  width: 100%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group
  width: 100%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr
  display: flex
  align-items: center
  width: 100%
  height: 48px
  font-weight: 500
  font-size: 14px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr.p-group-border
  border-bottom: 1px solid $grey-300

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr .p-group-toggle-btn
  margin-left: 24px
  margin-right: 8px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr .p-group-toggle-btn i
  display: flex
  align-items: center
  justify-content: flex-start
  height: 100%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr .p-group-toggle-btn .p-triangleUp
  transform: rotate(90deg)

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr .p-group-toggle-btn .p-triangleDown
  transform: rotate(180deg)

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-group .p-group-tr .p-group-toggle-btn.no-check-box
  margin-left: 0

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .actived
  background: $grey-100
  border-radius: 24px
  border-color: transparent

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr-border
  border-color: $grey-300

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr-none
  border-color: transparent

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr
  position: relative
  display: flex
  align-items: center
  height: 49px
  border-bottom: 1px solid $grey-300
  transition: background .3s linear

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr:hover
  background: $grey-100
  border-radius: 24px
  border-color: transparent

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr:hover > .p-column-set-btn
  background: $grey-100

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-filed
  display: flex
  align-items: center
  height: 100%
  min-width: 80px
  padding-left: 20px
  padding-right: 8px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-filed >span
  width: 100%
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  color: $grey-900

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-filed >span .p-icon-only:hover .p-icon-item-box
  background: $blue-700

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box
  position: absolute
  right: 0
  top: 0
  z-index: 3
  height: 48px
  background: $blue-800
  box-shadow: $box-shadow-bottom
  border-radius: 24px
  display: flex
  align-items: center
  justify-content: space-between
  padding-left: 24px
  padding-right: 24px
  font-size: 14px
  color: $white
  cursor: pointer

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-more-triangle
  position: absolute
  bottom: 3px
  right: 26px
  width: 16px
  height: 16px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-more-triangle-rotate
  bottom: 30px
  transform: rotate(180deg)

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool
  position: relative
  display: flex
  height: 100%
  color: $white
  justify-content: space-between
  align-items: center

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-text
  display: inline-block
  width: 28px
  overflow: hidden
  margin-right: 8px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-text:hover
  color: $blue-200

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool svg path
  fill: $white

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool div
  display: flex
  align-items: center
  white-space: nowrap

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-text:hover
  color: $blue-200

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box
  position: relative
  display: flex
  justify-content: center

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box .p-icon-item-box
  display: flex
  justify-content: center
  border-radius: 50%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box .p-icon-item-box svg
  margin-left: 4px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box:hover .p-btn-icon-tips
  display: block
  bottom: -36px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box .p-btn-icon-tips
  display: none
  position: absolute
  bottom: 0
  left: 47%
  z-index: 10
  transform: translateX(-50%)
  padding: 7px 12px
  height: 36px
  background: $grey-800
  border-radius: 3px
  transition: all .3s linear

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-btn-icon-box .p-btn-icon-tips .p-triangle
  width: 0
  height: 0
  border: 4px solid
  border-left-width: 2px
  border-right-width: 2px
  border-color: transparent transparent $grey-900 transparent
  position: absolute
  top: -8px
  left: 50%

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-icon-only:hover .p-icon-item-box
  background: $blue-700

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select
  flex-direction: column
  position: absolute
  top: 39px
  right: 0
  z-index: 100
  width: 100px
  min-height: 30px
  max-height: 150px
  overflow: auto
  padding: 8px 0
  background: $grey-900
  box-shadow: $box-shadow-bottom
  border-radius: 4px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select .p-more-tool-select-item
  display: flex
  height: 38px
  line-height: 38px
  width: 100%
  padding-left: 13px
  color: $white

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select .p-more-tool-select-item:hover
  background: $grey-600

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select .p-more-tool-select-item .p-icon-box
  width: 24px

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select .p-more-tool-select-item span
  flex-grow: 1
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-table-box .p-table-container .p-table-container-box .p-inner-container .p-table .p-table-body .p-table-body-tr .p-table-body-filed-tr .p-row-tool-box .p-tool .p-more-tool-select .p-more-tool-select-item span:hover
  color: $blue-200

.p-table-box .p-t-pagination
  display: flex
  align-items: center
  justify-content: flex-end
  padding-top: 16px
  color: $grey-600
  border-top: 1px solid $grey-300

.p-table-box svg
  width: 16px
  height: 16px

.p-table-box .p-overflowx
  left: 0
  right: 0

.p-set-content
  position: absolute
  top: 30px
  right: 0
  height: 100px
  width: 240px
  z-index: 100
  box-shadow: $box-shadow-bottom
  border-radius: 4px
  background: $theme
  color: $grey-900
  border: 1px solid $grey-300

.p-set-content .p-set-content-body
  display: flex
  flex-direction: column
  height: calc(100% - 60px)
  overflow: auto
  padding: 8px 0
  box-sizing: border-box

.p-set-content .p-set-content-body .p-drag-list .hovered
  border-top-color: $blue-500 !important
  border-radius: 4px
  background: $grey-100
  box-shadow: $box-shadow-triangle-bot