@db-ux/core-components 4.14.0-shell-52d18db → 5.0.0

package/build/styles/internal/_control-panel-desktop.scss

@@ -1,412 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "./form-components";
-@use "./custom-elements";
-@use "./component";
-@use "./navigation-item";
-@use "./indicator";
-@use "./scrollbar";
-
-$control-panel-desktop-horizontal-padding-block: calc(
-	#{variables.$db-spacing-fixed-md} + env(safe-area-inset-top)
-);
-$control-panel-desktop-horizontal-padding-inline: #{variables.$db-spacing-fixed-sm};
-$control-panel-desktop-vertical-padding-block: #{variables.$db-spacing-fixed-sm};
-$control-panel-desktop-vertical-padding-inline: calc(
-	#{variables.$db-spacing-fixed-sm} + env(safe-area-inset-left)
-);
-
-@mixin horizontal-navigation($scroll-buttons: true) {
-	--db-control-panel-navigation-horizontal: 1;
-
-	@if $scroll-buttons {
-		@include scrollbar.set-overflow-scroll-buttons;
-
-		&:has(.overflow-scroll-left-button) {
-			> menu {
-				&::before {
-					content: "";
-				}
-			}
-		}
-
-		&:has(.overflow-scroll-right-button) {
-			> menu {
-				&::after {
-					content: "";
-				}
-			}
-		}
-	}
-
-	&:has(.db-button) {
-		> menu {
-			@if $scroll-buttons {
-				@include scrollbar.set-overflow-scroll-button-backgrounds;
-			}
-
-			@supports (scrollbar-width: none) {
-				scrollbar-width: none;
-			}
-
-			&::-webkit-scrollbar {
-				display: none;
-			}
-
-			&::before,
-			&::after {
-				block-size: calc(100% - #{variables.$db-border-width-3xs});
-				inset-block: 0;
-				flex: none;
-			}
-		}
-	}
-
-	> menu {
-		overflow: auto hidden;
-		flex-direction: row;
-
-		#{string.unquote(custom-elements.$control-panel-navigation-item-group)},
-		#{string.unquote(custom-elements.$control-panel-navigation-item)} {
-			white-space: nowrap; // we don't want to break
-		}
-
-		#{string.unquote(custom-elements.$control-panel-navigation-item-group)} {
-			> .db-control-panel-navigation-item-group-expand-button {
-				> .db-control-panel-navigation-item-group-expand-button-end-slot-container {
-					&::after {
-						--db-icon-trailing: "chevron_down";
-					}
-				}
-			}
-
-			> .db-control-panel-navigation-item-group-menu {
-				inset-block-start: calc(
-					100% +
-						var(
-							--db-popover-distance,
-							#{variables.$db-spacing-fixed-md}
-						)
-				);
-
-				&::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}
-					);
-				}
-			}
-		}
-	}
-}
-
-@mixin vertical-navigation($main-navigation: true) {
-	@if $main-navigation {
-		padding-block: $control-panel-desktop-vertical-padding-block;
-	}
-
-	&:not([data-variant]),
-	&[data-variant="popover"] {
-		> menu {
-			.db-control-panel-navigation-item-group {
-				.db-control-panel-navigation-item-group-menu {
-					inset-inline-start: calc(
-						100% + #{variables.$db-spacing-fixed-xs}
-					);
-
-					@include navigation-item.navigation-item-group-menu-triangle-vertical;
-				}
-			}
-		}
-	}
-
-	> menu {
-		flex-direction: column;
-		padding-inline: $control-panel-desktop-vertical-padding-inline;
-
-		.db-control-panel-navigation-item-group,
-		.db-control-panel-navigation-item {
-			inline-size: 100%;
-		}
-
-		.db-control-panel-navigation-item-end-slot-container {
-			inset-inline-end: #{variables.$db-spacing-fixed-sm};
-		}
-	}
-}
-
-%control-panel-desktop-horizontal-orientation {
-	border-block-end: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-	column-gap: $control-panel-desktop-horizontal-padding-inline;
-	grid-template:
-		[meta]
-		"meta meta meta meta meta meta" auto
-		[padding-top]
-		". . navigation . . ." #{$control-panel-desktop-horizontal-padding-block}
-		[others]
-		". brand navigation primary secondary ." auto
-		[padding-bottom]
-		". . navigation . . ." #{$control-panel-desktop-horizontal-padding-block} /
-		[padding-left] 0
-		[brand] max-content
-		[navigation] 1fr
-		[primary] max-content
-		[secondary] max-content
-		[padding-right] 0;
-
-	> .db-control-panel-desktop-scroll-container {
-		display: contents;
-	}
-
-	.db-control-panel-brand {
-		padding-inline: $control-panel-desktop-horizontal-padding-inline;
-	}
-
-	.db-control-panel-primary-actions,
-	.db-control-panel-secondary-actions {
-		block-size: variables.$db-sizing-md;
-	}
-
-	> .db-control-panel-desktop-button {
-		display: none;
-	}
-
-	.db-control-panel-secondary-actions {
-		padding-inline-start: $control-panel-desktop-horizontal-padding-inline;
-
-		@include helpers.divider("left");
-	}
-
-	.db-control-panel-navigation {
-		@include helpers.divider("left");
-
-		&::before {
-			inset-block: #{$control-panel-desktop-horizontal-padding-block};
-		}
-
-		.overflow-scroll-left-button,
-		.overflow-scroll-right-button {
-			display: flex;
-		}
-	}
-
-	&[data-width="small"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-sm;
-	}
-
-	&[data-width="medium"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-md;
-	}
-
-	&[data-width="large"] {
-		margin-inline: auto;
-		max-inline-size: screen-sizes.$db-breakpoint-lg;
-	}
-
-	.db-control-panel-navigation {
-		--db-overflow-scroll-button-inset-block: #{$control-panel-desktop-horizontal-padding-block};
-		--db-overflow-scroll-button-inset-inline-start: calc(
-			#{$control-panel-desktop-horizontal-padding-inline} / 2
-		);
-
-		display: grid;
-
-		@include horizontal-navigation;
-
-		> menu {
-			padding-block: $control-panel-desktop-horizontal-padding-block;
-
-			/* workaround for showing correct scrolling and focus */
-			padding-inline-start: calc(
-				#{$control-panel-desktop-horizontal-padding-inline} / 2
-			);
-			margin-inline-start: calc(
-				#{$control-panel-desktop-horizontal-padding-inline} / 2
-			);
-
-			@include navigation-item.direct-navigation-items {
-				@extend %indicator;
-				@include indicator.set-indicator-horizontal;
-
-				@include navigation-item.active-navigation-item {
-					@include indicator.show-indicator-horizontal;
-				}
-
-				@include navigation-item.direct-navigation-items {
-					/* Workaround for custom-elements */
-					&::after {
-						content: none;
-					}
-				}
-			}
-		}
-	}
-}
-
-%control-panel-desktop-vertical-orientation {
-	border-inline-end: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-	block-size: 100%;
-	grid-template:
-		[brand] "brand" auto
-		[scroll] "scroll" 1fr
-		[primary] "primary" auto
-		[secondary] "secondary" auto
-		[button] "button" auto;
-
-	@media screen and (prefers-reduced-motion: no-preference) {
-		transition: inline-size #{variables.$db-transition-straight-functional};
-
-		> .db-control-panel-desktop-button {
-			.db-button {
-				&::before {
-					@media screen and (prefers-reduced-motion: no-preference) {
-						transition: transform
-							#{variables.$db-transition-straight-functional};
-					}
-				}
-			}
-		}
-	}
-
-	/* jscpd:ignore-start */
-	&[data-open="false"] {
-		inline-size: auto;
-		/* stylelint-disable-next-line declaration-property-value-no-unknown */
-		inline-size: calc-size(auto, size);
-
-		.db-control-panel-navigation-item-group,
-		.db-control-panel-navigation-item,
-		.db-control-panel-primary-actions,
-		.db-control-panel-secondary-actions,
-		.db-control-panel-meta {
-			display: none;
-		}
-
-		.db-control-panel-brand {
-			inline-size: variables.$db-sizing-md;
-			overflow: hidden;
-
-			&::before {
-				margin: auto;
-				aspect-ratio: var(
-					--db-logo-aspect-ratio-short,
-					var(--db-logo-aspect-ratio)
-				);
-				background-image: var(--db-logo-url-short, var(--db-logo-url));
-			}
-		}
-
-		> .db-control-panel-desktop-button {
-			justify-content: center;
-
-			.db-button {
-				&::before {
-					transform: form-components.$dropdown-icon-transform;
-				}
-			}
-		}
-	}
-
-	/* jscpd:ignore-end */
-
-	&[data-open="true"] {
-		/// Sets the inline-size (width) of the control-panel-desktop
-		/// @propertyname inline-size
-		/// @cssprop --db-control-panel-desktop-inline-size
-		/// @default var(--db-container-xs)
-		inline-size: var(
-			--db-control-panel-desktop-inline-size,
-			#{variables.$db-container-xs}
-		);
-	}
-
-	> .db-control-panel-desktop-button {
-		grid-area: button;
-		padding-block: variables.$db-spacing-fixed-xs;
-		display: flex;
-		justify-content: flex-end;
-
-		@include helpers.divider("top");
-	}
-
-	.db-control-panel-primary-actions,
-	.db-control-panel-secondary-actions,
-	> .db-control-panel-desktop-button {
-		padding: $control-panel-desktop-vertical-padding-block
-			$control-panel-desktop-vertical-padding-inline;
-	}
-
-	.db-control-panel-desktop-brand-container {
-		inline-size: 100%;
-		padding: $control-panel-desktop-vertical-padding-block
-			$control-panel-desktop-vertical-padding-inline;
-
-		@include helpers.divider("bottom", "after");
-
-		&::before {
-			flex-direction: column;
-			overflow: hidden;
-		}
-	}
-
-	> .db-control-panel-desktop-scroll-container {
-		display: grid;
-		overflow: hidden auto;
-		grid-area: scroll;
-		grid-template-areas: "navigation" "meta";
-
-		.db-control-panel-meta {
-			margin-block-start: auto;
-			flex-flow: column nowrap;
-
-			@include helpers.divider("top");
-		}
-	}
-
-	.db-control-panel-primary-actions,
-	.db-control-panel-secondary-actions {
-		@include helpers.divider("top");
-	}
-
-	.db-control-panel-navigation {
-		@include vertical-navigation;
-
-		/* jscpd:ignore-start */
-		> menu {
-			@include navigation-item.direct-navigation-items {
-				@extend %indicator;
-				@include indicator.set-indicator-vertical;
-
-				@include navigation-item.active-navigation-item {
-					@include indicator.show-indicator-vertical;
-				}
-
-				@include navigation-item.direct-navigation-items {
-					/* Workaround for custom-elements */
-					&::after {
-						content: none;
-					}
-				}
-			}
-		}
-
-		/* jscpd:ignore-end */
-	}
-}

