ten-design-vue/lib/style/switch.css

ten-vue

/* dependencies icon */
/**
 * 文字部分
 * size 大小，line 行高， color 颜色
 */
/* button */
/* input */
/* transfer */
/* alert */
/* menu */
/* message */
/* modal */
/* badge */
/* tag */
/* progress */
/* popup */
/* tooltip */
/* loading */
/* tabs */
/* check */
/* mention */
/* popup */
/* steps */
/* tabs */
/* modal */
/* form */
/* table */
/* pagination */
/* upload */
/* collapse */
/* anchor */
/* list */
.ten-switch {
  display: inline-flex;
  align-items: center;
  border-radius: 24px;
  outline: none;
  border: 0;
  line-height: 24px;
  height: 24px;
  min-width: 48px;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.ten-switch .ten-icon {
  line-height: 24px;
  font-size: 14px;
  color: #ffffff;
}
.ten-switch .ten-switch__text {
  min-height: 22px;
  line-height: 22px;
  display: inline-flex;
  height: 100%;
  align-items: center;
  color: #ffffff;
  padding-left: 2px;
  padding-right: 22px;
}
.ten-switch:after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  background: #ffffff;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.ten-switch .ten-switch__checkinput {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  opacity: 0;
  cursor: pointer;
}
.ten-switch--ischecked {
  background: #0052d9;
}
.ten-switch--ischecked:after {
  left: calc(100% - 1px);
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
  box-shadow: 3px 3px 5px 0 rgba(0, 67, 177, 0.15);
}
.ten-switch--ischecked .ten-switch__text {
  padding-left: 2px;
  padding-right: 22px;
}
.ten-switch--unchecked {
  background: #F0F0F0;
}
.ten-switch--unchecked:after {
  left: 1px;
  box-shadow: -3px 3px 5px 0 rgba(153, 153, 153, 0.14);
}
.ten-switch--unchecked .ten-switch__text {
  padding-right: 2px;
  padding-left: 22px;
}
.ten-switch--disabled {
  background: #F0F0F0;
}
.ten-switch--disabled .ten-switch__checkinput {
  cursor: not-allowed;
}
.ten-switch--disabled:after {
  background: rgba(192, 192, 192, 0.6);
  box-shadow: -3px 3px 5px 0 rgba(153, 153, 153, 0.14);
}