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

package/build/components/control-panel-desktop/control-panel-desktop.scss

@@ -0,0 +1,29 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "@db-ux/core-foundations/build/styles/density";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "../../styles/internal/component";
+@use "../../styles/internal/control-panel-desktop";
+
+.db-control-panel-desktop {
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+	display: grid;
+	position: relative;
+	min-block-size: component.$min-mobile-header-height;
+
+	&[data-orientation="vertical"] {
+		@extend %control-panel-desktop-vertical-orientation;
+	}
+
+	&[data-orientation="horizontal"] {
+		@extend %control-panel-desktop-horizontal-orientation;
+	}
+
+	.db-link {
+		display: inline-block;
+	}
+
+	.db-navigation {
+		grid-area: navigation;
+	}
+}

package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.css

@@ -0,0 +1,192 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+.db-visually-hidden,
+[data-visually-hidden=true] {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+/**
+	Generates 3 types of placeholders, e.g:
+	- %db-component-variables-md
+	- %db-font-size-md
+	- %db-overwrite-font-size-md
+ */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-control-panel-flat-icon-navigation:not([data-no-text=true]) .db-navigation .db-navigation-item a {
+  font: var(--db-type-body-3xs);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-control-panel-flat-icon-navigation:not([data-no-text=true]) .db-navigation .db-navigation-item a {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-3xs);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-3xs);
+  }
+}
+
+@layer variables {}
+
+/**
+ * @mixin screen-min-max
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
+ */
+.db-control-panel-flat-icon-navigation {
+  display: none;
+}
+.db-control-panel-flat-icon-navigation .db-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.db-control-panel-flat-icon-navigation .db-navigation > menu {
+  display: flex;
+  flex-direction: row;
+  gap: var(--db-spacing-fixed-sm);
+  justify-content: space-evenly;
+  inline-size: 100%;
+  max-inline-size: var(--db-container-3xl);
+}
+.db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item {
+  justify-content: center;
+  align-items: center;
+}
+.db-control-panel-flat-icon-navigation .db-navigation > menu .db-navigation-item a {
+  min-block-size: var(--db-sizing-md);
+  min-inline-size: var(--db-sizing-md);
+}
+.db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item:not([data-icon]),
+.db-control-panel-flat-icon-navigation .db-navigation .db-navigation-item-group {
+  display: none;
+}
+.db-control-panel-flat-icon-navigation[data-no-text=true] .db-navigation .db-navigation-item {
+  --db-icon-passing-padding-inline-start: 0;
+}
+.db-control-panel-flat-icon-navigation[data-no-text=true] .db-navigation .db-navigation-item::before {
+  --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+}
+.db-control-panel-flat-icon-navigation[data-no-text=true] .db-navigation .db-navigation-item a {
+  font-size: 0;
+  padding: 0;
+}
+.db-control-panel-flat-icon-navigation[data-no-text=true] .db-navigation .db-navigation-item .db-tooltip {
+  --db-show-popover-visibility: visible;
+}
+.db-control-panel-flat-icon-navigation:not([data-no-text=true]) .db-navigation .db-navigation-item {
+  --db-icon-passing-padding-inline-start: var(--db-spacing-fixed-3xs);
+  --nav-icon-size: var(--db-icon-font-size);
+}
+.db-control-panel-flat-icon-navigation:not([data-no-text=true]) .db-navigation .db-navigation-item::before {
+  --db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+  --db-icon-passing-inset-block-start: 0;
+}
+.db-control-panel-flat-icon-navigation:not([data-no-text=true]) .db-navigation .db-navigation-item a {
+  padding-block: var(--nav-icon-size) 0;
+  padding-inline-end: var(--db-spacing-fixed-3xs);
+  inline-size: fit-content;
+}

package/build/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.scss

@@ -0,0 +1,84 @@
+@use "sass:string";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "../../styles/internal/form-components";
+
+.db-control-panel-flat-icon-navigation {
+	display: none;
+
+	.db-navigation {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> menu {
+			display: flex;
+			flex-direction: row;
+			gap: variables.$db-spacing-fixed-sm;
+			justify-content: space-evenly;
+			inline-size: 100%;
+			max-inline-size: variables.$db-container-3xl;
+
+			.db-navigation-item {
+				justify-content: center;
+				align-items: center;
+
+				a {
+					min-block-size: variables.$db-sizing-md;
+					min-inline-size: variables.$db-sizing-md;
+				}
+			}
+		}
+
+		.db-navigation-item:not([data-icon]),
+		.db-navigation-item-group {
+			// we don't allow item groups for flat-icon variant or non icon navigation-items
+			display: none;
+		}
+	}
+
+	&[data-no-text="true"] {
+		.db-navigation {
+			.db-navigation-item {
+				--db-icon-passing-padding-inline-start: 0;
+
+				&::before {
+					--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+				}
+
+				a {
+					font-size: 0;
+					padding: 0;
+				}
+
+				.db-tooltip {
+					// We show tooltip for collapsed state
+					--db-show-popover-visibility: visible;
+				}
+			}
+		}
+	}
+
+	&:not([data-no-text="true"]) {
+		.db-navigation {
+			.db-navigation-item {
+				--db-icon-passing-padding-inline-start: #{variables.$db-spacing-fixed-3xs};
+				--nav-icon-size: #{form-components.$font-size-height};
+
+				&::before {
+					--db-icon-passing-inset-inline-start: calc(50% - 0.5em);
+					--db-icon-passing-inset-block-start: 0;
+				}
+
+				a {
+					@extend %db-overwrite-font-size-3xs;
+
+					// stylelint-disable-next-line db-ux/use-spacings
+					padding-block: var(--nav-icon-size) 0;
+					padding-inline-end: variables.$db-spacing-fixed-3xs;
+					inline-size: fit-content;
+				}
+			}
+		}
+	}
+}

package/build/components/control-panel-meta-navigation/control-panel-meta-navigation.css

@@ -0,0 +1,54 @@
+/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
+/* Use fixed spacings for all kind of distances (margin, padding, ...) */
+/* The primary use-case for responsive spacings are
+paddings/gaps in an application e.g. the <main> should have a responsive padding. */
+/* Elevation */
+/* Border */
+/* Opacity */
+/* Transitions */
+/* Screen sizes */
+/* Container sizes */
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-control-panel-meta-navigation {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  background-color: var(--db-adaptive-bg-basic-level-2-default);
+  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-lg);
+  gap: var(--db-spacing-fixed-md);
+  grid-area: meta;
+}

package/build/components/control-panel-meta-navigation/control-panel-meta-navigation.scss

@@ -0,0 +1,12 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+
+.db-control-panel-meta-navigation {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: flex-end;
+	background-color: colors.$db-adaptive-bg-basic-level-2-default;
+	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
+	gap: variables.$db-spacing-fixed-md;
+	grid-area: meta;
+}