blob: 354f02302f2c26ecca349898908160fe7cf9732f [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@import "../variables";
18
19.mdl-icon-toggle {
20 position: relative;
21
22 z-index: 1;
23
24 vertical-align: middle;
25
26 display: inline-block;
27 height: $icon-toggle-size;
28 margin: 0;
29 padding: 0;
30}
31
32.mdl-icon-toggle__input {
33 line-height: $icon-toggle-size;
34
35 .mdl-icon-toggle.is-upgraded & {
36 // Hide input element, while still making it respond to focus.
37 position: absolute;
38 width: 0;
39 height: 0;
40 margin: 0;
41 padding: 0;
42 opacity: 0;
43 -ms-appearance: none;
44 -moz-appearance: none;
45 -webkit-appearance: none;
46 appearance: none;
47 border: none;
48 }
49}
50
51.mdl-icon-toggle__label {
52 display: inline-block;
53 position: relative;
54 cursor: pointer;
55 height: $icon-toggle-size;
56 width: $icon-toggle-size;
57 min-width: $icon-toggle-size;
58 color: $icon-toggle-color;
59 border-radius: 50%;
60 padding: 0;
61 margin-left: 0;
62 margin-right: 0;
63 text-align: center;
64 background-color: transparent;
65 will-change: background-color;
66 transition: background-color 0.2s $animation-curve-default,
67 color 0.2s $animation-curve-default;
68
69 &.material-icons {
70 line-height: $icon-toggle-size;
71 font-size: $icon-toggle-font-size;
72 }
73
74 .mdl-icon-toggle.is-checked & {
75 color: $icon-toggle-checked-color;
76 }
77
78 .mdl-icon-toggle.is-disabled & {
79 color: $icon-toggle-disabled-color;
80 cursor: auto;
81 transition: none;
82 }
83
84 .mdl-icon-toggle.is-focused & {
85 background-color: $icon-toggle-focus-color;
86 }
87
88 .mdl-icon-toggle.is-focused.is-checked & {
89 background-color: $icon-toggle-checked-focus-color;
90 }
91}
92
93
94.mdl-icon-toggle__ripple-container {
95 position: absolute;
96 z-index: 2;
97 top: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
98 left: -(($icon-toggle-ripple-size - $icon-toggle-size) / 2);
99
100 box-sizing: border-box;
101 width: $icon-toggle-ripple-size;
102 height: $icon-toggle-ripple-size;
103 border-radius: 50%;
104
105 cursor: pointer;
106
107 overflow: hidden;
108 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
109
110 & .mdl-ripple {
111 background: $icon-toggle-color;
112 }
113
114 .mdl-icon-toggle.is-disabled & {
115 cursor: auto;
116 }
117
118 .mdl-icon-toggle.is-disabled & .mdl-ripple {
119 background: transparent;
120 }
121}