feat: expand condition selectors for richer state styling
This commit is contained in:
23
src/index.ts
23
src/index.ts
@@ -185,11 +185,26 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
|
||||
},
|
||||
conditions: {
|
||||
extend: {
|
||||
active: '&:is(:active, [data-active], [data-state="active"], [data-state="open"])',
|
||||
checked: '&:is(:checked, [data-checked], [data-state="checked"])',
|
||||
disabled: '&:is(:disabled, [data-disabled], [data-state="disabled"])',
|
||||
active: '&:is(:active, [data-active], [data-state="open"], [data-state="on"])',
|
||||
inactive: '&:is(:not(:active), [data-inactive], [data-state="closed"], [data-state="off"])',
|
||||
checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"], [data-state="on"])',
|
||||
unchecked:
|
||||
'&:is(:not(:checked), [data-unchecked], [aria-checked=false], [data-state="unchecked"], [data-state="off"])',
|
||||
expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="open"])',
|
||||
indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
|
||||
open: '&:is(:open, [open], [data-open], [data-state="open"])'
|
||||
selected: '&:is([aria-selected=true], [data-selected], [data-state="checked"])',
|
||||
open: '&:is([open], [data-state="open"])',
|
||||
complete: '&:is([data-state="complete"])',
|
||||
loading: '&:is([data-loading], [aria-busy=true], [data-state="loading"])',
|
||||
visible: '&:is([data-visible], [data-state="visible"])',
|
||||
closed: '&:is([data-state="closed"])',
|
||||
sideLeft: '&:is([data-side="left"])',
|
||||
sideRight: '&:is([data-side="right"])',
|
||||
sideTop: '&:is([data-side="top"])',
|
||||
sideBottom: '&:is([data-side="bottom"])',
|
||||
alignStart: '&:is([data-align="start"])',
|
||||
alignCenter: '&:is([data-align="center"])',
|
||||
alignEnd: '&:is([data-align="end"])'
|
||||
}
|
||||
},
|
||||
globalCss: {
|
||||
|
||||
Reference in New Issue
Block a user