MediaWiki:Common.css/src/system/OOUI/ mixins.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.

// mixins for OOUI

// adapted from: https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/common.less
@mixin mw-frameless-button-colored($child, $type) {
	// $type is "progressive" or "destructive"
	> #{$child} {
		color: var(--ooui--button-#{$type}-color);
	}
	> #{$child}:hover {
		color: var(--ooui--button-#{$type}-color--hover);
	}
	> #{$child}:active,
	&.oo-ui-buttonElement-pressed > #{$child} {
		color: var(--ooui--button-#{$type}-color);
		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);
	}
}

// adapted from: https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/common.less
@mixin mw-framed-button-colored($child, $type) {
	// $type is "progressive" or "destructive"
	> #{$child} {
		color: var(--ooui--button-#{$type}-color);
	}
	> #{$child}:hover {
		color: var(--ooui--button-#{$type}-color--hover);
		background: var(--ooui--button-background--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);
	}
	> #{$child}:focus {
		border-top: var(--ooui--button-border-top);
		border-right: var(--ooui--button-border-right);
		border-bottom: var(--ooui--button-border-bottom);
		border-left: var(--ooui--button-border-left);
		box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-#{$type}-box-shadow--focus);
	}
	> #{$child}:active,
	&.oo-ui-buttonElement-pressed > #{$child},
	&.oo-ui-buttonElement-active > #{$child},
	&.oo-ui-popupToolGroup-active > #{$child} {
		background: var(--ooui--button-background);
		color: var(--ooui--button-#{$type}-color);
		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);
	}
}

// adapted from: https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/common.less
@mixin mw-framed-primary-button-colored($child, $type) {
	// $type is "progressive" or "destructive"
	> #{$child} {
		color: var(--ooui--button-#{$type}-color);
		background: var(--ooui--button-background);
		border-color: var(--ooui--button-#{$type}-primary-border-color);
	}
	> #{$child}:hover {
		color: var(--ooui--button-#{$type}-color--hover);
		background: var(--ooui--button-background--hover);
		border-color: var(--ooui--button-#{$type}-primary-border-color--hover);
	}
	> #{$child}:focus {
		border-color: var(--ooui--button-#{$type}-primary-border-color);
		box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-#{$type}-box-shadow--focus);
	}
	> #{$child}:active,
	&.oo-ui-buttonElement-pressed > #{$child},
	&.oo-ui-buttonElement-active > #{$child},
	&.oo-ui-popupToolGroup-active > #{$child} {
		color: var(--ooui--button-#{$type}-color);
		background: var(--ooui--button-background);
		border-color: var(--ooui--button-#{$type}-primary-border-color);
	}
}

// adapted from: https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/common.less
@mixin oo-ui-placeholder {
	// WebKit, Blink, Edge
	&::-webkit-input-placeholder {
		@content;
	}
	// Internet Explorer 10-11
	&:-ms-input-placeholder {
		@content;
	}
	// Firefox 19-50
	&::-moz-placeholder {
		@content;
	}
	// W3C Standard Selectors Level 4
	&::placeholder {
		@content;
	}
}

// adapted from: https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less
@mixin mw-placeholder {
	@include oo-ui-placeholder {
		color: var(--ooui--textarea-placeholder-color);
	}
}
Retrieved from "https://terraria.wiki.gg/index.php?title=MediaWiki:Common.css/src/system/OOUI/_mixins.scss&oldid=869231"