Improve the required marker for fields

This moves the required marker closer to the actual label to make the connection more obvious. Also it makes it bigger. The style blocks for overriding the gaps must not be scoped, because it otherwise the styles do not match anything. Bug: T322683
wmde · Sep 20, 2023 · 58f24f6 · 58f24f6
1 parent 779e96c
commit 58f24f6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 1 deletion.
diff --git a/src/components/LanguageInput.vue b/src/components/LanguageInput.vue
@@ -77,3 +77,14 @@ export default {
 		</item-lookup>
 	</div>
 </template>
+
+<style lang="scss">
+@import "@wmde/wikit-tokens/variables";
+
+/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
+.wbl-snl-language-lookup .wikit .wikit-Lookup__label-wrapper {
+	gap: $dimension-spacing-xsmall;
+}
+/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
+
+</style>
diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
@@ -69,3 +69,13 @@ export default {
 		</template>
 	</text-input>
 </template>
+
+<style lang="scss">
+@import "@wmde/wikit-tokens/variables";
+
+/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
+.wbl-snl-lemma-input.wikit .wikit-TextInput__label-wrapper {
+	gap: $dimension-spacing-xsmall;
+}
+/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
+</style>
diff --git a/src/components/LexicalCategoryInput.vue b/src/components/LexicalCategoryInput.vue
@@ -71,3 +71,13 @@ export default {
 		</item-lookup>
 	</div>
 </template>
+
+<style lang="scss">
+@import "@wmde/wikit-tokens/variables";
+/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
+.wbl-snl-lexical-category-lookup .wikit .wikit-Lookup__label-wrapper {
+	gap: $dimension-spacing-xsmall;
+}
+/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
+
+</style>
diff --git a/src/components/RequiredAsterisk.vue b/src/components/RequiredAsterisk.vue
@@ -24,6 +24,8 @@ export default {
 @import "@wmde/wikit-tokens/variables";
 
 .wbl-snl-required-asterisk {
+	font-size: $font-size-xxlarge;
+
 	&:not(:first-child) {
 		margin-inline-start: $dimension-spacing-small;
 	}

diff --git a/src/components/SpellingVariantInput.vue b/src/components/SpellingVariantInput.vue
@@ -126,10 +126,16 @@ export default {
 	</wikit-lookup>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "@wmde/wikit-tokens/variables";
 
 .wbl-snl-spelling-variant-lookup {
+	/* stylelint-disable plugin/stylelint-bem-namics, selector-class-pattern */
+	&.wikit .wikit-Lookup__label-wrapper {
+		gap: $dimension-spacing-xsmall;
+	}
+	/* stylelint-enable plugin/stylelint-bem-namics, selector-class-pattern */
+
 	&__help-link {
 		padding-bottom: $wikit-Label-padding-block-end;
 		display: inline-block;