jimu-mobile/src/styles/jimu-switch.less

积木组件库助力移动端开发

.ui-switch{
  display: inline-block;
  width: @switch-width;
  height: @switch-height;
  border-radius: @switch-height;
  position: relative;
  background: @switch-default-bg
}
.ui-switch input{display: none}
.ui-switch:after{
  content:"";
  position: absolute;
  width: @switch-btn-width;
  height: @switch-btn-width;
  position: absolute;
  top: 2px;
  left:0;
  border-radius: @switch-btn-width;
  background: @fill-base;
}
.ui-switch{transition:all .2s ease 0s; -webkit-transition:all .2s ease 0s;}
.ui-switch:after{transition:all .2s ease 0s; -webkit-transition:all .2s ease 0s; }
.switch-open{background: @fill-highlight;}
.switch-open:after{left: @switch-btn-open-left; }
.switch-open-move{
  background: @fill-highlight
}
.switch-open-move:after{
 left: @switch-btn-open-left;}
.jimu-switch-issmall.switch-open-move:after{
  left: @switch-btn-open-left-sm;
}
.switch-close{background: @switch-default-bg}
.switch-close:after{left: @switch-btn-close-left;}
.switch-close-move{
  background: @switch-default-bg;
}
.switch-close-move:after{
  left: @switch-btn-close-left;
}
.jimu-switch-issmall.switch-close-move:after{
  left: @switch-btn-close-left-sm;
}
.switch-disabled{background: @switch-default-bg}
.switch-open.switch-disabled{background: rgba(52, 60, 92, .5);}

.jimu-switch-issmall{
  width: @switch-width-sm;height:@switch-height;
  .ui-switch:after{
    width:@switch-btn-width-sm;height: @switch-btn-width-sm;border-radius: @switch-btn-width-sm;
  }
}
.jimu-switch-issmall.switch-open:after{left: @switch-btn-open-left-sm;}