package/build/styles/internal/_control-panel-mobile.scss

@@ -1,107 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "./component";
-@use "./custom-elements";
-@use "../../components/drawer/drawer";
-
-@mixin has-empty-drawer {
-	&:has(.db-control-panel-mobile-drawer-scroll-container:empty):not(
-			:has(.db-control-panel-secondary-actions)
-		) {
-		@content;
-	}
-}
-
-%control-panel-mobile-position-top {
-	border-block-end: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-	grid-template-areas: var(
-		--db-control-panel-mobile-position-top-grid-areas,
-		"brand primary drawer-button"
-	);
-	grid-template-columns: var(
-		--db-control-panel-mobile-position-top-grid-columns,
-		[brand] 1fr [primary] min-content [drawer-button] min-content
-	);
-	justify-items: center;
-	padding-block: calc(
-			#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-top)
-		)
-		variables.$db-spacing-fixed-xs;
-
-	.db-control-panel-primary-actions {
-		// fake divider margin
-		padding-inline-end: variables.$db-spacing-fixed-xs;
-
-		@include helpers.divider("right");
-
-		&::before {
-			margin-inline-start: variables.$db-spacing-fixed-xs;
-		}
-	}
-}
-
-%control-panel-mobile-position-bottom {
-	border-block-start: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-	grid-template-areas: "brand drawer-button primary";
-	grid-template-columns:
-		minmax(#{variables.$db-sizing-md}, min-content)
-		1fr minmax(#{variables.$db-sizing-md}, min-content);
-	justify-content: space-evenly;
-	padding-block: variables.$db-spacing-fixed-xs
-		calc(#{variables.$db-spacing-fixed-xs} + env(safe-area-inset-bottom));
-
-	/* jscpd:ignore-start */
-	.db-control-panel-brand {
-		inline-size: variables.$db-sizing-md;
-		overflow: hidden;
-
-		&::before {
-			aspect-ratio: var(
-				--db-logo-aspect-ratio-short,
-				var(--db-logo-aspect-ratio)
-			);
-			background-image: var(--db-logo-url-short, var(--db-logo-url));
-		}
-	}
-
-	/* jscpd:ignore-end */
-
-	> db-button > .db-control-panel-mobile-button,
-	> .db-control-panel-mobile-button {
-		place-self: center;
-	}
-
-	// Override drawer to use direction-up settings
-	.db-drawer:has(.db-control-panel-mobile-drawer-scroll-container) {
-		--db-drawer-max-height: 67lvh;
-
-		> .db-drawer-container {
-			@extend %direction-from-bottom-to-top;
-
-			border-block-start: component.$component-border;
-			border-inline-end: 0; // revert the default setting
-			inline-size: 100lvw;
-			max-inline-size: 100lvw;
-		}
-
-		&[open] {
-			.db-drawer-container {
-				@media screen and (prefers-reduced-motion: no-preference) {
-					animation: show-bottom-to-top
-						#{variables.$db-transition-straight-show};
-				}
-
-				&[hidden] {
-					@media screen and (prefers-reduced-motion: no-preference) {
-						animation: hide-bottom-to-top
-							#{variables.$db-transition-straight-hide};
-					}
-				}
-			}
-		}
-	}
-}

package/build/styles/internal/_navigation-item.scss

@@ -1,122 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@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/helpers";
-@use "@db-ux/core-foundations/build/styles/icons";
-@use "../../styles/internal/custom-elements";
-@use "../../styles/internal/icon-passing";
-@use "../../styles/internal/component";
-
-@mixin direct-navigation-items {
-	#{string.unquote(custom-elements.$control-panel-navigation-item)},
-	#{string.unquote(custom-elements.$control-panel-navigation-item-group)} {
-		@content;
-	}
-}
-
-@mixin active-navigation-item() {
-	&:has([aria-current="page"]),
-	&:has([data-active="true"]),
-	&[aria-current="page"],
-	&[data-active="true"] {
-		@content;
-	}
-}
-
-@mixin navigation-item-group-menu-triangle-vertical() {
-	&::before {
-		content: "";
-		position: absolute;
-		inset-block-start: 0;
-		inset-inline-start: 0;
-		block-size: 100%;
-		inline-size: var(--db-control-panel-navigation-item-inline-size, 100%);
-		background-color: transparent;
-		transform: translateX(-100%);
-		clip-path: var(
-			--db-control-panel-navigation-item-clip-path,
-			polygon(
-				10% calc(1lh + #{variables.$db-spacing-fixed-2xs}),
-				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: calc(100% - 2 * #{variables.$db-spacing-fixed-3xs});
-		inline-size: variables.$db-spacing-fixed-xs;
-	}
-}
-
-%navigation-item-interactive-element {
-	@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;
-	text-align: start;
-	align-items: center; // Centering the content vertically and horizontally
-	min-block-size: variables.$db-sizing-md;
-
-	@include helpers.hover {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-hovered;
-	}
-
-	@include helpers.active {
-		background-color: colors.$db-adaptive-bg-basic-transparent-full-pressed;
-	}
-}
-
-%navigation-item {
-	@extend %db-overwrite-font-size-md;
-
-	position: relative;
-	display: flex;
-	block-size: fit-content;
-
-	// Mobile
-	@include screen-sizes.screen-min-max(
-		(
-			max: "sm"
-		)
-	) {
-		inline-size: 100%;
-	}
-
-	// Desktop
-	@include screen-sizes.screen-min-max(
-		(
-			min: "sm"
-		)
-	) {
-		inline-size: fit-content;
-	}
-
-	&:has([aria-current="page"]),
-	&:has([data-active="true"]),
-	&[aria-current="page"],
-	&[data-active="true"] {
-		> :is(a, button) {
-			font-weight: 700;
-		}
-	}
-
-	&[aria-disabled="true"] {
-		opacity: variables.$db-opacity-md;
-		pointer-events: none;
-	}
-}