meri-design-dev/custom/theme/TreeSelect.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-select-input
  position: relative
  display: inline-block
  width: 100%

.p-select-input-content
  display: flex
  align-items: center
  justify-content: space-between
  border: 1px solid $grey-400
  border-radius: 4px
  width: 100%
  height: 32px
  font-size: 14px
  cursor: pointer
  padding-left: 12px
  transition: border .3s,box-shadow .3s

.p-select-input-content:hover
  border-color: $blue-500

.p-select-input-content:active
  border-color: $blue-600

.p-select-input-content svg
  transition: transform .3s

.p-select-input-content.p-select-input-content-active
  border-color: $blue-500
  box-shadow: 0 0 0 2px rgba(0,145,255,0.2)

.p-select-input-content .p-select-input-caption
  max-width: 196px
  font-size: 14px
  color: $grey-500
  height: 30px
  line-height: 30px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-select-search-box-disabled
  background-color: $grey-200
  cursor: not-allowed

.p-select-search-box-disabled .p-select-input-section
  font-size: 14px

.p-select-search-box-disabled .p-select-input-section .p-select-input-input
  cursor: not-allowed

.p-select-search-box-disabled .p-select-input-svg
  display: none

.p-select-search-box-disabled .p-select-clear-icon
  display: none

.p-select-search-box-disabled:hover
  border-color: $grey-400

.p-select-input-section
  position: relative
  width: 100%
  height: 100%
  overflow: hidden

.p-select-input-section .p-select-input-place
  padding-right: 8px
  line-height: 30px
  color: $grey-400
  position: absolute
  left: 0

.p-select-input-section .p-select-input-place span span
  padding-left: 4px
  padding-right: 4px

.p-select-input-section .p-select-input-place.p-select-input-place-selected
  color: $grey-900

.p-select-input-section .p-select-input-place.p-select-input-place-selected span span
  color: $blue-500

.p-select-input-section .p-select-input-input
  position: absolute
  left: 0
  top: 0
  border: 0
  outline: none
  background: none
  width: calc(100% - 24px)
  height: 100%
  font-size: 14px
  color: $grey-900
  cursor: pointer
  z-index: 11

.p-select-input-section .p-select-icon-svg
  position: absolute
  right: 0
  top: 0
  display: block
  width: 24px
  height: 30px
  line-height: 30px
  z-index: 10
  transition: all .3s
  font-size: 0

.p-select-input-section .p-select-input-svg
  width: 16px
  height: 16px
  vertical-align: middle

.p-select-input-section .p-select-clear-icon
  position: absolute
  right: 8px
  top: 7px
  width: 16px
  z-index: 1000
  transition: all .3s

.p-select-input-section .p-select-clear-icon path
  transition: fill .3s

.p-select-input-section .p-select-clear-icon:hover path
  fill: #0091ff

.p-select-input-section .p-select-input-rotate
  transform: rotate(180deg)

.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

.p-select-option
  border-radius: 4px
  width: 100%

.p-select-option .p-select-option-item
  padding-left: 12px
  width: 100%
  height: 38px
  line-height: 38px
  color: $grey-900
  text-align: left
  font-size: 14px
  cursor: pointer
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-option .p-select-option-item:hover
  background-color: $hover-color-grey

.p-select-option .p-select-option-item
  position: relative

.p-select-option .p-select-option-item::after
  position: absolute
  top: 16px
  right: 16px
  display: block
  border-left: 2px solid $blue-500
  border-bottom: 2px solid $blue-500
  width: 10px
  height: 5px
  content: ''
  transition: transform .3s
  transform: rotate(0) scale(0)

.p-select-option .p-select-option-item.p-select-option-item-selected-multiple::after
  transform: rotate(-45deg) scale(1)

.p-select-option .p-select-option-item-disabled
  color: $grey-400 !important

.p-select-option .p-select-option-item-disabled:hover
  cursor: not-allowed

.p-select-option .p-select-option-clear
  width: 38px
  height: 38px

