@db-ux/core-components 4.12.1 → 4.13.0-shell-f221975

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

@@ -1,337 +0,0 @@
-@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 {
-			visibility: visible;
-			transform: translateX(0%);
-
-			@media (prefers-reduced-motion: no-preference) {
-				transition:
-					visibility 0ms linear 0ms,
-					transform #{variables.$db-transition-duration-extra-slow}
-						#{variables.$db-transition-timing-emotional};
-			}
-
-			.db-sub-navigation {
-				inset: 0;
-				inline-size: 100%;
-				border-color: transparent;
-			}
-		}
-	}
-
-	&:not(&[aria-expanded="true"]) {
-		~ .db-sub-navigation {
-			transform: translateX(110%);
-		}
-
-		@media (prefers-reduced-motion: no-preference) {
-			~ .db-sub-navigation {
-				transition:
-					visibility 0ms linear 410ms,
-					transform #{variables.$db-transition-duration-slow}
-						#{variables.$db-transition-timing-emotional}; // hide animation is 0.4s
-			}
-		}
-	}
-}
-
-%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%;
-	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
-	justify-content: space-between;
-
-	@include helpers.display(inline-flex);
-	@include helpers.interactive-bg(
-		colors.$db-adaptive-bg-basic-transparent-full-hovered,
-		colors.$db-adaptive-bg-basic-transparent-full-pressed
-	);
-
-	&:has(~ .db-sub-navigation:is(:hover, :focus)) {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-	}
-}
-
-.db-navigation-item {
-	--db-has-before: 0;
-
-	@extend %db-overwrite-font-size-md;
-	@include icon-passing.icon-passing;
-	@include helpers.display(inline-flex);
-
-	position: relative;
-	inline-size: auto;
-
-	&[data-wrap="true"] {
-		:is(a, .db-navigation-item-expand-button):first-of-type {
-			white-space: normal;
-			text-align: start;
-		}
-	}
-
-	@include screen-sizes.screen("md", "max") {
-		&:not([data-width="full"]) {
-			inline-size: 100%;
-
-			.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;
-
-			font-weight: inherit;
-
-			// default icon for navigation
-			@include icons.set-icon("chevron_right", "after");
-		}
-	}
-
-	&: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: variables.$db-opacity-md;
-		pointer-events: none;
-	}
-}
-
-@mixin sub-navigation-mobile() {
-	padding: variables.$db-spacing-fixed-md;
-	inline-size: calc(100% - #{variables.$db-spacing-fixed-xl});
-	position: fixed;
-	overflow: hidden auto;
-	inset-inline-start: variables.$db-spacing-fixed-xl;
-
-	.db-drawer-container[data-direction="left"] & {
-		inset-inline: auto variables.$db-spacing-fixed-xl;
-	}
-
-	inset-block: calc(#{component.$min-mobile-header-height})
-		calc(#{variables.$db-sizing-md} + #{variables.$db-spacing-fixed-xs} * 2);
-}
-
-.db-sub-navigation {
-	@extend %component-border;
-
-	margin: 0;
-
-	@include helpers.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 {
-			@include helpers.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: variables.$db-container-xs;
-		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):not([data-force-close="true"]) {
-			visibility: visible;
-		}
-
-		&[data-force-close="true"] {
-			pointer-events: none;
-		}
-
-		&::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%;
-				/* stylelint-disable-next-line db-ux/use-sizing */
-				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 {
-		@include helpers.display(none);
-	}
-
-	.db-navigation-item {
-		inline-size: 100%;
-
-		&::after {
-			margin-inline-start: auto;
-		}
-	}
-}
-
-.db-mobile-navigation-back {
-	@include helpers.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;
-
-	@include helpers.divider("bottom");
-}

package/build/components/page/page.css

@@ -1,61 +0,0 @@
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-/* Variants for adaptive components like input, select, notification, ... */
-@media screen {
-  .db-page-document {
-    block-size: 100%;
-    overflow: hidden;
-  }
-}
-
-@media screen {
-  .db-page {
-    opacity: 0;
-  }
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-page[data-fade-in=true] {
-    transition: opacity var(--db-transition-straight-emotional);
-  }
-}
-@media screen {
-  .db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
-    opacity: 1;
-  }
-  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer):not([hidden]) {
-    display: flex;
-  }
-  .db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
-    flex: 0 1 auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-  .db-page[data-variant=fixed] {
-    block-size: 100%;
-    min-block-size: 100%;
-  }
-  .db-page[data-variant=fixed]:not([hidden]) {
-    display: flex;
-  }
-  .db-page[data-variant=fixed] {
-    flex-direction: column;
-    /* workaround for angular */
-  }
-  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer):not([hidden]) {
-    display: flex;
-  }
-  .db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
-    flex: 0 1 auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-  .db-page[data-variant=fixed] > .db-main:not([hidden]) {
-    display: flex;
-  }
-  .db-page[data-variant=fixed] > .db-main {
-    flex-direction: column;
-    overflow: auto;
-    flex: 1 1 auto;
-    inline-size: 100%;
-  }
-}

package/build/components/page/page.scss

@@ -1,61 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers";
-
-.db-page-document {
-	@media screen {
-		block-size: 100%;
-		overflow: hidden;
-	}
-}
-
-@mixin header-footer-style {
-	> :is(.db-header, .db-footer, header, footer) {
-		@include helpers.display(flex);
-
-		flex: 0 1 auto;
-		flex-grow: 0;
-		flex-shrink: 0;
-	}
-}
-
-.db-page {
-	@media screen {
-		opacity: 0;
-
-		@media (prefers-reduced-motion: no-preference) {
-			&[data-fade-in="true"] {
-				transition: opacity variables.$db-transition-straight-emotional;
-			}
-		}
-
-		&:not([data-fonts-loaded]),
-		&[data-fonts-loaded="true"] {
-			opacity: 1;
-		}
-
-		&[data-variant="fixed"] {
-			@include header-footer-style;
-
-			block-size: 100%;
-			min-block-size: 100%;
-
-			@include helpers.display(flex);
-
-			flex-direction: column;
-
-			/* workaround for angular */
-			> :is(db-header, dbheader, dbfooter, db-footer) {
-				@include header-footer-style;
-			}
-
-			> .db-main {
-				@include helpers.display(flex);
-
-				flex-direction: column;
-				overflow: auto;
-				flex: 1 1 auto;
-				inline-size: 100%;
-			}
-		}
-	}
-}