meri-design-dev/custom/theme/DropGroupFrame.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-frame
  display: inline-block
  vertical-align: middle
  font-size: 0
  text-align: left

.p-drop-frame-title
  display: flex
  align-items: center
  padding-left: 8px
  padding-right: 8px
  height: 28px
  cursor: pointer
  transition: background-color .3s

.p-drop-frame-title-content
  font-size: 14px

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

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

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

.p-drop-frame-show
  position: relative

.p-drop-frame-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-frame-show .p-drop-frame-title
  background-color: $grey-200
  border-radius: 4px

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

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

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

.p-drop-frame-box
  position: absolute
  top: 100%
  outline: none
  padding-top: 8px
  padding-bottom: 8px
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 120px
  width: 262px
  height: 312px
  overflow-y: auto
  z-index: 7000
  pointer-events: none

.p-drop-frame-search
  display: inline-flex
  align-items: center
  margin-left: 12px
  margin-bottom: 12px
  border: 1px solid $grey-300
  border-radius: 4px
  width: calc(100% - 24px)
  height: 32px
  overflow: hidden

.p-drop-frame-search .p-drop-frame-svg
  width: 30px
  height: 30px
  line-height: 30px
  text-align: center
  font-size: 0

.p-drop-frame-search .p-drop-frame-svg svg
  width: 16px
  height: 16px
  vertical-align: middle

.p-drop-frame-search .p-drop-frame-close-svg
  cursor: pointer

.p-drop-frame-search .p-drop-frame-close-svg:hover svg path
  fill: $blue-500

.p-drop-frame-search input
  outline: none
  border: 0
  width: calc(100% - 60px)
  height: 30px
  font-size: 14px
  color: $grey-900

.p-drop-frame-item-title
  margin-bottom: 8px
  padding-left: 12px
  padding-right: 12px
  height: 38px
  line-height: 38px
  font-size: 14px
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden
  color: $grey-900

.p-drop-frame-option
  padding-left: 20px
  padding-right: 12px
  width: 100%
  height: 44px
  line-height: 44px
  font-size: 14px
  cursor: pointer
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

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

.p-drop-option-left
  left: 0

.p-drop-option-right
  right: 0

.p-drop-frame-box-divider .p-drop-frame-item-title
  margin-left: 12px
  margin-right: 12px
  border-bottom: 1px solid $grey-300
  color: $grey-500

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

.p-drop-frame-option
  color: $grey-900
  transition: background-color .3s

.p-drop-frame-option:hover
  background-color: $hover-color-grey

.p-drop-frame-option.p-drop-frame-option-selected
  color: $blue-500
  background-color: $blue-100

.p-drop-frame-option.p-drop-frame-option-disable
  color: $grey-400

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

.p-drop-frame-option .p-drop-frame-item-title
  color: $white

.p-drop-frame-option .p-drop-frame-option
  color: $white

.p-drop-frame-option .p-drop-frame-option:hover
  background-color: $blue-800

.p-drop-frame-option .p-drop-frame-option.p-drop-frame-option-selected
  color: $blue-50
  background-color: $blue-700

.p-drop-frame-option .p-drop-frame-option.p-drop-frame-option-disable
  color: $blue-200

.p-drop-frame-option-text-highlight
  color: $blue-500
  font-size: 14px

.p-drop-frame-item-title-can
  transition: background-color .3s
  cursor: pointer

.p-drop-frame-item-title-can:hover
  background-color: $hover-color-grey

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