MediaWiki:Common.css/src/system/codex/components/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 / codex / components / Button.scss

Siblings: Button.scss TextInput.scss

Children: (none)

@use '../mixins';
/********* Codex: Button *********/

/* overwriting styles from here:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v1.0.0/packages/codex/src/components/button/Button.vue#105 */

.cdx-button {

	&:enabled,
	&.cdx-button--fake-button--enabled {
		background: var(--ooui--button-background);
		color: var(--ooui--button-color);
		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);

		.cdx-button__icon {
			@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-color));
		}

		&:hover {
			background: var(--ooui--button-background--hover);
			color: var(--ooui--button-color--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);

			.cdx-button__icon {
				@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-color--hover));
			}
		}

		&:active,
		&.cdx-button--is-active {
			background: var(--ooui--button-background--hover);
			color: var(--ooui--button-progressive-color);
			border-color: var(--ooui--button-progressive-primary-border-color);

			.cdx-button__icon {
				@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
			}
		}

		&:focus:not( :active):not(.cdx-button--is-active) {
			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);
			box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-box-shadow--focus);
		}

		&.cdx-button--action-progressive {
			color: var(--ooui--button-progressive-color);

			.cdx-button__icon {
				@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
			}

			&:hover {
				color: var(--ooui--button-progressive-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);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color--hover));
				}
			}

			&:active,
			&.cdx-button--is-active {
				background: var(--ooui--button-background);
				color: var(--ooui--button-progressive-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);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
				}
			}

			&:focus:not( :active):not(.cdx-button--is-active) {
				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-progressive-box-shadow--focus);
			}
		}

		&.cdx-button--action-destructive {
			color: var(--ooui--button-destructive-color);

			.cdx-button__icon {
				@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
			}

			&:hover {
				color: var(--ooui--button-destructive-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);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color--hover));
				}
			}

			&:active,
			&.cdx-button--is-active {
				background: var(--ooui--button-background);
				color: var(--ooui--button-destructive-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);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
				}
			}

			&:focus:not( :active):not(.cdx-button--is-active) {
				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-destructive-box-shadow--focus);
			}
		}

		&.cdx-button--weight-primary {
			&.cdx-button--action-progressive {
				background: var(--ooui--button-background);
				color: var(--ooui--button-progressive-color);
				border-color: var(--ooui--button-progressive-primary-border-color);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
				}

				&:hover {
					background: var(--ooui--button-background--hover);
					color: var(--ooui--button-progressive-color--hover);
					border-color: var(--ooui--button-progressive-primary-border-color--hover);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
					}
				}

				&:active,
				&.cdx-button--is-active {
					background: var(--ooui--button-background);
					color: var(--ooui--button-progressive-color);
					border-color: var(--ooui--button-progressive-primary-border-color);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
					}
				}

				&:focus:not( :active):not(.cdx-button--is-active) {
					border-color: var(--ooui--button-progressive-primary-border-color);
					box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
				}
			}

			&.cdx-button--action-destructive {
				background: var(--ooui--button-background);
				color: var(--ooui--button-destructive-color);
				border-color: var(--ooui--button-destructive-primary-border-color);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
				}

				&:hover {
					background: var(--ooui--button-background--hover);
					color: var(--ooui--button-destructive-color--hover);
					border-color: var(--ooui--button-destructive-primary-border-color--hover);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
					}
				}

				&:active,
				&.cdx-button--is-active {
					background: var(--ooui--button-background);
					color: var(--ooui--button-destructive-color);
					border-color: var(--ooui--button-destructive-primary-border-color);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
					}
				}

				&:focus:not( :active):not(.cdx-button--is-active) {
					border-color: var(--ooui--button-destructive-primary-border-color);
					box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-destructive-box-shadow--focus);
				}
			}
		}

		&.cdx-button--weight-quiet {
			background: unset;
			border: 0;
			box-shadow: unset;

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

			&:active,
			&.cdx-button--is-active {
				background: unset;
				color: var(--ooui--button-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);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-color));
				}
			}

			&:focus:not( :active):not(.cdx-button--is-active) {
				box-shadow: var(--ooui--button-box-shadow--focus);
			}

			&.cdx-button--action-progressive {
				color: var(--ooui--button-progressive-color);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
				}

				&:hover {
					background-color: unset;
					color: var(--ooui--button-progressive-color--hover);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color--hover));
					}
				}

				&:active,
				&.cdx-button--is-active {
					background-color: unset;
					color: var(--ooui--button-progressive-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);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-progressive-color));
					}
				}
			}

			&.cdx-button--action-destructive {
				color: var(--ooui--button-destructive-color);

				.cdx-button__icon {
					@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
				}

				&:hover {
					background-color: unset;
					color: var(--ooui--button-destructive-color--hover);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color--hover));
					}
				}

				&:active,
				&.cdx-button--is-active {
					background-color: unset;
					color: var(--ooui--button-destructive-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);

					.cdx-button__icon {
						@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-destructive-color));
					}
				}

				&:focus:not( :active):not(.cdx-button--is-active) {
					border-color: var(--ooui--button-destructive-primary-border-color);
					box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-destructive-box-shadow--focus);
				}
			}
		}
	}

	&:disabled,
	&.cdx-button--fake-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);

		.cdx-button__icon {
			@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-disabled-color));
		}

		&.cdx-button--weight-quiet {
			color: var(--ooui--button-disabled-color);

			.cdx-button__icon {
				@include mixins.cdx-mixin-button-css-icon-fallback-color(var(--ooui--button-disabled-color));
			}
		}
	}
}
Retrieved from "https://terraria.wiki.gg/index.php?title=MediaWiki:Common.css/src/system/codex/components/Button.scss&oldid=915877"