@persagy2/meri-design/custom/theme/TableTree.styl

fork from meri-design and extend it.

/*!
 * @@persagy2/meri-design v1.4.9-extend.2
 * (c) 2019-2020 xiongshuang
 * Released under the MIT License.
 * 2022-12-07 10:33:25
 */
.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

.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-drop-box
  position: absolute
  outline: none
  padding-top: 8px
  padding-bottom: 8px
  background-color: $theme
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 120px
  max-width: 240px
  z-index: 7000
  font-size: 0
  overflow: hidden

.p-drop-box-multiple
  max-height: 250px

.p-drop-box-multiple-search
  height: 250px

.p-drop-box-single
  max-height: 208px

.p-drop-box-single-search
  height: 208px

.p-drop-box-search
  position: relative
  margin: 4px 12px
  width: calc(100% - 24px)

.p-drop-box-input
  outline: none
  padding-left: 8px
  padding-right: 30px
  border: 1px solid $grey-400
  border-radius: 4px
  width: 100%
  height: 32px
  font-size: 14px
  color: $grey-900
  transition: border-color .3s

.p-drop-box-input:active,
.p-drop-box-input:focus,
.p-drop-box-input:hover
  border-color: $blue-500

.p-drop-box-input-clear
  position: absolute
  right: 1px
  top: 1px
  padding-top: 7px
  display: inline-block
  width: 30px
  height: 30px
  text-align: center
  cursor: pointer

.p-drop-box-input-clear svg
  width: 16px
  height: 16px

.p-drop-box-input-clear svg path
  transition: fill .3s

.p-drop-box-input-clear:hover svg path
  fill: $blue-500

.p-drop-box-list
  width: 100%
  max-height: 190px
  overflow-x: hidden
  overflow-y: auto

.p-drop-box-item
  display: flex
  align-items: center
  padding-left: 12px
  padding-right: 12px
  width: 100%
  height: 38px
  line-height: 38px
  color: $grey-900
  cursor: pointer
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  transition: background-color .3s

.p-drop-box-item:hover
  background-color: $grey-200

.p-drop-box-item.p-drop-item-selected
  color: $blue-500
  background-color: $blue-100

.p-drop-box-item .p-drop-box-text
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  width: 100%
  font-size: 14px

.p-drop-box-item-checkbox .p-drop-box-text
  width: calc(100% - 20px)

.p-drop-box-item-selected
  background-color: $blue-100

.p-drop-box-item-selected .p-drop-box-text
  color: $blue-500

.p-drop-box-handle
  position: absolute
  left: 0
  bottom: 0
  z-index: 10
  display: flex
  justify-content: flex-end
  padding-left: 12px
  padding-right: 12px
  background-color: $theme
  width: 100%
  height: 42px
  line-height: 42px

.p-drop-box-handle .p-drop-box-btn
  font-size: 14px
  cursor: pointer
  transition: color .3s

.p-drop-box-handle .p-drop-box-cancel
  margin-right: 16px
  color: $grey-900

.p-drop-box-handle .p-drop-box-cancel:hover
  color: $blue-500

.p-drop-box-handle .p-drop-box-confirm
  color: $blue-500

.p-drop-box-handle .p-drop-box-confirm:active
  color: $blue-600

.p-drop-box-handle .p-drop-box-disabled
  color: $grey-400
  cursor: not-allowed

.p-drop-box-handle-shadow
  box-shadow: $box-shadow-top

.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-select-screen
  position: relative
  display: inline-flex
  align-items: center
  height: 20px
  line-height: 20px
  font-size: 0
  cursor: pointer

.p-select-screen-none
  pointer-events: none

.p-select-screen-title
  font-size: 12px
  color: $grey-900

.p-select-screen-num
  padding-left: 4px
  padding-right: 4px
  color: $blue-500

.p-select-screen-svg
  margin-left: 8px
  height: 20px

.p-select-screen-svg svg
  vertical-align: middle
  width: 16px
  height: 16px
  transition: transform .3s

.p-select-screen-svg svg path
  transition: fill .3s

.p-select-screen-svg:hover svg path
  fill: $blue-500

.p-select-triangle-open svg
  transform: rotate(180deg)

.p-select-screen-svg-active svg path
  fill: $blue-500

