meri-design-dev/custom/theme/CheckboxGroup.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-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-radio
  display: inline-block
  cursor: pointer

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

.p-radio .p-radio-box
  position: relative
  display: inline-block
  vertical-align: middle
  margin-right: 4px
  border-width: 1px
  border-style: solid
  border-color: transparent
  border-radius: 8px
  width: 16px
  height: 16px
  transition: all .3s

.p-radio .p-radio-box:hover
  box-shadow: 0 0 4px 0 rgba(78,131,253,0.4)

.p-radio .p-radio-box::after
  position: absolute
  background: none
  transition: all .2s ease-in-out
  transform: scale(0)
  z-index: 1
  content: ''

.p-radio .p-radio-uncheck
  background-color: $theme
  border-color: $grey-400

.p-radio .p-radio-uncheck:hover
  border-color: $blue-500

.p-radio .p-radio-checked
  background-color: $theme
  border-color: $blue-500

.p-radio .p-radio-checked::after
  top: 3px
  left: 3px
  background-color: $blue-500
  border-radius: 4px
  width: 8px
  height: 8px
  transform: scale(1)

.p-radio .p-radio-text
  vertical-align: middle
  color: $grey-900
  font-size: 14px
  user-select: none

.p-radio-disabled
  cursor: not-allowed

.p-radio-disabled > i
  pointer-events: none

.p-radio-disabled .p-radio-uncheck
  background-color: $grey-300

.p-radio-disabled .p-radio-checked
  border-color: $grey-400

.p-radio-disabled .p-radio-checked:after
  background-color: $grey-400

.p-checkbox-group
  display: inline-flex
  align-items: center
  flex-direction: column
  justify-content: flex-start
  padding: 0 0 16px 16px
  transition: all .36s

.p-checkbox-group .p-checkbox-group-item.disabled .p-checkbox-text,
.p-checkbox-group .p-checkbox-group-item.disabled .p-radio-text
  color: $grey-400

.p-checkbox-group .p-checkbox-group-title
  width: 100%
  padding: 16px 0 8px 0

.p-checkbox-group .p-checkbox-group-multiple .p-checkbox-group-multiple-title
  margin-right: 16px
  margin-left: 0
  margin-top: 16px

.p-checkbox-group .p-checkbox-group-single
  display: flex
  align-items: center
  flex-wrap: wrap
  transition: all .36s

.p-checkbox-group .p-checkbox-group-single .p-checkbox-group-item
  margin-right: 16px
  margin-left: 0
  font-size: 0
  margin-top: 16px