meri-design-dev/custom/theme/DropDownButton.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
.disable-element
  pointer-events: none

.drop-list-padding-top
  padding-top: 7px

.drop-list-padding-btm
  padding-bottom: 7px

.drop-list-surround
  outline: 0
  position: absolute
  min-width: 180px
  max-width: 240px
  z-index: 7000

.drop-list-surround .drop-list-input
  height: 0
  width: 0
  border: none
  opacity: 0

.drop-list-surround .drop-list
  position: relative
  z-index: 7001

.drop-list-surround .drop-list .drop-list-inner
  max-height: 190px
  overflow-y: auto
  border: 1px solid $grey-300
  padding-top: 6px
  padding-bottom: 6px
  box-shadow: $box-shadow-bottom
  border-radius: 4px
  background-color: $theme

.drop-list-surround .drop-list .drop-list-inner .active
  background-color: $blue-100
  color: $blue-500

.drop-list-surround .drop-list .drop-list-inner .drop-item:hover
  background-color: $hover-color-grey

.drop-list-surround .drop-list .drop-list-inner div
  padding-left: 12px
  padding-right: 12px
  height: 38px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  font-size: 14px
  line-height: 38px
  color: $grey-900
  cursor: pointer

.drop-list-surround .drop-list .drop-list-inner div:active,
.drop-list-surround .drop-list .drop-list-inner div::after
  background-color: $blue-100

.drop-list-surround .drop-list .drop-list-inner .disabled
  color: $grey-400
  cursor: not-allowed

.drop-list-surround .drop-list .drop-list-inner .disabled:hover,
.drop-list-surround .drop-list .drop-list-inner .disabled:active
  background-color: $hover-color-grey

.p-d-button
  position: relative
  display: inline-flex
  align-items: center
  border-radius: 4px
  font-size: 0
  transition: all .36s

.p-d-button:after
  content: '1'
  color: transparent

.p-d-button:before
  content: '1'
  color: transparent

.p-d-button+.p-d-button
  margin-left: 12px

.p-d-button .p-d-button-text
  border-top-left-radius: 4px
  border-bottom-left-radius: 4px
  transition: background-color .36s
  flex-grow: 1
  padding-left: 8px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  text-align: center

.p-d-button .p-d-button-split-line
  width: 1px

.p-d-button .p-d-button-triangle
  border-top-right-radius: 4px
  border-bottom-right-radius: 4px
  transition: all .36s
  text-align: center

.p-d-button .p-d-button-triangle .p-d-button-rotate,
.p-d-button .p-d-button-triangle .p-d-button-triangle-svg
  width: 16px
  height: 16px
  transition: all .36s
  vertical-align: middle

.p-d-button .p-d-button-triangle .p-d-button-rotate path,
.p-d-button .p-d-button-triangle .p-d-button-triangle-svg path
  transition: all .36s

.p-d-button .p-d-button-triangle .p-d-button-rotate
  transform: rotate(180deg)

.p-d-button-default.p-d-button-drop,
.p-d-button-default.p-d-button-split-drop
  background-color: $theme
  border: 1px solid $grey-400

.p-d-button-default
  border-color: $grey-400
  color: $grey-900
  cursor: pointer

.p-d-button-default:hover
  border-color: $blue-500

.p-d-button-default:active
  border-color: $blue-600

.p-d-button-default.p-d-button-drop:hover,
.p-d-button-default-drop:hover
  color: $blue-500

.p-d-button-default.p-d-button-drop:hover .p-d-button-triangle path,
.p-d-button-default-drop:hover .p-d-button-triangle path
  fill: $blue-500

.p-d-button-default.p-d-button-drop:active,
.p-d-button-default-drop:active
  color: $blue-600

.p-d-button-default.p-d-button-drop:active .p-d-button-triangle path,
.p-d-button-default-drop:active .p-d-button-triangle path
  fill: $blue-600

.p-d-button-default.p-d-button-split-drop .p-d-button-split-line
  background-color: $grey-400

.p-d-button-default.p-d-button-split-drop .p-d-button-text:hover
  color: $blue-500

.p-d-button-default.p-d-button-split-drop .p-d-button-text:active
  color: $blue-600

.p-d-button-default.p-d-button-split-drop .p-d-button-triangle:hover path
  fill: $blue-500

.p-d-button-default.p-d-button-split-drop .p-d-button-triangle:active path
  fill: $blue-600

.p-d-button-primary.p-d-button-drop,
.p-d-button-primary.p-d-button-split-drop
  background-color: $blue-500
  color: $white
  cursor: pointer

.p-d-button-primary.p-d-button-drop .p-d-button-triangle path,
.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle path
  fill: $white

