liquid_feedback_frontend
view style/mdl/switch/_switch.scss @ 1663:05d2f46c60c5
Fixed cancel link in preview
| author | bsw |
|---|---|
| date | Mon Feb 15 14:20:07 2021 +0100 (2021-02-15) |
| 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 */
18 @import "../variables";
19 @import "../mixins";
21 .mdl-switch {
22 position: relative;
24 z-index: 1;
26 vertical-align: middle;
28 display: inline-block;
30 box-sizing: border-box;
31 width: 100%;
32 height: $switch-label-height;
33 margin: 0;
34 padding: 0;
36 overflow: visible;
38 &.is-upgraded {
39 padding-left: $switch-track-length - 8px;
40 }
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 }
50 .mdl-switch__input {
51 line-height: $switch-label-height;
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 }
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;
78 cursor: pointer;
80 .mdl-switch.is-checked & {
81 background: $switch-track-color;
82 }
84 fieldset[disabled] .mdl-switch,
85 .mdl-switch.is-disabled & {
86 background: $switch-disabled-track-color;
87 cursor: auto;
88 }
89 }
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%;
100 cursor: pointer;
102 @include shadow-2dp();
104 @include material-animation-default(0.28s);
105 transition-property: left;
107 .mdl-switch.is-checked & {
108 background: $switch-thumb-color;
109 left: $switch-track-length - $switch-thumb-size;
111 @include shadow-3dp();
112 }
114 fieldset[disabled] .mdl-switch,
115 .mdl-switch.is-disabled & {
116 background: $switch-disabled-thumb-color;
117 cursor: auto;
118 }
119 }
121 .mdl-switch__focus-helper {
122 position: absolute;
123 top: 50%;
124 left: 50%;
126 transform: translate(-$switch-helper-size / 2, -$switch-helper-size / 2);
128 display: inline-block;
130 box-sizing: border-box;
131 width: $switch-helper-size;
132 height: $switch-helper-size;
133 border-radius: 50%;
135 background-color: transparent;
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 }
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 }
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;
158 fieldset[disabled] .mdl-switch,
159 .mdl-switch.is-disabled & {
160 color: $switch-disabled-thumb-color;
161 cursor: auto;
162 }
163 }
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;
171 box-sizing: border-box;
172 width: $switch-ripple-size;
173 height: $switch-ripple-size;
174 border-radius: 50%;
176 cursor: pointer;
178 overflow: hidden;
179 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
181 transition-duration: 0.40s;
182 transition-timing-function: step-end;
183 transition-property: left;
185 & .mdl-ripple {
186 background: $switch-color;
187 }
189 fieldset[disabled] .mdl-switch,
190 .mdl-switch.is-disabled & {
191 cursor: auto;
192 }
194 fieldset[disabled] .mdl-switch & .mdl-ripple,
195 .mdl-switch.is-disabled & .mdl-ripple {
196 background: transparent;
197 }
199 .mdl-switch.is-checked & {
200 left: $switch-track-length - $switch-ripple-size / 2 -
201 $switch-thumb-size / 2;
202 }
203 }