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

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-icon
  text-align: center
  cursor: pointer
  font-size: 0

.p-icon + .p-icon
  margin-left: 8px

.p-icon svg
  vertical-align: middle

.p-icon svg path
  transition: fill .3s

.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-editable
  background-color: $theme
  width: 100%
  font-size: 0
  overflow: hidden

.p-editable-item
  width: 100%

.p-editable-item .p-editable-item-title
  display: inline-flex
  align-content: center
  justify-content: space-between
  padding-right: 12px
  width: 100%
  height: 38px
  line-height: 38px
  cursor: pointer
  transition: background-color .3s

.p-editable-item .p-editable-item-title:hover
  background-color: $hover-color-grey

.p-editable-item .p-editable-item-title:hover .p-editable-icon-handle
  opacity: 1
  transform: translateX(0)

.p-editable-item .p-editable-item-title .p-editable-item-content
  display: flex
  width: calc(100% - 52px)

.p-editable-item .p-editable-item-title .p-editable-item-triangle
  width: 24px
  height: 24px

.p-editable-item .p-editable-item-title .p-editable-item-triangle svg
  vertical-align: middle
  width: 100%
  height: 100%
  transform: rotate(90deg)
  transition: transform .3s

.p-editable-item .p-editable-item-title .p-editable-item-triangle-show svg
  transform: rotate(180deg)

.p-editable-item-text
  padding-left: 4px
  max-width: calc(100% - 44px)
  color: $grey-900

.p-editable-item-text .p-editable-item-text-input,
.p-editable-item-text .p-editable-item-text-span
  display: block
  width: 100%
  height: 38px
  line-height: 38px
  font-size: 14px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-editable-item-text .p-editable-item-text-input
  outline: none
  background: none
  border: 0
  font-size: 14px

.p-editable-icon-handle
  opacity: .8
  transform: translateX(52px)
  transition: all .3s .36s

.p-tag
  display: inline-block

.p-tag .p-tag-wrapper
  display: flex
  justify-content: center
  align-items: center

.p-tag-big
  min-width: 40px
  padding: 5px 8px

.p-tag-big+.p-tag-big
  margin-left: 8px

.p-tag-big .p-tag-text
  line-height: 1
  font-size: 14px

.p-tag-small
  height: 18px
  font-size: 12px
  padding: 0 8px

.p-tag-small+.p-tag-small
  margin-left: 4px

.p-tag-small .p-tag-text
  line-height: 18px
  font-size: 12px

.p-tag-circular
  border-radius: 12px
  padding-left: 12px
  padding-right: 12px

.p-tag-circular .p-tag-text
  line-height: 24px
  font-size: 14px

.p-tag-circular svg
  margin-right: 8px

.p-tag-circular+.p-tag-circular
  margin-left: 12px

.p-tag-circular .p-tag-icon
  width: 12px
  height: 12px
  margin-right: 4px

.p-tag-circular .p-tag-icon .p-icon
  vertical-align: top

.p-tag-circular .p-tag-icon-1 svg path
  fill: #0065b3

.p-tag-circular .p-tag-icon-2 svg path
  fill: #078372

.p-tag-circular .p-tag-icon-3 svg path
  fill: #237b19

.p-tag-circular .p-tag-icon-4 svg path
  fill: #aa7803

.p-tag-circular .p-tag-icon-5 svg path
  fill: #b26206

.p-tag-circular .p-tag-icon-6 svg path
  fill: #ac2f28

.p-tag-circular .p-tag-icon-7 svg path
  fill: #8c218c

.p-tag-circular .p-tag-icon-8 svg path
  fill: #4e1ba7

.p-tag-circular .p-tag-icon-9 svg path
  fill: #161fa2

.p-tag-circular .p-tag-icon-10 svg path
  fill: #373c43

.p-tag-dot .p-tag-dot-icon
  width: 6px
  height: 6px
  border-radius: 50%
  margin: 0 8px

.p-tag-dot .p-tag-text
  line-height: 1

.p-editable-list
  width: 100%
  font-size: 0

.p-editable-list-item
  width: 100%

.p-editable-child
  display: inline-block
  width: 100%
  overflow: hidden
  transition: height .3s

.p-editable-child .p-editable-child-list
  display: flex
  align-items: center
  padding-left: 24px
  width: 100%
  height: 38px
  cursor: pointer
  transition: background-color .3s

.p-editable-child .p-editable-child-list:hover
  background-color: $grey-200

.p-editable-child .p-editable-child-list.p-editable-child-list-active
  background-color: $blue-100

.p-editable-child .p-editable-child-list.p-editable-child-list-active .p-editable-child-list-text
  color: $blue-500

.p-editable-child .p-editable-child-list .p-editable-child-list-dot
  margin-right: 8px
  border-radius: 4px
  width: 8px
  height: 8px

.p-editable-child .p-editable-child-list .p-editable-child-list-text
  padding-left: 8px
  padding-right: 8px
  max-width: calc(100% - 92px)
  color: $grey-900
  font-size: 14px
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

.p-editable-child .p-editable-child-list .p-editable-child-list-text-n
  max-width: calc(100% - 64px)

.p-editable-child .p-editable-child-list .p-editable-child-list-text-c
  max-width: calc(100% - 92px)

.p-editable-child .p-editable-child-list .p-editable-child-list-tag
  display: inherit