278 lines
7.2 KiB
CSS
278 lines
7.2 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-space-offset: calc(var(--input-width) + var(--space-small));
|
|
--input-nested-offset: var(--input-space-offset);
|
|
--input-margin-block-adjust: calc((1lh - var(--input-height)) / 2);
|
|
--input-icon-margin-block-adjust: calc((1lh - var(--icon-size)) / 2);
|
|
--input-margin-inline-start-adjust: calc(-1 * var(--input-space-offset));
|
|
}
|
|
|
|
:host(:not(:state(has-label))) {
|
|
--input-space-offset: var(--input-width);
|
|
}
|
|
|
|
:host([inputlayout="block"]) {
|
|
--input-space-offset: 0;
|
|
--input-nested-offset: var(--space-xlarge);
|
|
--input-margin-block-adjust: var(--space-xsmall) 0;
|
|
}
|
|
|
|
:host([inputlayout="block"]:not(:state(has-label), :state(has-description))) {
|
|
--input-margin-block-adjust: 0;
|
|
}
|
|
|
|
:host([inputlayout="inline-end"]) {
|
|
--input-space-offset: 0;
|
|
--input-nested-offset: var(--space-xlarge);
|
|
}
|
|
|
|
:host(:not([hidden])) {
|
|
display: block;
|
|
}
|
|
|
|
:host(:not([hidden], :state(has-label), [inputlayout="block"])) {
|
|
display: inline-block;
|
|
}
|
|
|
|
@media (forced-colors) {
|
|
:host(:state(disabled)) {
|
|
color: var(--text-color-disabled);
|
|
}
|
|
}
|
|
|
|
/* Inline-end layout */
|
|
|
|
:host([inputlayout="inline-end"]) .content-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-medium);
|
|
|
|
> .label-wrapper {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
:host([inputlayout="inline-end"]) .description {
|
|
margin-block-start: var(--space-xxsmall);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
:host(:state(disabled)) & {
|
|
color: var(--text-color-disabled);
|
|
}
|
|
}
|
|
|
|
:host(.text-truncated-ellipsis) .text-container {
|
|
display: inline-block;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Undocumented hack for AI controls, do not use, it WILL be removed. (bug 2012250) */
|
|
h3.text {
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Input */
|
|
|
|
#input {
|
|
-moz-theme: non-native;
|
|
min-width: var(--input-width);
|
|
min-height: var(--input-height);
|
|
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;
|
|
}
|
|
|
|
@media not (forced-colors) {
|
|
accent-color: var(--color-accent-primary);
|
|
}
|
|
}
|
|
|
|
/* Icon */
|
|
|
|
.icon {
|
|
vertical-align: top;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
/* Margin is calculated from line height and icon size. */
|
|
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
|
|
margin-block: var(--input-icon-margin-block-adjust);
|
|
-moz-context-properties: fill, fill-opacity, stroke;
|
|
fill: currentColor;
|
|
stroke: currentColor;
|
|
|
|
+ .text {
|
|
margin-inline-start: var(--space-small);
|
|
}
|
|
}
|
|
|
|
/* Description */
|
|
|
|
:host(:state(has-description)) .description {
|
|
margin-block-start: var(--space-xxsmall);
|
|
}
|
|
|
|
:host(:state(has-description):state(has-support-link)) .description-text {
|
|
margin-inline-end: var(--space-xsmall);
|
|
}
|
|
|
|
::slotted([slot="description"]) {
|
|
display: inline;
|
|
}
|
|
|
|
:host(.text-truncated-ellipsis) .description {
|
|
white-space: initial;
|
|
}
|
|
|
|
/* Support link */
|
|
|
|
a[is="moz-support-link"]:not([hidden]),
|
|
::slotted([slot="support-link"]:not([hidden])) {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Nested fields */
|
|
|
|
.nested {
|
|
margin-inline-start: var(--input-nested-offset);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
::slotted([slot="nested"]) {
|
|
/* Apply margin to all elements rather than using gap so the first visible
|
|
* element has a margin between it and the parent. */
|
|
margin-block-start: var(--space-large);
|
|
}
|
|
|
|
/* Maintain direction in some input types, even when the page is rtl */
|
|
input:is([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
|
|
direction: ltr;
|
|
text-align: match-parent;
|
|
}
|
|
}
|
|
|
|
/* Only Nova uses custom checkbox/radio styles. Previously, accent-color was the only customization. */
|
|
@media -moz-pref("browser.nova.enabled") {
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
appearance: none;
|
|
border: var(--border-width) solid var(--checkbox-border-color);
|
|
border-radius: var(--checkbox-border-radius);
|
|
background-color: var(--checkbox-background-color);
|
|
min-width: var(--checkbox-size);
|
|
|
|
&:active {
|
|
background-color: var(--checkbox-background-color-active);
|
|
}
|
|
|
|
&[disabled] {
|
|
background-color: var(--checkbox-background-color-disabled);
|
|
opacity: var(--checkbox-opacity-disabled);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
|
|
&:checked {
|
|
border-color: var(--checkbox-border-color-checked);
|
|
|
|
&:active {
|
|
border-color: var(--checkbox-border-color-checked-active);
|
|
}
|
|
|
|
&[disabled] {
|
|
border-color: var(--checkbox-border-color-checked-disabled);
|
|
}
|
|
}
|
|
|
|
label:hover &:not(:active, [disabled]) {
|
|
background-color: var(--checkbox-background-color-hover);
|
|
|
|
&:checked {
|
|
border-color: var(--checkbox-border-color-checked-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
&:checked {
|
|
background: url("chrome://global/content/elements/moz-checkbox-icon.svg") no-repeat center center / var(--icon-size-xsmall) var(--icon-size-xsmall);
|
|
background-color: var(--checkbox-background-color-checked);
|
|
-moz-context-properties: stroke;
|
|
stroke: light-dark(white, black);
|
|
|
|
&:active {
|
|
background-color: var(--checkbox-background-color-checked-active);
|
|
}
|
|
|
|
&[disabled] {
|
|
background-color: var(--checkbox-background-color-checked-disabled);
|
|
}
|
|
}
|
|
|
|
label:hover &:not(:active, [disabled]):checked {
|
|
background-color: var(--checkbox-background-color-checked-hover);
|
|
}
|
|
}
|
|
|
|
input[type="radio"] {
|
|
border-radius: var(--border-radius-circle);
|
|
|
|
&:checked {
|
|
--radio-indicator-background-color: var(--checkbox-background-color-checked);
|
|
|
|
background: radial-gradient(circle at 50%, var(--radio-indicator-background-color) 4px, transparent 4px);
|
|
background-color: transparent;
|
|
|
|
&:active {
|
|
--radio-indicator-background-color: var(--checkbox-background-color-checked-active);
|
|
}
|
|
|
|
&[disabled] {
|
|
--radio-indicator-background-color: var(--checkbox-background-color-checked-disabled);
|
|
}
|
|
}
|
|
|
|
label:hover &:not(:active, [disabled]):checked {
|
|
--radio-indicator-background-color: var(--checkbox-background-color-checked-hover);
|
|
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|