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