MediaWiki:Common.css/src/system/mediawiki.ui/checkbox.scss

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

Ancestors: / src / system / mediawiki.ui / checkbox.scss

Siblings:button.scsscheckbox.scssicon.scssinput.scss

Children: (none)

/********* mediawiki.ui.checkbox *********/

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.ui.checkbox/checkbox.less */

.mw-ui-checkbox {
	[ type='checkbox' ] {
		& + label::before {
			background-color: transparent;
			border-color: var(--ooui--checkbox-border-color);
			border-width: 2px;
		}

		&:checked + label::before {
			background-image: none;
			background-size: 1em 1em;
		}

		&:enabled {
			& + label::before {
				border-color: var(--ooui--checkbox-border-color);
			}

			&:focus + label::before {
				border-color: var(--ooui--checkbox-border-color);
				box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
				outline: 0;
			}

			&:hover + label::before {
				border-color: var(--ooui--checkbox-border-color--hover);
			}

			&:active + label::before {
				background-color: var(--ooui--checkbox-border-color);
				border-color: var(--ooui--checkbox-border-color);
				box-shadow: none;
			}

			&:checked {
				& + label::before {
					background-color: transparent;
					border-color: var(--ooui--checkbox-border-color);
					border-width: 2px;
					background-image: linear-gradient(transparent, transparent), var(--ooui--checkbox-icon);
				}

				&:focus + label::before {
					background-color: transparent;
					border-color: var(--ooui--checkbox-border-color);
					box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
				}

				&:hover + label::before {
					background-color: transparent;
					border-color: var(--ooui--checkbox-border-color--hover);
					background-image: linear-gradient(transparent, transparent), var(--ooui--checkbox-icon--hover);
				}

				&:active + label::before {
					background-color: transparent;
					border-color: var(--ooui--checkbox-border-color);
					box-shadow: none;
				}
			}
		}

		&:disabled + label::before {
			background-color: var(--ooui--checkbox-disabled-background-color);
			border-color: var(--ooui--checkbox-border-color);
			background-image: linear-gradient(transparent, transparent), var(--ooui--checkbox-icon);
		}
	}
}