|
|
@ -18,17 +18,17 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
props: {
|
|
|
|
itemValue: { default: null },
|
|
|
|
itemValue: {default: null},
|
|
|
|
itemSlug: { default: 'id' },
|
|
|
|
itemSlug: {default: 'id'},
|
|
|
|
itemText: { default: null },
|
|
|
|
itemText: {default: null},
|
|
|
|
text: { default: " " },
|
|
|
|
text: {default: " "},
|
|
|
|
item: { default: {} },
|
|
|
|
item: {default: () => ({})},
|
|
|
|
color: { default: "Red" },
|
|
|
|
color: {default: "Red"},
|
|
|
|
value: { type: Array }
|
|
|
|
value: {type: Array}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: function() {
|
|
|
|
data: function () {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
IconClass: "WMi-" + this.Icon,
|
|
|
|
IconClass: "WMi-" + this.Icon,
|
|
|
|
rand: Math.random(),
|
|
|
|
rand: Math.random(),
|
|
|
@ -99,7 +99,7 @@ export default {
|
|
|
|
this.values = this.computedValues(value);
|
|
|
|
this.values = this.computedValues(value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
|
|
|
@ -128,7 +128,7 @@ export default {
|
|
|
|
padding-right: 30px;
|
|
|
|
padding-right: 30px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox label>span {
|
|
|
|
.WM-Checkbox label > span {
|
|
|
|
display: block;
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
right: 0;
|
|
|
@ -137,7 +137,7 @@ export default {
|
|
|
|
transition-duration: 0.3s;
|
|
|
|
transition-duration: 0.3s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox label>span.inc {
|
|
|
|
.WM-Checkbox label > span.inc {
|
|
|
|
background: #fff;
|
|
|
|
background: #fff;
|
|
|
|
right: -10px;
|
|
|
|
right: -10px;
|
|
|
|
top: -10px;
|
|
|
|
top: -10px;
|
|
|
@ -149,7 +149,7 @@ export default {
|
|
|
|
-webkit-border-radius: 50% !important;
|
|
|
|
-webkit-border-radius: 50% !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox label>.box {
|
|
|
|
.WM-Checkbox label > .box {
|
|
|
|
top: 1px;
|
|
|
|
top: 1px;
|
|
|
|
border: 2px solid #d0d7de;
|
|
|
|
border: 2px solid #d0d7de;
|
|
|
|
height: 20px;
|
|
|
|
height: 20px;
|
|
|
@ -160,11 +160,11 @@ export default {
|
|
|
|
transition-delay: 0.2s;
|
|
|
|
transition-delay: 0.2s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.ie .WM-Checkbox label>.box {
|
|
|
|
.ie .WM-Checkbox label > .box {
|
|
|
|
top: 2px;
|
|
|
|
top: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox label>.check {
|
|
|
|
.WM-Checkbox label > .check {
|
|
|
|
top: 2px;
|
|
|
|
top: 2px;
|
|
|
|
left: 6px;
|
|
|
|
left: 6px;
|
|
|
|
width: 20px;
|
|
|
|
width: 20px;
|
|
|
@ -182,42 +182,42 @@ export default {
|
|
|
|
transition-delay: 0.3s;
|
|
|
|
transition-delay: 0.3s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox label>span.inc {
|
|
|
|
.WM-Checkbox label > span.inc {
|
|
|
|
-webkit-animation: growCircle 0.3s ease;
|
|
|
|
-webkit-animation: growCircle 0.3s ease;
|
|
|
|
-moz-animation: growCircle 0.3s ease;
|
|
|
|
-moz-animation: growCircle 0.3s ease;
|
|
|
|
animation: growCircle 0.3s ease;
|
|
|
|
animation: growCircle 0.3s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox input[type=checkbox]:checked~label>.box {
|
|
|
|
.WM-Checkbox input[type=checkbox]:checked ~ label > .box {
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
-webkit-transform: scale(0) rotate(180deg);
|
|
|
|
-webkit-transform: scale(0) rotate(180deg);
|
|
|
|
-moz-transform: scale(0) rotate(180deg);
|
|
|
|
-moz-transform: scale(0) rotate(180deg);
|
|
|
|
transform: scale(0) rotate(180deg);
|
|
|
|
transform: scale(0) rotate(180deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox input[type=checkbox]:checked~label>.check {
|
|
|
|
.WM-Checkbox input[type=checkbox]:checked ~ label > .check {
|
|
|
|
opacity: 1;
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transform: scale(1) rotate(-45deg);
|
|
|
|
-webkit-transform: scale(1) rotate(-45deg);
|
|
|
|
-moz-transform: scale(1) rotate(-45deg);
|
|
|
|
-moz-transform: scale(1) rotate(-45deg);
|
|
|
|
transform: scale(1) rotate(-45deg);
|
|
|
|
transform: scale(1) rotate(-45deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled~label,
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled ~ label,
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled]~label {
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled] ~ label {
|
|
|
|
cursor: not-allowed;
|
|
|
|
cursor: not-allowed;
|
|
|
|
opacity: 0.7;
|
|
|
|
opacity: 0.7;
|
|
|
|
filter: alpha(opacity=70);
|
|
|
|
filter: alpha(opacity=70);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled~label>.box,
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled ~ label > .box,
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled]~label>.box {
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled] ~ label > .box {
|
|
|
|
cursor: not-allowed;
|
|
|
|
cursor: not-allowed;
|
|
|
|
opacity: 0.7;
|
|
|
|
opacity: 0.7;
|
|
|
|
filter: alpha(opacity=70);
|
|
|
|
filter: alpha(opacity=70);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled:checked~label>.check,
|
|
|
|
.WM-Checkbox input[type=checkbox]:disabled:checked ~ label > .check,
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled]:checked~label>.check {
|
|
|
|
.WM-Checkbox input[type=checkbox][disabled]:checked ~ label > .check {
|
|
|
|
cursor: not-allowed;
|
|
|
|
cursor: not-allowed;
|
|
|
|
opacity: 0.7;
|
|
|
|
opacity: 0.7;
|
|
|
|
filter: alpha(opacity=70);
|
|
|
|
filter: alpha(opacity=70);
|
|
|
@ -227,11 +227,11 @@ export default {
|
|
|
|
color: #e7505a;
|
|
|
|
color: #e7505a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-error label>.box {
|
|
|
|
.WM-Checkbox.has-error label > .box {
|
|
|
|
border-color: #e7505a;
|
|
|
|
border-color: #e7505a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-error label>.check {
|
|
|
|
.WM-Checkbox.has-error label > .check {
|
|
|
|
border-color: #e7505a;
|
|
|
|
border-color: #e7505a;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -239,11 +239,11 @@ export default {
|
|
|
|
color: #4eabe6;
|
|
|
|
color: #4eabe6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-info label>.box {
|
|
|
|
.WM-Checkbox.has-info label > .box {
|
|
|
|
border-color: #4eabe6;
|
|
|
|
border-color: #4eabe6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-info label>.check {
|
|
|
|
.WM-Checkbox.has-info label > .check {
|
|
|
|
border-color: #4eabe6;
|
|
|
|
border-color: #4eabe6;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -251,11 +251,11 @@ export default {
|
|
|
|
color: #5dc09c;
|
|
|
|
color: #5dc09c;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-success label>.box {
|
|
|
|
.WM-Checkbox.has-success label > .box {
|
|
|
|
border-color: #5dc09c;
|
|
|
|
border-color: #5dc09c;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-success label>.check {
|
|
|
|
.WM-Checkbox.has-success label > .check {
|
|
|
|
border-color: #5dc09c;
|
|
|
|
border-color: #5dc09c;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -263,11 +263,11 @@ export default {
|
|
|
|
color: #c8d046;
|
|
|
|
color: #c8d046;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-warning label>.box {
|
|
|
|
.WM-Checkbox.has-warning label > .box {
|
|
|
|
border-color: #c8d046;
|
|
|
|
border-color: #c8d046;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WM-Checkbox.has-warning label>.check {
|
|
|
|
.WM-Checkbox.has-warning label > .check {
|
|
|
|
border-color: #c8d046;
|
|
|
|
border-color: #c8d046;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|