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

From Terraria Wiki
Jump to navigation Jump to search
@use '../mixins';
/********* OOUI: TagMultiselectWidget *********/

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

.oo-ui-tagMultiselectWidget {
	&-handle {
		border: 1px solid var(--ooui--textarea-border-color);

		.oo-ui-tagMultiselectWidget-group {
			> input {
				color: var(--theme-text-color);

				@include mixins.mw-placeholder();
			}
		}
	}

	&.oo-ui-tagMultiselectWidget-outlined {
		.oo-ui-tagMultiselectWidget-handle {
			background-color: var(--ooui--textarea-readonly-background-color);
		}
	}

	&.oo-ui-widget-enabled {
		background-color: var(--ooui--textarea-background-color);

		&.oo-ui-tagMultiselectWidget-inlined {
			&:hover .oo-ui-tagMultiselectWidget-handle {
				border-color: var(--ooui--textarea-border-color--hover);
			}

			&.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
				border-color: var(--ooui--textarea-border-color--focus);
				box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
			}

			&.oo-ui-flaggedElement-invalid {
				.oo-ui-tagMultiselectWidget-handle,
				&:hover .oo-ui-tagMultiselectWidget-handle {
					border-color: var(--ooui--textarea-invalid-border-color);
				}
			}
		}

		&.oo-ui-tagMultiselectWidget-outlined {
			background-color: var(--ooui--textarea-readonly-background-color);
			background-color: transparent;

			.oo-ui-tagItemWidget.oo-ui-widget-enabled {
				background-color: var(--ooui--tagitem-background-color);
			}

			&.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
				border-color: var(--ooui--textarea-invalid-border-color);
			}
		}

		&.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
			color: var(--ooui--textarea-invalid-border-color);
		}
	}

	&.oo-ui-widget-disabled &-handle {
		background-color: var(--ooui--textarea-disabled-background-color);
		color: var(--ooui--textarea-disabled-color);
		text-shadow: none;
		border-color: var(--ooui--textarea-disabled-border-color);
	}
}