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

package/build/components/shell/shell.scss

@@ -1,70 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/control-panel-desktop";
-@use "../../styles/internal/control-panel-mobile";
-@use "../../styles/internal/custom-elements";
-@use "../../styles/internal/form-components";
-@forward "shell-desktop";
-@forward "shell-mobile";
-
-%fade-in-loading-fonts {
-	&[data-fade-in="true"] {
-		opacity: 0;
-
-		&:not([data-fonts-loaded]),
-		&[data-fonts-loaded="true"] {
-			opacity: 1;
-		}
-
-		@media screen and (prefers-reduced-motion: no-preference) {
-			transition: opacity variables.$db-transition-straight-emotional;
-		}
-	}
-}
-
-// This global rule locks body scrolling when the shell has loaded fonts.
-// On SSR pages, scrolling is possible until hydration sets data-fonts-loaded="true".
-body:has(.db-shell[data-fonts-loaded="true"]) {
-	overflow: hidden;
-}
-
-.db-shell {
-	@extend %fade-in-loading-fonts;
-
-	block-size: 100lvh;
-	inline-size: 100lvw;
-	display: grid;
-
-	&[data-control-panel-desktop-position="left"] {
-		#{string.unquote(custom-elements.$control-panel-desktop)} {
-			@extend %control-panel-desktop-vertical-orientation;
-		}
-	}
-
-	&[data-control-panel-desktop-position="top"] {
-		#{string.unquote(custom-elements.$control-panel-desktop)} {
-			@extend %control-panel-desktop-horizontal-orientation;
-		}
-	}
-
-	&[data-control-panel-mobile-position="top"] {
-		#{string.unquote(custom-elements.$control-panel-mobile)} {
-			@extend %control-panel-mobile-position-top;
-		}
-	}
-
-	&[data-control-panel-mobile-position="bottom"] {
-		#{string.unquote(custom-elements.$control-panel-mobile)} {
-			@extend %control-panel-mobile-position-bottom;
-		}
-	}
-
-	&[data-show-sub-navigation="false"] {
-		#{string.unquote(custom-elements.$shell-sub-navigation)} {
-			display: none;
-		}
-	}
-}

package/build/components/shell-content/shell-content.css

