diff --git a/README.md b/README.md index d563b3b..d713e2c 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ Available attributes: * isDisabled: Boolean, disabled state * labelTextTransform: String, values: 'capitalize' or 'uppercase', * readonly: Boolean, default: false +* unchangedReadonlyStyle: Boolean, default: true - readonly state will look like active state, if this property is false, readonly style will have the colors reversed ## Styling diff --git a/bower.json b/bower.json index 58bbd61..9620ef0 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "etools-checkable-input", "description": "Checkbox or radio input with label aligned top, right, bottom and left.", - "version": "1.0.6", + "version": "1.0.7", "license": "https://github.com/unicef-polymer/etools-checkable-input/blob/master/LICENSE.md", "main": "etools-checkable-input.html", "dependencies": { diff --git a/etools-checkable-input.html b/etools-checkable-input.html index 2121647..8b520eb 100644 --- a/etools-checkable-input.html +++ b/etools-checkable-input.html @@ -70,7 +70,7 @@ max-width: calc(100% - 25px); } - :host(:not([readonly])) .disabled label { + :host .disabled label { color: var(--etools-checkable-input-disabled-color, #d1d1d1); cursor: not-allowed; } @@ -96,16 +96,25 @@ cursor: default; } + :host([readonly][checked][unchanged-readonly-style]) { + --paper-checkbox-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2); + --paper-radio-button-unchecked-color: var(--etools-checkable-input-checked-color, #4a90e2); + } + :host([readonly][is-disabled][unchanged-readonly-style]), + :host([readonly][is-disabled][checked][unchanged-readonly-style]) { + --paper-checkbox-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373); + --paper-radio-button-unchecked-color: var(--etools-checkable-input-unchecked-color, #737373); + }