Permalink
Browse files

feat(checkbox): add disabled state

  • Loading branch information...
ZHollingshead committed Apr 14, 2017
1 parent 67d73ff commit fbcf50b19e32d000edf0307a1f7909c691070161
Showing with 28 additions and 1 deletion.
  1. +23 −0 src/checkbox/ux-checkbox-theme.css
  2. +5 −1 src/checkbox/ux-checkbox.ts
@@ -54,3 +54,26 @@ styles.checkbox.checked>.box>.background-box {
transform: scale3d(1, 1, 1);
border-radius: 0;
}
+
+styles.checkbox[disabled=""],
+styles.checkbox[disabled="true"] {
+ pointer-events: none;
+ cursor: default;
+}
+
+styles.checkbox[disabled=""]>.box:hover,
+styles.checkbox[disabled="true"]>.box:hover {
+ border: ${disabledBorder || $swatches.grey.p400} solid 2px;
+ border-radius: 3px;
+}
+
+styles.checkbox.checked[disabled=""]>.box,
+styles.checkbox.checked[disabled="true"]>.box {
+ background-color: ${disabledBackground || $swatches.grey.p500};
+ border: ${disabledBackground || $swatches.grey.p500} solid 2px;
+}
+
+styles.checkbox[disabled=""]>.box>.background-box::after,
+styles.checkbox[disabled="true"]>.box>.background-box::after {
+ border-color: ${disabledForeground || $swatches.white};
+}
@@ -9,7 +9,7 @@ import { processDesignAttributes } from '../designs/design-attributes';
@customElement('ux-checkbox')
@processAttributes(processDesignAttributes)
export class UxCheckbox implements Themable {
- @bindable public disabled = false;
+ @bindable public disabled: any = null;
@bindable public effect = null;
@bindable public matcher = (a: any, b: any) => a === b;
@bindable public model: any;
@@ -59,6 +59,10 @@ export class UxCheckbox implements Themable {
}
public toggleCheckbox() {
+ if (this.disabled === true || this.disabled === '') {
+ return;
+ }
+
const elementValue = this.model ? this.model : this.value;
if (Array.isArray(this.checked)) {

0 comments on commit fbcf50b

Please sign in to comment.