/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.11.4 */ md-radio-button, .md-switch-thumb { box-sizing: border-box; display: block; margin: 15px; white-space: nowrap; cursor: pointer; } md-radio-button .md-container, .md-switch-thumb .md-container { box-sizing: border-box; position: relative; top: 4px; display: inline-block; width: 16px; height: 16px; cursor: pointer; } md-radio-button .md-container .md-ripple-container, .md-switch-thumb .md-container .md-ripple-container { position: absolute; display: block; width: 48px; height: 48px; left: -16px; top: -16px; } md-radio-button .md-container:before, .md-switch-thumb .md-container:before { box-sizing: border-box; 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-radio-button.md-align-top-left > div.md-container, .md-switch-thumb.md-align-top-left > div.md-container { top: -15px; } md-radio-button .md-off, .md-switch-thumb .md-off { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-style: solid; border-width: 2px; border-radius: 50%; transition: border-color ease 0.28s; } md-radio-button .md-on, .md-switch-thumb .md-on { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; transition: -webkit-transform ease 0.28s; transition: transform ease 0.28s; -webkit-transform: scale(0); transform: scale(0); } md-radio-button.md-checked .md-on, .md-switch-thumb.md-checked .md-on { -webkit-transform: scale(0.5); transform: scale(0.5); } md-radio-button .md-label, .md-switch-thumb .md-label { box-sizing: border-box; position: relative; display: inline-block; margin-left: 10px; margin-right: 0; vertical-align: middle; white-space: normal; pointer-events: none; width: auto; } html[dir=rtl] md-radio-button .md-label, html[dir=rtl] .md-switch-thumb .md-label { margin-left: 0; unicode-bidi: embed; } body[dir=rtl] md-radio-button .md-label, body[dir=rtl] .md-switch-thumb .md-label { margin-left: 0; unicode-bidi: embed; } md-radio-button .md-label bdo[dir=rtl], .md-switch-thumb .md-label bdo[dir=rtl] { direction: rtl; unicode-bidi: bidi-override; } md-radio-button .md-label bdo[dir=ltr], .md-switch-thumb .md-label bdo[dir=ltr] { direction: ltr; unicode-bidi: bidi-override; } html[dir=rtl] md-radio-button .md-label, html[dir=rtl] .md-switch-thumb .md-label { margin-right: 10px; unicode-bidi: embed; } body[dir=rtl] md-radio-button .md-label, body[dir=rtl] .md-switch-thumb .md-label { margin-right: 10px; unicode-bidi: embed; } md-radio-button .md-label bdo[dir=rtl], .md-switch-thumb .md-label bdo[dir=rtl] { direction: rtl; unicode-bidi: bidi-override; } md-radio-button .md-label bdo[dir=ltr], .md-switch-thumb .md-label bdo[dir=ltr] { direction: ltr; unicode-bidi: bidi-override; } md-radio-button .circle, .md-switch-thumb .circle { border-radius: 50%; } md-radio-group:focus { outline: none; } md-radio-group.md-focused .md-checked .md-container:before { left: -8px; top: -8px; right: -8px; bottom: -8px; } @media screen and (-ms-high-contrast: active) { md-radio-button.md-default-theme .md-on { background-color: #fff; } }