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

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

@charset "UTF-8";
/**
 *
 * @Switch.css
 * @author zhangxinxu
 * @create 15-06-18
 * @edit   17-06-14  keyboard accessible
**/
.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: 50%;
  background-color: #fff;
  -webkit-transition: margin-left .2s;
  transition: margin-left .2s; }

:active + .ui-switch::before {
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1); }

:checked + .ui-switch {
  color: #2486ff; }

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

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

:focus + .ui-switch,
.ui-switch:hover {
  color: #a2a9b6; }

:checked:focus + .ui-switch,
:checked + .ui-switch:hover {
  color: #0057c3; }

:disabled + .ui-switch:hover {
  color: #b6bbc6; }

:checked:disabled + .ui-switch:hover {
  color: #2486ff; }

/*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; } }