.p-select-screen-shade
  position: absolute
  width: 100%
  height: 100%
  pointer-events: auto
  opacity: 0
  cursor: pointer

.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-table-header
  position: relative
  display: table
  table-layout: fixed
  width: 100%
  margin: 0
  font-size: 0

.p-table-header:hover .p-table-resize-width
  display: block

.p-table-layout-line
  position: absolute
  top: 0
  z-index: 12
  background-color: $blue-500
  width: 1px
  height: 100%
  pointer-events: none

.p-table-layout-line:before
  position: absolute
  top: 12px
  left: -2px
  display: inline-block
  width: 5px
  height: 16px
  background-color: $grey-50
  border: 1px solid $blue-500
  border-radius: 3px
  content: ''

.p-table-header-item
  position: relative
  width: 100%
  overflow: hidden
  user-select: none

.p-table-header-item .p-table-header-text
  display: flex
  align-items: center
  padding-left: 20px
  padding-right: 20px

.p-table-header-item-content
  width: 100%
  height: 100%

.p-table-header-item-content-n-child .p-table-header-text
  height: 100%

.p-table-header-item-content-h-child > .p-table-header-text
  border-bottom: 1px solid $grey-200
  height: 50%
  justify-content: center

.p-table-resize-width
  position: absolute
  top: 0
  right: 0
  display: none
  border-right: 1px solid $grey-200
  width: 5px
  height: 100%
  cursor: col-resize

.p-table-header-item-children
  display: flex
  height: 50%

.p-table-header-item-children .p-table-header-text
  flex: 1
  overflow: hidden
  padding-left: 4px
  padding-right: 4px

.p-table-header-item-children .p-table-header-text:not(:first-child)
  border-left: 1px solid $grey-200

.p-table-header-item-normal
  height: 40px

.p-table-header-item-dimension
  height: 60px

.p-table-header-content
  background-color: $grey-50
  border: 0
  overflow: hidden

.p-table-header-th
  border-top: 0
  border-right: 0
  border-bottom: 1px solid $grey-200
  border-left: 0
  min-width: 0
  font-weight: normal

.p-table-header-th-bl
  border-left: 1px solid $grey-50

.p-table-header-item-row-number
  width: 100%
  line-height: 40px
  text-align: center
  font-size: 14px
  color: $grey-900
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-table-header-item-checkbox
  display: flex
  align-items: center
  justify-content: center
  height: 40px
  text-align: center

.p-table-header-item-center .p-table-header-text
  justify-content: center

.p-table-header-item-left .p-table-header-text
  justify-content: flex-start

.p-table-header-item-right .p-table-header-text
  justify-content: flex-end

.p-table-header-span
  color: $grey-600
  font-size: 12px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-table-header-sort-disabled
  cursor: not-allowed

.p-table-header-sort-disabled svg
  font-size: 0

.p-table-header-sort-disabled svg path
  fill: $grey-400

.p-table-header-sort-disabled svg:hover path
  fill: $grey-400

.p-table-header-sort-active path
  fill: $blue-500

.p-table-header-sort-triangle
  transform: rotate(180deg)

.p-table-header-setting .p-table-header-content .p-table-header-th:last-child
  padding-right: 48px

.p-table-header-border .p-table-header-content .p-table-header-th-bl
  border-left: 1px solid $grey-200

.p-table-header-has-bar
  padding-right: 17px

.p-table-header-note
  margin-top: 2px
  margin-left: 8px
  width: 16px
  cursor: pointer

.p-table-header-note svg
  vertical-align: middle
  width: 16px
  height: 16px
  font-size: 0

.p-table-header-note .p-table-header-note-blue-500 path
  fill: $blue-500

.p-table-header-note .p-table-header-note-cyan-500 path
  fill: $cyan-500

.p-table-header-note .p-table-header-note-turquoise-500 path
  fill: $turquoise-500

.p-table-header-note .p-table-header-note-green-500 path
  fill: $green-500

.p-table-header-note .p-table-header-note-red-500 path
  fill: $red-500

.p-table-header-sort
  padding-left: 8px
  width: 16px
  line-height: 8px
  cursor: pointer

.p-table-header-sort svg
  vertical-align: middle
  width: 8px
  height: 8px
  font-size: 0

