diff --git a/core/api.txt b/core/api.txt index 0c58b40aa5..90dd898080 100644 --- a/core/api.txt +++ b/core/api.txt @@ -225,6 +225,7 @@ ion-checkbox,css-prop,--border-radius ion-checkbox,css-prop,--border-style ion-checkbox,css-prop,--border-width ion-checkbox,css-prop,--checkmark-color +ion-checkbox,css-prop,--checkmark-width ion-checkbox,css-prop,--size ion-checkbox,css-prop,--transition diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss index ed49019846..0c3b6e9a77 100644 --- a/core/src/components/checkbox/checkbox.md.scss +++ b/core/src/components/checkbox/checkbox.md.scss @@ -10,6 +10,7 @@ --border-width: #{$checkbox-md-icon-border-width}; --border-style: #{$checkbox-md-icon-border-style}; --border-color: #{$checkbox-md-icon-border-color-off}; + --checkmark-width: 3; // Background --background: #{$checkbox-md-icon-background-color-off}; @@ -27,7 +28,6 @@ .checkbox-icon path { stroke-dasharray: 30; stroke-dashoffset: 30; - stroke-width: 3; } // Material Design Checkbox: Checked / Indeterminate diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss index d18cc2fcb9..2af31588e0 100644 --- a/core/src/components/checkbox/checkbox.scss +++ b/core/src/components/checkbox/checkbox.scss @@ -19,10 +19,12 @@ * @prop --transition: Transition of the checkbox icon * * @prop --checkmark-color: Color of the checkbox checkmark when checked + * @prop --checkmark-width: Stroke width of the checkbox checkmark */ --background-checked: #{ion-color(primary, base)}; --border-color-checked: #{ion-color(primary, base)}; --checkmark-color: #{ion-color(primary, contrast)}; + --checkmark-width: 1; --transition: none; display: inline-block; @@ -65,7 +67,7 @@ button { .checkbox-icon path { fill: none; stroke: var(--checkmark-color); - stroke-width: 1; + stroke-width: var(--checkmark-width); opacity: 0; } diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md index 094d573e6b..9fe619b517 100644 --- a/core/src/components/checkbox/readme.md +++ b/core/src/components/checkbox/readme.md @@ -218,6 +218,7 @@ export const CheckboxExample: React.FC = () => ( | `--border-style` | Border style of the checkbox icon | | `--border-width` | Border width of the checkbox icon | | `--checkmark-color` | Color of the checkbox checkmark when checked | +| `--checkmark-width` | Stroke width of the checkbox checkmark | | `--size` | Size of the checkbox icon | | `--transition` | Transition of the checkbox icon | diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html index 6ed2ee8ab0..69634c0249 100644 --- a/core/src/components/checkbox/test/basic/index.html +++ b/core/src/components/checkbox/test/basic/index.html @@ -76,6 +76,11 @@ + + Checkmark width + + + Unchecked by Default