element-ui/packages/theme-default/src/switch.css

A Component Library for Vue.js.

@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {

  @b switch {
    display: inline-block;
    position: relative;
    font-size: var(--switch-font-size);
    line-height: var(--switch-height);
    height: var(--switch-height);
    vertical-align: middle;
    @when disabled {
      & .el-switch__core,
      & .el-switch__label {
        cursor: not-allowed;
      }
    }

    @e label {
      transition: .2s;
      position: absolute;
      size: var(--switch-width) var(--switch-height);
      left: 0;
      top: 0;
      display: inline-block;
      font-size: var(--switch-font-size);
      cursor: pointer;
      @m left {
        i {
          left: 6px;
        }
      }
      @m right {
        i {
          right: 6px;
        }
      }
      & * {
        line-height: 1;
        top: 4px;
        position: absolute;
        font-size: var(--switch-font-size);
        display: inline-block;
        color: var(--color-white);
      }
    }

    @e input {
      display: none;
    }

    @e core {
      margin: 0;
      display: inline-block;
      position: relative;
      size: var(--switch-width) var(--switch-height);
      border: 1px solid var(--switch-off-color);
      outline: none;
      border-radius: var(--switch-core-border-radius);
      box-sizing: border-box;
      background: var(--switch-off-color);
      cursor: pointer;
      transition: border-color .3s, background-color .3s;

      & .el-switch__button {
        position: absolute 0 * * 0;
        border-radius: var(--border-radius-circle);
        transition: transform .3s;
        size: var(--switch-button-size);
        background-color: var(--color-white);
      }
    }

    @when checked {
      .el-switch__core {
        border-color: var(--switch-on-color);
        background-color: var(--switch-on-color);
      }
    }

    @when disabled {
      .el-switch__core {
        border-color: var(--switch-disabled-color) !important;
        background: var(--switch-disabled-color) !important;

        & span {
          background-color: var(--switch-disabled-text-color) !important;
        }

        & ~ .el-switch__label * {
          color: var(--switch-disabled-text-color) !important;
        }
      }
    }

    @modifier wide {
      .el-switch__label {
        &.el-switch__label--left {
          span {
            left: 10px;
          }
        }
        &.el-switch__label--right {
          span {
            right: 10px;
          }
        }
      }
    }

    & .label-fade-enter,
    & .label-fade-leave-active {
      opacity: 0;
    }
  }
}