.p-table-header-sort svg path
  transition: fill .3s

.p-table-header-sort svg:hover path
  fill: $blue-600

.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-drop
  display: inline-block
  vertical-align: middle
  font-size: 0
  text-align: left

.p-drop .p-drop-title
  display: flex
  align-items: center
  cursor: pointer

.p-drop .p-drop-title .p-drop-title-content
  font-size: 14px
  transition: color .3s

.p-drop .p-drop-title .p-drop-triangle
  width: 16px
  height: 16px
  line-height: 1

.p-drop .p-drop-title .p-drop-triangle svg
  transition: transform .3s

.p-drop .p-drop-title .p-drop-triangle svg path
  transition: fill .3s

.p-drop .p-drop-title .p-drop-triangle-rotate svg
  transform: rotate(180deg)

.p-drop:hover .p-drop-title-content
  color: $blue-500

.p-drop:hover .p-drop-triangle path
  fill: $blue-500

.p-drop-show
  position: relative

.p-drop-show::after
  content: ''
  position: absolute
  left: 0
  top: 0
  z-index: 10
  display: inline-block
  opacity: 0
  width: 100%
  height: 100%
  cursor: pointer

.p-drop-show .p-drop-title-content
  color: $blue-500

.p-drop-show .p-drop-triangle path
  fill: $blue-500

.p-drop-disabled .p-drop-title
  cursor: not-allowed

.p-drop-light .p-drop-title
  color: $grey-900

.p-drop-dark .p-drop-title
  color: $white

.p-drop-dark .p-drop-triangle svg path
  fill: $blue-500

.p-drop-content
  position: absolute
  display: inline-block
  outline: none
  padding-top: 8px
  padding-bottom: 8px
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 120px
  z-index: 7000
  font-size: 0
  pointer-events: none

.p-drop-content-top-arrow
  filter: drop-shadow($box-shadow-triangle-top)

.p-drop-content-top-arrow::before
  position: absolute
  top: -6px
  right: 12px
  content: ''
  border-style: solid
  border-width: 0 6px 6px 6px
  border-color: transparent transparent $white transparent
  width: 0
  height: 0

.p-drop-content-bottom-arrow
  filter: drop-shadow($box-shadow-triangle-bottom)

.p-drop-content-bottom-arrow::after
  position: absolute
  bottom: -6px
  right: 12px
  content: ''
  border-style: solid
  border-width: 6px 6px 0 6px
  border-color: $white transparent transparent transparent
  width: 0
  height: 0

.p-drop-option
  width: 100%
  overflow-x: hidden
  overflow-y: auto
  min-height: 54px

.p-drop-option .p-drop-option-item
  padding-left: 12px
  padding-right: 12px
  width: 100%
  height: 38px
  font-size: 14px
  cursor: pointer
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  transition: background-color .3s

.p-drop-option .p-drop-option-item .p-drop-option-svg
  margin-right: 8px

.p-drop-option .p-drop-option-item .p-drop-option-svg svg
  vertical-align: middle

.p-drop-option .p-drop-option-item span
  vertical-align: middle
  line-height: 38px

.p-drop-option .p-drop-option-item span .p-drop-option-svg svg path
  fill: $blue-500

.p-drop-option .p-drop-option-item.p-drop-option-disable
  cursor: not-allowed

.p-drop-search
  position: relative
  display: block
  padding-left: 12px
  padding-right: 12px
  padding-bottom: 8px
  width: 100%
  height: 40px

.p-drop-search .p-drop-input
  outline: none
  padding-left: 12px
  padding-right: 30px
  background: none
  border: 1px solid $grey-400
  border-radius: 4px
  width: 100%
  height: 100%
  font-size: 14px
  color: $grey-900

.p-drop-search .p-drop-clear
  position: absolute
  right: 13px
  top: 1px
  width: 30px
  height: 30px
  line-height: 30px
  text-align: center
  cursor: pointer

.p-drop-search .p-drop-clear:hover path
  fill: $blue-500

.p-drop-search .p-drop-clear svg
  width: 16px
  height: 16px
  font-size: 0
  vertical-align: middle

.p-drop-search .p-drop-clear svg path
  transition: fill .3s

.p-drop-search-shadow
  box-shadow: $box-shadow-bottom

