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

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.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-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

.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
.second-cascader-menu
  display: relative
  box-sizing: border-box
  padding-bottom: 40px

.second-cascader-menu input::-webkit-input-placeholder
  color: $grey-400

.second-cascader-menu input:-moz-placeholder
  color: $grey-400

.second-cascader-menu input::-moz-placeholder
  color: $grey-400

.second-cascader-menu input::-ms-input-placeholder
  color: $grey-400

.second-cascader-menu .select-all-box
  display: flex
  align-items: center
  padding-left: 12px
  height: 38px

.second-cascader-menu .p-cascader-search-list-not-found
  height: 38px
  line-height: 38px
  color: $grey-400
  font-size: 14px
  padding-left: 34px

.second-cascader-menu .second-cascader-menu-filter
  position: relative
  padding: 10px 14px
  border-bottom: 1px solid $grey-200

.second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear
  position: absolute
  z-index: 99
  right: 24px
  top: 20px
  width: 14px
  height: 14px

.second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear path
  fill: $grey-300

.second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear:hover path
  fill: $blue-500
  transition: fill .3s

.second-cascader-menu .p-cascader-search-list-menu
  min-height: 10px
  width: 100%
  padding: 0
  overflow-y: auto

.second-cascader-menu .p-cascader-search-list-menu li.p-cascader-search-list-item
  padding: 8px 12px 8px 24px
  width: 100%

.second-cascader-menu .p-cascader-search-list-select-panel-footer
  position: absolute
  right: 0
  bottom: 0
  z-index: 10
  display: flex
  justify-content: flex-end
  align-items: center
  padding: 0 12px 0 16px
  height: 45px
  line-height: 45px
  background: $theme
  font-size: 14px
  border-top: 1px solid $grey-200

.second-cascader-menu .p-cascader-search-list-select-panel-footer span
  cursor: pointer

.second-cascader-menu .p-cascader-search-list-select-panel-footer span:first-child
  margin-right: 16px
  color: $grey-900

.second-cascader-menu .p-cascader-search-list-select-panel-footer span:last-child
  color: $blue-500
  margin-right: 12px

.second-cascader-menu .p-cascader-search-list-select-panel-footer span.disabled-confirm-btn
  color: $grey-400
  cursor: not-allowed

.p-cascader-search-list-drop
  position: absolute
  width: auto
  border: 1px solid $grey-300
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  background: $theme
  font-size: 0

.p-cascader-search-list-drop .p-cascader-search-list-select-container
  display: flex
  justify-content: flex-start

.p-cascader-search-list-drop .p-cascader-search-list-select-container background $theme .p-cascader-search-list-no-found
  width: 100%
  padding: 16px 0 16px 12px
  border-radius: 4px
  line-height: 22px
  font-size: 14px
  color: $grey-400
  min-width: 180px
  max-width: 600px
  background: #fff
  box-shadow: $box-shadow-bottom
  box-sizing: border-box
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.p-cascader-search-list-drop .p-cascader-search-list-column
  display: flex
  width: 100%
  box-sizing: border-box
  overflow: hidden

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-input
  width: 100%
  height: 32px
  position: relative
  z-index: 10
  background: none
  border: 1px solid $grey-400
  border-radius: 4px
  outline: none
  font-size: 14px
  color: $grey-900

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu
  display: inline-block
  padding: 8px 0
  min-width: 120px
  height: 325px
  border-right: 1px solid $grey-200
  vertical-align: top
  overflow: auto
  font-size: 0

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item
  position: relative
  display: flex
  justify-content: space-between
  align-items: center
  height: 38px
  padding: 8px 12px
  box-sizing: border-box
  color: $grey-900
  line-height: 22px
  font-size: 14px
  white-space: nowrap
  list-style: none
  cursor: pointer
  text-align: left
  transition: all .3s

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item .p-select-multiple-icon
  position: absolute
  right: 26px
  top: 34%
  width: 12px
  height: 6px
  border: 2px solid #0091ff
  border-top: none
  border-right: none
  transform: translateY(-50%) rotate(-45deg)

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item .p-cascader-search-list-item-text
  width: calc(100% - 20px)
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item .p-checkbox
  padding-right: 4px
  padding-top: 0
  height: 24px

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item .p-cascader-search-list-item-text-disabled
  color: $grey-400
  cursor: not-allowed

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item:hover
  background: $hover-color-grey

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item-active
  color: $blue-500
  background: $blue-100 !important

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item-active i.p-cascader-search-list-item-loading
  pointer-events: none

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item-disabled
  color: $grey-400
  cursor: not-allowed

.p-cascader-search-list-drop .p-cascader-search-list-column .p-cascader-search-list-menu li.p-cascader-search-list-item-disabled:hover
  background: transparent