.p-select-option .p-select-option-clear svg
  width: 16px
  height: 16px

.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-tree
  width: 100%
  overflow-x: hidden
  font-size: 0

.p-tree-node
  width: 100%

.p-tree-node-content
  position: relative
  padding-left: 12px
  width: 100%
  cursor: pointer
  transition: background-color .3s
  overflow: hidden

.p-tree-node-content:hover
  background-color: $hover-color-grey

.p-tree-node-content-checked
  background-color: $blue-100

.p-tree-node-content-checked .p-tree-node-name
  color: $blue-500

.p-tree-svg
  display: inline-block
  vertical-align: middle
  width: 24px
  height: 16px
  line-height: 24px

.p-tree-svg .p-tree-icon-svg
  width: 16px
  height: 16px
  vertical-align: text-bottom
  transform: rotate(90deg)
  transition: transform .3s

.p-tree-svg .p-tree-icon-rotate
  transform: rotate(180deg)

.p-tree-node-check
  display: inline-block
  vertical-align: middle
  width: calc(100% - 24px)

.p-tree-node-check .p-tree-node-checkbox
  display: inline-block
  vertical-align: middle
  width: 20px

.p-tree-node-title
  position: relative
  display: inline-block
  vertical-align: middle
  user-select: none

.p-tree-node-title .p-tree-node-name
  width: 100%
  height: 38px
  line-height: 38px
  font-size: 14px
  color: $grey-900
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

.p-tree-node-title-single
  width: 100%

.p-tree-node-title-multiple
  width: calc(100% - 20px)

.p-tree-node-content-disabled .p-tree-node-name
  color: $grey-400
  cursor: not-allowed

.p-tree-node-content-0 .p-tree-node-name
  color: $grey-900

.p-tree-child
  width: 100%

.p-select-area
  display: inline-flex
  background-color: $theme
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  width: 100%
  height: 480px

.p-select-area .p-select-area-child
  height: 100%

.p-select-area .p-transfer-left
  border-right: 1px solid $grey-200
  overflow-x: auto

.p-select-area .p-transfer-left .p-transfer-left-input
  margin-bottom: 8px
  width: 100%

.p-select-area .p-transfer-left .p-transfer-left-content
  width: 100%
  overflow-y: auto
  padding-top: 8px

.p-select-area .p-transfer-left .p-transfer-left-content .p-transfer-left-content-none
  width: 100%
  padding-left: 12px
  line-height: 38px
  color: #c3c7cb
  font-size: 14px
  user-select: none

.p-select-area .p-transfer-right .p-transfer-right-title
  display: flex
  justify-content: space-between
  align-items: center
  padding: 12px 12px 12px 16px
  border-bottom: 1px solid transparent
  line-height: 22px

.p-select-area .p-transfer-right .p-transfer-right-title.p-transfer-right-title-border
  border-bottom-color: $grey-200

.p-select-area .p-transfer-right .p-transfer-right-title > article
  font-size: 14px

.p-select-area .p-transfer-right .p-transfer-right-title .p-transfer-right-title-text
  color: $grey-500

.p-select-area .p-transfer-right .p-transfer-right-title .p-transfer-right-title-text-num
  margin-left: 4px
  color: $grey-900
  font-weight: 600

.p-select-area .p-transfer-right .p-transfer-right-title .p-transfer-right-clear
  color: $grey-400
  transition: color .3s
  cursor: not-allowed

.p-select-area .p-transfer-right .p-transfer-right-title .p-transfer-right-clear-active
  color: $blue-500
  cursor: pointer

.p-select-area .p-transfer-right .p-transfer-right-title .p-transfer-right-clear-active:active
  color: $blue-600

.p-select-area .p-transfer-right .p-transfer-selected
  margin-top: 8px
  width: 100%
  overflow-y: auto
  color: $grey-500
  font-size: 14px

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item
  display: inline-flex
  justify-content: space-between
  align-items: center
  padding: 5px 16px
  width: 100%
  height: 40px

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item:hover
  background-color: $hover-color-grey

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > span
  display: inline-block
  width: calc(100% - 16px)
  color: $grey-900
  line-height: 22px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > svg
  width: 14px
  cursor: pointer

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > svg path
  fill: $grey-300
  transition: fill .3s

