73bcce88
luigser
COMPONENTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="../paper-styles/default-theme.html">
|
e619a3b0
Luigi Serra
Controllet cross ...
|
14
|
<link rel="import" href="../paper-styles/color.html">
|
eb240478
Luigi Serra
public room cards...
|
15
16
|
<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
|
73bcce88
luigser
COMPONENTS
|
17
|
<!--
|
eb240478
Luigi Serra
public room cards...
|
18
|
Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
|
73bcce88
luigser
COMPONENTS
|
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
`paper-checkbox` is a button that can be either checked or unchecked. User
can tap the checkbox to check or uncheck it. Usually you use checkboxes
to allow user to select multiple options from a set. If you have a single
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
instead.
Example:
<paper-checkbox>label</paper-checkbox>
<paper-checkbox checked> label</paper-checkbox>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-checkbox-unchecked-background-color` | Checkbox background color when the input is not checked | `transparent`
`--paper-checkbox-unchecked-color` | Checkbox border color when the input is not checked | `--primary-text-color`
`--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when the input is not checked | `--primary-text-color`
`--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--default-primary-color`
`--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--default-primary-color`
`--paper-checkbox-checkmark-color` | Checkmark color | `white`
`--paper-checkbox-label-color` | Label color | `--primary-text-color`
|
eb240478
Luigi Serra
public room cards...
|
45
|
`--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
|
e619a3b0
Luigi Serra
Controllet cross ...
|
46
|
`--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red-500`
|
73bcce88
luigser
COMPONENTS
|
47
48
49
50
51
|
@demo demo/index.html
-->
<dom-module id="paper-checkbox">
|
eb240478
Luigi Serra
public room cards...
|
52
|
<template strip-whitespace>
|
e619a3b0
Luigi Serra
Controllet cross ...
|
53
54
55
56
|
<style>
:host {
display: inline-block;
white-space: nowrap;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
57
58
59
60
61
62
63
64
65
66
67
68
69
|
}
:host(:focus) {
outline: none;
}
.hidden {
display: none;
}
#checkboxContainer {
display: inline-block;
position: relative;
|
c5169e0e
Renato De Donato
a new hope
|
70
71
72
73
74
|
width: 18px;
height: 18px;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
|
e619a3b0
Luigi Serra
Controllet cross ...
|
75
76
77
78
|
vertical-align: middle;
background-color: var(--paper-checkbox-unchecked-background-color, transparent);
}
|
eb240478
Luigi Serra
public room cards...
|
79
|
#ink {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
80
|
position: absolute;
|
c5169e0e
Renato De Donato
a new hope
|
81
82
83
84
|
top: -15px;
left: -15px;
width: 48px;
height: 48px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
85
86
87
88
89
|
color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
opacity: 0.6;
pointer-events: none;
}
|
eb240478
Luigi Serra
public room cards...
|
90
|
:host-context([dir="rtl"]) #ink {
|
c5169e0e
Renato De Donato
a new hope
|
91
|
right: -15px;
|
eb240478
Luigi Serra
public room cards...
|
92
93
94
95
|
left: auto;
}
#ink[checked] {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
96
97
98
|
color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
}
|
eb240478
Luigi Serra
public room cards...
|
99
|
#checkbox {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
position: relative;
box-sizing: border-box;
height: 100%;
border: solid 2px;
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
border-radius: 2px;
pointer-events: none;
-webkit-transition: background-color 140ms, border-color 140ms;
transition: background-color 140ms, border-color 140ms;
}
/* checkbox checked animations */
#checkbox.checked #checkmark {
-webkit-animation: checkmark-expand 140ms ease-out forwards;
animation: checkmark-expand 140ms ease-out forwards;
}
@-webkit-keyframes checkmark-expand {
0% {
|
c5169e0e
Renato De Donato
a new hope
|
119
120
121
122
|
top: 9px;
left: 6px;
width: 0px;
height: 0px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
123
124
|
}
100% {
|
c5169e0e
Renato De Donato
a new hope
|
125
126
127
128
|
top: -1px;
left: 4px;
width: 5px;
height: 10px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
129
130
131
132
133
|
}
}
@keyframes checkmark-expand {
0% {
|
c5169e0e
Renato De Donato
a new hope
|
134
135
136
137
|
top: 9px;
left: 6px;
width: 0px;
height: 0px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
138
139
|
}
100% {
|
c5169e0e
Renato De Donato
a new hope
|
140
141
142
143
|
top: -1px;
left: 4px;
width: 5px;
height: 10px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
144
145
146
|
}
}
|
eb240478
Luigi Serra
public room cards...
|
147
|
#checkbox.checked {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
148
149
150
151
|
background-color: var(--paper-checkbox-checked-color, --default-primary-color);
border-color: var(--paper-checkbox-checked-color, --default-primary-color);
}
|
eb240478
Luigi Serra
public room cards...
|
152
|
#checkmark {
|
c5169e0e
Renato De Donato
a new hope
|
153
154
|
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
|
e619a3b0
Luigi Serra
Controllet cross ...
|
155
|
position: absolute;
|
c5169e0e
Renato De Donato
a new hope
|
156
157
158
159
|
top: -1px;
left: 4px;
width: 5px;
height: 10px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
160
161
162
|
border-style: solid;
border-top: none;
border-left: none;
|
c5169e0e
Renato De Donato
a new hope
|
163
164
|
border-right-width: 2px;
border-bottom-width: 2px;
|
e619a3b0
Luigi Serra
Controllet cross ...
|
165
|
border-color: var(--paper-checkbox-checkmark-color, white);
|
e619a3b0
Luigi Serra
Controllet cross ...
|
166
167
168
169
170
171
172
|
}
/* label */
#checkboxLabel {
position: relative;
display: inline-block;
vertical-align: middle;
|
eb240478
Luigi Serra
public room cards...
|
173
|
padding-left: var(--paper-checkbox-label-spacing, 8px);
|
e619a3b0
Luigi Serra
Controllet cross ...
|
174
175
176
177
178
|
white-space: normal;
pointer-events: none;
color: var(--paper-checkbox-label-color, --primary-text-color);
}
|
eb240478
Luigi Serra
public room cards...
|
179
180
181
182
183
|
:host-context([dir="rtl"]) #checkboxLabel {
padding-right: var(--paper-checkbox-label-spacing, 8px);
padding-left: 0;
}
|
e619a3b0
Luigi Serra
Controllet cross ...
|
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
|
#checkboxLabel[hidden] {
display: none;
}
/* disabled state */
:host([disabled]) {
pointer-events: none;
}
:host([disabled]) #checkbox {
opacity: 0.5;
border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
}
:host([disabled][checked]) #checkbox {
background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
opacity: 0.5;
}
:host([disabled]) #checkboxLabel {
opacity: 0.65;
}
/* invalid state */
#checkbox.invalid:not(.checked) {
border-color: var(--paper-checkbox-error-color, --google-red-500);
}
</style>
|
73bcce88
luigser
COMPONENTS
|
212
213
|
<div id="checkboxContainer">
|
e619a3b0
Luigi Serra
Controllet cross ...
|
214
|
<div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
|
73bcce88
luigser
COMPONENTS
|
215
216
217
218
|
<div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
</div>
</div>
|
e619a3b0
Luigi Serra
Controllet cross ...
|
219
|
<div id="checkboxLabel"><content></content></div>
|
73bcce88
luigser
COMPONENTS
|
220
221
222
223
224
225
226
|
</template>
<script>
Polymer({
is: 'paper-checkbox',
behaviors: [
|
eb240478
Luigi Serra
public room cards...
|
227
|
Polymer.PaperCheckedElementBehavior
|
73bcce88
luigser
COMPONENTS
|
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
|
],
hostAttributes: {
role: 'checkbox',
'aria-checked': false,
tabindex: 0
},
properties: {
/**
* Fired when the checked state changes due to user interaction.
*
* @event change
*/
/**
* Fired when the checked state changes.
*
* @event iron-change
*/
|
e619a3b0
Luigi Serra
Controllet cross ...
|
248
249
250
251
252
|
ariaActiveAttribute: {
type: String,
value: 'aria-checked'
}
},
|
73bcce88
luigser
COMPONENTS
|
253
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
254
255
|
_computeCheckboxClass: function(checked, invalid) {
var className = '';
|
73bcce88
luigser
COMPONENTS
|
256
|
if (checked) {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
257
|
className += 'checked ';
|
73bcce88
luigser
COMPONENTS
|
258
|
}
|
e619a3b0
Luigi Serra
Controllet cross ...
|
259
260
261
262
|
if (invalid) {
className += 'invalid';
}
return className;
|
73bcce88
luigser
COMPONENTS
|
263
264
265
|
},
_computeCheckmarkClass: function(checked) {
|
e619a3b0
Luigi Serra
Controllet cross ...
|
266
|
return checked ? '' : 'hidden';
|
eb240478
Luigi Serra
public room cards...
|
267
268
269
270
271
272
|
},
// create ripple inside the checkboxContainer
_createRipple: function() {
this._rippleContainer = this.$.checkboxContainer;
return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
|
73bcce88
luigser
COMPONENTS
|
273
|
}
|
eb240478
Luigi Serra
public room cards...
|
274
|
|
e619a3b0
Luigi Serra
Controllet cross ...
|
275
|
});
|
73bcce88
luigser
COMPONENTS
|
276
|
</script>
|
73bcce88
luigser
COMPONENTS
|
277
|
</dom-module>
|