.p-drop-content-light
  background-color: $theme
  border: 1px solid $grey-300

.p-drop-content-light .p-drop-option-item
  color: $grey-900

.p-drop-content-light .p-drop-option-item:hover
  background-color: $hover-color-grey

.p-drop-content-light .p-drop-option-item.p-drop-option-selected
  color: $blue-500
  background-color: $blue-100

.p-drop-content-light .p-drop-option-item.p-drop-option-disable
  color: $grey-400

.p-drop-content-dark
  background-color: $blue-900
  border: 1px solid $blue-500

.p-drop-content-dark .p-drop-option-item
  color: $white

.p-drop-content-dark .p-drop-option-item:hover
  background-color: $blue-800

.p-drop-content-dark .p-drop-option-item.p-drop-option-selected
  color: $blue-50
  background-color: $blue-700

.p-drop-content-dark .p-drop-option-item.p-drop-option-disable
  color: $blue-200

.p-table-tree-main
  display: table
  margin: 0
  table-layout: fixed
  width: 100%
  font-size: 0

.p-table-tree-main-setting .p-table-tree-tr .p-table-tree-td-last-child
  padding-right: 48px

.p-table-tree-main-setting .p-table-tree-head-tr .p-table-tree-td:last-child
  padding-right: 48px

.p-table-tree-main-border .p-table-tree-tr .p-table-tree-td-border
  border-left: 1px solid $grey-200

.p-table-tree-main- .p-table-tree-td-first-child
  border-top-left-radius: 24px
  border-bottom-left-radius: 24px

.p-table-tree-main- .p-table-tree-td-last-child
  border-top-right-radius: 24px
  border-bottom-right-radius: 24px

.p-table-tree-main-left .p-table-tree-td-first-child
  border-top-left-radius: 24px
  border-bottom-left-radius: 24px

.p-table-tree-main-right .p-table-tree-td-last-child
  border-top-right-radius: 24px
  border-bottom-right-radius: 24px

.p-table-tree-tr
  border: 0

.p-table-tree-body-tr
  position: relative

.p-table-tree-tr-link
  cursor: pointer

.p-table-tree-tr-hover .p-table-tree-body-td
  position: relative
  border-bottom-color: $theme
  background-color: $grey-100
  border-left-color: $grey-100 !important

.p-table-tree-tr-hover .p-table-tree-body-td:before
  position: absolute
  left: 0
  top: -1px
  background-color: $theme
  width: 100%
  height: 1px
  content: ''

.p-table-tree-tr-selected .p-table-tree-body-td
  position: relative
  border-bottom-color: $theme
  background-color: $blue-100
  border-left-color: $blue-100 !important

.p-table-tree-tr-selected .p-table-tree-body-td:before
  position: absolute
  left: 0
  top: -1px
  background-color: $theme
  width: 100%
  height: 1px
  content: ''

.p-table-tree-tr-clear-bl .p-table-tree-td
  border-bottom-color: $theme

.p-table-tree-tr-bg .p-table-tree-td
  background-color: $grey-100

.p-table-tree-td
  background-color: $theme
  border-top: 0
  border-left: 0
  border-right: 0
  border-bottom: 1px solid $grey-200
  transition: background-color .3s

.p-table-tree-td-padding-screen .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 24px

.p-table-tree-td-padding-sort .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 16px

.p-table-tree-td-padding-tip .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 28px

.p-table-tree-td-padding-screen-sort .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 40px

.p-table-tree-td-padding-screen-tip .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 52px

.p-table-tree-td-padding-screen-sort-tip .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 68px

.p-table-tree-td-padding-sort-tip .p-table-tree-cell .p-table-tree-cell-item
  padding-right: 44px

.p-table-tree-cell
  display: flex
  align-items: center
  padding: 14px 20px
  width: 100%
  height: 100%
  max-height: 48px
  overflow: hidden

.p-table-tree-cell-item
  display: flex
  align-items: center
  width: 100%

.p-table-tree-cell-item .p-table-cell-dot
  margin-right: 4px
  border-radius: 3px
  width: 6px
  height: 6px

.p-table-tree-cell-item .p-table-tree-cell-text
  line-height: 20px
  font-size: 14px
  color: $grey-900
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-table-tree-cell-item .p-table-tree-cell-bold
  font-weight: 600

