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

基于vue框架的ui库

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtend
  from
    transform: translate3d(0,-8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
@keyframes selectDownUpExtendTop
  from
    transform: translate3d(0,8px,0)
    opacity: 0
    pointer-events: none
  to
    transform: translate3d(0,0,0)
    opacity: 1
    pointer-events: auto
.p-select-not-found
  height: 54px
  padding: 16px 0 16px 12px
  border-radius: 4px
  line-height: 22px
  font-size: 14px
  color: $grey-400
  background: $theme
  box-sizing: border-box
  min-width: 180px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.p-select-drop-down
  position: fixed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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