/*! * 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-radio-button, .md-switch-thumb { box-sizing: border-box; display: block; margin: 15px; white-space: nowrap; cursor: pointer; } md-radio-button *, md-radio-button *:before, md-radio-button *:after, .md-switch-thumb *, .md-switch-thumb *:before, .md-switch-thumb *:after { box-sizing: border-box; } md-radio-button input, .md-switch-thumb input { display: none; } md-radio-button .md-container, .md-switch-thumb .md-container { 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 { 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-off, .md-switch-thumb .md-off { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: solid 2px; border-radius: 50%; transition: border-color ease 0.28s; } md-radio-button .md-on, .md-switch-thumb .md-on { 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 { position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; vertical-align: middle; white-space: normal; pointer-events: none; width: auto; } 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; } }