@jdcfe/yep-react/lib/switch/style/index.css

一套移动端的React组件库

.Yep-switch {
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  align-self: center;
  width: 108px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Yep-switch .Yep-switch-inner {
  width: 84px;
  height: 36px;
  border-radius: 24px;
  box-sizing: border-box;
  background: #F2F2F2;
  z-index: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: all 300ms;
}
.Yep-switch .Yep-switch-inner-checked {
  background: #F2270C;
}
.Yep-switch .Yep-switch-inner-disabled {
  opacity: 0.3;
}
.Yep-switch .Yep-switch-circle {
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  box-sizing: border-box;
  background: #fff;
  z-index: 0;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: all 300ms;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}
.Yep-switch .Yep-switch-circle-unchecked {
  left: 0;
}
.Yep-switch .Yep-switch-circle-checked {
  right: 0;
}
.Yep-switch input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 0 none;
  appearance: none;
}
.Yep-switch input[type=checkbox]:checked + .checkbox {
  position: relative;
}
.Yep-switch input[type=checkbox]:checked + .checkbox:before {
  background: #F2270C;
  transform: translateX(48px);
}
.Yep-switch input[type=checkbox]:checked + .checkbox:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border: 3PX solid #F2270C;
  border-radius: 24px;
}
.Yep-switch input[type=checkbox]:disabled + .checkbox {
  opacity: 0.3;
}