dile-checkbox
Advanced tools
Comparing version
@@ -58,2 +58,6 @@ import { html, css, LitElement } from 'lit-element'; | ||
} | ||
.disabled .label{ | ||
color: var(--dile-checkbox-label-disabled-color, #303030); | ||
} | ||
`; | ||
@@ -60,0 +64,0 @@ } |
{ | ||
"name": "dile-checkbox", | ||
"version": "1.0.6", | ||
"version": "1.1.0", | ||
"description": "Webcomponent dile-checkbox following open-wc recommendations", | ||
@@ -5,0 +5,0 @@ "author": "@midesweb", |
@@ -5,2 +5,4 @@ # \<dile-checkbox> | ||
Let's [go to DEMOS page](https://dile-checkbox.polydile.com)! | ||
## Installation | ||
@@ -33,2 +35,12 @@ ```bash | ||
ustom property | Description | Default | ||
----------------|-------------|--------- | ||
--dile-checkbox-checked-color | Checked color for check control | #30a030 | ||
--dile-checkbox-unchecked-color | Unchecked color for check control | #ddd | ||
--dile-checkbox-fill-color | Fill color for the check control | #fff | ||
--dile-checkbox-unchecked-fill-color | Checked color for check control when is in unchecked status| #fff | ||
--dile-checkbox-label-color | label regular color | #303030 | ||
--dile-checkbox-label-disabled-color | Label color for disabled status | #303030 | ||
--dile-checkbox-font-weight | Font weight for te label | normal | ||
``` | ||
@@ -43,2 +55,3 @@ <style> | ||
--dile-checkbox-font-weight: bold; | ||
--dile-checkbox-label-disabled-color: #ddd; | ||
} | ||
@@ -45,0 +58,0 @@ </style> |
@@ -10,3 +10,2 @@ import { storiesOf, html, withKnobs, withClassPropertiesKnobs } from '@open-wc/demoing-storybook'; | ||
.addDecorator(withKnobs) | ||
.add('Documentation', () => withClassPropertiesKnobs(DileCheckbox), { notes: { markdown: readme } }) | ||
.add( | ||
@@ -16,3 +15,3 @@ 'Default checkbox', | ||
<dile-checkbox>Element label</dile-checkbox> | ||
`, | ||
`, | ||
) | ||
@@ -30,2 +29,3 @@ .add( | ||
--dile-checkbox-font-weight: bold; | ||
--dile-checkbox-label-disabled-color: #ddd; | ||
font-size: 1.5em; | ||
@@ -35,3 +35,3 @@ } | ||
<dile-checkbox class="customized">Mark as danger!</dile-checkbox> | ||
`, | ||
`, | ||
).add( | ||
@@ -41,3 +41,4 @@ 'Disabled checkbox', | ||
<dile-checkbox disabled>Disabled checkbox</dile-checkbox> | ||
`, | ||
); | ||
`, | ||
) | ||
.add('Documentation', () => withClassPropertiesKnobs(DileCheckbox), { notes: { markdown: readme } }); |
18297
5.03%169
2.42%60
27.66%