@livenetworks/ashlar 2.2.0 → 2.2.1

package/theme/config/mixins/_translations.scss

@@ -1,124 +1,126 @@
-@use 'display' as *;
-@use 'spacing' as *;
-@use 'sizing' as *;
-@use 'typography' as *;
-@use 'colors' as *;
-@use 'borders' as *;
-@use 'transitions' as *;
-@use 'interaction' as *;
-@use 'motion' as *;
-
-// Translation management -- flag icons, badges, trigger button.
-//
-// Usage:
-//   [data-ln-translatable-lang] { @include translations-flag-input; }
-//   [data-ln-translations-active] { @include translations-active-list; }
-
-// ─── Flag icon in input background ───────────────────────────────
-
-@mixin translations-flag-input {
-	// Intrinsic flag-icon decoration math — pad-left + bg-pos + bg-size
-	// composed against the icon's own dimensions, not shell rhythm.
-	padding-left: calc(var(--size-sm-up) + var(--size-md-up) + var(--size-sm-up));
-	background-repeat: no-repeat;
-	background-size: var(--size-md-up) auto;
-	background-position: var(--size-sm-up) calc(var(--size-sm) + (var(--size-lg) - var(--size-md-up) * 3 / 4) / 2);
-}
-
-// ─── Dropdown menu item: flag via ::before ───────────────────────
-
-@mixin translations-dropdown-flag {
-	@include flex;
-	@include items-center;
-	gap: var(--gap);
-
-	&::before {
-		content: '';
-		@include inline-block;
-		width: 1.25rem;
-		aspect-ratio: 4 / 3;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: center;
-		flex-shrink: 0;
-	}
-}
-
-// ─── Header actions ──────────────────────────────────────────────
-
-@mixin translations-actions {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-	margin-left: auto;
-}
-
-// ─── Active translations list ────────────────────────────────────
-
-@mixin translations-active-list {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-}
-
-// ─── Badge with flag ─────────────────────────────────────────────
-
-@mixin translations-badge {
-	@include inline-flex;
-	@include items-center;
-	--gap: var(--size-xs);
-	gap: var(--gap);
-	--padding-y: var(--size-2xs);
-	--padding-x: var(--size-xs);
-	padding: var(--padding-y) var(--padding-x);
-	@include text-xs;
-	@include font-semibold;
-	@include rounded-sm;
-	@include tinted-surface(0.08);
-	@include select-none;
-	margin: 0;
-	background-repeat: no-repeat;
-	background-position: var(--size-xs) center; // Intrinsic flag-icon position, not shell rhythm.
-	background-size: 1rem auto;
-	--padding-x: var(--size-lg);
-	padding-left: var(--padding-x);
-}
-
-// ─── Badge remove button ─────────────────────────────────────────
-
-@mixin translations-badge-remove {
-	background: none;
-	border: none;
-	@include cursor-pointer;
-	@include text-sm;
-	@include font-bold;
-	color: inherit;
-	--btn-padding-y: 0;
-	--btn-padding-x: 0;
-	line-height: 1;
-	@include transition-fast;
-
-	&:hover {
-		@include text-error;
-	}
-}
-
-// ─── Trigger button ──────────────────────────────────────────────
-
-@mixin translations-add-button {
-	@include inline-flex;
-	@include items-center;
-	@include justify-center;
-	@include size(1.5rem);
-	@include rounded-sm;
-	@include cursor-pointer;
-	@include transition-fast;
-	@include tinted-surface(0.08);
-	border: none;
-
-	&:hover {
-		@include tinted-surface(0.15);
-	}
-}
+@use 'display' as *;
+@use 'spacing' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'motion' as *;
+
+// Translation management -- flag icons, badges, trigger button.
+//
+// Usage:
+//   [data-ln-translatable-lang] { @include translations-flag-input; }
+//   [data-ln-translations-active] { @include translations-active-list; }
+
+// ─── Flag icon in input background ───────────────────────────────
+
+@mixin translations-flag-input {
+	// Intrinsic flag-icon decoration math — pad-left + bg-pos + bg-size
+	// composed against the icon's own dimensions, not shell rhythm.
+	padding-inline-start: calc(var(--size-sm-up) + var(--size-md-up) + var(--size-sm-up));
+	background-repeat: no-repeat;
+	background-size: var(--size-md-up) auto;
+	background-position: var(--size-sm-up) center;
+}
+
+// ─── Dropdown menu item: flag via ::before ───────────────────────
+
+@mixin translations-dropdown-flag {
+	@include flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+
+	&::before {
+		content: '';
+		@include inline-block;
+		width: 1.25rem;
+		aspect-ratio: 4 / 3;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center;
+		flex-shrink: 0;
+	}
+}
+
+// ─── Header actions ──────────────────────────────────────────────
+
+@mixin translations-actions {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	margin-inline-start: auto;
+}
+
+// ─── Active translations list ────────────────────────────────────
+
+@mixin translations-active-list {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+}
+
+// ─── Badge with flag ─────────────────────────────────────────────
+
+@mixin translations-badge {
+	@include inline-flex;
+	@include items-center;
+	--gap: var(--size-xs);
+	gap: var(--gap);
+	--padding-y: var(--size-2xs);
+	--padding-x: var(--size-xs);
+	padding-block: var(--padding-y);
+	padding-inline: var(--padding-x);
+	@include text-xs;
+	@include font-semibold;
+	@include rounded-sm;
+	@include tinted-surface(0.08);
+	@include select-none;
+	margin: 0;
+	background-repeat: no-repeat;
+	background-position: var(--size-xs) center; // Intrinsic flag-icon position, not shell rhythm.
+	background-size: 1rem auto;
+	--padding-x: var(--size-lg);
+	padding-inline-start: var(--padding-x);
+}
+
+// ─── Badge remove button ─────────────────────────────────────────
+
+@mixin translations-badge-remove {
+	background: none;
+	border: none;
+	@include cursor-pointer;
+	@include text-sm;
+	@include font-bold;
+	color: inherit;
+	--btn-padding-y: 0;
+	--btn-padding-x: 0;
+	line-height: 1;
+	@include transition-fast;
+
+	&:hover {
+		@include text-error;
+	}
+}
+
+// ─── Trigger button ──────────────────────────────────────────────
+
+@mixin translations-add-button {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	@include size(1.5rem);
+	@include rounded-sm;
+	@include cursor-pointer;
+	@include transition-fast;
+	@include tinted-surface(0.08);
+	border: none;
+
+	&:hover {
+		@include tinted-surface(0.15);
+	}
+}