Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:host([hidden]) {
display: none !important;
}
:host {
--button-alignment: center;
--button-badge-background-color: var(--color-accent-attention);
--button-badge-size: 6px;
display: inline-block;
height: fit-content;
width: fit-content;
}
:host([type="split"]) {
display: flex;
justify-content: flex-start;
gap: var(--space-xxsmall);
button {
min-width: fit-content;
}
#main-button {
padding-inline-end: 0;
}
#chevron-button {
padding-inline-start: 0;
}
.button-background {
height: 100%;
}
#main-button .button-background {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
#chevron-button .button-background {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}
button {
appearance: none;
background: transparent;
border: none;
/* HTML button gets `font: -moz-button` from UA styles,
* but we want it to match the root font styling. */
font: inherit;
/* Overridden on button-background, but still need to unset to not get the
* UA styles */
color: inherit;
width: 100%;
&:focus-visible {
outline: none;
}
padding-inline-start: var(--button-outer-padding-inline-start, var(--button-outer-padding-inline, 0));
padding-inline-end: var(--button-outer-padding-inline-end, var(--button-outer-padding-inline, 0));
padding-block-start: var(--button-outer-padding-block-start, var(--button-outer-padding-block, 0));
padding-block-end: var(--button-outer-padding-block-end, var(--button-outer-padding-block, 0));
}
.button-background {
box-sizing: border-box;
min-height: var(--button-min-height);
border: var(--button-border);
border-radius: var(--button-border-radius);
background-color: var(--button-background-color);
color: var(--button-text-color);
padding: var(--button-padding);
font-weight: var(--button-font-weight);
/* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
font-size: var(--button-font-size);
display: flex;
justify-content: var(--button-alignment);
align-items: center;
position: relative;
&[size="small"] {
min-height: var(--button-min-height-small);
padding-block: var(--space-xxsmall);
font-size: var(--button-font-size-small);
}
&.badged::after {
content: "";
position: absolute;
/* The size of the dot is in between dimension token sizes. */
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
height: var(--button-badge-size);
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: var(--button-badge-size);
inset-block-start: var(--space-xxsmall);
inset-inline-end: var(--space-xxsmall);
background-color: var(--button-badge-background-color);
border-radius: var(--border-radius-circle);
}
@media not ((prefers-contrast) or (forced-colors)) {
&.badged::after {
background-color: var(--button-attention-dot-color, var(--button-badge-background-color));
}
}
button:hover > & {
background-color: var(--button-background-color-hover);
border-color: var(--button-border-color-hover);
color: var(--button-text-color-hover);
}
button:hover:active:not(:disabled) > & {
background-color: var(--button-background-color-active);
border-color: var(--button-border-color-active);
color: var(--button-text-color-active);
}
button:is([aria-expanded="true"], [aria-pressed="true"]):not(:hover, :disabled) > & {
background-color: var(--button-background-color-selected);
border-color: var(--button-border-color-selected);
color: var(--button-text-color-selected);
}
button:disabled > & {
background-color: var(--button-background-color-disabled);
border-color: var(--button-border-color-disabled);
color: var(--button-text-color-disabled);
opacity: var(--button-opacity-disabled);
}
button:focus-visible > & {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
&[type="primary"] {
background-color: var(--button-background-color-primary);
border-color: var(--button-border-color-primary);
color: var(--button-text-color-primary);
button:hover > & {
background-color: var(--button-background-color-primary-hover);
border-color: var(--button-border-color-primary-hover);
color: var(--button-text-color-primary-hover);
}
button:hover:active:not(:disabled) > & {
background-color: var(--button-background-color-primary-active);
border-color: var(--button-border-color-primary-active);
color: var(--button-text-color-primary-active);
}
button:is([aria-expanded="true"], [aria-pressed="true"]):not(:hover, :disabled) > & {
background-color: var(--button-background-color-primary-selected);
border-color: var(--button-border-color-primary-selected);
color: var(--button-text-color-primary-selected);
}
button:disabled > & {
background-color: var(--button-background-color-primary-disabled);
border-color: var(--button-border-color-primary-disabled);
color: var(--button-text-color-primary-disabled);
}
}
&[type="destructive"] {
background-color: var(--button-background-color-destructive);
border-color: var(--button-border-color-destructive);
color: var(--button-text-color-destructive);
button:hover > & {
background-color: var(--button-background-color-destructive-hover);
border-color: var(--button-border-color-destructive-hover);
color: var(--button-text-color-destructive-hover);
}
button:hover:active:not(:disabled) > & {
background-color: var(--button-background-color-destructive-active);
border-color: var(--button-border-color-destructive-active);
color: var(--button-text-color-destructive-active);
}
button:is([aria-expanded="true"], [aria-pressed="true"]):not(:hover, :disabled) > & {
background-color: var(--button-background-color-destructive-selected);
border-color: var(--button-border-color-destructive-selected);
color: var(--button-text-color-destructive-selected);
}
button:disabled > & {
background-color: var(--button-background-color-destructive-disabled);
border-color: var(--button-border-color-destructive-disabled);
color: var(--button-text-color-destructive-disabled);
}
}
&[type~="ghost"] {
background-color: var(--button-background-color-ghost);
border-color: var(--button-border-color-ghost);
color: var(--button-text-color-ghost);
button:hover > & {
background-color: var(--button-background-color-ghost-hover);
border-color: var(--button-border-color-ghost-hover);
color: var(--button-text-color-ghost-hover);
}
button:hover:active:not(:disabled) > & {
background-color: var(--button-background-color-ghost-active);
border-color: var(--button-border-color-ghost-active);
color: var(--button-text-color-ghost-active);
}
button:is([aria-expanded="true"], [aria-pressed="true"]):not(:hover, :disabled) > & {
background-color: var(--button-background-color-ghost-selected);
border-color: var(--button-border-color-ghost-selected);
color: var(--button-text-color-ghost-selected);
}
button:disabled > & {
background-color: var(--button-background-color-ghost-disabled);
border-color: var(--button-border-color-ghost-disabled);
color: var(--button-text-color-ghost-disabled);
}
}
&.labelled {
gap: var(--space-small);
}
&[type~="icon"]:not(.labelled) {
background-size: var(--icon-size);
background-position: center;
background-repeat: no-repeat;
}
&[type~="icon"]:not(.labelled),
&:not(.labelled):has(img) {
width: var(--button-size-icon);
height: var(--button-size-icon);
padding: var(--button-padding-icon);
&[size="small"] {
width: var(--button-size-icon-small);
height: var(--button-size-icon-small);
}
}
img,
&[type~="icon"]:not(.labelled) {
-moz-context-properties: fill, fill-opacity, stroke;
fill: var(--button-icon-fill);
stroke: var(--button-icon-stroke);
}
img {
width: var(--icon-size);
height: var(--icon-size);
pointer-events: none;
}
}