MediaWiki:Common.css/src/system/mediawiki.ui/button.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 / button.scss

Siblings: button.scss checkbox.scss icon.scss input.scss

Children: (none)

/********* mediawiki.ui.button *********/

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

/* the rules here can seem a bit strange/redundant/counter-intuitive, but that's necessary to overwrite the default styling */

.mw-ui-button {

	@mixin button-border($hover: false) {
		$hover: if($hover, "--hover", "");
		border-top: var(--ooui--button-border-top#{$hover});
		border-right: var(--ooui--button-border-right#{$hover});
		border-bottom: var(--ooui--button-border-bottom#{$hover});
		border-left: var(--ooui--button-border-left#{$hover});
	}

	@mixin framed-button-disabled {
		background: var(--ooui--button-disabled-background);
		color: var(--ooui--button-disabled-color);
		border-top: var(--ooui--button-disabled-border-top);
		border-right: var(--ooui--button-disabled-border-right);
		border-bottom: var(--ooui--button-disabled-border-bottom);
		border-left: var(--ooui--button-disabled-border-left);
	}

	border-radius: 4px;
	background: var(--ooui--button-background);
	color: var(--ooui--button-color);
	@include button-border;

	&:not( :disabled ) {
		box-shadow: var(--ooui--button-box-shadow);
		transition: none;

		&:visited {
			color: var(--ooui--button-color);
		}

		&:hover {
			background: var(--ooui--button-background--hover);
			color: var(--ooui--button-color--hover);
			@include button-border($hover: true);
		}

		&:focus {
			color: var(--ooui--button-color--hover);
			@include button-border($hover: true);
			box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-box-shadow--focus);
		}

		&:active,
		&.is-on {
			background: var(--ooui--button-background);
			color: var(--ooui--button-color);
			@include button-border($hover: true);
		}
	}

	&:disabled {
		@include framed-button-disabled;
	}


	&.mw-ui-quiet,
	&.mw-ui-quiet.mw-ui-progressive,
	&.mw-ui-quiet.mw-ui-destructive {

		&:not( :disabled ) {
			border-radius: 0;
			background: unset;
			color: var(--ooui--button-color);
			border-width: 0;
			box-shadow: none;

			&:hover {
				background: unset;
				color: var(--ooui--button-color--hover);
				border-width: 0;
			}

			&:focus {
				@include button-border($hover: true);
				box-shadow: var(--ooui--button-box-shadow--focus);
			}

			&:active {
				background: unset;
				color: var(--ooui--button-color);
				@include button-border($hover: true);
			}
		}

		&:disabled,
		&:disabled:hover,
		&:disabled:active {
			border-radius: 0;
			background: unset;
			color: var(--ooui--button-disabled-color);
			border-width: 0;
			box-shadow: none;
		}
	}

	@mixin framed-flagged-button($type) {
		// $type is "progressive" or "destructive"
		&.mw-ui-#{$type} {

			&:not( :disabled ) {
				border-radius: 4px;
				background: var(--ooui--button-background);
				color: var(--ooui--button-#{$type}-color);
				@include button-border;
				border-color: var(--ooui--button-#{$type}-primary-border-color);

				&:hover {
					background: var(--ooui--button-background--hover);
					color: var(--ooui--button-#{$type}-color--hover);
					@include button-border($hover: true);
					border-color: var(--ooui--button-#{$type}-primary-border-color--hover);
				}

				&:focus {
					@include button-border;
					border-color: var(--ooui--button-#{$type}-primary-border-color);
					box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-#{$type}-box-shadow--focus);
				}

				&:active {
					background: var(--ooui--button-background);
					color: var(--ooui--button-#{$type}-color);
					@include button-border($hover: true);
					border-color: var(--ooui--button-#{$type}-primary-border-color);
				}
			}

			&:disabled {
				@include framed-button-disabled;
			}

			&.mw-ui-quiet {

				&:not( :disabled ) {
					color: var(--ooui--button-#{$type}-color);

					&:hover {
						color: var(--ooui--button-#{$type}-color--hover);
					}

					&:focus {
						@include button-border($hover: true);
						box-shadow: var(--ooui--button-box-shadow--focus);
					}

					&:active {
						color: var(--ooui--button-#{$type}-color);
						@include button-border($hover: true);
					}
				}
			}
		}
	}

	@include framed-flagged-button("progressive");
	@include framed-flagged-button("destructive");

}

input[type="submit"].mw-ui-button {
	/* this is necessary because of a rule in base.scss */
	color: var(--ooui--button-color);
}
Retrieved from "https://terraria.wiki.gg/index.php?title=MediaWiki:Common.css/src/system/mediawiki.ui/button.scss&oldid=894392"