/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.9.8 */ /* mixin definition ; sets LTR and RTL within the same style call */ 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-focused:not([disabled]) .md-thumb:before { left: -8px; top: -8px; right: -8px; bottom: -8px; } md-switch.md-focused:not([disabled]):not(.md-checked) .md-thumb:before { background-color: rgba(0, 0, 0, 0.12); } md-switch .md-label { border-color: transparent; border-width: 0; } 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 3px 1px -2px rgba(0, 0, 0, 0.14), 0px 2px 2px 0px rgba(0, 0, 0, 0.098), 0px 1px 5px 0px rgba(0, 0, 0, 0.084); } md-switch .md-thumb:before { background-color: transparent; border-radius: 50%; content: ''; position: absolute; display: block; height: auto; left: 0; top: 0; right: 0; bottom: 0; transition: all 0.5s; width: auto; } 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; } @media screen and (-ms-high-contrast: active) { md-switch.md-default-theme .md-bar { background-color: #666; } md-switch.md-default-theme.md-checked .md-bar { background-color: #9E9E9E; } md-switch.md-default-theme .md-thumb { background-color: #fff; } }