vue-material/src/components/mdSwitch/mdSwitch.scss

@import '../../core/stylesheets/variables.scss';

$switch-width: 34px;
$switch-height: 14px;
$switch-thumb-size: 20px;
$switch-ripple-size: 48px;

.md-switch {
  width: auto;
  margin: 16px 8px 16px 0;
  display: inline-flex;
  position: relative;

  .md-switch-container {
    width: $switch-width;
    height: $switch-height;
    position: relative;
    border-radius: $switch-height;
    transition: $swift-ease-out;
    background-color: rgba(#000, .38);

    .md-switch-thumb {
      width: $switch-thumb-size;
      height: $switch-thumb-size;
      position: absolute;
      top: 50%;
      left: 0;
      background-color: #fafafa;
      border-radius: 50%;
      box-shadow: $material-shadow-1dp;
      transition: $swift-linear;
    }

    input {
      position: absolute;
      left: -999em;
    }

    .md-ink-ripple {
      top: -16px;
      right: -16px;
      bottom: -16px;
      left: -16px;
      border-radius: 50%;
      color: rgba(#000, .54);

      .md-ripple {
        width: $switch-ripple-size !important;
        height: $switch-ripple-size !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
      }
    }

    .md-switch-holder {
      width: 40px;
      height: 40px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      //cursor: -webkit-grab;
      background: none;
      border: none;
      transform: translate(-50%, -50%);

      &:focus {
        outline: none;
      }
    }
  }

  .md-switch-label {
    height: $switch-height;
    padding-left: 8px;
    line-height: $switch-height;
  }
}

.md-switch.md-dragging {
  .md-switch-thumb {
    cursor: grabbing;
  }
}

.md-switch.md-disabled {
  .md-switch-thumb {
    cursor: default;
  }
}