+69
-4
lines changedFilter options
+69
-4
lines changed Original file line number Diff line number Diff line change
@@ -52,6 +52,12 @@
52 52
type: 'String',
53 53
description: 'The checkbox unique id.',
54 54
defaults: 'a random string'
55 +
},
56 +
{
57 +
name: 'indeterminate',
58 +
type: 'Boolean',
59 +
description: 'Enables the indeterminate look of the checkbox.',
60 +
defaults: 'false'
55 61
}
56 62
]
57 63
},
@@ -9,6 +9,8 @@
9 9
<md-checkbox v-model="obj" :value="obj1">Object 1</md-checkbox>
10 10
<md-checkbox v-model="obj" :value="obj2">Object 2</md-checkbox>
11 11 12 +
<md-checkbox v-model="indeterminate" indeterminate>Indeterminate</md-checkbox>
13 + 12 14
<table>
13 15
<tr>
14 16
<th>Array</th>
@@ -40,7 +42,8 @@
40 42
disabled: true,
41 43
obj1: {name: 'obj1'},
42 44
obj2: {name: 'obj2'},
43 -
obj: null
45 +
obj: null,
46 +
indeterminate: true
44 47
})
45 48
}
46 49
</script>
@@ -2,7 +2,7 @@
2 2
<div class="md-checkbox" :class="[$mdActiveTheme, checkClasses]">
3 3
<div class="md-checkbox-container" @click.stop="toggleCheck">
4 4
<md-ripple md-centered :md-active.sync="rippleActive" :md-disabled="disabled">
5 -
<input type="checkbox" v-bind="{ id, name, disabled, required, value }">
5 +
<input type="checkbox" v-bind="{ id, name, disabled, required, value }" :indeterminate.prop="indeterminate">
6 6
</md-ripple>
7 7
</div>
8 8
@@ -115,6 +115,22 @@
115 115
}
116 116
}
117 117 118 +
.md-checkbox.md-indeterminate {
119 +
.md-checkbox-container {
120 +
&:after {
121 +
width: 12px;
122 +
height: 2px;
123 +
top: 50%;
124 +
left: 50%;
125 +
z-index: 7;
126 +
border-style: solid;
127 +
border-width: 0 0 2px;
128 +
opacity: 0;
129 +
transform: translate(-50%, -50%) !important;
130 +
}
131 +
}
132 +
}
133 + 118 134
.md-checkbox.md-checked {
119 135
.md-checkbox-container {
120 136
&:after {
@@ -12,7 +12,8 @@ export default {
12 12
},
13 13
name: [String, Number],
14 14
required: Boolean,
15 -
disabled: Boolean
15 +
disabled: Boolean,
16 +
indeterminate: Boolean
16 17
},
17 18
model: {
18 19
prop: 'model',
@@ -43,7 +44,8 @@ export default {
43 44
return {
44 45
'md-checked': this.isSelected,
45 46
'md-disabled': this.disabled,
46 -
'md-required': this.required
47 +
'md-required': this.required,
48 +
'md-indeterminate': this.indeterminate
47 49
}
48 50
}
49 51
},
@@ -15,6 +15,19 @@
15 15
}
16 16
}
17 17 18 +
&.md-indeterminate {
19 +
.md-checkbox-container {
20 +
border-color: rgba(#000, .54);
21 +
background-color: rgba(#fff, .3);
22 +
&:after {
23 +
border-color: rgba(#000, .54);
24 +
}
25 +
}
26 +
.md-ripple {
27 +
color: rgba(#000, .54);
28 +
}
29 +
}
30 + 18 31
&.md-checked.md-primary {
19 32
.md-checkbox-container {
20 33
@include md-theme-property(background-color, primary);
@@ -27,6 +40,18 @@
27 40
}
28 41 29 42
@if md-get-theme-mode() == light {
43 +
&.md-indeterminate {
44 +
.md-checkbox-container {
45 +
border-color: rgba(#000, .54);
46 +
background-color: transparent;
47 +
&:after {
48 +
border-color: rgba(#000, .54);
49 +
}
50 +
}
51 +
.md-ripple {
52 +
color: rgba(#000, .54);
53 +
}
54 +
}
30 55
.md-checkbox-container {
31 56
border-color: rgba(#000, .54);
32 57
}
@@ -44,6 +69,19 @@
44 69
}
45 70
}
46 71
} @else {
72 +
&.md-indeterminate {
73 +
.md-checkbox-container {
74 +
border-color: rgba(#fff, .7);
75 +
background-color: transparent;
76 +
&:after {
77 +
border-color: rgba(#fff, .7);
78 +
}
79 +
}
80 +
.md-ripple {
81 +
color: rgba(#fff, .7);
82 +
}
83 +
}
84 + 47 85
.md-checkbox-container {
48 86
border-color: rgba(#fff, .7);
49 87
}
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4