diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index bed5353c3a..a6b36d42d6 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -97,7 +97,6 @@ export class CheckboxGroup { label="checkbox" name="nameOfCheckbox" helper-text="helperText" - checked >
@@ -113,9 +112,9 @@ export class CheckboxGroup { + checked + >Checkbox Slot
+
+
+
diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css index c2342b23da..66b11dacda 100644 --- a/packages/components/src/components/checkbox/checkbox.css +++ b/packages/components/src/components/checkbox/checkbox.css @@ -122,6 +122,11 @@ scale-checkbox { .checkbox__control { background: var(--color-disabled); } +.checkbox--disabled.checkbox--indeterminate + .checkbox__control-wrapper + .checkbox__control { + background: var(--color-disabled); +} .checkbox--disabled.checkbox--checked .checkbox__control-wrapper .checkbox__icon { @@ -139,6 +144,14 @@ scale-checkbox { border-color: var(--color-primary-hover); background: var(--color-primary-hover); } +.checkbox--enabled.checkbox--indeterminate + input:hover + ~ .checkbox__control-wrapper + .checkbox__control { + box-shadow: none; + border-color: var(--color-primary-hover); + background: var(--color-primary-hover); +} .checkbox--checked.checkbox--eanabled input:active ~ .checkbox__control-wrapper @@ -150,6 +163,17 @@ scale-checkbox { border-color: var(--color-primary-active); background: var(--color-primary-active); } +.checkbox--indeterminate.checkbox--eanabled + input:active + ~ .checkbox__control-wrapper + .checkbox__control/* , +.checkbox + input:checked:not([disabled]) + ~ .checkbox__control-wrapper:active + .checkbox__control */{ + border-color: var(--color-primary-active); + background: var(--color-primary-active); +} .checkbox--enabled.checkbox--checked input:active ~ .checkbox__control-wrapper @@ -167,6 +191,12 @@ scale-checkbox { border: var(--scl-spacing-1) solid var(--color-primary); background: var(--color-primary); } +.checkbox--enabled.checkbox--indeterminate +.checkbox__control-wrapper +.checkbox__control { + border: var(--scl-spacing-1) solid var(--color-primary); + background: var(--color-primary); +} .checkbox.checkbox--disabled .checkbox__control-wrapper .checkbox__control { border-color: var(--color-disabled); }