1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @import "../variables";
|
18 | @import "../mixins";
|
19 |
|
20 | .mdl-checkbox {
|
21 | position: relative;
|
22 |
|
23 | z-index: 1;
|
24 |
|
25 | vertical-align: middle;
|
26 |
|
27 | display: inline-block;
|
28 |
|
29 | box-sizing: border-box;
|
30 | width: 100%;
|
31 | height: $checkbox-label-height;
|
32 | margin: 0;
|
33 | padding: 0;
|
34 |
|
35 | &.is-upgraded {
|
36 | padding-left: $checkbox-button-size + $checkbox-padding;
|
37 | }
|
38 | }
|
39 |
|
40 | .mdl-checkbox__input {
|
41 | line-height: $checkbox-label-height;
|
42 |
|
43 | .mdl-checkbox.is-upgraded & {
|
44 |
|
45 | position: absolute;
|
46 | width: 0;
|
47 | height: 0;
|
48 | margin: 0;
|
49 | padding: 0;
|
50 | opacity: 0;
|
51 | -ms-appearance: none;
|
52 | -moz-appearance: none;
|
53 | -webkit-appearance: none;
|
54 | appearance: none;
|
55 | border: none;
|
56 | }
|
57 | }
|
58 |
|
59 | .mdl-checkbox__box-outline {
|
60 | position: absolute;
|
61 | top: $checkbox-top-offset;
|
62 | left: 0;
|
63 |
|
64 | display: inline-block;
|
65 |
|
66 | box-sizing: border-box;
|
67 | width: $checkbox-button-size;
|
68 | height: $checkbox-button-size;
|
69 | margin: 0;
|
70 |
|
71 | cursor: pointer;
|
72 | overflow: hidden;
|
73 |
|
74 | border: 2px solid $checkbox-off-color;
|
75 | border-radius: 2px;
|
76 |
|
77 | z-index: 2;
|
78 |
|
79 | .mdl-checkbox.is-checked & {
|
80 | border: 2px solid $checkbox-color;
|
81 | }
|
82 |
|
83 | fieldset[disabled] .mdl-checkbox &,
|
84 | .mdl-checkbox.is-disabled & {
|
85 | border: 2px solid $checkbox-disabled-color;
|
86 | cursor: auto;
|
87 | }
|
88 | }
|
89 |
|
90 | .mdl-checkbox__focus-helper {
|
91 | position: absolute;
|
92 | top: $checkbox-top-offset;
|
93 | left: 0;
|
94 |
|
95 | display: inline-block;
|
96 |
|
97 | box-sizing: border-box;
|
98 | width: $checkbox-button-size;
|
99 | height: $checkbox-button-size;
|
100 | border-radius: 50%;
|
101 |
|
102 | background-color: transparent;
|
103 |
|
104 | .mdl-checkbox.is-focused & {
|
105 | box-shadow: 0 0 0px ($checkbox-button-size / 2) rgba(0, 0, 0, 0.1);
|
106 | background-color: rgba(0, 0, 0, 0.1);
|
107 | }
|
108 |
|
109 | .mdl-checkbox.is-focused.is-checked & {
|
110 | box-shadow: 0 0 0px ($checkbox-button-size / 2) $checkbox-focus-color;
|
111 | background-color: $checkbox-focus-color;
|
112 | }
|
113 | }
|
114 |
|
115 | .mdl-checkbox__tick-outline {
|
116 | position: absolute;
|
117 | top: 0;
|
118 | left: 0;
|
119 | height: 100%;
|
120 | width: 100%;
|
121 | mask: url("#{$checkbox-image-path}/tick-mask.svg?embed");
|
122 |
|
123 | background: transparent;
|
124 | @include material-animation-default(0.28s);
|
125 | transition-property: background;
|
126 |
|
127 | .mdl-checkbox.is-checked & {
|
128 | background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed");
|
129 | }
|
130 |
|
131 | fieldset[disabled] .mdl-checkbox.is-checked &,
|
132 | .mdl-checkbox.is-checked.is-disabled & {
|
133 | background: $checkbox-disabled-color url("#{$checkbox-image-path}/tick.svg?embed");
|
134 | }
|
135 | }
|
136 |
|
137 | .mdl-checkbox__label {
|
138 | position: relative;
|
139 | cursor: pointer;
|
140 | font-size: $checkbox-label-font-size;
|
141 | line-height: $checkbox-label-height;
|
142 | margin: 0;
|
143 |
|
144 | fieldset[disabled] .mdl-checkbox &,
|
145 | .mdl-checkbox.is-disabled & {
|
146 | color: $checkbox-disabled-color;
|
147 | cursor: auto;
|
148 | }
|
149 | }
|
150 |
|
151 | .mdl-checkbox__ripple-container {
|
152 | position: absolute;
|
153 | z-index: 2;
|
154 | top: -(($checkbox-ripple-size - $checkbox-label-height) / 2);
|
155 | left: -(($checkbox-ripple-size - $checkbox-button-size) / 2);
|
156 |
|
157 | box-sizing: border-box;
|
158 | width: $checkbox-ripple-size;
|
159 | height: $checkbox-ripple-size;
|
160 | border-radius: 50%;
|
161 |
|
162 | cursor: pointer;
|
163 |
|
164 | overflow: hidden;
|
165 | -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
|
166 |
|
167 | & .mdl-ripple {
|
168 | background: $checkbox-color;
|
169 | }
|
170 |
|
171 | fieldset[disabled] .mdl-checkbox &,
|
172 | .mdl-checkbox.is-disabled & {
|
173 | cursor: auto;
|
174 | }
|
175 |
|
176 | fieldset[disabled] .mdl-checkbox & .mdl-ripple,
|
177 | .mdl-checkbox.is-disabled & .mdl-ripple {
|
178 | background: transparent;
|
179 | }
|
180 | }
|