mediawiki-skins-Citizen/skinStyles/mediawiki/ui/mediawiki.ui.checkbox.less
alistair3149 fc47692421
feat(core): rename border-color variables and increase contrast
Align variable names with Codex
2024-04-19 15:20:59 -04:00

68 lines
1.6 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for MediaWiki
* Module: mediawiki.ui.checkbox
* Version: REL1_39
*
* Date: 2022-11-30
*/
.mw-ui-checkbox {
[ type='checkbox' ] {
& + label::before {
// Show background when hovered
background-color: transparent;
border-color: var( --border-color-interactive );
border-radius: var( --border-radius--small );
}
&:enabled {
&:focus + label::before {
background-color: var( --color-surface-0 );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary );
}
&:hover + label::before {
background-color: var( --color-surface-0 );
border-color: var( --color-primary--hover );
}
&:active + label::before {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
box-shadow: inset 0 0 0 1px var( --color-primary--active );
}
&:checked {
& + label::before {
background-color: var( --color-primary );
border-color: var( --color-primary );
}
&:focus + label::before {
background-color: var( --color-primary );
border-color: var( --color-primary );
box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff;
}
&:hover + label::before {
background-color: var( --color-primary--hover );
border-color: var( --color-primary--hover );
}
&:active + label::before {
background-color: var( --color-primary--active );
border-color: var( --color-primary--active );
}
}
}
&:disabled + label::before {
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
}
}