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

基于vue框架的ui库

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

.opacityInUiOut-leave-active
  animation: opacityOutUi .3s ease-in

@keyframes opacityInUi
  from
    opacity: 0
  to
    opacity: 1
@keyframes opacityInUi
  from
    opacity: 0
  to
    opacity: 1
@keyframes opacityInUi
  from
    opacity: 0
  to
    opacity: 1
@keyframes opacityInUi
  from
    opacity: 0
  to
    opacity: 1
@keyframes opacityOutUi
  from
    opacity: 1
  to
    opacity: 0
@keyframes opacityOutUi
  from
    opacity: 1
  to
    opacity: 0
@keyframes opacityOutUi
  from
    opacity: 1
  to
    opacity: 0
@keyframes opacityOutUi
  from
    opacity: 1
  to
    opacity: 0
.bounceInUiOut-enter-active
  animation: bounceInUi .3s ease-out

.bounceInUiOut-leave-active
  animation: bounceOutUi .3s ease-in

@keyframes bounceInUi
  from
    opacity: 0
    transform: translate3d(0,24px,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes bounceInUi
  from
    opacity: 0
    transform: translate3d(0,24px,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes bounceInUi
  from
    opacity: 0
    transform: translate3d(0,24px,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes bounceInUi
  from
    opacity: 0
    transform: translate3d(0,24px,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes bounceOutUi
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    transform: translate3d(0,24px,0)
@keyframes bounceOutUi
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    transform: translate3d(0,24px,0)
@keyframes bounceOutUi
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    transform: translate3d(0,24px,0)
@keyframes bounceOutUi
  from
    opacity: 1
    transform: translate3d(0,0,0)
  to
    opacity: 0
    transform: translate3d(0,24px,0)
.custom-tree-select-energy
  display: inline-block
  font-size: 0

.custom-tree-select-shadow
  position: fixed
  left: 0
  top: 0
  z-index: 6000
  background-color: $theme-transparency
  width: 100%
  height: 100%

.custom-tree-select-content
  position: fixed
  left: 50%
  top: 50%
  z-index: 6499
  background-color: $theme
  border-radius: 4px
  box-shadow: $modal-shadow-bottom
  width: 600px
  height: 538px
  transition: width .3s,height .3s

@media (min-width:1366px)
  .custom-tree-select-content
    width: 840px
    height: 648px

.custom-tree-select-head
  display: flex
  justify-content: space-between
  padding: 16px 28px 16px 32px
  border-bottom: 1px solid $grey-300
  width: 100%
  height: 56px

.custom-tree-select-title
  line-height: 24px
  font-size: 16px
  font-weight: 500

.custom-tree-select-close
  width: 24px
  height: 24px
  line-height: 24px
  text-align: center
  cursor: pointer

.custom-tree-select-close:hover svg path
  fill: $blue-500

.custom-tree-select-close svg
  vertical-align: middle
  width: 16px
  height: 16px

.custom-tree-select-close svg path
  transition: fill .3s

.custom-tree-select-body
  display: flex
  width: 100%
  height: calc(100% - 56px)

.custom-tree-select-body-child
  width: 50%

.custom-tree-select-body-child .custom-tree-select-child-top
  margin-bottom: 4px
  padding-top: 4px
  padding-bottom: 4px
  width: 100%

.custom-tree-select-tree .custom-tree-select-child-top
  padding-left: 28px
  padding-right: 16px
  border-bottom: 1px solid $grey-300

.custom-tree-select-search
  position: relative
  display: flex
  width: 100%
  height: 32px

.custom-tree-select-search svg
  vertical-align: middle
  width: 16px
  height: 16px
  font-size: 0

.custom-tree-select-search svg path
  transition: fill .3s

.custom-tree-select-svg
  width: 24px
  height: 32px
  line-height: 32px

.custom-tree-select-input
  outline: none
  background: none
  border: 0
  width: calc(100% - 40px)
  height: 32px
  line-height: 32px
  font-size: 14px

.custom-tree-select-input-clear
  width: 20px
  height: 32px
  line-height: 32px
  text-align: right
  font-size: 0
  cursor: pointer

.custom-tree-select-input-clear:hover path
  fill: $blue-500

.custom-tree-select-placeholder
  position: absolute
  left: 24px
  top: 0
  z-index: -1
  width: calc(100% - 40px)
  height: 32px
  line-height: 32px
  font-size: 14px
  color: $grey-400

.custom-tree-select-com
  padding-left: 12px
  padding-right: 12px
  width: 100%
  height: calc(100% - 48px)
  overflow: auto
  content-visibility: auto
  scroll-behavior: smooth

.custom-tree-select-none
  padding: 16px
  font-size: 14px
  color: $grey-400

.custom-tree-select-panel
  border-left: 1px solid $grey-300

.custom-tree-select-panel .custom-tree-select-child-top
  padding-left: 12px
  padding-right: 28px
  display: flex
  justify-content: space-between
  line-height: 32px

.custom-tree-select-choose
  font-size: 14px
  color: $grey-500

.custom-tree-select-choose .custom-choose-count
  padding-left: 4px
  color: $grey-900
  font-weight: 500

.custom-tree-select-clear
  font-size: 14px

.custom-tree-select-clear-disabled
  color: $grey-400
  cursor: not-allowed

.custom-tree-select-clear-active
  color: $blue-500
  cursor: pointer

.custom-tree-select-clear-active:active
  color: $blue-600

.custom-tree-select-panel-list
  padding-right: 12px
  width: 100%
  height: calc(100% - 114px)
  overflow: auto

.custom-tree-select-panel-handle
  position: relative
  z-index: 1
  padding-top: 16px
  padding-bottom: 20px
  padding-right: 28px
  text-align: right
  width: 100%

.custom-tree-select-panel-handle-shadow
  box-shadow: $box-shadow-top

.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

.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

.p-tree-com
  display: inline-block
  vertical-align: middle
  width: 100%
  font-size: 0

.p-tree-com-item
  display: flex
  align-items: center
  padding-left: 12px
  width: 100%
  height: 38px
  line-height: 38px
  cursor: pointer
  transition: background-color .3s

.p-tree-com-item:hover
  background-color: $hover-color-grey

.p-tree-com-current
  background-color: $blue-100

.p-tree-com-current:hover
  background-color: $hover-color-blue

.p-tree-com-current .p-tree-com-text
  color: $blue-500

.p-tree-com-disabled
  cursor: not-allowed

.p-tree-com-disabled .p-tree-com-content
  color: $grey-400

.p-tree-com-arrow
  padding-right: 8px
  width: 24px
  height: 38px
  cursor: pointer

.p-tree-com-arrow svg
  vertical-align: middle
  width: 16px
  height: 16px
  transform: rotate(90deg)

.p-tree-com-arrow .p-tree-com-triangle
  transform: rotate(180deg)

.p-tree-com-main
  display: flex
  align-items: center
  width: calc(100% - 24px)

.p-tree-com-single .p-tree-com-content
  width: 100%

.p-tree-com-multiple .p-tree-com-content
  width: calc(100% - 20px)

.p-tree-com-checkbox
  padding-right: 4px
  width: 20px
  height: 38px

.p-tree-com-content
  height: 38px
  overflow: hidden
  color: $grey-900

.p-tree-com-omit
  position: relative
  padding-right: 20px

.p-tree-com-text
  width: 100%
  font-size: 14px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-tree-com-point-svg
  position: absolute
  right: 0
  top: 9px
  width: 20px
  height: 20px
  line-height: 20px
  text-align: center
  font-size: 0
  cursor: pointer

.p-tree-com-point-svg:hover path
  fill: $blue-500

.p-tree-com-point-svg svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-tree-com-point-svg svg path
  transition: fill .3s

.p-tree-com-point-svg-active svg path
  fill: $blue-500

.p-select-checkbox
  border-radius: 4px
  width: 100%
  font-size: 0

.p-select-checkbox-item
  padding-left: 16px
  padding-right: 8px
  width: 100%
  height: 38px
  line-height: 38px
  color: $grey-900
  transition: background-color .3s
  font-size: 0

.p-select-checkbox-item:hover
  background-color: $hover-color-grey

.p-select-checkbox-item:hover .p-select-checkbox-text-ellipsis-start:before
  background-color: $hover-color-grey

.p-select-checkbox-item .p-checkbox
  width: 100%

.p-select-checkbox-disabled .p-select-checkbox-text
  color: $grey-400

.p-select-checkbox-text
  display: inline-block
  vertical-align: middle
  width: 100%
  height: 100%
  font-size: 14px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.p-select-checkbox-text-ellipsis-start
  position: relative

.p-select-checkbox-text-ellipsis-start:before
  position: absolute
  left: -1px
  top: -1px
  display: inline-block
  background-color: $theme
  width: 12px
  height: 100%
  content: '...'
  font-size: 14px
  color: $grey-900
  text-align: right
  transition: background-color .3s
  pointer-events: none

.per-drop-tree-highlight
  color: $blue-500

.p-select-panel
  width: 100%
  font-size: 0

.p-select-panel-list
  display: flex
  justify-content: space-between
  align-items: center
  padding-left: 16px
  padding-right: 16px
  width: 100%
  height: 38px
  transition: background-color .3s

.p-select-panel-list:hover
  background-color: $hover-color-grey

.p-select-panel-list:hover .p-select-panel-text-ellipsis-start:before
  background-color: $hover-color-grey

.p-select-panel-list .p-select-panel-text
  display: inline-flex
  align-items: center
  background-color: transparent
  width: calc(100% - 20px)
  height: 38px
  line-height: 38px
  font-size: 14px
  color: $grey-900
  overflow: hidden

.p-select-panel-list .p-select-panel-text .p-select-panel-tag
  margin-left: 8px
  height: 20px
  line-height: 20px
  text-align: center

.p-select-panel-list .p-select-panel-text-ellipsis-start
  position: relative

.p-select-panel-list .p-select-panel-text-ellipsis-start:before
  position: absolute
  left: -1px
  top: -1px
  display: inline-block
  background-color: $theme
  width: 12px
  height: 38px
  content: '...'
  font-size: 14px
  color: $grey-900
  text-align: right
  transition: background-color .3s
  pointer-events: none

.p-select-panel-list .p-select-panel-text-ellipsis-end
  text-overflow: ellipsis
  white-space: nowrap

.p-select-panel-list .p-select-panel-icon
  width: 20px
  height: 20px
  line-height: 20px
  text-align: right
  cursor: pointer
  font-size: 0

.p-select-panel-list .p-select-panel-icon svg
  width: 16px
  height: 16px
  vertical-align: middle

.p-select-panel-list .p-select-panel-icon svg path
  transition: fill .3s

.p-select-panel-list .p-select-panel-icon:hover path
  fill: $blue-500

.p-select-panel-disabled
  color: $grey-400
  cursor: not-allowed

.p-select-panel-disabled .p-select-panel-icon
  cursor: not-allowed

.m-button
  display: inline-block
  vertical-align: middle
  padding-left: 8px
  padding-right: 8px
  border-radius: 4px
  border-width: 1px
  border-style: solid
  font-size: 0
  text-align: center
  transition: background-color .3s,border .3s

.m-button + .m-button
  margin-left: 12px

.m-button .m-button-content
  width: 100%

.m-button-default
  background-color: $theme
  border-color: $grey-400
  color: $grey-900

.m-button-default:hover
  border-color: $blue-500

.m-button-default:hover .m-button-text
  color: $blue-500

.m-button-default:active
  border-color: $blue-600

.m-button-default:active .m-button-text
  color: $blue-600

.m-button-blue
  background-color: $blue-500
  border-color: $blue-500
  color: $white

.m-button-blue:hover
  background-color: $blue-400
  border-color: $blue-400

.m-button-blue:active
  background-color: $blue-600
  border-color: $blue-600

.m-button-word
  background: none
  border-color: transparent
  color: $grey-900

.m-button-word .m-button-text
  font-weight: 500

.m-button-word:hover .m-button-text
  color: $blue-500

.m-button-word:active .m-button-text
  color: $blue-600

.m-button-large
  max-width: 128px
  min-width: 80px
  height: 40px

.m-button-large .m-button-content
  height: 38px
  line-height: 38px

.m-button-medium
  max-width: 116px
  min-width: 80px
  height: 32px

.m-button-medium .m-button-content
  height: 30px
  line-height: 30px

.m-button-small
  max-width: 108px
  min-width: 60px
  height: 28px

.m-button-small .m-button-content
  height: 26px
  line-height: 26px

.m-button-normal
  cursor: pointer

.m-button.m-button-disabled
  cursor: not-allowed

.m-button.m-button-disabled .m-button-text
  color: $grey-400

.m-button-disabled:not([type='word'])
  background-color: $grey-200
  border-color: $grey-200

.m-button-text
  font-size: 14px
  transition: color .3s