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-checkbox {
bsw/jbe@1309:   position: relative;
bsw/jbe@1309: 
bsw/jbe@1309:   z-index: 1;
bsw/jbe@1309: 
bsw/jbe@1309:   vertical-align: middle;
bsw/jbe@1309: 
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309:   height: $checkbox-label-height;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-upgraded {
bsw/jbe@1309:     padding-left: $checkbox-button-size + $checkbox-padding;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-checkbox__input {
bsw/jbe@1309:   line-height: $checkbox-label-height;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-checkbox.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-checkbox__box-outline {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: $checkbox-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: $checkbox-button-size;
bsw/jbe@1309:   height: $checkbox-button-size;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309:   overflow: hidden;
bsw/jbe@1309: 
bsw/jbe@1309:   border: 2px solid $checkbox-off-color;
bsw/jbe@1309:   border-radius: 2px;
bsw/jbe@1309: 
bsw/jbe@1309:   z-index: 2;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-checkbox.is-checked & {
bsw/jbe@1309:     border: 2px solid $checkbox-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309:   .mdl-checkbox.is-disabled & {
bsw/jbe@1309:     border: 2px solid $checkbox-disabled-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-checkbox__focus-helper {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: $checkbox-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: $checkbox-button-size;
bsw/jbe@1309:   height: $checkbox-button-size;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   background-color: transparent;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-checkbox.is-focused & {
bsw/jbe@1309:     box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
bsw/jbe@1309:     background-color: rgba(0, 0, 0, 0.1);
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-checkbox.is-focused.is-checked & {
bsw/jbe@1309:     box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
bsw/jbe@1309:     background-color: $checkbox-focus-color;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-checkbox__tick-outline {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: 0;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309:   height: 100%;
bsw/jbe@1309:   width: 100%;
bsw/jbe@1309:   mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
bsw/jbe@1309: 
bsw/jbe@1309:   background: transparent;
bsw/jbe@1309:   @include material-animation-default(0.28s);
bsw/jbe@1309:   transition-property: background;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-checkbox.is-checked & {
bsw/jbe@1309:     background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-checkbox.is-checked &,
bsw/jbe@1309:   .mdl-checkbox.is-checked.is-disabled & {
bsw/jbe@1309:     background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-checkbox__label {
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309:   font-size: $checkbox-label-font-size;
bsw/jbe@1309:   line-height: $checkbox-label-height;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309:   .mdl-checkbox.is-disabled & {
bsw/jbe@1309:     color: $checkbox-disabled-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-checkbox__ripple-container {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   z-index: 2;
bsw/jbe@1309:   top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
bsw/jbe@1309:   left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $checkbox-ripple-size;
bsw/jbe@1309:   height: $checkbox-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: $checkbox-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-checkbox &,
bsw/jbe@1309:   .mdl-checkbox.is-disabled & {
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-checkbox & .mdl-ripple,
bsw/jbe@1309:   .mdl-checkbox.is-disabled & .mdl-ripple {
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:   }
bsw/jbe@1309: }