.p-table-tree-cell-item .p-table-cell-arrow
  margin-top: -1px
  width: 16px
  height: 16px

.p-table-tree-cell-item .p-table-cell-arrow svg
  width: 16px
  height: 16px

.p-table-tree-cell-item .p-table-cell-arrow-up svg path
  fill: $red-500

.p-table-tree-cell-item .p-table-cell-arrow-down
  transform: rotate(180deg)

.p-table-tree-cell-item .p-table-cell-arrow-down svg path
  fill: $turquoise-500

.p-table-tree-cell-item-first
  width: calc(100% - 24px)

.p-table-tree-cell-item-left
  justify-content: flex-start

.p-table-tree-cell-item-right
  justify-content: flex-end

.p-table-tree-cell-item-center
  justify-content: center

.p-table-tree-cell-item-link
  cursor: pointer

.p-table-tree-triangle
  display: flex
  align-items: center
  justify-content: flex-end
  width: 20px
  pointer-events: auto

.p-table-tree-triangle .p-table-tree-triangle-span
  width: 20px
  line-height: 20px
  transform: rotate(90deg)
  text-align: center
  transition: transform .3s
  cursor: pointer

.p-table-tree-triangle .p-table-tree-triangle-span svg
  width: 16px
  height: 16px
  vertical-align: middle

.p-table-tree-triangle .p-table-tree-triangle-open
  transform: rotate(180deg)

.p-table-tree-head-tr .p-table-tree-td
  background-color: $grey-50

.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-message-box
  position: fixed
  top: 36px
  left: 0
  text-align: center
  display: flex
  flex-flow: column wrap
  justify-content: center
  align-items: center
  width: 100%
  z-index: 8000
  pointer-events: none

.fadeDownUpUi-enter-active
  animation: fadeInDownUi .3s ease-out

.fadeDownUpUi-leave-active
  animation: fadeOutUpUi .3s ease-in

@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
.p-message
  display: flex
  justify-content: space-around
  align-items: flex-start
  padding: 8px 8px 8px 12px
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 240px
  max-width: 600px
  min-height: 40px

.p-message + .p-message
  margin-top: 24px

.p-message .p-message-hint
  line-height: 24px
  font-size: 0

.p-message .p-message-hint svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-message .p-message-text
  padding-left: 8px
  padding-right: 8px
  width: 100%
  text-align: left
  font-size: 14px
  color: $white
  word-wrap: break-word
  line-height: 24px

.p-message .p-message-close
  height: 24px
  line-height: 24px
  pointer-events: auto
  font-size: 0

.p-message .p-message-close svg
  vertical-align: middle
  width: 12px
  opacity: .5
  transition: opacity .3s
  cursor: pointer

.p-message .p-message-close svg:hover
  opacity: 1

.p-message-info
  background-color: $blue-500

.p-message-success
  background-color: $turquoise-500

.p-message-warning
  background-color: $orange-400

.p-message-error
  background-color: $red-400

.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-header-setting
  position: absolute
  z-index: 12
  background-color: $theme
  border: 1px solid $grey-200
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  width: 240px
  font-size: 0
  outline: none

.p-header-setting:hover .p-header-setting-content
  overflow-y: auto

.p-header-setting-content
  position: relative
  padding-top: 8px
  padding-bottom: 8px
  border-bottom: 1px solid $grey-200
  max-height: 412px
  overflow: hidden

.p-header-setting-item
  position: relative
  display: flex
  align-items: center
  padding-left: 8px
  padding-right: 6px
  height: 38px
  transition: box-shadow .3s,background-color .3s

.p-header-setting-item::before
  position: absolute
  left: 0
  top: 0
  content: ''
  background-color: transparent
  width: 100%
  height: 2px
  transition: background-color .3s

.p-header-setting-item-draggable
  cursor: pointer

.p-header-setting-item-hover
  box-shadow: $box-shadow-bottom
  cursor: move

.p-header-setting-item-hover::before
  background-color: $blue-500

.p-header-setting-normal:hover
  background-color: $hover-color-grey

.p-header-setting-normal:hover .p-header-setting-shit
  opacity: 1
  pointer-events: auto

.p-header-setting-disabled
  cursor: not-allowed

