MediaWiki:Common.css/src/system/OOUI/widgets/CheckboxInputWidget.scss

From Terraria Wiki
Jump to navigation Jump to search
/********* OOUI: CheckboxInputWidget *********/

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/CheckboxInputWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */

.oo-ui-checkboxInputWidget {
	[ type='checkbox' ] {
		& + span {
			background-color: transparent;
			border-color: var(--ooui--checkbox-border-color);
			border-width: 2px;
			filter: none;
		}

		&:indeterminate {
			& + span::before {
				background-color: var(--ooui--checkbox-border-color);
			}
		}

		&:disabled {
			& + span {
				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);
			}
		}
	}

	&.oo-ui-widget-enabled [ type='checkbox' ] {
		&:focus + span {
			border-color: var(--ooui--checkbox-border-color);
			box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
		}

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

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

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

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

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

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