rev |
line source |
bsw/jbe@1309
|
1 /**
|
bsw/jbe@1309
|
2 * Copyright 2015 Google Inc. All Rights Reserved.
|
bsw/jbe@1309
|
3 *
|
bsw/jbe@1309
|
4 * Licensed under the Apache License, Version 2.0 (the "License");
|
bsw/jbe@1309
|
5 * you may not use this file except in compliance with the License.
|
bsw/jbe@1309
|
6 * You may obtain a copy of the License at
|
bsw/jbe@1309
|
7 *
|
bsw/jbe@1309
|
8 * http://www.apache.org/licenses/LICENSE-2.0
|
bsw/jbe@1309
|
9 *
|
bsw/jbe@1309
|
10 * Unless required by applicable law or agreed to in writing, software
|
bsw/jbe@1309
|
11 * distributed under the License is distributed on an "AS IS" BASIS,
|
bsw/jbe@1309
|
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
bsw/jbe@1309
|
13 * See the License for the specific language governing permissions and
|
bsw/jbe@1309
|
14 * limitations under the License.
|
bsw/jbe@1309
|
15 */
|
bsw/jbe@1309
|
16
|
bsw/jbe@1309
|
17 @import "../variables";
|
bsw/jbe@1309
|
18 @import "../mixins";
|
bsw/jbe@1309
|
19
|
bsw/jbe@1309
|
20 .mdl-radio {
|
bsw/jbe@1309
|
21 position: relative;
|
bsw/jbe@1309
|
22
|
bsw/jbe@1309
|
23 font-size: $radio-label-font-size;
|
bsw/jbe@1309
|
24 line-height: $radio-label-height;
|
bsw/jbe@1309
|
25
|
bsw/jbe@1309
|
26 display: inline-block;
|
bsw/jbe@1309
|
27
|
bsw/jbe@1309
|
28 box-sizing: border-box;
|
bsw/jbe@1309
|
29 margin: 0;
|
bsw/jbe@1309
|
30 padding-left: 0;
|
bsw/jbe@1309
|
31
|
bsw/jbe@1309
|
32 &.is-upgraded {
|
bsw/jbe@1309
|
33 padding-left: $radio-button-size + $radio-padding;
|
bsw/jbe@1309
|
34 }
|
bsw/jbe@1309
|
35 }
|
bsw/jbe@1309
|
36
|
bsw/jbe@1309
|
37 .mdl-radio__button {
|
bsw/jbe@1309
|
38 line-height: $radio-label-height;
|
bsw/jbe@1309
|
39
|
bsw/jbe@1309
|
40 .mdl-radio.is-upgraded & {
|
bsw/jbe@1309
|
41 // Hide input element, while still making it respond to focus.
|
bsw/jbe@1309
|
42 position: absolute;
|
bsw/jbe@1309
|
43 width: 0;
|
bsw/jbe@1309
|
44 height: 0;
|
bsw/jbe@1309
|
45 margin: 0;
|
bsw/jbe@1309
|
46 padding: 0;
|
bsw/jbe@1309
|
47 opacity: 0;
|
bsw/jbe@1309
|
48 -ms-appearance: none;
|
bsw/jbe@1309
|
49 -moz-appearance: none;
|
bsw/jbe@1309
|
50 -webkit-appearance: none;
|
bsw/jbe@1309
|
51 appearance: none;
|
bsw/jbe@1309
|
52 border: none;
|
bsw/jbe@1309
|
53 }
|
bsw/jbe@1309
|
54 }
|
bsw/jbe@1309
|
55
|
bsw/jbe@1309
|
56 .mdl-radio__outer-circle {
|
bsw/jbe@1309
|
57 position: absolute;
|
bsw/jbe@1309
|
58 top: $radio-top-offset;
|
bsw/jbe@1309
|
59 left: 0;
|
bsw/jbe@1309
|
60
|
bsw/jbe@1309
|
61 display: inline-block;
|
bsw/jbe@1309
|
62
|
bsw/jbe@1309
|
63 box-sizing: border-box;
|
bsw/jbe@1309
|
64 width: $radio-button-size;
|
bsw/jbe@1309
|
65 height: $radio-button-size;
|
bsw/jbe@1309
|
66 margin: 0;
|
bsw/jbe@1309
|
67
|
bsw/jbe@1309
|
68 cursor: pointer;
|
bsw/jbe@1309
|
69
|
bsw/jbe@1309
|
70 border: 2px solid $radio-off-color;
|
bsw/jbe@1309
|
71 border-radius: 50%;
|
bsw/jbe@1309
|
72
|
bsw/jbe@1309
|
73 z-index: 2;
|
bsw/jbe@1309
|
74
|
bsw/jbe@1309
|
75 .mdl-radio.is-checked & {
|
bsw/jbe@1309
|
76 border: 2px solid $radio-color;
|
bsw/jbe@1309
|
77 }
|
bsw/jbe@1309
|
78
|
bsw/jbe@1309
|
79 fieldset[disabled] .mdl-radio,
|
bsw/jbe@1309
|
80 .mdl-radio.is-disabled & {
|
bsw/jbe@1309
|
81 border: 2px solid $radio-disabled-color;
|
bsw/jbe@1309
|
82 cursor: auto;
|
bsw/jbe@1309
|
83 }
|
bsw/jbe@1309
|
84 }
|
bsw/jbe@1309
|
85
|
bsw/jbe@1309
|
86 .mdl-radio__inner-circle {
|
bsw/jbe@1309
|
87 position: absolute;
|
bsw/jbe@1309
|
88 z-index: 1;
|
bsw/jbe@1309
|
89 margin: 0;
|
bsw/jbe@1309
|
90 top: $radio-top-offset + $radio-inner-margin;
|
bsw/jbe@1309
|
91 left: $radio-inner-margin;
|
bsw/jbe@1309
|
92
|
bsw/jbe@1309
|
93 box-sizing: border-box;
|
bsw/jbe@1309
|
94 width: $radio-button-size - ($radio-inner-margin * 2);
|
bsw/jbe@1309
|
95 height: $radio-button-size - ($radio-inner-margin * 2);
|
bsw/jbe@1309
|
96
|
bsw/jbe@1309
|
97 cursor: pointer;
|
bsw/jbe@1309
|
98
|
bsw/jbe@1309
|
99 @include material-animation-default(0.28s);
|
bsw/jbe@1309
|
100 transition-property: transform;
|
bsw/jbe@1309
|
101 transform: scale3d(0, 0, 0);
|
bsw/jbe@1309
|
102
|
bsw/jbe@1309
|
103 border-radius: 50%;
|
bsw/jbe@1309
|
104 background: $radio-color;
|
bsw/jbe@1309
|
105
|
bsw/jbe@1309
|
106 .mdl-radio.is-checked & {
|
bsw/jbe@1309
|
107 transform: scale3d(1, 1, 1);
|
bsw/jbe@1309
|
108 }
|
bsw/jbe@1309
|
109
|
bsw/jbe@1309
|
110 fieldset[disabled] .mdl-radio &,
|
bsw/jbe@1309
|
111 .mdl-radio.is-disabled & {
|
bsw/jbe@1309
|
112 background: $radio-disabled-color;
|
bsw/jbe@1309
|
113 cursor: auto;
|
bsw/jbe@1309
|
114 }
|
bsw/jbe@1309
|
115
|
bsw/jbe@1309
|
116 .mdl-radio.is-focused & {
|
bsw/jbe@1309
|
117 box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0.1);
|
bsw/jbe@1309
|
118 }
|
bsw/jbe@1309
|
119 }
|
bsw/jbe@1309
|
120
|
bsw/jbe@1309
|
121 .mdl-radio__label {
|
bsw/jbe@1309
|
122 cursor: pointer;
|
bsw/jbe@1309
|
123
|
bsw/jbe@1309
|
124 fieldset[disabled] .mdl-radio &,
|
bsw/jbe@1309
|
125 .mdl-radio.is-disabled & {
|
bsw/jbe@1309
|
126 color: $radio-disabled-color;
|
bsw/jbe@1309
|
127 cursor: auto;
|
bsw/jbe@1309
|
128 }
|
bsw/jbe@1309
|
129 }
|
bsw/jbe@1309
|
130
|
bsw/jbe@1309
|
131 .mdl-radio__ripple-container {
|
bsw/jbe@1309
|
132 position: absolute;
|
bsw/jbe@1309
|
133 z-index: 2;
|
bsw/jbe@1309
|
134 top: -(($radio-ripple-size - $radio-label-height) / 2);
|
bsw/jbe@1309
|
135 left: -(($radio-ripple-size - $radio-button-size) / 2);
|
bsw/jbe@1309
|
136
|
bsw/jbe@1309
|
137 box-sizing: border-box;
|
bsw/jbe@1309
|
138 width: $radio-ripple-size;
|
bsw/jbe@1309
|
139 height: $radio-ripple-size;
|
bsw/jbe@1309
|
140 border-radius: 50%;
|
bsw/jbe@1309
|
141
|
bsw/jbe@1309
|
142 cursor: pointer;
|
bsw/jbe@1309
|
143
|
bsw/jbe@1309
|
144 overflow: hidden;
|
bsw/jbe@1309
|
145 -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
bsw/jbe@1309
|
146
|
bsw/jbe@1309
|
147 & .mdl-ripple {
|
bsw/jbe@1309
|
148 background: $radio-color;
|
bsw/jbe@1309
|
149 }
|
bsw/jbe@1309
|
150
|
bsw/jbe@1309
|
151 fieldset[disabled] .mdl-radio &,
|
bsw/jbe@1309
|
152 .mdl-radio.is-disabled & {
|
bsw/jbe@1309
|
153 cursor: auto;
|
bsw/jbe@1309
|
154 }
|
bsw/jbe@1309
|
155
|
bsw/jbe@1309
|
156 fieldset[disabled] .mdl-radio & .mdl-ripple,
|
bsw/jbe@1309
|
157 .mdl-radio.is-disabled & .mdl-ripple {
|
bsw/jbe@1309
|
158 background: transparent;
|
bsw/jbe@1309
|
159 }
|
bsw/jbe@1309
|
160 }
|