blob: 9cd726f1d08f2290d757416c28b8623431096c75 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001/**
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}