/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.7.1 */ md-switch { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 15px; white-space: nowrap; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } md-switch .md-container { cursor: -webkit-grab; cursor: grab; width: 36px; height: 24px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-right: 8px; } md-switch:not([disabled]) .md-dragging, md-switch:not([disabled]).md-dragging .md-container { cursor: -webkit-grabbing; cursor: grabbing; } md-switch .md-label { border-color: transparent; border-width: 0px; } md-switch .md-bar { left: 1px; width: 34px; top: 5px; height: 14px; border-radius: 8px; position: absolute; } md-switch .md-thumb-container { top: 2px; left: 0; width: 16px; position: absolute; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 1; } md-switch.md-checked .md-thumb-container { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } md-switch .md-thumb { position: absolute; margin: 0; left: 0; top: 0; outline: none; height: 20px; width: 20px; border-radius: 50%; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); } md-switch .md-thumb .md-ripple-container { position: absolute; display: block; width: auto; height: auto; left: -20px; top: -20px; right: -20px; bottom: -20px; } md-switch:not(.md-dragging) .md-bar, md-switch:not(.md-dragging) .md-thumb-container, md-switch:not(.md-dragging) .md-thumb { transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1); transition-property: -webkit-transform, background-color; transition-property: transform, background-color; } md-switch:not(.md-dragging) .md-bar, md-switch:not(.md-dragging) .md-thumb { transition-delay: 0.05s; }