.p-header-setting-disabled .p-header-setting-words .p-header-setting-text
  color: $grey-400

.p-header-setting-disabled .p-header-setting-words .p-header-setting-shit
  display: none

.p-header-setting-checkbox
  position: relative
  width: 32px

.p-header-setting-shit
  position: relative
  display: inline-block
  width: 16px
  height: 16px
  opacity: 0
  vertical-align: middle
  pointer-events: none
  transition: opacity .3s

.p-header-setting-shit::after
  position: absolute
  left: 0
  top: 0
  background: none
  opacity: 0
  content: ''
  width: 100%
  height: 100%

.p-header-setting-shit:hover svg g
  fill: $blue-500

.p-header-setting-shit svg
  width: 16px
  height: 16px

.p-header-setting-shit svg g
  transition: fill .3s

.p-header-setting-words
  flex: 1
  display: flex
  align-items: center
  justify-content: space-between
  padding-left: 8px
  line-height: 1
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

.p-header-setting-words .p-header-setting-text
  color: $grey-900
  font-size: 14px
  user-select: none

.p-header-setting-handle
  display: flex
  align-items: center
  justify-content: space-between
  padding: 20px 16px 20px 24px

.p-header-setting-handle-shadow
  box-shadow: $box-shadow-top

.p-header-setting-default
  color: $grey-600
  font-size: 14px
  cursor: pointer
  transition: color .3s

.p-header-setting-default:hover
  color: $blue-500

.p-header-setting-default:active
  color: $blue-600

.p-table-layout
  position: relative
  min-width: 500px
  width: 100%
  font-size: 0

.p-table-layout-loading
  position: absolute
  left: 0
  top: 0
  z-index: 15
  display: flex
  align-items: center
  justify-content: center
  background-color: $theme
  width: 100%
  height: 100%

.p-table-layout-loading svg
  width: 36px
  height: 36px
  font-size: 0

.p-table-top-handle
  position: absolute
  left: 0
  top: -60px
  z-index: 11
  width: 100%

.p-table-top-handle .p-table-top-select
  display: flex
  align-items: center
  justify-content: space-between
  padding-left: 24px
  padding-right: 16px
  background-color: $blue-100
  border: 1px solid $blue-300
  border-radius: 4px
  box-shadow: $box-shadow-max-bottom
  width: 100%
  height: 48px

.p-table-top-handle .p-table-top-select-pos
  position: absolute
  left: 0
  top: -12px

.p-table-top-handle .p-table-top-select-left
  display: inline-flex
  align-items: center

.p-table-top-handle .p-table-top-select-text
  margin-right: 20px
  display: inline-block
  vertical-align: middle

.p-table-top-handle .p-table-top-select-text span
  font-size: 14px

.p-table-top-handle .p-table-top-select-text .p-table-top-select-text-normal
  color: $grey-600

.p-table-top-handle .p-table-top-select-text .p-table-top-select-text-num
  padding-left: 8px
  padding-right: 8px
  color: $grey-900
  transition: color .3s

.p-table-top-handle .p-table-top-select-text .p-table-top-select-text-num:hover
  color: $blue-500

.p-table-top-handle .p-table-top-select-right
  line-height: 28px
  color: $grey-600
  font-size: 14px
  cursor: pointer

.p-table-top-handle .p-table-top-select-right:active
  color: $grey-700

.p-table-layout-wrapper
  width: 100%
  overflow: hidden

.p-table-layout-border
  border: 1px solid $grey-200

.p-table-layout-header
  position: relative
  background-color: $grey-50
  width: 100%
  overflow: hidden

.p-table-layout-header-no-data
  z-index: 1
  overflow: visible

.p-table-layout-header-has-bar::after
  content: ''
  position: absolute
  right: 0
  bottom: 0
  background-color: $grey-200
  width: 17px
  height: 1px

.p-table-layout-header-has-bar .p-table-layout-header-content
  overflow-y: scroll

.p-table-layout-header-normal
  height: 40px

.p-table-layout-header-normal-border
  height: 41px

.p-table-layout-header-dimension
  height: 60px

.p-table-layout-header-dimension-border
  height: 61px

.p-table-layout-header-content
  position: relative
  min-width: 500px
  width: 100%
  overflow-x: auto
  overflow-y: hidden

