liquid_feedback_frontend
view style/mdl/radio/_radio.scss @ 1369:3d6d4acfa05c
Work around layout issue
| author | bsw |
|---|---|
| date | Wed Aug 08 17:13:46 2018 +0200 (2018-08-08) |
| 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";
18 @import "../mixins";
20 .mdl-radio {
21 position: relative;
23 font-size: $radio-label-font-size;
24 line-height: $radio-label-height;
26 display: inline-block;
28 box-sizing: border-box;
29 margin: 0;
30 padding-left: 0;
32 &.is-upgraded {
33 padding-left: $radio-button-size + $radio-padding;
34 }
35 }
37 .mdl-radio__button {
38 line-height: $radio-label-height;
40 .mdl-radio.is-upgraded & {
41 // Hide input element, while still making it respond to focus.
42 position: absolute;
43 width: 0;
44 height: 0;
45 margin: 0;
46 padding: 0;
47 opacity: 0;
48 -ms-appearance: none;
49 -moz-appearance: none;
50 -webkit-appearance: none;
51 appearance: none;
52 border: none;
53 }
54 }
56 .mdl-radio__outer-circle {
57 position: absolute;
58 top: $radio-top-offset;
59 left: 0;
61 display: inline-block;
63 box-sizing: border-box;
64 width: $radio-button-size;
65 height: $radio-button-size;
66 margin: 0;
68 cursor: pointer;
70 border: 2px solid $radio-off-color;
71 border-radius: 50%;
73 z-index: 2;
75 .mdl-radio.is-checked & {
76 border: 2px solid $radio-color;
77 }
79 fieldset[disabled] .mdl-radio,
80 .mdl-radio.is-disabled & {
81 border: 2px solid $radio-disabled-color;
82 cursor: auto;
83 }
84 }
86 .mdl-radio__inner-circle {
87 position: absolute;
88 z-index: 1;
89 margin: 0;
90 top: $radio-top-offset + $radio-inner-margin;
91 left: $radio-inner-margin;
93 box-sizing: border-box;
94 width: $radio-button-size - ($radio-inner-margin * 2);
95 height: $radio-button-size - ($radio-inner-margin * 2);
97 cursor: pointer;
99 @include material-animation-default(0.28s);
100 transition-property: transform;
101 transform: scale3d(0, 0, 0);
103 border-radius: 50%;
104 background: $radio-color;
106 .mdl-radio.is-checked & {
107 transform: scale3d(1, 1, 1);
108 }
110 fieldset[disabled] .mdl-radio &,
111 .mdl-radio.is-disabled & {
112 background: $radio-disabled-color;
113 cursor: auto;
114 }
116 .mdl-radio.is-focused & {
117 box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
118 }
119 }
121 .mdl-radio__label {
122 cursor: pointer;
124 fieldset[disabled] .mdl-radio &,
125 .mdl-radio.is-disabled & {
126 color: $radio-disabled-color;
127 cursor: auto;
128 }
129 }
131 .mdl-radio__ripple-container {
132 position: absolute;
133 z-index: 2;
134 top: -(($radio-ripple-size - $radio-label-height) / 2);
135 left: -(($radio-ripple-size - $radio-button-size) / 2);
137 box-sizing: border-box;
138 width: $radio-ripple-size;
139 height: $radio-ripple-size;
140 border-radius: 50%;
142 cursor: pointer;
144 overflow: hidden;
145 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
147 & .mdl-ripple {
148 background: $radio-color;
149 }
151 fieldset[disabled] .mdl-radio &,
152 .mdl-radio.is-disabled & {
153 cursor: auto;
154 }
156 fieldset[disabled] .mdl-radio & .mdl-ripple,
157 .mdl-radio.is-disabled & .mdl-ripple {
158 background: transparent;
159 }
160 }