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

package/build/components/navigation-item/navigation-item.scss

@@ -0,0 +1,310 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/screen-sizes";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "../../styles/internal/icon-passing";
+@use "../../styles/internal/component";
+
+%sub-navi-handler-desktop {
+	// show sub-navigation on hover
+	@include screen-sizes.screen("md") {
+		&:is(:hover, :focus-visible) {
+			~ .db-sub-navigation {
+				visibility: visible;
+			}
+		}
+	}
+}
+
+@mixin sub-navi-handler-mobile() {
+	// show/hide sub-navigation by click
+	&[aria-expanded="true"] {
+		~ .db-sub-navigation {
+			@media screen and (prefers-reduced-motion: no-preference) {
+				transition: visibility 0ms linear 0ms;
+				animation: show-right-to-left
+					#{variables.$db-transition-straight-show};
+			}
+
+			visibility: visible;
+
+			.db-sub-navigation {
+				inset-block: 0;
+			}
+		}
+	}
+
+	&:not(&[aria-expanded="true"]) {
+		@media screen and (prefers-reduced-motion: no-preference) {
+			~ .db-sub-navigation {
+				transition: visibility 0ms linear 410ms; // hide animation is 0.4s
+				animation: hide-right-to-left
+					#{variables.$db-transition-straight-hide};
+			}
+		}
+	}
+}
+
+%navigation-item {
+	@extend %default-interactive-component;
+	@extend %transparent-border;
+	@extend %db-overwrite-font-size-md;
+
+	background-color: colors.$db-adaptive-bg-basic-transparent-full-default;
+	cursor: pointer;
+	inline-size: 100%;
+	display: inline-flex;
+	border-radius: variables.$db-border-radius-sm;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-sm;
+	white-space: nowrap; // we don't want to break
+	text-align: center;
+	align-items: center; // Centering the content vertically and horizontally
+
+	@include helpers.hover {
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+	}
+
+	@include helpers.active {
+		background-color: colors.$db-adaptive-bg-basic-transparent-pressed;
+	}
+
+	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
+		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
+	}
+}
+
+.db-navigation-item {
+	--db-has-before: 0;
+
+	@extend %db-overwrite-font-size-md;
+
+	@include icon-passing.icon-passing();
+
+	display: inline-flex;
+	position: relative;
+	inline-size: auto;
+
+	@include screen-sizes.screen("md", "max") {
+		&:not([data-width="full"]) {
+			.db-navigation-item-expand-button {
+				&::after {
+					--db-icon-margin-start: auto;
+				}
+			}
+		}
+	}
+
+	a {
+		@extend %navigation-item;
+
+		text-decoration: none;
+
+		&:focus-visible {
+			// We need to increase the z-index on focus-visible for the outline and box-shadow to appear above the pulse
+			z-index: 1;
+		}
+	}
+
+	.db-navigation-item-expand-button {
+		@include screen-sizes.screen("md", "max") {
+			@include sub-navi-handler-mobile();
+		}
+
+		&:is(button),
+		> button {
+			@extend %sub-navi-handler-desktop;
+			@extend %navigation-item;
+
+			// default icon for navigation
+			@include icons.set-icon("chevron_right", "after");
+
+			font-weight: inherit;
+		}
+	}
+
+	&:has([aria-current="page"]),
+	&:has([data-active="true"]),
+	&[aria-current="page"],
+	&[data-active="true"] {
+		> :is(a, button) {
+			font-weight: 700;
+		}
+	}
+
+	&:not([data-width="full"]) {
+		.db-navigation-item-expand-button {
+			&::after {
+				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
+			}
+		}
+	}
+
+	&[data-width="full"] {
+		inline-size: 100%;
+
+		.db-navigation-item-expand-button {
+			&::after {
+				--db-icon-margin-start: auto;
+			}
+		}
+	}
+
+	&[aria-disabled="true"] {
+		opacity: component.$default-disabled;
+		pointer-events: none;
+	}
+}
+
+@mixin sub-navigation-mobile() {
+	padding: variables.$db-spacing-fixed-md;
+	inline-size: 100%;
+	position: fixed;
+	overflow: hidden auto;
+	// additional #{$db-spacing-fixed-3xs} for border
+	inset-block: calc(
+			#{component.$min-mobile-header-height} +
+				#{variables.$db-spacing-fixed-3xs}
+		)
+		calc(
+			#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2 +
+				#{variables.$db-spacing-fixed-3xs}
+		);
+}
+
+.db-sub-navigation {
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	z-index: 70;
+	inset-inline-start: 0;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	visibility: hidden;
+
+	@include screen-sizes.screen("md", "max") {
+		@include sub-navigation-mobile();
+	}
+
+	@include screen-sizes.screen("md") {
+		.db-mobile-navigation-back {
+			display: none;
+		}
+	}
+
+	@include screen-sizes.screen("md") {
+		border-radius: variables.$db-border-radius-sm;
+		box-shadow: variables.$db-elevation-md;
+		padding: variables.$db-spacing-fixed-sm;
+		position: absolute;
+		min-inline-size: 328px; // We should get this value from UX
+		inset-block-start: calc(100% + #{variables.$db-spacing-fixed-md});
+		transition: visibility 1ms linear; // workaround to enable focus with keyboard
+
+		&[data-outside-vx="true"] {
+			transform: translateX(-100%);
+			inset-inline-start: 100%;
+		}
+
+		&:is(:hover, :focus-within) {
+			visibility: visible;
+		}
+
+		&::before {
+			content: "";
+			position: absolute;
+			inset-inline-start: 0;
+			inline-size: 100%;
+			// #{$db-spacing-fixed--3xs} for shadows
+			block-size: calc(
+				#{variables.$db-spacing-fixed-3xs} +
+					#{variables.$db-spacing-fixed-md}
+			);
+			inset-block-start: calc(
+				-1 * #{variables.$db-spacing-fixed-md} -
+					#{variables.$db-spacing-fixed-3xs}
+			);
+		}
+
+		.db-sub-navigation {
+			// 1px for box shadow
+			inset-block-start: calc(
+				-50% + #{variables.$db-spacing-fixed-xs} + 1px
+			);
+			inset-inline-start: calc(100% + #{variables.$db-spacing-fixed-xs});
+
+			&[data-outside-vy="bottom"] {
+				inset-block-start: calc(
+					100% + #{variables.$db-spacing-fixed-md}
+				);
+				transform: translateY(-100%);
+			}
+
+			&[data-outside-vx="right"] {
+				transform: translateX(-100%);
+				inset-inline-start: calc(
+					-1 * #{variables.$db-spacing-fixed-xs}
+				);
+
+				&[data-outside-vy="bottom"] {
+					transform: translate(-100%, -100%);
+				}
+
+				&::before {
+					inset-block: auto 0;
+					// inline-size: calc(var(--db-navigation-item-inline-size, 100%) - #{variables.$db-spacing-fixed-xs} - 2px);
+					transform: translateX(100%) scaleX(-1);
+				}
+			}
+
+			&::before {
+				content: "";
+				position: absolute;
+				inset-block-start: 0;
+				inset-inline-start: 0;
+				block-size: 100%;
+				inline-size: var(--db-navigation-item-inline-size, 100%);
+				background: transparent;
+				transform: translateX(-100%);
+				clip-path: var(
+					--db-navigation-item-clip-path,
+					polygon(10% 30px, 100% 0, 100% 100%)
+				);
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				padding: variables.$db-spacing-fixed-xs;
+				// #{$db-spacing-fixed-3xs} for box shadow
+				inset-block-start: #{variables.$db-spacing-fixed-3xs};
+				inset-inline-end: calc(-1 * #{variables.$db-spacing-fixed-xs});
+				block-size: 100%;
+				inline-size: variables.$db-spacing-fixed-xs;
+			}
+		}
+	}
+
+	&:empty {
+		display: none;
+	}
+
+	.db-navigation-item {
+		inline-size: 100%;
+
+		&::after {
+			margin-inline-start: auto;
+		}
+	}
+}
+
+.db-mobile-navigation-back {
+	@include helpers.divider("bottom");
+
+	display: flex;
+	font-weight: normal;
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	padding-block-end: variables.$db-spacing-fixed-md;
+	margin-block-end: variables.$db-spacing-fixed-md;
+}

package/build/components/notification/notification-grid-default.css

@@ -0,0 +1 @@
+

package/build/components/notification/notification-grid-default.scss

@@ -0,0 +1,52 @@
+%grid-layout-default {
+	// 1. only content (min. requirement)
+	grid-template-areas: "content";
+	grid-template-columns: 1fr;
+
+	&:has(.db-button) {
+		grid-template-columns: 1fr min-content;
+		grid-template-areas: "content close";
+	}
+
+	// 2. headline
+	&:has(header) {
+		grid-template-columns: 1fr;
+		grid-template-areas:
+			"head"
+			"content";
+
+		&:has(.db-button) {
+			grid-template-columns: 1fr min-content;
+			grid-template-areas:
+				"head close"
+				"content content";
+		}
+	}
+
+	// 3. icon or img
+	&[data-icon],
+	&[data-semantic]:not([data-semantic="adaptive"]),
+	&:has(img) {
+		grid-template-areas: "icon content";
+		grid-template-columns: min-content 1fr;
+
+		&:has(.db-button) {
+			grid-template-columns: min-content 1fr min-content;
+			grid-template-areas: "icon content close";
+		}
+
+		&:has(header) {
+			grid-template-columns: min-content 1fr;
+			grid-template-areas:
+				"icon head"
+				"icon content";
+
+			&:has(.db-button) {
+				grid-template-columns: min-content 1fr min-content;
+				grid-template-areas:
+					"icon head close"
+					"icon content content";
+			}
+		}
+	}
+}

package/build/components/notification/notification-grid-non-overlay.css

@@ -0,0 +1 @@
+

package/build/components/notification/notification-grid-non-overlay.scss

@@ -0,0 +1,66 @@
+%grid-layout-variant-not-overlay {
+	span {
+		display: none;
+	}
+
+	// has link
+	&:has(a) {
+		&:not([data-link-variant="inline"]) {
+			// 1. only content (min. requirement)
+			grid-template-areas:
+				"content"
+				"link";
+			grid-template-columns: 1fr;
+
+			&:has(.db-button) {
+				grid-template-columns: 1fr min-content;
+				grid-template-areas:
+					"content close"
+					"link link";
+			}
+
+			// 2. headline
+			&:has(header) {
+				grid-template-columns: 1fr;
+				grid-template-areas:
+					"head"
+					"content"
+					"link";
+
+				&:has(.db-button) {
+					grid-template-columns: 1fr min-content;
+					grid-template-areas:
+						"head close"
+						"content content"
+						"link link";
+				}
+			}
+
+			// 3. icon or img
+			&[data-icon],
+			&[data-semantic]:not([data-semantic="adaptive"]),
+			&:has(img) {
+				grid-template-areas:
+					"icon content"
+					"icon link";
+				grid-template-columns: min-content 1fr;
+
+				&:has(header) {
+					grid-template-columns: min-content 1fr;
+					grid-template-areas:
+						"icon head"
+						"icon content"
+						"icon link";
+
+					&:has(.db-button) {
+						grid-template-columns: min-content 1fr min-content;
+						grid-template-areas:
+							"icon head close"
+							"icon content content"
+							"icon link link";
+					}
+				}
+			}
+		}
+	}
+}

package/build/components/notification/notification-grid-overlay.css

@@ -0,0 +1 @@
+

package/build/components/notification/notification-grid-overlay.scss

@@ -0,0 +1,55 @@
+%grid-layout-variant-overlay {
+	// has timestamp
+	&:has(span) {
+		// 1. only content (min. requirement)
+		grid-template-areas: "content timestamp";
+		grid-template-columns: 1fr min-content;
+
+		&:has(.db-button) {
+			grid-template-columns: 1fr min-content min-content;
+			grid-template-areas: "content timestamp close";
+		}
+
+		// 2. headline
+		&:has(header) {
+			grid-template-columns: 1fr min-content;
+			grid-template-areas:
+				"head timestamp"
+				"content content";
+
+			&:has(.db-button) {
+				grid-template-columns: 1fr min-content min-content;
+				grid-template-areas:
+					"head timestamp close"
+					"content content content";
+			}
+		}
+
+		// 3. icon or img
+		&[data-icon],
+		&[data-semantic]:not([data-semantic="adaptive"]),
+		&:has(img) {
+			grid-template-areas: "icon content timestamp";
+			grid-template-columns: min-content 1fr min-content;
+
+			&:has(.db-button) {
+				grid-template-columns: min-content 1fr min-content min-content;
+				grid-template-areas: "icon content timestamp close";
+			}
+
+			&:has(header) {
+				grid-template-columns: min-content 1fr min-content;
+				grid-template-areas:
+					"icon head timestamp"
+					"icon content content";
+
+				&:has(.db-button) {
+					grid-template-columns: min-content 1fr min-content min-content;
+					grid-template-areas:
+						"icon head timestamp close"
+						"icon content content content";
+				}
+			}
+		}
+	}
+}