bsw/jbe@1309: /**
bsw/jbe@1309:  * Copyright 2015 Google Inc. All Rights Reserved.
bsw/jbe@1309:  *
bsw/jbe@1309:  * Licensed under the Apache License, Version 2.0 (the "License");
bsw/jbe@1309:  * you may not use this file except in compliance with the License.
bsw/jbe@1309:  * You may obtain a copy of the License at
bsw/jbe@1309:  *
bsw/jbe@1309:  *      http://www.apache.org/licenses/LICENSE-2.0
bsw/jbe@1309:  *
bsw/jbe@1309:  * Unless required by applicable law or agreed to in writing, software
bsw/jbe@1309:  * distributed under the License is distributed on an "AS IS" BASIS,
bsw/jbe@1309:  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
bsw/jbe@1309:  * See the License for the specific language governing permissions and
bsw/jbe@1309:  * limitations under the License.
bsw/jbe@1309:  */
bsw/jbe@1309: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: @import "../mixins";
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio {
bsw/jbe@1309:   position: relative;
bsw/jbe@1309: 
bsw/jbe@1309:   font-size: $radio-label-font-size;
bsw/jbe@1309:   line-height: $radio-label-height;
bsw/jbe@1309: 
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding-left: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-upgraded {
bsw/jbe@1309:     padding-left: $radio-button-size + $radio-padding;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio__button {
bsw/jbe@1309:   line-height: $radio-label-height;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-radio.is-upgraded & {
bsw/jbe@1309:     // Hide input element, while still making it respond to focus.
bsw/jbe@1309:     position: absolute;
bsw/jbe@1309:     width: 0;
bsw/jbe@1309:     height: 0;
bsw/jbe@1309:     margin: 0;
bsw/jbe@1309:     padding: 0;
bsw/jbe@1309:     opacity: 0;
bsw/jbe@1309:     -ms-appearance: none;
bsw/jbe@1309:     -moz-appearance: none;
bsw/jbe@1309:     -webkit-appearance: none;
bsw/jbe@1309:     appearance: none;
bsw/jbe@1309:     border: none;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio__outer-circle {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: $radio-top-offset;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $radio-button-size;
bsw/jbe@1309:   height: $radio-button-size;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   border: 2px solid $radio-off-color;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   z-index: 2;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-radio.is-checked & {
bsw/jbe@1309:     border: 2px solid $radio-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-radio,
bsw/jbe@1309:   .mdl-radio.is-disabled & {
bsw/jbe@1309:     border: 2px solid $radio-disabled-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio__inner-circle {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   z-index: 1;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   top: $radio-top-offset + $radio-inner-margin;
bsw/jbe@1309:   left: $radio-inner-margin;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $radio-button-size - ($radio-inner-margin * 2);
bsw/jbe@1309:   height: $radio-button-size - ($radio-inner-margin * 2);
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   @include material-animation-default(0.28s);
bsw/jbe@1309:   transition-property: transform;
bsw/jbe@1309:   transform: scale3d(0, 0, 0);
bsw/jbe@1309: 
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309:   background: $radio-color;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-radio.is-checked & {
bsw/jbe@1309:     transform: scale3d(1, 1, 1);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-radio &,
bsw/jbe@1309:   .mdl-radio.is-disabled & {
bsw/jbe@1309:     background: $radio-disabled-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-radio.is-focused & {
bsw/jbe@1309:     box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio__label {
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-radio &,
bsw/jbe@1309:   .mdl-radio.is-disabled & {
bsw/jbe@1309:     color: $radio-disabled-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-radio__ripple-container {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   z-index: 2;
bsw/jbe@1309:   top: -(($radio-ripple-size - $radio-label-height) / 2);
bsw/jbe@1309:   left: -(($radio-ripple-size - $radio-button-size) / 2);
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $radio-ripple-size;
bsw/jbe@1309:   height: $radio-ripple-size;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309:   -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-ripple {
bsw/jbe@1309:     background: $radio-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-radio &,
bsw/jbe@1309:   .mdl-radio.is-disabled & {
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-radio & .mdl-ripple,
bsw/jbe@1309:   .mdl-radio.is-disabled & .mdl-ripple {
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:   }
bsw/jbe@1309: }