/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v1.1.3 */ .md-inline-form md-switch { margin-top: 18px; margin-bottom: 19px; } md-switch { margin: 16px 0; white-space: nowrap; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 30px; line-height: 28px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: flex; margin-left: inherit; margin-right: 16px; } [dir=rtl] md-switch { margin-left: 16px; } [dir=rtl] md-switch { margin-right: inherit; } md-switch:last-of-type { margin-left: inherit; margin-right: 0; } [dir=rtl] md-switch:last-of-type { margin-left: 0; } [dir=rtl] md-switch:last-of-type { margin-right: inherit; } md-switch[disabled] { cursor: default; } md-switch[disabled] .md-container { cursor: default; } 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; float: left; } [dir=rtl] md-switch .md-container { margin-right: 0px; margin-left: 8px; } md-switch.md-inverted .md-container { margin-right: initial; margin-left: 8px; } [dir=rtl] md-switch.md-inverted .md-container { margin-right: 8px; } [dir=rtl] md-switch.md-inverted .md-container { margin-left: initial; } 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; float: left; } 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 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); } 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; -webkit-transition: all 0.5s; 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 { -webkit-transition: all 0.08s linear; transition: all 0.08s linear; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: transform, background-color; transition-property: transform, background-color, -webkit-transform; } md-switch:not(.md-dragging) .md-bar, md-switch:not(.md-dragging) .md-thumb { -webkit-transition-delay: 0.05s; 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; } }