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

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

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

.oo-ui-radioInputWidget {
	[ type='radio' ] {
		& + span {
			background-color: transparent;
			border-color: var(--ooui--radiobutton-border-color);
			border-width: 3px;

			&::before {
				top: 2.5px;
				left: 2.5px;
				right: 2.5px;
				bottom: 2.5px;
			}
		}

		&:checked {
			& + span,
			&:hover + span,
			&:focus:hover + span {
				border-width: 3px;

				&:before {
					background-color: var(--ooui--radiobutton-border-color);
				}
			}
		}

		&:disabled {
			& + span {
				background-color: var(--ooui--radiobutton-disabled-background-color);
				border-color: var(--ooui--radiobutton-border-color);
			}

			&:checked + span {
				background-color: var(--ooui--radiobutton-disabled-background-color);
			}
		}
	}

	&.oo-ui-widget-enabled [ type='radio' ] {
		&:hover + span {
			border-color: var(--ooui--radiobutton-border-color--hover);
		}

		&:active + span {
			background-color: var(--ooui--radiobutton-border-color);
			border-color: var(--ooui--radiobutton-border-color);
		}

		&:checked {
			& + span {
				border-color: var(--ooui--radiobutton-border-color);
			}

			&:focus + span {
				box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);

				&::before {
					border-color: transparent;
				}
			}

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

			&:active + span {
				border-color: var(--ooui--radiobutton-border-color);
				box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);

				&::before {
					border-color: transparent;
				}
			}
		}
	}
}