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