@db-ux/core-components 1.0.0-test-13b991d

package/build/components/tag/tag.scss

@@ -0,0 +1,236 @@
+@use "sass:map";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/button-components";
+@use "../../styles/internal/tag-components";
+@use "../../styles/internal/icon-passing";
+@use "../../styles/internal/component";
+
+%no-text {
+	&[data-no-text="true"] {
+		--icon-margin-after: 0;
+
+		@include icons.is-icon-text-replace();
+
+		padding: 0;
+		gap: 0;
+
+		label {
+			@include icons.is-icon-text-replace();
+		}
+	}
+
+	&:not([data-no-text="true"]) {
+		--db-padding-inline-start: #{variables.$db-spacing-fixed-2xs};
+
+		/* stylelint-disable-next-line db-ux/use-spacings */
+		padding-inline: var(--db-padding-inline-start)
+			#{variables.$db-spacing-fixed-2xs};
+
+		&:has(.db-tab-remove-button) {
+			padding-inline-end: 0;
+		}
+
+		&:has(dbbutton):has(dbbutton:not(.db-tab-remove-button)),
+		&:has(db-button):has(db-button:not(.db-tab-remove-button)),
+		&:not(:has(dbbutton)):has(button:not(.db-tab-remove-button)),
+		&:has(a),
+		&:has(label) {
+			padding-inline: 0;
+		}
+	}
+}
+
+%db-tag {
+	--db-icon-margin-end: 0;
+
+	@extend %default-interactive-component;
+	@extend %db-overwrite-font-size-sm;
+	@extend %default-button;
+	@extend %no-text;
+
+	padding-block: 0;
+	block-size: variables.$db-sizing-sm;
+	min-inline-size: variables.$db-sizing-sm;
+	inline-size: fit-content;
+	position: relative;
+	gap: variables.$db-spacing-fixed-2xs;
+
+	&:not(:has(#{tag-components.$interactive-selectors})),
+	&:has(.db-tab-remove-button) {
+		@extend %component-border;
+
+		@include tag-components.get-tag-colors();
+	}
+
+	&:has(#{tag-components.$interactive-selectors}) {
+		--db-icon-margin-end: #{variables.$db-spacing-fixed-2xs};
+
+		@include icon-passing.icon-passing(variables.$db-spacing-fixed-2xs);
+		@include tag-components.get-tag-colors-interactive();
+	}
+
+	button:nth-of-type(2),
+	dbbutton:nth-of-type(2),
+	&:has(db-button):has(dbbutton) .db-tab-remove-button {
+		display: none;
+	}
+
+	> :is(
+			[class="db-checkbox"],
+			[class="db-radio"],
+			[class="db-link"],
+			[class="db-button"]
+		) {
+		block-size: 100%;
+	}
+}
+
+.db-tag {
+	@extend %db-tag;
+
+	&[data-show-check-state="true"] {
+		label {
+			--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
+
+			@include icons.set-icon("circle", "after");
+
+			/* TODO: maybe we could get rid of an expensive :has selector by defining this icon on the input itself */
+			&:has(input:checked) {
+				@include icons.set-icon("check_circle", "after");
+			}
+		}
+	}
+
+	label {
+		@extend %default-transition;
+
+		inline-size: 100%;
+		margin-inline-start: 0;
+		display: flex;
+		align-items: center;
+
+		@media (forced-colors: active) {
+			&:not(:has(input:checked)) {
+				border-style: dashed;
+			}
+		}
+
+		&::after {
+			@include fonts.set-component-variables("xs");
+		}
+
+		&:has(input:checked) {
+			border-width: variables.$db-border-height-3xs;
+
+			&::before {
+				content: none;
+			}
+		}
+
+		// Handle native radio and checkbox input elements, especially regarding focus-visible indicator
+		input {
+			appearance: none;
+			inline-size: 100%;
+			block-size: 100%;
+			position: absolute;
+			margin-inline-end: initial;
+			border: 0;
+			border-radius: inherit;
+			cursor: pointer;
+			inset: 0;
+			aspect-ratio: unset;
+
+			&:checked {
+				&:not([data-hide-icon-before="true"]) {
+					&::before {
+						content: none;
+					}
+				}
+			}
+		}
+	}
+
+	a {
+		@extend %default-transition;
+
+		display: inline-flex;
+		align-items: center;
+		text-decoration: none;
+
+		&::after {
+			--db-icon-margin-start: 0;
+			--db-icon-font-size: 0;
+
+			content: none !important;
+		}
+	}
+
+	.db-link {
+		&:is(:hover, :focus, :active) {
+			color: inherit;
+		}
+	}
+
+	&:not(:has(dbbutton, db-button)):has(button:not(.db-tab-remove-button)),
+	&:has(:is(dbbutton, db-button):not(.db-tab-remove-button), a, label) {
+		border: 0;
+	}
+
+	button,
+	a,
+	label {
+		@extend %db-overwrite-font-size-sm;
+		@extend %component-border;
+
+		block-size: inherit;
+		padding: 0 variables.$db-spacing-fixed-2xs;
+		border-radius: variables.$db-border-radius-xs;
+		font-weight: 700;
+		appearance: none;
+	}
+
+	db-button,
+	dbbutton,
+	db-checkbox,
+	dbcheckbox,
+	db-radio,
+	dbradio,
+	db-link,
+	dblink {
+		// angular workaround
+		block-size: inherit;
+	}
+
+	&:has(:disabled),
+	&[data-disabled="true"] {
+		opacity: component.$default-disabled;
+		pointer-events: none;
+	}
+
+	&[data-overflow="true"] {
+		max-inline-size: variables.$db-sizing-2xl;
+
+		> * {
+			inline-size: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.db-tab-remove-button {
+		&:is(button),
+		button {
+			// overwrite to transparent
+			background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+			color: currentcolor;
+			border: 0;
+			aspect-ratio: 1 / 1;
+		}
+	}
+}