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");
@layer input-common {
:host {
--input-height: var(--size-item-small);
--input-width: var(--size-item-small);
--input-space-offset: calc(var(--input-width) + var(--space-small));
--input-margin-block-adjust: calc((1lh - var(--input-height)) / 2);
--icon-margin-block-adjust: calc((1lh - var(--icon-size-default)) / 2);
--input-margin-inline-start-adjust: calc(-1 * var(--input-space-offset));
}
:host([inputlayout="block"]) {
--input-space-offset: 0;
--input-margin-block-adjust: var(--space-xsmall) 0;
}
/* Label text */
.label-wrapper {
display: block;
padding-inline-start: var(--input-space-offset);
}
label {
display: block;
&:has(+ a[is="moz-support-link"]),
:host(:not(:state(has-description)):state(has-support-link)) & {
display: inline;
margin-inline-end: var(--space-xsmall);
}
}
.label-content {
position: relative;
}
/* Input */
#input {
-moz-theme: non-native;
min-width: var(--input-width);
min-height: var(--input-height);
accent-color: var(--color-accent-primary);
font-size: inherit;
* keep the checkbox aligned */
font-family: inherit;
line-height: inherit;
vertical-align: top;
margin-block: var(--input-margin-block-adjust);
margin-inline-start: var(--input-margin-inline-start-adjust);
}
/* Icon */
.icon {
position: absolute;
width: var(--icon-size-default);
height: var(--icon-size-default);
margin-block: var(--icon-margin-block-adjust);
-moz-context-properties: fill, fill-opacity, stroke;
fill: currentColor;
stroke: currentColor;
+ .text {
margin-inline-start: calc(var(--icon-size-default) + var(--space-small));
}
}
/* Description */
.description {
margin-inline-start: var(--input-space-offset);
margin-block-start: var(--space-xxsmall);
a[is="moz-support-link"],
::slotted([slot="support-link"]) {
margin-inline-start: var(--space-xsmall);
}
}
::slotted([slot="description"]) {
display: inline;
}
/* Support link */
a[is="moz-support-link"],
::slotted([slot="support-link"]) {
display: inline-block;
}
}