.p-cascader-search-list-drop .second-cascader-menu
  display: relative
  box-sizing: border-box

.p-cascader-search-list-drop .second-cascader-menu input::-webkit-input-placeholder
  color: $grey-400

.p-cascader-search-list-drop .second-cascader-menu input:-moz-placeholder
  color: $grey-400

.p-cascader-search-list-drop .second-cascader-menu input::-moz-placeholder
  color: $grey-400

.p-cascader-search-list-drop .second-cascader-menu input::-ms-input-placeholder
  color: $grey-400

.p-cascader-search-list-drop .second-cascader-menu .select-all-box
  display: flex
  align-items: center
  padding-left: 12px
  height: 38px

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-not-found
  height: 38px
  line-height: 38px
  color: $grey-400
  font-size: 14px
  padding-left: 34px

.p-cascader-search-list-drop .second-cascader-menu .second-cascader-menu-filter
  position: relative
  padding: 10px 14px
  border-bottom: 1px solid $grey-200

.p-cascader-search-list-drop .second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear
  position: absolute
  z-index: 99
  right: 24px
  top: 20px
  width: 14px
  height: 14px

.p-cascader-search-list-drop .second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear path
  fill: $grey-300

.p-cascader-search-list-drop .second-cascader-menu .second-cascader-menu-filter .p-cascader-search-list-clear:hover path
  fill: $blue-500
  transition: fill .3s

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-menu
  height: 138px
  width: 100%
  overflow-y: auto

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-menu li.p-cascader-search-list-item
  padding: 8px 12px 8px 24px

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-select-panel-footer
  position: absolute
  right: 0
  bottom: 0
  display: flex
  justify-content: flex-end
  align-items: center
  padding: 0 12px 0 16px
  height: 45px
  line-height: 45px
  background: $theme
  font-size: 14px
  border-top: 1px solid $grey-200

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-select-panel-footer span
  cursor: pointer

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-select-panel-footer span:first-child
  margin-right: 16px
  color: $grey-900

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-select-panel-footer span:last-child
  color: $blue-500
  margin-right: 12px

.p-cascader-search-list-drop .second-cascader-menu .p-cascader-search-list-select-panel-footer span.disabled-confirm-btn
  color: $grey-400
  cursor: not-allowed

.p-cascader-search-list
  height: 32px
  width: 400px
  cursor: pointer

.p-cascader-search-list .p-cascader-search-list-header
  width: 100%
  height: 32px
  position: relative
  padding-left: 12px
  z-index: 10
  border: 1px solid $grey-400
  border-radius: 4px

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-caption
  display: inline-block
  height: 30px
  line-height: 30px
  font-size: 14px
  float: left
  color: $grey-500
  max-width: 80px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input
  position: absolute
  display: inline-block
  float: left
  height: 30px

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder,
.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-input
  position: absolute
  left: 0
  top: 0
  height: 30px
  line-height: 30px
  font-size: 14px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  text-align: left

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder-input
  color: $grey-900

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder
  pointer-events: none
  color: $grey-400

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder .p-cascader-search-selected
  color: $grey-900

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder .p-cascader-search-number
  color: $blue-500

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-placeholder .p-cascader-search-normal
  color: $grey-400

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-fake-input .p-cascader-search-list-input
  border: none
  outline: none
  color: $grey-900
  background: transparent
  cursor: pointer

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-triangle
  position: absolute
  top: 8px
  right: 8px
  width: 16px
  height: 16px
  transform-origin: center center
  transform: rotate(180deg)
  transition: transform .3s
  will-change: rotate

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-clear
  position: absolute
  width: 14px
  height: 14px
  right: 8px
  top: 8px

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-clear path
  fill: $grey-300

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-clear:hover path
  fill: $blue-500
  transition: fill .3s

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-triangle-up
  transform: rotate(0)

.p-cascader-search-list .p-cascader-search-list-header .p-cascader-search-list-triangle-down
  transform: rotate(180deg)

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

.p-cascader-search-list .p-cascader-search-list-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: 1000

.p-cascader-search-list .p-cascader-search-list-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-cascader-search-list .p-cascader-search-list-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-cascader-search-list .p-cascader-search-list-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-cascader-search-list .p-cascader-search-list-header .p-select-input-tip-top
  box-shadow: $box-shadow-bottom

.p-cascader-search-list .p-cascader-search-list-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-cascader-search-list .p-cascader-search-list-header .p-select-input-tip-bottom
  box-shadow: $box-shadow-left

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

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

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

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

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

.p-cascader-search-list .p-cascader-search-list-focused
  border: 1px solid $blue-500
  box-shadow: $box-shadow-blue
  transition: .3s

.p-cascader-search-list .p-cascader-search-list-focused path
  fill: $grey-300