.p-table-layout-header-content-events
  pointer-events: none

.p-table-layout-header-fixed
  position: absolute
  top: 0
  z-index: 10

.p-table-layout-header-fixed-normal
  height: 40px

.p-table-layout-header-fixed-dimension
  height: 60px

.p-table-layout-header-fixed-left
  left: 0
  box-shadow: $box-shadow-right

.p-table-layout-header-fixed-right
  right: 0
  box-shadow: $box-shadow-left

.p-table-layout-header-fixed-right::after
  position: absolute
  top: 0
  display: inline-block
  background-color: $grey-50
  height: 100%
  content: ''

.p-table-layout-header-fixed-right-6
  right: 6px

.p-table-layout-header-fixed-right-6::after
  right: -6px
  width: 6px

.p-table-layout-header-fixed-right-17
  right: 17px

.p-table-layout-header-fixed-right-17::after
  right: -17px
  width: 17px

.p-table-layout-header-fixed-right-padding .p-table-header .p-table-header-content .p-table-header-th:last-child
  padding-right: 48px

.p-table-layout-header-setting
  position: absolute
  right: 0
  top: 0
  z-index: 11
  background-color: $grey-50
  border-left: 1px solid $grey-200
  width: 48px
  text-align: center
  cursor: pointer

.p-table-layout-header-setting svg
  vertical-align: middle
  width: 16px
  height: 16px
  font-size: 0

.p-table-layout-header-setting svg path
  transition: fill .3s

.p-table-layout-header-setting:hover path
  fill: $blue-500

.p-table-layout-header-setting .p-table-header-setting-svg
  display: inline-block
  vertical-align: middle
  width: 20px
  height: 20px
  line-height: 20px
  text-align: center

.p-table-layout-header-setting .p-header-setting-status
  position: absolute
  left: 0
  top: 0
  opacity: 0
  width: 100%
  height: 100%

.p-table-layout-header-setting-normal
  height: 40px
  line-height: 40px

.p-table-layout-header-setting-dimension
  height: 60px
  line-height: 60px

.p-table-layout-setting-shadow
  box-shadow: $box-shadow-left

.p-table-layout-content
  width: 100%
  overflow: hidden

.p-table-layout-main
  position: relative
  min-width: 500px
  width: 100%
  overflow: auto

.p-table-layout-main-fixed
  position: absolute
  top: 0
  z-index: 10
  background-color: $theme

.p-table-layout-main-fixed-left
  left: 0
  box-shadow: $box-shadow-right

.p-table-layout-main-fixed-right
  right: 0
  box-shadow: $box-shadow-left

.p-table-layout-main-wrap
  width: 100%
  overflow-y: auto
  overflow-x: hidden

.p-table-no-data
  padding-top: 24px
  padding-bottom: 24px
  width: 100%
  text-align: center

.p-table-no-data > img
  width: 120px
  height: 120px

.p-table-no-data .p-table-no-data-text
  color: $grey-600
  font-size: 14px

.p-table-cell-handle
  display: flex
  align-items: center
  height: 100%
  overflow: hidden

.p-table-cell-handle-item
  height: 20px
  line-height: 20px
  font-size: 0

.p-table-cell-handle-item > span
  line-height: 20px
  overflow: hidden
  font-size: 14px
  transition: color .3s

.p-table-cell-handle-item + .p-table-cell-handle-item
  position: relative
  padding-left: 24px

.p-table-cell-handle-item + .p-table-cell-handle-item:before
  position: absolute
  top: 2px
  left: 12px
  content: ''
  background-color: $grey-400
  width: 1px
  height: 16px

.p-table-cell-handle-item .p-table-handle-text
  color: $blue-500
  cursor: pointer

.p-table-cell-handle-item .p-table-handle-text:active
  color: $blue-600

.p-table-cell-handle-item .p-table-handle-text-disabled
  color: $grey-400
  cursor: not-allowed

.p-table-more-point
  width: 40px
  height: 20px

.p-table-more-point svg
  font-size: 0
  width: 16px
  height: 16px
  vertical-align: middle

.p-table-more-point svg path
  transition: fill .3s

.p-table-more-point .p-table-more-point-box
  display: inline-block
  vertical-align: middle
  width: 16px