.p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > svg:hover path
  fill: $blue-500

.p-select-area .p-transfer-right .p-transfer-handle
  height: 46px
  padding: 12px 12px 12px 0
  display: flex
  justify-content: flex-end

.p-select-area .p-transfer-right .p-transfer-handle span
  font-size: 14px
  color: $grey-900
  line-height: 22px
  cursor: pointer

.p-select-area .p-transfer-right .p-transfer-handle .p-select-cancel
  margin-right: 16px

.p-select-area .p-transfer-right .p-transfer-handle .p-select-confirm
  color: $blue-500

.p-select-area .p-transfer-right .p-transfer-handle .p-select-confirm-disabled
  color: $grey-400
  cursor: not-allowed

.p-select-area .p-transfer-right .p-transfer-btn-shadow
  box-shadow: $box-shadow-top

.p-select-area-search-highlight
  font-size: 14px
  color: $blue-500

.p-area-select-panel
  position: absolute
  border: 1px solid $grey-300
  border-radius: 4px
  z-index: 7500
  min-width: 180px
  max-width: 600px
  outline: none

.p-transfer-select
  position: relative
  display: inline-block
  outline: none
  width: 100%

.p-tree-multiple-panel
  position: absolute
  display: flex
  flex-direction: column
  justify-content: space-between
  padding-top: 8px
  background-color: $theme
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  width: 100%
  min-width: 180px
  max-width: 600px
  min-height: 264px
  z-index: 7500

.p-tree-multiple-panel .p-select-drop-down-tree
  height: calc(100% - 46px)
  overflow-y: auto

.p-tree-multiple-panel .p-select-drop-box-shadow
  box-shadow: $box-shadow-top

.p-tree-multiple-panel .p-select-drop-handle
  height: 46px
  padding-top: 12px
  padding-bottom: 12px
  display: flex
  justify-content: flex-end

.p-tree-multiple-panel .p-select-drop-handle span
  font-size: 14px
  color: $grey-900
  line-height: 22px
  cursor: pointer

.p-tree-multiple-panel .p-select-drop-handle .p-select-cancel
  margin-right: 16px

.p-tree-multiple-panel .p-select-drop-handle .p-select-confirm
  color: $blue-500
  margin-right: 12px

.p-tree-multiple-panel .p-select-drop-handle .p-select-confirm-disabled
  color: $grey-400
  cursor: not-allowed

.p-select-drop-down-not
  padding-left: 12px
  line-height: 38px
  color: $grey-400
  font-size: 14px

.p-select-option
  border-radius: 4px
  width: 100%

.p-select-option .p-select-option-item
  padding-left: 12px
  width: 100%
  height: 38px
  line-height: 38px
  color: $grey-900
  text-align: left
  font-size: 14px
  cursor: pointer
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-option .p-select-option-item:hover
  background-color: $hover-color-grey

.p-select-option .p-select-option-item.p-select-option-item-selected
  color: $blue-500
  background-color: $blue-100

.p-select-option .p-select-option-item.p-select-option-item-disabled
  color: $grey-400
  cursor: not-allowed

.p-tree-single-panel
  position: absolute
  padding-top: 8px
  background-color: $theme
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 180px
  max-width: 600px
  min-height: 264px
  z-index: 7500
  outline: none

.p-tree-single-panel .p-select-drop-down-tree
  height: calc(100% - 8px)
  overflow-y: auto

.p-tree-single-panel .p-select-drop-down-not
  padding-left: 12px
  color: $grey-400
  font-size: 14px

.p-select-search-field
  position: absolute
  display: inline-flex
  width: calc(100% - 12px)
  height: 30px

.p-select-search-field .p-select-search-field-text
  display: inline-block
  padding-left: 0
  text-align: left
  line-height: 30px

