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
:host {
display: inline-block;
height: fit-content;
width: fit-content;
--button-icon-fill: currentColor;
--button-icon-stroke: var(--button-icon-fill);
}
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;
color: var(--button-text-color);
width: 100%;
&:focus-visible {
outline: none;
}
padding-inline-start: var(--button-outer-padding-inline-start, var(--button-outer-padding-inline));
padding-inline-end: var(--button-outer-padding-inline-end, var(--button-outer-padding-inline));
padding-block-start: var(--button-outer-padding-block-start, var(--button-outer-padding-block));
padding-block-end: var(--button-outer-padding-block-end, var(--button-outer-padding-block));
}
.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);
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: center;
align-items: center;
&[size=small] {
min-height: var(--button-min-height-small);
font-size: var(--button-font-size-small);
}
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: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: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: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: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-default);
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-default);
height: var(--icon-size-default);
pointer-events: none;
}
}