third_party/ot-br-posix/repo/third_party/mdl/repo/src/switch/_switch.scss

   1 /**
   2  * Copyright 2015 Google Inc. All Rights Reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17
  18 @import "../variables";
  19 @import "../mixins";
  20
  21 .mdl-switch {
  22   position: relative;
  23
  24   z-index: 1;
  25
  26   vertical-align: middle;
  27
  28   display: inline-block;
  29
  30   box-sizing: border-box;
  31   width: 100%;
  32   height: $switch-label-height;
  33   margin: 0;
  34   padding: 0;
  35
  36   overflow: visible;
  37
  38   &.is-upgraded {
  39     padding-left: $switch-track-length - 8px;
  40   }
  41
  42   // avoids blue box around switch
  43   -webkit-touch-callout: none;
  44   -webkit-user-select: none;
  45   -moz-user-select: none;
  46   -ms-user-select: none;
  47   user-select: none;
  48 }
  49
  50 .mdl-switch__input {
  51   line-height: $switch-label-height;
  52
  53   .mdl-switch.is-upgraded & {
  54     // Hide input element, while still making it respond to focus.
  55     position: absolute;
  56     width: 0;
  57     height: 0;
  58     margin: 0;
  59     padding: 0;
  60     opacity: 0;
  61     -ms-appearance: none;
  62     -moz-appearance: none;
  63     -webkit-appearance: none;
  64     appearance: none;
  65     border: none;
  66   }
  67 }
  68
  69 .mdl-switch__track {
  70   background: $switch-off-track-color;
  71   position: absolute;
  72   left: 0;
  73   top: $switch-track-top;
  74   height: $switch-track-height;
  75   width: $switch-track-length;
  76   border-radius: $switch-track-height;
  77
  78   cursor: pointer;
  79
  80   .mdl-switch.is-checked & {
  81     background: $switch-track-color;
  82   }
  83
  84   fieldset[disabled] .mdl-switch,
  85   .mdl-switch.is-disabled & {
  86     background: $switch-disabled-track-color;
  87     cursor: auto;
  88   }
  89 }
  90
  91 .mdl-switch__thumb {
  92   background: $switch-off-thumb-color;
  93   position: absolute;
  94   left: 0;
  95   top: $switch-thumb-top;
  96   height: $switch-thumb-size;
  97   width: $switch-thumb-size;
  98   border-radius: 50%;
  99
 100   cursor: pointer;
 101
 102   @include shadow-2dp();
 103
 104   @include material-animation-default(0.28s);
 105   transition-property: left;
 106
 107   .mdl-switch.is-checked & {
 108     background: $switch-thumb-color;
 109     left: $switch-track-length - $switch-thumb-size;
 110
 111     @include shadow-3dp();
 112   }
 113
 114   fieldset[disabled] .mdl-switch,
 115   .mdl-switch.is-disabled & {
 116     background: $switch-disabled-thumb-color;
 117     cursor: auto;
 118   }
 119 }
 120
 121 .mdl-switch__focus-helper {
 122   position: absolute;
 123   top: 50%;
 124   left: 50%;
 125
 126   transform: translate(-$switch-helper-size / 2, -$switch-helper-size / 2);
 127
 128   display: inline-block;
 129
 130   box-sizing: border-box;
 131   width: $switch-helper-size;
 132   height: $switch-helper-size;
 133   border-radius: 50%;
 134
 135   background-color: transparent;
 136
 137   .mdl-switch.is-focused & {
 138     box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
 139         rgba(0, 0, 0, 0.1);
 140     background-color: rgba(0, 0, 0, 0.1);
 141   }
 142
 143   .mdl-switch.is-focused.is-checked & {
 144     box-shadow: 0 0 0px (($switch-ripple-size - $switch-helper-size) / 2)
 145         $switch-faded-color;
 146     background-color: $switch-faded-color;
 147   }
 148 }
 149
 150 .mdl-switch__label {
 151   position: relative;
 152   cursor: pointer;
 153   font-size: $switch-label-font-size;
 154   line-height: $switch-label-height;
 155   margin: 0;
 156   left: 24px;
 157
 158   fieldset[disabled] .mdl-switch,
 159   .mdl-switch.is-disabled & {
 160     color: $switch-disabled-thumb-color;
 161     cursor: auto;
 162   }
 163 }
 164
 165 .mdl-switch__ripple-container {
 166   position: absolute;
 167   z-index: 2;
 168   top: -($switch-ripple-size - $switch-label-height) / 2;
 169   left: $switch-thumb-size / 2 - $switch-ripple-size / 2;
 170
 171   box-sizing: border-box;
 172   width: $switch-ripple-size;
 173   height: $switch-ripple-size;
 174   border-radius: 50%;
 175
 176   cursor: pointer;
 177
 178   overflow: hidden;
 179   -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 180
 181   transition-duration: 0.40s;
 182   transition-timing-function: step-end;
 183   transition-property: left;
 184
 185   & .mdl-ripple {
 186     background: $switch-color;
 187   }
 188
 189   fieldset[disabled] .mdl-switch,
 190   .mdl-switch.is-disabled & {
 191     cursor: auto;
 192   }
 193
 194   fieldset[disabled] .mdl-switch & .mdl-ripple,
 195   .mdl-switch.is-disabled & .mdl-ripple {
 196     background: transparent;
 197   }
 198
 199   .mdl-switch.is-checked & {
 200     left: $switch-track-length - $switch-ripple-size / 2 -
 201         $switch-thumb-size / 2;
 202   }
 203 }