5cb6653481
Backed out changeset 015ee1aceffe (bug 1927214) Backed out changeset bd0405562d20 (bug 1927214) Backed out changeset 181a5534f909 (bug 1927214) Backed out changeset 86fe51ead170 (bug 1931442)
124 lines
3.0 KiB
CSS
124 lines
3.0 KiB
CSS
/* 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/. */
|
|
|
|
@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));
|
|
display: block;
|
|
}
|
|
|
|
:host(:not(:state(has-label))) {
|
|
--input-space-offset: var(--input-width);
|
|
display: inline-block;
|
|
}
|
|
|
|
:host([inputlayout="block"]) {
|
|
--input-space-offset: 0;
|
|
--input-margin-block-adjust: var(--space-xsmall) 0;
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
:host([disabled]) {
|
|
color: GrayText;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
/* Bug 1901865: Due to the "MS Shell Dlg 2" font, we need inherits to
|
|
* keep the checkbox aligned */
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
vertical-align: top;
|
|
margin-block: var(--input-margin-block-adjust);
|
|
margin-inline: var(--input-margin-inline-start-adjust) var(--space-small);
|
|
|
|
:host(:not(:state(has-label))) & {
|
|
margin-inline-end: 0;
|
|
}
|
|
}
|
|
|
|
/* Icon */
|
|
|
|
.icon {
|
|
vertical-align: top;
|
|
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: 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;
|
|
}
|
|
|
|
/* Nested fields */
|
|
|
|
.nested {
|
|
margin-inline-start: var(--input-space-offset);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-large);
|
|
}
|
|
|
|
::slotted([slot="nested"]:first-child) {
|
|
margin-block-start: var(--space-large);
|
|
}
|
|
}
|