@beisen-phoenix/checkbox/cjs/style.css

.phoenix-checkbox {
  position: relative;
  line-height: 0;
  box-sizing: border-box;
  display: inline-block;
  font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
  font-size: 12px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  min-width: 42px;
  max-width: 100%;
}

.phoenix-checkbox--disabled {
  cursor: not-allowed;
}

.phoenix-checkbox__box {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
}

.phoenix-checkbox__box::after {
  opacity: 0;
  transform: rotate(0) scale(1) translate(-50%, -50%);
  border: none;
  width: 0px;
  top: 50%;
  left: 50%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  display: table;
  content: ' ';
  transition: all .2s ease-in .1s;
}

.phoenix-checkbox__box--partialChecked::after {
  opacity: 1;
  width: 8px;
  transition: all 0.4s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
}

.phoenix-checkbox__input {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.phoenix-checkbox__input--disabled {
  cursor: not-allowed;
}

.phoenix-checkbox__realInput {
  border: 1px solid rgba(191, 195, 199, 0.7);
  background-color: rgba(255, 255, 255, 0.7);
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border-collapse: separate;
  transition: all .3s;
  box-sizing: border-box;
}

.phoenix-checkbox__realInput--checked, .phoenix-checkbox__realInput--partialChecked {
  background-color: #1d86f0;
  border: 1px solid #1d86f0;
}

.phoenix-checkbox__realInput--disabled {
  background-color: rgba(230, 232, 235, 0.3);
  border: 1px solid rgba(191, 195, 199, 0.5);
}

.phoenix-checkbox__realInput--disabledChecked {
  background-color: rgba(29, 134, 240, 0.5);
  border: 1px solid rgba(29, 134, 240, 0);
}

.phoenix-checkbox__realInput::after {
  box-sizing: border-box;
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: 1px solid #fff;
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
  content: ' ';
}

.phoenix-checkbox__realInput--checked::after {
  transform: rotate(45deg) scale(1);
  transition: all 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
  opacity: 1;
}

.phoenix-checkbox__text {
  margin-left: 4px;
  color: #565e66;
  display: inline-block;
  font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 18px);
  vertical-align: middle;
  line-height: 20px;
}

.phoenix-checkbox__text--fontMiddle {
  font-size: 14px;
}

.phoenix-checkbox__text.color-M1 {
  color: #0e1114;
}

.phoenix-checkbox__text.color-M2 {
  color: #33383d;
}

.phoenix-checkbox__text.color-M3 {
  color: #565e66;
}

.phoenix-checkbox__text.color-M4 {
  color: #83898f;
}

.phoenix-checkbox__text.color-M5 {
  color: #bfc3c7;
}

.phoenix-checkbox__text.phoenix-checkbox__text--disabled {
  color: #bfc3c7;
}

.phoenix-checkbox__text::before {
  content: '';
  display: block;
}

.phoenix-checkbox:hover .phoenix-checkbox__realInput {
  border: 1px solid #1d86f0;
}

.phoenix-checkbox:hover .phoenix-checkbox__realInput--checked, .phoenix-checkbox:hover .phoenix-checkbox__realInput--partialChecked {
  border: 1px solid #106ecc;
  background-color: #106ecc;
}

.phoenix-checkbox:hover .phoenix-checkbox__realInput--disabled {
  background-color: rgba(230, 232, 235, 0.3);
  border: 1px solid rgba(191, 195, 199, 0.5);
}

.phoenix-checkbox:hover .phoenix-checkbox__realInput--disabledChecked {
  background-color: rgba(29, 134, 240, 0.5);
  border: 1px solid rgba(29, 134, 240, 0);
}