meri-design-dev/custom/theme/Toggle.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-toggle
  position: relative
  display: inline-block
  vertical-align: middle
  width: 40px
  height: 22px
  border-radius: 11px
  cursor: pointer
  transition: background-color .3s

.p-toggle:before
  content: ''
  position: absolute
  top: 2px
  display: block
  background-color: $white
  width: 18px
  height: 18px
  border-radius: 9px
  box-shadow: $box-shadow-bottom
  transition: right .2s
  z-index: 2

.p-toggle input
  display: none
  width: 0
  height: 0

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

.p-toggle-off
  background-color: $grey-400

.p-toggle-off:before
  right: 20px

.p-toggle-on
  background-color: $blue-500

.p-toggle-on:before
  right: 2px

.p-toggle-disable-on
  background-color: $blue-200
  cursor: not-allowed

.p-toggle-disable-off
  background-color: $grey-300
  cursor: not-allowed