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: 
bsw/jbe@1309: @import "../variables";
bsw/jbe@1309: @import "../mixins";
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch {
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: $switch-label-height;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   padding: 0;
bsw/jbe@1309: 
bsw/jbe@1309:   overflow: visible;
bsw/jbe@1309: 
bsw/jbe@1309:   &.is-upgraded {
bsw/jbe@1309:     padding-left: $switch-track-length - 8px;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   // avoids blue box around switch
bsw/jbe@1309:   -webkit-touch-callout: none;
bsw/jbe@1309:   -webkit-user-select: none;
bsw/jbe@1309:   -moz-user-select: none;
bsw/jbe@1309:   -ms-user-select: none;
bsw/jbe@1309:   user-select: none;
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch__input {
bsw/jbe@1309:   line-height: $switch-label-height;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-switch.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-switch__track {
bsw/jbe@1309:   background: $switch-off-track-color;
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309:   top: $switch-track-top;
bsw/jbe@1309:   height: $switch-track-height;
bsw/jbe@1309:   width: $switch-track-length;
bsw/jbe@1309:   border-radius: $switch-track-height;
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-switch.is-checked & {
bsw/jbe@1309:     background: $switch-track-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-switch,
bsw/jbe@1309:   .mdl-switch.is-disabled & {
bsw/jbe@1309:     background: $switch-disabled-track-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch__thumb {
bsw/jbe@1309:   background: $switch-off-thumb-color;
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   left: 0;
bsw/jbe@1309:   top: $switch-thumb-top;
bsw/jbe@1309:   height: $switch-thumb-size;
bsw/jbe@1309:   width: $switch-thumb-size;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309: 
bsw/jbe@1309:   @include shadow-2dp();
bsw/jbe@1309: 
bsw/jbe@1309:   @include material-animation-default(0.28s);
bsw/jbe@1309:   transition-property: left;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-switch.is-checked & {
bsw/jbe@1309:     background: $switch-thumb-color;
bsw/jbe@1309:     left: $switch-track-length - $switch-thumb-size;
bsw/jbe@1309: 
bsw/jbe@1309:     @include shadow-3dp();
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-switch,
bsw/jbe@1309:   .mdl-switch.is-disabled & {
bsw/jbe@1309:     background: $switch-disabled-thumb-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch__focus-helper {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   top: 50%;
bsw/jbe@1309:   left: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   transform: translate(-$switch-helper-size / 2, -$switch-helper-size / 2);
bsw/jbe@1309: 
bsw/jbe@1309:   display: inline-block;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $switch-helper-size;
bsw/jbe@1309:   height: $switch-helper-size;
bsw/jbe@1309:   border-radius: 50%;
bsw/jbe@1309: 
bsw/jbe@1309:   background-color: transparent;
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-switch.is-focused & {
bsw/jbe@1309:     box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
bsw/jbe@1309:         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-switch.is-focused.is-checked & {
bsw/jbe@1309:     box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
bsw/jbe@1309:         $switch-faded-color;
bsw/jbe@1309:     background-color: $switch-faded-color;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch__label {
bsw/jbe@1309:   position: relative;
bsw/jbe@1309:   cursor: pointer;
bsw/jbe@1309:   font-size: $switch-label-font-size;
bsw/jbe@1309:   line-height: $switch-label-height;
bsw/jbe@1309:   margin: 0;
bsw/jbe@1309:   left: 24px;
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-switch,
bsw/jbe@1309:   .mdl-switch.is-disabled & {
bsw/jbe@1309:     color: $switch-disabled-thumb-color;
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: }
bsw/jbe@1309: 
bsw/jbe@1309: .mdl-switch__ripple-container {
bsw/jbe@1309:   position: absolute;
bsw/jbe@1309:   z-index: 2;
bsw/jbe@1309:   top: -($switch-ripple-size - $switch-label-height) / 2;
bsw/jbe@1309:   left: $switch-thumb-size / 2 - $switch-ripple-size / 2;
bsw/jbe@1309: 
bsw/jbe@1309:   box-sizing: border-box;
bsw/jbe@1309:   width: $switch-ripple-size;
bsw/jbe@1309:   height: $switch-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:   transition-duration: 0.40s;
bsw/jbe@1309:   transition-timing-function: step-end;
bsw/jbe@1309:   transition-property: left;
bsw/jbe@1309: 
bsw/jbe@1309:   & .mdl-ripple {
bsw/jbe@1309:     background: $switch-color;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-switch,
bsw/jbe@1309:   .mdl-switch.is-disabled & {
bsw/jbe@1309:     cursor: auto;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   fieldset[disabled] .mdl-switch & .mdl-ripple,
bsw/jbe@1309:   .mdl-switch.is-disabled & .mdl-ripple {
bsw/jbe@1309:     background: transparent;
bsw/jbe@1309:   }
bsw/jbe@1309: 
bsw/jbe@1309:   .mdl-switch.is-checked & {
bsw/jbe@1309:     left: $switch-track-length - $switch-ripple-size / 2 -
bsw/jbe@1309:         $switch-thumb-size / 2;
bsw/jbe@1309:   }
bsw/jbe@1309: }