@db-ux/core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

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

@@ -0,0 +1,107 @@
+@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/helpers";
+@use "../../styles/internal/control-panel-desktop";
+@use "../../styles/internal/control-panel-mobile";
+@use "../../styles/internal/custom-elements";
+
+.db-shell {
+	// MOBILE
+	@include screen-sizes.screen-min-max(
+		(
+			max: "sm"
+		)
+	) {
+		&[data-control-panel-mobile-position="top"] {
+			&:not([data-sub-navigation-mobile-position]),
+			&[data-sub-navigation-mobile-position="top"] {
+				grid-template-areas:
+					"control-panel"
+					"sub-navigation"
+					"main";
+				grid-template-rows:
+					[control-panel] auto
+					[sub-navigation] auto
+					[main] 1fr;
+
+				#{string.unquote(custom-elements.$shell-sub-navigation)} {
+					@include helpers.divider("bottom");
+				}
+			}
+
+			&[data-sub-navigation-mobile-position="bottom"] {
+				grid-template-areas:
+					"control-panel"
+					"main"
+					"sub-navigation";
+				grid-template-rows:
+					[control-panel] auto
+					[main] 1fr
+					[sub-navigation] auto;
+
+				#{string.unquote(custom-elements.$shell-sub-navigation)} {
+					@include helpers.divider("top");
+				}
+			}
+		}
+
+		&[data-control-panel-mobile-position="bottom"] {
+			grid-template-areas:
+				"sub-navigation"
+				"main"
+				"control-panel";
+			grid-template-rows:
+				[control-panel] auto
+				[main] 1fr
+				[control-panel] auto;
+
+			#{string.unquote(custom-elements.$shell-sub-navigation)} {
+				@include helpers.divider("bottom");
+			}
+		}
+
+		#{string.unquote(custom-elements.$shell-sub-navigation)} {
+			> .db-shell-sub-navigation-button {
+				display: none;
+			}
+
+			.db-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-navigation{
+				--db-overflow-scroll-button-inset-block: #{variables.$db-spacing-fixed-xs};
+				--db-overflow-scroll-button-inset-inline-start: 0;
+
+				display: grid;
+
+				@include control-panel-desktop.horizontal-navigation(false);
+
+				#{string.unquote(custom-elements.$overflow-scroll-left-button)},
+				#{string.unquote(custom-elements.$overflow-scroll-right-button)} {
+					display: none;
+				}
+
+				> 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
+					);
+				}
+			}
+		}
+
+		#{string.unquote(custom-elements.$control-panel-desktop)} {
+			display: none;
+		}
+	}
+}