@nxgt/material 3.10.1 → 3.11.0

package/lib/components/ui/actions/icon-button/icon-button-morph.css

@@ -1,152 +0,0 @@
-/* A toggle `IconButton` (`aria-pressed`, no `shape`): pressed, it is filled
- * with its colour. `data-morph="pill"` also widens it by `--ib-morph` (14px;
- * 0 below 600px, where only the colour changes), `round` stays a circle. The
- * pill is the button's `::before`, `--ib-morph` / 2 wider on each side, and the
- * same amount of margin makes room for it, so any size class works. The
- * motion and the tokens are Toolbar morph's (`--nxgt-spring-fast`).
- * Toolbar items keep the Toolbar's own look. */
-@layer utilities {
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		--ib-morph: 0px;
-		--ib-on: var(--color-primary);
-		--ib-on-fg: var(--color-primary-foreground);
-		isolation: isolate;
-		transition:
-			margin var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			color 180ms var(--nxgt-ease-effects),
-			border-color 180ms var(--nxgt-ease-effects),
-			box-shadow 180ms var(--nxgt-ease-effects),
-			background-color 180ms var(--nxgt-ease-effects),
-			opacity 180ms var(--nxgt-ease-effects);
-	}
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	)::before {
-		content: "";
-		position: absolute;
-		inset-block: calc(-1 * var(--ib-bw, 0px));
-		inset-inline: calc(
-			var(--ib-morph) /
-			-2 *
-			var(--ib-grow, 0) -
-			var(--ib-bw, 0px)
-		);
-		z-index: -1;
-		border-radius: 999px;
-		background: transparent;
-		transition:
-			inset var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			border-radius var(--nxgt-spring-fast-duration) var(--nxgt-spring-fast),
-			background-color 180ms var(--nxgt-ease-effects);
-	}
-	/* `position` has no specificity, so a utility (PasswordField's `absolute`) wins. */
-	:where(
-		[data-icon-button][data-morph]:not(
-			[data-shape],
-			.nxgt-toolbar-item,
-			[data-toolbar-item]
-		)
-	) {
-		position: relative;
-	}
-	/* The outlined variant's 1px border sits outside the padding box the pill is placed in. */
-	[data-icon-button][data-morph][data-variant="outlined"] {
-		--ib-bw: 1px;
-	}
-	[data-icon-button][data-morph][data-color="secondary"] {
-		--ib-on: var(--color-secondary);
-		--ib-on-fg: var(--color-secondary-foreground);
-	}
-	[data-icon-button][data-morph][data-color="success"] {
-		--ib-on: var(--color-success);
-		--ib-on-fg: var(--color-success-foreground);
-	}
-	[data-icon-button][data-morph][data-color="info"] {
-		--ib-on: var(--color-info);
-		--ib-on-fg: var(--color-info-foreground);
-	}
-	[data-icon-button][data-morph][data-color="warning"] {
-		--ib-on: var(--color-warning);
-		--ib-on-fg: var(--color-warning-foreground);
-	}
-	[data-icon-button][data-morph][data-color="error"] {
-		--ib-on: var(--color-error);
-		--ib-on-fg: var(--color-error-foreground);
-	}
-	[data-icon-button][data-morph][data-color="default"] {
-		--ib-on: var(--color-foreground);
-		--ib-on-fg: var(--color-background);
-	}
-	/* Pressed: the button's own surface gives way to the pill. */
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		background: transparent;
-		border-color: transparent;
-		box-shadow: none;
-		color: var(--ib-on-fg);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-			[data-shape],
-			.nxgt-toolbar-item,
-			[data-toolbar-item]
-		)
-		svg {
-		color: var(--ib-on-fg);
-		stroke: var(--ib-on-fg);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	)::before {
-		background: var(--ib-on);
-	}
-	[data-icon-button][data-morph="pill"][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	) {
-		--ib-grow: 1;
-		margin-inline: calc(var(--ib-morph) / 2);
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):hover:not(:disabled)::before {
-		background: color-mix(in oklab, var(--ib-on-fg) 10%, var(--ib-on));
-	}
-	/* Pointer down: the corners squeeze. */
-	[data-icon-button][data-morph]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):active:not(:disabled)::before {
-		border-radius: 30%;
-	}
-	/* The ring follows the pill. */
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):focus-visible {
-		box-shadow: none;
-	}
-	[data-icon-button][data-morph][aria-pressed="true"]:not(
-		[data-shape],
-		.nxgt-toolbar-item,
-		[data-toolbar-item]
-	):focus-visible::before {
-		box-shadow: 0 0 0 3px
-			color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-}