lu2/theme/modern/css/common/ui/Switch.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 * 
 * @Switch.css
 * @author xinxuzhang 
 * @create 15-06-18
 *
**/
.ui-switch {
  display: inline-block;
  width: 44px;
  height: 26px;
  border: 2px solid;
  border-radius: 26px;
  background-color: currentColor;
  box-sizing: border-box;
  color: #b6bbc6;
  -webkit-transition: all .2s;
  transition: all .2s;
  cursor: pointer; }

.ui-switch::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 22px;
  background-color: #fff;
  -webkit-transition: margin-left .2s;
  transition: margin-left .2s; }

:checked + .ui-switch {
  color: #00a5e0; }

:checked + .ui-switch::before {
  margin-left: 18px; }

:disabled + .ui-switch {
  opacity: .38;
  cursor: default; }

/*IE7, IE8 使用图片作UI*/
@media \0screen\,screen\9 {
  .ui-switch {
    border: 0 none;
    background: url(images/Switch/switch.png) no-repeat; }
  [checked] + .ui-switch {
    background-position: 0 -30px; }
  [defaultChecked] + .ui-switch {
    background-position: 0 -30px; }
  [disabled] + .ui-switch {
    filter: alpha(opacity=38);
    cursor: default; } }