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