.p-select-input-search-caption
  display: inline-block
  position: absolute
  top: 6px
  left: 0
  line-height: 20px
  padding-left: 12px
  max-width: 114px
  font-size: 14px
  color: $grey-500
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-select-search-highlight
  font-size: 14px
  color: $blue-500

.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-search-component
  display: inline-block
  font-size: 0
  vertical-align: middle

.p-select-search
  position: relative
  display: inline-block

.p-select-search .p-select-search-box
  padding-left: 12px
  padding-right: 24px
  border: 1px solid $grey-400
  border-radius: 4px
  width: 100%
  min-height: 32px
  overflow: hidden
  cursor: pointer
  transition: all .3s

.p-select-search .p-select-search-box:hover
  border-color: $blue-500

.p-select-search .p-select-search-box.p-select-search-box-focus
  border-color: $blue-500
  box-shadow: $box-shadow-blue

.p-select-search .p-select-search-box.p-select-search-box-disabled
  z-index: 10
  background-color: $grey-200
  cursor: not-allowed

.p-select-search .p-select-search-box.p-select-search-box-disabled .p-select-choice-name
  color: $grey-400 !important

.p-select-search .p-select-search-box.p-select-search-box-disabled .p-select-search-input
  cursor: not-allowed !important

.p-select-search .p-select-search-box.p-select-search-box-disabled .p-select-search-field-text
  font-size: 14px

.p-select-search .p-select-search-box.p-select-search-box-disabled .p-select-search-triangle
  display: none

.p-select-search .p-select-search-box.p-select-search-box-disabled:hover
  border-color: $grey-400

.p-select-search .p-select-search-box .p-select-search-field-text
  position: absolute
  left: 0
  top: 0
  width: calc(100% - 26px)
  height: 30px
  line-height: 30px
  color: $grey-400
  font-size: 14px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-search .p-select-search-box .p-select-search-field-text.p-select-choice-name
  color: $grey-900

.p-select-search .p-select-search-box .p-select-search-field.p-select-search-field-accept
  max-width: 93%
  max-height: 96px
  overflow-y: auto

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item
  position: absolute
  top: 0
  left: 0
  z-index: 11
  width: calc(100% - 26px)
  display: inline-block
  vertical-align: top
  cursor: pointer

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-choice
  display: inline-block
  margin-top: 3px
  margin-right: 4px
  padding-left: 8px
  padding-right: 28px
  background-color: $grey-200
  border-radius: 2px
  max-width: 120px
  height: 24px
  line-height: 24px
  font-size: 14px
  color: $grey-900
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-choice.p-select-choice-more
  padding-right: 8px

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-choice-name
  padding-left: 0
  padding-right: 0
  background: none

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-choice-clear
  position: absolute
  top: 8px
  right: 12px
  z-index: 5
  cursor: pointer

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-choice-clear svg:hover path
  transition: fill .3s
  fill: $blue-500

.p-select-search .p-select-search-box .p-select-search-field .p-select-field-item .p-select-search-input
  outline: none
  border: 0
  background: none
  width: 100%
  max-width: 100%
  height: 30px
  line-height: 30px
  font-size: 14px
  cursor: pointer

.p-select-search .p-select-search-box .p-select-search-triangle
  position: absolute
  top: 0
  right: 0
  width: 26px
  height: 30px
  line-height: 30px
  text-align: left

.p-select-search .p-select-search-box .p-select-search-triangle .p-select-search-triangle-icon
  display: block
  width: 100%
  height: 100%

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

.p-select-search .p-select-search-box .p-select-search-triangle .p-select-search-triangle-rotate
  transform: rotate(180deg)

.p-select-search .p-select-search-box .p-select-search-triangle .p-select-clear-icon
  z-index: 1000

.p-select-search .p-select-search-box .p-select-search-triangle .p-select-clear-icon path
  transition: fill .3s

.p-select-search .p-select-search-box .p-select-search-triangle .p-select-clear-icon:hover path
  fill: $blue-500

.p-select-search-highlight
  font-size: 14px
  color: $blue-500

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

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