.p-d-button-primary.p-d-button-drop:hover
  background-color: $blue-400

.p-d-button-primary.p-d-button-drop:active
  background-color: $blue-600

.p-d-button-primary.p-d-button-drop::after
  background: radial-gradient(circle,$blue-300 10%,transparent 10%)

.p-d-button-primary.p-d-button-split-drop .p-d-button-split-line
  background-color: $blue-100

.p-d-button-primary.p-d-button-split-drop .p-d-button-text:hover,
.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle:hover
  background-color: $blue-400

.p-d-button-primary.p-d-button-split-drop .p-d-button-text:active,
.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle:active
  background-color: $blue-600

.p-d-button-primary.p-d-button-split-drop .p-d-button-text::after,
.p-d-button-primary.p-d-button-split-drop .p-d-button-triangle::after
  background: radial-gradient(circle,$blue-300 10%,transparent 10%)

.p-d-button-large
  height: 40px
  min-width: 98px
  max-width: 154px

.p-d-button-large .p-d-button-text
  font-size: 16px

.p-d-button-large .p-d-button-triangle
  width: 32px

.p-d-button-drop.p-d-button-large
  line-height: 38px

.p-d-button-split-drop.p-d-button-large,
.p-d-button-default-drop.p-d-button-large
  line-height: 40px

.p-d-button-split-drop.p-d-button-large.p-d-button-primary .p-d-button-split-line,
.p-d-button-split-drop.p-d-button-large.p-d-button-default .p-d-button-split-line
  height: 14px

.p-d-button-split-drop.p-d-button-large .p-d-button-text
  padding-right: 14px

.p-d-button-medium
  height: 32px
  min-width: 86px
  max-width: 126px

.p-d-button-medium .p-d-button-text
  font-size: 14px

.p-d-button-medium .p-d-button-triangle
  width: 28px

.p-d-button-drop.p-d-button-medium
  line-height: 30px

.p-d-button-split-drop.p-d-button-medium,
.p-d-button-default-drop.p-d-button-medium
  line-height: 32px

.p-d-button-split-drop.p-d-button-medium.p-d-button-primary .p-d-button-split-line,
.p-d-button-split-drop.p-d-button-medium.p-d-button-default .p-d-button-split-line
  height: 12px

.p-d-button-split-drop.p-d-button-medium .p-d-button-text
  padding-right: 12px

.p-d-button-small
  height: 28px
  max-width: 126px

.p-d-button-small .p-d-button-text
  font-size: 14px

.p-d-button-small .p-d-button-triangle
  width: 24px

.p-d-button-drop.p-d-button-small
  line-height: 26px

.p-d-button-split-drop.p-d-button-small,
.p-d-button-default-drop.p-d-button-small
  line-height: 28px

.p-d-button-split-drop.p-d-button-small.p-d-button-primary .p-d-button-split-line,
.p-d-button-split-drop.p-d-button-small.p-d-button-default .p-d-button-split-line
  height: 10px

.p-d-button-split-drop.p-d-button-small .p-d-button-text
  padding-right: 10px

.p-d-button.p-dd-button-disabled,
.p-d-button-split-drop.p-dd-button-disabled
  border-style: none
  background-color: $grey-200
  color: $grey-400
  cursor: not-allowed

.p-d-button.p-dd-button-disabled .p-d-button-split-line,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-split-line
  background-color: $grey-400

.p-d-button.p-dd-button-disabled:hover,
.p-d-button-split-drop.p-dd-button-disabled:hover,
.p-d-button.p-dd-button-disabled:active,
.p-d-button-split-drop.p-dd-button-disabled:active
  background-color: $grey-200
  color: $grey-400

.p-d-button.p-dd-button-disabled .p-d-button-text path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text path,
.p-d-button.p-dd-button-disabled .p-d-button-triangle path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle path
  fill: $grey-500

.p-d-button.p-dd-button-disabled .p-d-button-text:hover,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:hover,
.p-d-button.p-dd-button-disabled .p-d-button-triangle:hover,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:hover,
.p-d-button.p-dd-button-disabled .p-d-button-text:active,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:active,
.p-d-button.p-dd-button-disabled .p-d-button-triangle:active,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:active
  background-color: $grey-200
  color: $grey-400

.p-d-button.p-dd-button-disabled .p-d-button-text:hover path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:hover path,
.p-d-button.p-dd-button-disabled .p-d-button-triangle:hover path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:hover path,
.p-d-button.p-dd-button-disabled .p-d-button-text:active path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-text:active path,
.p-d-button.p-dd-button-disabled .p-d-button-triangle:active path,
.p-d-button-split-drop.p-dd-button-disabled .p-d-button-triangle:active path
  fill: $grey-500