packages/ui/src/tabs/style.module.css - trunk - githubmirror/gutenberg

packages/ui/src/tabs/style.module.css
252 строки6 KB
Andrew Duthie
UI: Remove unused direction factor CSS property (#80269)
14 июл 2026, 23:35
14 июл 2026, 23:35363ec91
@layer wp-ui {
	@layer utilities, components, compositions, overrides;

	@layer components {
		.tablist {
			display: flex;
			align-items: stretch;
			overflow-inline: auto;
			overscroll-behavior-inline: none;

			--direction-start: left;
			--direction-end: right;

			&:dir(rtl) {
				--direction-start: right;
				--direction-end: left;
			}

			position: relative;

			&[data-orientation="horizontal"] {
				--fade-width: 4rem;
				--fade-gradient-base: transparent 0%, #000 var(--fade-width);
				--fade-gradient-composed: var(--fade-gradient-base), #000 60%, transparent 50%;

				width: fit-content;

				&.is-overflowing-first {
					mask-image: linear-gradient(to var(--direction-end), var(--fade-gradient-base));
				}

				&.is-overflowing-last {
					mask-image: linear-gradient(to var(--direction-start), var(--fade-gradient-base));
				}

				&.is-overflowing-first.is-overflowing-last {
					mask-image:
						linear-gradient(to right, var(--fade-gradient-composed)),
						linear-gradient(to left, var(--fade-gradient-composed));
				}

				&.is-minimal-variant {
					gap: 1rem;
				}
			}

			&[data-orientation="vertical"] {
				flex-direction: column;
			}
		}

		.indicator {
			@media not ( prefers-reduced-motion ) {
				transition-property:
					translate,
					width,
					height,
					border-radius,
					border-block;
				transition-duration: 0.2s;
				transition-timing-function: ease-out;
			}

			position: absolute;
			pointer-events: none;

			/* Windows high contrast mode. */
			outline: 2px solid transparent;
			outline-offset: -1px;

			&[data-orientation="horizontal"] {
				z-index: 1;
				/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Physical properties are necessary for the indicator to work as expected. */
				left: 0;
				bottom: 0;
				height: var(--wpds-border-width-focus);

				width: var(--active-tab-width);
				translate: var(--active-tab-left) 0;
				background-color: var(--wpds-color-stroke-interactive-neutral-strong);
			}

			&[data-orientation="vertical"] {
				z-index: 0;
				border-radius: var(--wpds-border-radius-sm);
				top: 0;
				/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Physical properties are necessary for the indicator to work as expected. */
				left: 50%;
				width: 100%;
				height: var(--active-tab-height);
				translate: -50% var(--active-tab-top);
				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
			}

			.tablist[data-select-on-move="true"]:has(:focus-visible)
			&[data-orientation="vertical"] {
				box-sizing: border-box;
				border:
					var(--wpds-border-width-focus) solid
					var(--wpds-color-stroke-focus);
			}
		}

		.tab {
			/* Resets */
			border-radius: 0;
			background: transparent;
			border: none;
			box-shadow: none;
			outline: none; /* Focus ring applied to the ::after pseudo-element */
			padding: 0;

			/* Positioning */
			z-index: 1;
			flex: 1 0 auto;
			position: relative;
			display: flex;
			align-items: center;

			/* Appearance */
			cursor: var(--wpds-cursor-control);

			/* Typography */
			font-family: var(--wpds-typography-font-family-body);
			font-size: var(--wpds-typography-font-size-md);
			white-space: nowrap;

			/* Characters in some languages (e.g. Japanese) may have a native higher line-height. */

			line-height: 1.2;
			font-weight: 400;
			color: var(--wpds-color-foreground-interactive-neutral);

			&[data-disabled] {
				cursor: default;
				color: var(--wpds-color-foreground-interactive-neutral-disabled);

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

			&:not([data-disabled]):is(:hover, :focus-visible) {
				color: var(--wpds-color-foreground-interactive-neutral-active);
			}

			/* Focus indicator. */
			&::after {
				position: absolute;
				z-index: -1;
				pointer-events: none;

				/* Outline works for Windows high contrast mode as well. */
				outline:
					var(--wpds-border-width-focus) solid
					var(--wpds-color-stroke-focus);
				border-radius: var(--wpds-border-radius-sm);

				/* Animation */
				opacity: 0;

				@media not ( prefers-reduced-motion ) {
					transition: opacity 0.1s linear;
				}
			}

			&:focus-visible::after {
				opacity: 1;
			}

			[data-orientation="horizontal"] & {
				padding-inline: var(--wpds-dimension-padding-lg);
				height: 48px; /* TODO: use semantic size/height tokens when available */
				scroll-margin: 24px;

				&::after {
					content: "";
					inset: var(--wpds-dimension-padding-md);
				}
			}

			.is-minimal-variant[data-orientation="horizontal"] & {
				padding-inline: 0;

				&::after {
					/*
					 * Prevent clipping the focus ring at the tablist edge.
					 * Use rounding, as the focus ring width may have sub-pixel values
					 * depending on the screen pixel ratio.
					 */
					inset-inline: round(up, var(--wpds-border-width-focus), 1px);
				}
			}

			[data-orientation="vertical"] & {
				padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
				min-height: var(--wpds-dimension-size-lg);
			}

			[data-orientation="vertical"][data-select-on-move="false"] &::after {
				content: "";
				inset: var(--wpds-border-width-focus); /* TODO: Use or create new control/interactive padding token */
			}
		}

		.tab-children {
			flex-grow: 1;

			display: flex;
			align-items: center;

			[data-orientation="horizontal"] & {
				justify-content: center;
			}

			[data-orientation="vertical"] & {
				justify-content: start;
			}
		}

		.tab-chevron {
			flex-shrink: 0;
			margin-inline-end: calc(var(--wpds-dimension-gap-xs) * -1);

			[data-orientation="horizontal"] & {
				display: none;
			}
			opacity: 0;

			[role="tab"]:is([aria-selected="true"], :focus-visible, :hover) & {
				opacity: 1;
			}

			/*
			 * The chevron is transitioned into existence when selectOnMove is enabled,
			 * because otherwise it looks jarring, as it shows up outside of the focus
			 * indicator that's being animated at the same time.
			 */
			@media not ( prefers-reduced-motion ) {
				[data-select-on-move="true"]
				[role="tab"]:is([aria-selected="true"])
				& {
					transition: opacity 0.15s 0.15s linear;
				}
			}

			&:dir(rtl) {
				rotate: 180deg;
			}
		}
	}
}