js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add custom property for checkbox icon color

Browse Source
This commit is contained in:
lindsaym-fa
2024-12-03 10:52:59 -05:00
parent 9080810c20
commit ca20f4de22
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/checkbox/checkbox.styles.ts
View File

@@ -13,6 +13,7 @@ export default css`
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--toggle-size: calc(1em * var(--wa-form-control-value-line-height));
display: inline-block;
@@ -90,7 +91,7 @@ export default css`
/* Checked/indeterminate */
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-on-loud);
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
}

1
src/components/checkbox/checkbox.ts
View File

@@ -51,6 +51,7 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
* @cssproperty --border-style - The style of the checkbox's borders.
* @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
* @cssproperty --checked-icon-color - The color of the checkbox's icon.
* @cssproperty --toggle-size - The size of the checkbox.
*/
@customElement('wa-checkbox')