feat: readonly state for checkbox

madsrasmussen · iOvergaard · commit 5e3cbdcc785a · 2024-07-08T14:31:16.000+02:00
diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -86,9 +86,11 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       input:checked:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected);
       }
+
       label:hover input:checked:not([disabled]) + #ticker {
         border-color: var(--uui-color-selected-emphasis);
       }
+
       label:focus input:checked + #ticker {
         border-color: var(--uui-color-selected-emphasis);
       }
@@ -144,7 +146,10 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
           var(--uui-color-focus);
       }
 
-      :host(:not([disabled])) label:active input:checked + #ticker::before {
+      :host(:not([disabled], [readonly]))
+        label:active
+        input:checked
+        + #ticker::before {
         /** Stretch when mouse down */
         transform: scale(0.9);
       }

Original file line number	Diff line number	Diff line change
`@@ -86,9 +86,11 @@ export class UUICheckboxElement extends UUIBooleanInputElement {`
`86`	`86`	`input:checked:not([disabled]) + #ticker {`
`87`	`87`	`border-color: var(--uui-color-selected);`
`88`	`88`	`}`
	`89`	`+`
`89`	`90`	`label:hover input:checked:not([disabled]) + #ticker {`
`90`	`91`	`border-color: var(--uui-color-selected-emphasis);`
`91`	`92`	`}`
	`93`	`+`
`92`	`94`	`label:focus input:checked + #ticker {`
`93`	`95`	`border-color: var(--uui-color-selected-emphasis);`
`94`	`96`	`}`
`@@ -144,7 +146,10 @@ export class UUICheckboxElement extends UUIBooleanInputElement {`
`144`	`146`	`var(--uui-color-focus);`
`145`	`147`	`}`
`146`	`148`
`147`		`- :host(:not([disabled])) label:active input:checked + #ticker::before {`
	`149`	`+ :host(:not([disabled], [readonly]))`
	`150`	`+ label:active`
	`151`	`+ input:checked`
	`152`	`+ + #ticker::before {`
`148`	`153`	`/** Stretch when mouse down */`
`149`	`154`	`transform: scale(0.9);`
`150`	`155`	`}`