@@ -1,34 +0,0 @@
-.db-shell-content[data-variant=fixed] .db-main, .db-shell-content:not([data-variant=fixed]) {
-  overflow-y: auto;
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
-}
-
-.db-shell-content {
-  grid-area: shell-content;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.db-shell-content:not([data-variant=fixed]) .db-main {
-  margin-block-end: auto;
-}
-.db-shell-content[data-variant=fixed] {
-  overflow-y: hidden;
-}
-.db-shell-content[data-variant=fixed] .db-main {
-  flex: 1 1 0;
-  min-block-size: 0;
-}
-@media all and (display-mode: standalone) {
-  .db-shell-content[data-variant=fixed]:not(:has(.db-main + *)) .db-main {
-    /* stylelint-disable-next-line db-ux/use-spacings */
-    margin-block-end: env(safe-area-inset-bottom);
-  }
-}
-@media all and (display-mode: standalone) {
-  .db-shell-content:has(.db-main + *) .db-main + *:last-child {
-    /* stylelint-disable-next-line db-ux/use-spacings */
-    padding-block-end: env(safe-area-inset-bottom);
-  }
-}

package/build/components/shell-content/shell-content.scss

@@ -1,53 +0,0 @@
-%shell-content-overflow {
-	overflow-y: auto;
-	/* stylelint-disable-next-line db-ux/use-spacings */
-	padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
-}
-
-.db-shell-content {
-	grid-area: shell-content;
-	overflow-x: hidden;
-	display: flex;
-	flex-direction: column;
-
-	&:not([data-variant="fixed"]) {
-		@extend %shell-content-overflow;
-
-		.db-main {
-			margin-block-end: auto;
-		}
-	}
-
-	&[data-variant="fixed"] {
-		overflow-y: hidden;
-
-		.db-main {
-			@extend %shell-content-overflow;
-
-			flex: 1 1 0;
-			min-block-size: 0;
-		}
-
-		@media all and (display-mode: standalone) {
-			&:not(:has(.db-main + *)) {
-				.db-main {
-					// jscpd:ignore-start
-					/* stylelint-disable-next-line db-ux/use-spacings */
-					margin-block-end: env(safe-area-inset-bottom);
-
-					// jscpd:ignore-end
-				}
-			}
-		}
-	}
-
-	@media all and (display-mode: standalone) {
-		&:has(.db-main + *) {
-			// in this case there is some footer etc.
-			.db-main + *:last-child {
-				/* stylelint-disable-next-line db-ux/use-spacings */
-				padding-block-end: env(safe-area-inset-bottom);
-			}
-		}
-	}
-}

package/build/components/shell-sub-navigation/shell-sub-navigation.css

@@ -1,51 +0,0 @@
-.db-visually-hidden,
-[data-visually-hidden=true] {
-  position: absolute !important;
-  inset-block-start: 0 !important;
-  inline-size: 1px !important;
-  block-size: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-}
-
-/* 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, ... */
-/* Sub components for shell */
-@keyframes popover-animation {
-  0% {
-    pointer-events: none;
-    opacity: 0;
-    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
-  }
-  100% {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-.db-shell-sub-navigation {
-  grid-area: sub-navigation;
-  overflow: hidden;
-}
-.db-shell-sub-navigation > .db-shell-sub-navigation-button {
-  grid-area: button;
-  display: flex;
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .db-shell-sub-navigation > .db-shell-sub-navigation-button .db-button::before {
-    transition: transform var(--db-transition-straight-functional);
-  }
-}
-.db-shell-sub-navigation .db-control-panel-navigation {
-  grid-area: navigation;
-}

package/build/components/shell-sub-navigation/shell-sub-navigation.scss

@@ -1,184 +0,0 @@
-@use "sass:string";
-@use "@db-ux/core-foundations/build/styles/variables";
-@use "@db-ux/core-foundations/build/styles/screen-sizes";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "@db-ux/core-foundations/build/styles/helpers";
-@use "../../styles/internal/control-panel-desktop";
-@use "../../styles/internal/custom-elements";
-@use "../../styles/internal/form-components";
-
-.db-shell-sub-navigation {
-	grid-area: sub-navigation;
-	overflow: hidden;
-
-	> .db-shell-sub-navigation-button {
-		grid-area: button;
-		display: flex;
-
-		@media screen and (prefers-reduced-motion: no-preference) {
-			.db-button::before {
-				transition: transform
-					#{variables.$db-transition-straight-functional};
-			}
-		}
-	}
-
-	.db-control-panel-navigation {
-		grid-area: navigation;
-	}
-}
-
-@mixin sub-navigation-top {
-	#{string.unquote(custom-elements.$shell-sub-navigation)} {
-		@include helpers.divider("bottom", after);
-
-		.db-control-panel-navigation {
-			--db-overflow-scroll-button-inset-inline-start: calc(
-				#{variables.$db-spacing-fixed-sm} / 2
-			);
-			--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-sm};
-
-			display: grid;
-
-			@include control-panel-desktop.horizontal-navigation;
-
-			> menu {
-				/* workaround for showing correct scrolling and focus */
-				padding-inline: calc(#{variables.$db-spacing-fixed-sm} / 2);
-				margin-inline: calc(#{variables.$db-spacing-fixed-sm} / 2);
-				/* stylelint-disable-next-line db-ux/use-spacings */
-				padding-block: var(--db-overflow-scroll-button-inset-block);
-			}
-		}
-
-		> .db-shell-sub-navigation-button {
-			display: none;
-		}
-	}
-}
-
-@mixin sub-navigation-left {
-	#{string.unquote(custom-elements.$shell-sub-navigation)} {
-		display: grid;
-
-		@include helpers.divider("right", after);
-
-		.db-control-panel-navigation {
-			max-inline-size: screen-sizes.$db-breakpoint-xs;
-			padding: variables.$db-spacing-fixed-md;
-		}
-
-		/* jscpd:ignore-start */
-		&[data-open="false"] {
-			inline-size: auto;
-			/* stylelint-disable-next-line declaration-property-value-no-unknown */
-			inline-size: calc-size(auto, size);
-			grid-template-areas: "button";
-			grid-template-rows: [button] 1fr;
-
-			/* jscpd:ignore-end */
-
-			.db-control-panel-navigation {
-				display: none;
-			}
-
-			> .db-shell-sub-navigation-button {
-				justify-content: center;
-
-				.db-button {
-					block-size: 100%;
-					border-radius: 0;
-
-					&::before {
-						transform: form-components.$dropdown-icon-transform;
-					}
-				}
-			}
-		}
-
-		&[data-open="true"] {
-			grid-template-areas:
-				"navigation"
-				"button";
-			grid-template-rows:
-				[navigation] 1fr
-				[button] auto;
-
-			/// Sets the inline-size (width) of the sub-navigation
-			inline-size: var(
-				--db-shell-sub-navigation-inline-size,
-				#{variables.$db-container-xs}
-			);
-
-			.db-control-panel-navigation {
-				overflow: hidden auto;
-
-				@include control-panel-desktop.vertical-navigation(false);
-
-				> menu {
-					padding-inline: 0;
-				}
-			}
-
-			> .db-shell-sub-navigation-button {
-				padding-block: variables.$db-spacing-fixed-xs;
-				padding-inline: variables.$db-spacing-fixed-lg;
-				justify-content: flex-end;
-				margin-block-start: auto;
-
-				@include helpers.divider("top");
-			}
-		}
-	}
-}
-
-@mixin sub-navigation-mobile {
-	#{string.unquote(custom-elements.$shell-sub-navigation)} {
-		> .db-shell-sub-navigation-button {
-			display: none;
-		}
-
-		.db-control-panel-navigation-item-group {
-			// We don't allow complex sub-navigation in mobile
-			// Users should add a custom implementation for this scenario or
-			// They should use another mobile navigation
-			display: none !important;
-		}
-
-		.db-control-panel-navigation-item {
-			inline-size: fit-content;
-			white-space: nowrap;
-		}
-
-		.db-control-panel-navigation {
-			--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-xs};
-			--db-overflow-scroll-button-inset-inline-start: 0;
-			--db-control-panel-sub-navigation-mobile: 1;
-
-			display: grid;
-
-			@include control-panel-desktop.horizontal-navigation(false);
-
-			> menu {
-				padding-block: variables.$db-spacing-fixed-xs;
-
-				/* workaround for showing correct scrolling and focus */
-				padding-inline-start: calc(
-					#{variables.$db-spacing-fixed-sm} / 2
-				);
-				margin-inline-start: calc(
-					#{variables.$db-spacing-fixed-sm} / 2
-				);
-			}
-
-			&[data-variant="tree"] {
-				// If a users passes tree, we hide the circle icon
-				.db-control-panel-navigation-item a {
-					&::before {
-						display: none;
-					}
-				}
-			}
-		}
-	}
-}

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

@@ -1,11 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-
-%control-panel-actions {
-	display: flex;
-	gap: variables.$db-spacing-fixed-xs;
-	align-items: center;
-
-	&:empty {
-		display: none;
-	}
-}