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
@import url("chrome://global/skin/design-system/text-and-typography.css");
:host {
display: block;
}
fieldset {
display: contents;
}
legend {
padding: 0;
font-weight: var(--font-weight-bold);
display: inline-flex;
gap: var(--space-small);
align-items: baseline;
&:has(+ #description) {
display: flex;
}
/* Hack to handle vertical alignment in cases where we have an icon + heading
followed by a support link */
&:has(.icon) + a[is="moz-support-link"],
&:has(.icon) + ::slotted([slot="support-link"]) {
vertical-align: baseline;
}
}
.icon {
width: var(--icon-size);
height: var(--icon-size);
-moz-context-properties: fill;
fill: var(--icon-color);
align-self: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
#description {
margin: 0;
margin-block-start: var(--space-xxsmall);
& + a,
& + ::slotted([slot="support-link"]) {
font-size: var(--font-size-small);
}
}
#inputs {
display: flex;
flex-direction: column;
gap: var(--space-large);
margin-top: var(--space-small);
fieldset[aria-orientation="horizontal"] & {
flex-direction: row;
flex-wrap: wrap;
row-gap: var(--space-small);
column-gap: var(--space-medium);
}
}
a[is="moz-support-link"],
::slotted([slot="support-link"]) {
white-space: nowrap;
}