MediaWiki:Common.css/src/system/OOUI/elements/ButtonElement.scss
< MediaWiki:Common.css | src
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 / OOUI / elements / ButtonElement.scss
Siblings: ButtonElement.scss PendingElement.scss
Children: (none)
@use '../mixins';
/********* OOUI: ButtonElement *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/ButtonElement.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/elements.less */
.oo-ui-buttonElement {
&-frameless {
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button {
color: var(--ooui--button-color);
&:hover {
background-color: unset;
color: var(--ooui--button-color--hover);
}
&:focus {
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--focus);
}
}
&.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
> .oo-ui-buttonElement-button:active {
background-color: 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);
}
&.oo-ui-flaggedElement {
&-progressive {
@include mixins.mw-frameless-button-colored(".oo-ui-buttonElement-button", "progressive");
}
&-destructive {
@include mixins.mw-frameless-button-colored(".oo-ui-buttonElement-button", "destructive");
}
}
}
&.oo-ui-widget-disabled {
> .oo-ui-buttonElement-button {
color: var(--ooui--button-disabled-color);
}
}
}
&-framed {
> .oo-ui-buttonElement-button {
border-radius: 4px;
}
&.oo-ui-widget-disabled {
> .oo-ui-buttonElement-button {
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);
}
}
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button {
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);
&: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);
}
&:focus {
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);
}
}
&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
background: var(--ooui--button-background--hover);
color: var(--ooui--button-progressive-color);
border-color: var(--ooui--button-progressive-primary-border-color);
&:focus {
border-color: var(--ooui--button-progressive-primary-border-color);
box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
}
}
> .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
background: var(--ooui--button-background);
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);
}
&.oo-ui-flaggedElement {
&-progressive {
@include mixins.mw-framed-button-colored(".oo-ui-buttonElement-button", "progressive");
}
&-destructive {
@include mixins.mw-framed-button-colored(".oo-ui-buttonElement-button", "destructive");
}
}
&.oo-ui-flaggedElement-primary {
&.oo-ui-flaggedElement {
&-progressive {
@include mixins.mw-framed-primary-button-colored(".oo-ui-buttonElement-button", "progressive");
}
&-destructive {
@include mixins.mw-framed-primary-button-colored(".oo-ui-buttonElement-button", "destructive");
}
}
}
}
}
}