liquid_feedback_frontend
view style/mdl/icon-toggle/_icon-toggle.scss @ 1676:8fde003bdeb0
Added support for alternative DN string
| author | bsw |
|---|---|
| date | Mon Jun 07 20:58:31 2021 +0200 (2021-06-07) |
| parents | 32cc544d5a5b |
| children |
line source
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 */
17 @import "../variables";
19 .mdl-icon-toggle {
20 position: relative;
22 z-index: 1;
24 vertical-align: middle;
26 display: inline-block;
27 height: $icon-toggle-size;
28 margin: 0;
29 padding: 0;
30 }
32 .mdl-icon-toggle__input {
33 line-height: $icon-toggle-size;
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 }
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;
69 &.material-icons {
70 line-height: $icon-toggle-size;
71 font-size: $icon-toggle-font-size;
72 }
74 .mdl-icon-toggle.is-checked & {
75 color: $icon-toggle-checked-color;
76 }
78 .mdl-icon-toggle.is-disabled & {
79 color: $icon-toggle-disabled-color;
80 cursor: auto;
81 transition: none;
82 }
84 .mdl-icon-toggle.is-focused & {
85 background-color: $icon-toggle-focus-color;
86 }
88 .mdl-icon-toggle.is-focused.is-checked & {
89 background-color: $icon-toggle-checked-focus-color;
90 }
91 }
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);
100 box-sizing: border-box;
101 width: $icon-toggle-ripple-size;
102 height: $icon-toggle-ripple-size;
103 border-radius: 50%;
105 cursor: pointer;
107 overflow: hidden;
108 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
110 & .mdl-ripple {
111 background: $icon-toggle-color;
112 }
114 .mdl-icon-toggle.is-disabled & {
115 cursor: auto;
116 }
118 .mdl-icon-toggle.is-disabled & .mdl-ripple {
119 background: transparent;
120 }
121 }