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

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.m-cascade
  display: inline-block
  vertical-align: middle
  font-size: 0

.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-drop-trigger
  position: relative
  display: inline-flex
  justify-content: space-between
  align-items: flex-start
  border: 1px solid $grey-400
  border-radius: 4px
  width: 120px
  font-size: 0
  transition: border-color .3s

.p-drop-trigger-active
  cursor: pointer

.p-drop-trigger-active:hover
  border-color: $blue-500

.p-drop-trigger-active:active
  border-color: $blue-600

.p-drop-trigger-disabled
  background-color: $grey-200
  cursor: not-allowed

.p-drop-trigger-disabled .p-drop-trigger-caption
  color: $grey-400

.p-drop-trigger-disabled .p-drop-trigger-icon svg path
  fill: $grey-400

.p-drop-trigger-disabled .p-drop-trigger-label
  cursor: not-allowed

.p-drop-trigger-disabled .p-drop-trigger-label .p-drop-trigger-selected > span
  color: $grey-400

.p-drop-trigger-disabled .p-drop-trigger-label .p-drop-trigger-selected .p-drop-trigger-selected-m-c
  color: $grey-400

.p-drop-trigger-normal
  height: 32px

.p-drop-trigger-tag
  min-height: 32px
  max-height: 84px

.p-drop-trigger-text-overflow
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-drop-trigger-main
  padding-left: 8px
  width: calc(100% - 30px)

.p-drop-trigger-main-normal
  height: 30px

.p-drop-trigger-caption
  display: inline-block
  max-width: 98px
  height: 30px
  line-height: 30px
  color: $grey-600
  font-size: 14px

.p-drop-trigger-label
  position: relative
  display: inline-block
  width: 100%
  height: 30px
  overflow: hidden
  cursor: pointer

.p-drop-trigger-label-pl
  padding-left: 8px

.p-drop-trigger-placeholder
  display: block
  width: 100%
  height: 30px
  line-height: 30px
  font-size: 14px
  color: $grey-400

.p-drop-trigger-selected
  display: block
  width: 100%
  height: 30px
  line-height: 30px

.p-drop-trigger-selected > span
  display: block
  width: 100%
  height: 100%
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis
  font-size: 14px
  color: $grey-900
  transition: color .3s

.p-drop-trigger-selected-m-c
  padding-left: 4px
  padding-right: 4px
  color: $blue-500

.p-drop-trigger-selected-focus > span
  color: $grey-400

.p-drop-trigger-selected-focus .p-drop-trigger-selected-m-c
  color: $grey-400

.p-drop-trigger-input
  position: absolute
  left: 0
  top: 0
  outline: none
  background: none
  border: 0
  width: 100%
  height: 30px
  font-size: 14px
  color: $grey-900

.p-drop-trigger-input-readonly
  cursor: pointer

.p-drop-trigger-main-tag
  display: inline-flex
  min-height: 30px

.p-drop-trigger-main-tag-box
  min-height: 28px
  max-height: 82px
  overflow-x: hidden
  overflow-y: auto

.p-drop-trigger-tag-list
  display: inline-flex
  align-items: flex-start
  flex-wrap: wrap
  padding-top: 4px
  width: 100%
  min-height: 28px

.p-drop-trigger-tag-list-item
  display: inline-flex
  align-items: center
  margin-right: 4px
  margin-bottom: 4px
  padding-left: 4px
  background-color: $grey-200
  height: 22px
  line-height: 22px

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-text
  font-size: 14px
  color: $grey-900
  cursor: text

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-svg
  width: 22px
  height: 22px
  text-align: center

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-svg svg
  vertical-align: middle
  width: 10px
  height: 10px
  font-size: 0

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-svg svg path
  transition: fill .3s

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-svg-normal:hover path
  fill: $blue-500

.p-drop-trigger-tag-list-item .p-drop-trigger-tag-list-svg-disabled
  cursor: not-allowed

.p-drop-trigger-icon
  width: 30px
  height: 30px

.p-drop-trigger-icon-clear:hover .p-drop-trigger-tgl
  display: none

.p-drop-trigger-icon-clear:hover .p-drop-trigger-del
  display: block

.p-drop-trigger-svg
  display: block
  padding-top: 7px
  width: 100%
  height: 100%
  text-align: center
  transition: transform .3s

.p-drop-trigger-svg svg
  vertical-align: middle
  width: 16px
  height: 16px
  font-size: 0

.p-drop-trigger-svg svg path
  transition: fill .3s

.p-drop-trigger-del
  display: none

.p-drop-trigger-del svg:hover path
  fill: $blue-500

.p-drop-trigger-tgl
  display: block

.p-drop-trigger-tgl-open
  transform: rotate(180deg)

.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

.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
.m-drop-cascade
  position: absolute
  z-index: 7000
  display: inline-flex
  align-items: self-start
  background-color: $theme
  border: 1px solid $grey-300
  border-radius: 4px
  height: 230px
  overflow: hidden
  font-size: 0
  outline: none

.m-drop-cascade-top
  box-shadow: $box-shadow-top

.m-drop-cascade-bottom
  box-shadow: $box-shadow-bottom

.m-ul-cascade
  width: 300px
  height: 100%
  overflow-x: hidden
  overflow-y: auto
  font-size: 0

.m-ul-cascade:not(:first-child)
  border-left: 1px solid $grey-200

.m-li-cascade
  display: flex
  align-items: center
  justify-content: space-between
  padding-left: 12px
  width: 100%
  height: 38px
  line-height: 38px
  cursor: pointer
  transition: background-color .3s

.m-li-cascade:hover
  background-color: $grey-100

.m-li-cascade-active
  background-color: $blue-100

.m-li-cascade-active .m-li-cascade-name
  color: $blue-500

.m-li-cascade-disabled
  background-color: $grey-100
  cursor: not-allowed

.m-li-cascade-disabled .m-li-cascade-name
  color: $grey-400

.m-li-cascade-disabled svg path
  fill: $grey-400

.m-li-cascade-name
  flex: 1
  font-size: 14px
  color: $grey-900
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  transition: color .3s

.m-li-cascade-arrow
  width: 38px
  height: 38px
  text-align: center

.m-li-cascade-arrow svg
  vertical-align: middle
  width: 16px
  height: 16px