packages/ui/src/form/primitives/input/style.module.css - trunk - githubmirror/gutenberg

packages/ui/src/form/primitives/input/style.module.css

50 строк1 KB

Lena Morita

Input: Hide native spin controls for `type="number"` (#80646)

24 июл 2026, 17:20

24 июл 2026, 17:20c66fc21

@layer wp-ui {
	@layer utilities, components, compositions, overrides;

	@layer components {
		.input {
			--_gcd-input-padding:
				var(--wp-ui-input-padding-block, 0px)
				var(--wp-ui-input-layout-padding-inline, 0px);

			padding-block: var(--wp-ui-input-padding-block, 0);
			padding-inline: var(--wp-ui-input-layout-padding-inline, 0);
			width: 100%;
			background: transparent;
			border: none;
			outline: none;
			color: var(--wpds-color-foreground-interactive-neutral);
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;

			&::placeholder {
				color: var(--wpds-color-foreground-interactive-neutral-disabled);
			}

			&:disabled,
			&[aria-disabled="true"] {
				color: var(--wpds-color-foreground-interactive-neutral-disabled);

				@media ( forced-colors: active ) {
					color: GrayText;
				}
			}

			&[type="email"],
			&[type="url"] {
				direction: ltr; /* maintain LTR in RTL languages */
			}

			&[type="number"] {
				appearance: textfield;

				&::-webkit-outer-spin-button,
				&::-webkit-inner-spin-button {
					appearance: none;
					margin: 0;
				}
			}
		}
	}
}