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

package/build/components/header/header.scss

@@ -1,259 +0,0 @@
-@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 "@db-ux/core-foundations/build/styles/density";
-@use "@db-ux/core-foundations/build/styles/colors";
-@use "../../styles/internal/component";
-
-.db-header {
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	min-block-size: component.$min-mobile-header-height;
-	border-block-end: variables.$db-border-width-3xs solid
-		colors.$db-adaptive-on-bg-basic-emphasis-60-default;
-
-	@include screen-sizes.screen("md") {
-		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
-	}
-
-	&[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-link {
-		display: inline-block;
-	}
-
-	&[data-on-forcing-mobile="true"] {
-		/*
-		We make the header invisible for a short time if the user passes in data-force-mobile property.
-		We do it because otherwise we see the default desktop-navigation for some mil. sec.
-		*/
-		visibility: hidden;
-	}
-
-	// All use-cases where we hide the divider
-	&:has(.db-header-navigation:empty),
-	&:has(.db-brand:empty) {
-		.db-header-navigation-container::before {
-			display: none;
-		}
-	}
-
-	// Hide the burger menu if there is no navigation
-	&:has(.db-header-navigation:empty) {
-		.db-header-burger-menu-container {
-			display: none;
-		}
-
-		&:has(.db-header-secondary-action:empty) {
-			.db-header-action-container::before {
-				display: none;
-			}
-		}
-	}
-}
-
-.db-header-navigation-bar {
-	display: flex;
-	position: relative;
-	padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-md;
-	inline-size: 100%;
-	align-items: center;
-
-	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-md variables.$db-spacing-fixed-lg;
-	}
-}
-
-.db-header-meta-navigation {
-	@extend %db-density-functional;
-
-	display: flex;
-	flex-direction: column;
-	gap: variables.$db-spacing-fixed-sm;
-	justify-content: flex-end;
-	background-color: colors.$db-adaptive-bg-basic-level-2-default;
-	padding: variables.$db-spacing-fixed-md;
-
-	@include helpers.divider("top");
-
-	@include screen-sizes.screen("md") {
-		padding: variables.$db-spacing-fixed-xs variables.$db-spacing-fixed-lg;
-		margin: 0;
-		gap: variables.$db-spacing-fixed-md;
-		flex-direction: row;
-
-		&::before {
-			display: none;
-		}
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&:empty {
-		display: none;
-	}
-}
-
-.db-header-navigation-container {
-	display: inherit;
-	flex: 1 1 auto;
-	inline-size: 100%;
-	align-items: center;
-	block-size: 100%;
-
-	@include screen-sizes.screen("md") {
-		@include helpers.divider("left");
-
-		&::before {
-			position: inherit;
-			block-size: variables.$db-sizing-md;
-			margin-inline-start: variables.$db-spacing-fixed-lg;
-		}
-	}
-}
-
-.db-header-primary-action {
-	margin-inline-start: auto;
-}
-
-.db-header-brand-container:not(:has(> :nth-child(1))) {
-	display: none;
-}
-
-.db-header-action-container:has(> .db-header-secondary-action:empty) {
-	@include screen-sizes.screen("md") {
-		display: none;
-	}
-}
-
-.db-header-brand-container {
-	min-block-size: variables.$db-sizing-md;
-}
-
-.db-header-action-container {
-	@include helpers.divider("left");
-
-	@include screen-sizes.screen("md") {
-		&::before {
-			margin-inline: variables.$db-spacing-fixed-sm;
-		}
-	}
-
-	&::before {
-		margin-inline: variables.$db-spacing-fixed-xs;
-		position: inherit;
-		block-size: variables.$db-sizing-md;
-	}
-}
-
-.db-header-brand-container,
-.db-header-action-container {
-	align-items: center;
-	block-size: 100%;
-	display: inherit;
-	gap: inherit;
-	flex: 0 1 auto;
-	flex-grow: 0;
-	flex-shrink: 0;
-}
-
-.db-header-secondary-action {
-	flex: 0 1 auto;
-	flex-grow: 0;
-	flex-shrink: 0;
-	padding-block-start: variables.$db-spacing-fixed-xs;
-
-	@include helpers.divider("top");
-
-	@include screen-sizes.screen("md") {
-		&::before {
-			display: none;
-		}
-	}
-}
-
-.db-header-drawer-navigation {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	block-size: 100%;
-	overflow: auto;
-	justify-content: space-between;
-}
-
-.db-header-navigation {
-	padding-block: variables.$db-spacing-fixed-md;
-
-	@include screen-sizes.screen("md") {
-		margin-inline: variables.$db-spacing-fixed-lg;
-	}
-}
-
-.db-header-navigation,
-.db-header-secondary-action {
-	display: flex;
-	gap: variables.$db-spacing-fixed-sm;
-	padding-inline: variables.$db-spacing-fixed-md;
-
-	@include screen-sizes.screen("md") {
-		gap: variables.$db-spacing-fixed-xs;
-		padding: 0;
-	}
-}
-
-.db-header-drawer {
-	--db-drawer-content-padding-inline: 0;
-	// 1px for box shadow of header
-	--db-drawer-header-padding-block-end: calc(
-		1px + #{variables.$db-spacing-fixed-xs}
-	);
-
-	padding-block-end: 0;
-
-	.db-drawer-content {
-		display: flex;
-		flex-direction: column;
-		block-size: 100%;
-		overflow: hidden;
-	}
-}
-
-/* Only for Desktop */
-.db-header-meta-navigation,
-.db-header-navigation-container > .db-header-navigation,
-.db-header-action-container > .db-header-secondary-action {
-	display: none;
-
-	@include screen-sizes.screen("md") {
-		display: inherit;
-	}
-}
-
-/* Only for Mobile */
-.db-header-drawer-navigation > .db-header-meta-navigation:not(:empty) {
-	display: inherit;
-}
-
-.db-header-drawer,
-.db-header-burger-menu-container {
-	@include screen-sizes.screen("md") {
-		display: none;
-	}
-}

package/build/components/page/page.css

@@ -1,52 +0,0 @@
-/* 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-page-document {
-  block-size: 100%;
-  overflow: hidden;
-}
-
-.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);
-  }
-}
-.db-page:not([data-fonts-loaded]), .db-page[data-fonts-loaded=true] {
-  opacity: 1;
-}
-.db-page[data-variant=fixed] {
-  block-size: 100%;
-  min-block-size: 100%;
-  display: flex;
-  flex-direction: column;
-  /* workaround for angular */
-}
-.db-page[data-variant=fixed] > :is(.db-header, .db-footer, header, footer) {
-  display: flex;
-  flex: 0 1 auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.db-page[data-variant=fixed] > :is(db-header, dbheader, dbfooter, db-footer) > :is(.db-header, .db-footer, header, footer) {
-  display: flex;
-  flex: 0 1 auto;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-.db-page[data-variant=fixed] > .db-main {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  flex: 1 1 auto;
-  inline-size: 100%;
-}

package/build/components/page/page.scss

@@ -1,52 +0,0 @@
-@use "@db-ux/core-foundations/build/styles/variables";
-
-.db-page-document {
-	block-size: 100%;
-	overflow: hidden;
-}
-
-@mixin header-footer-style {
-	> :is(.db-header, .db-footer, header, footer) {
-		display: flex;
-		flex: 0 1 auto;
-		flex-grow: 0;
-		flex-shrink: 0;
-	}
-}
-
-.db-page {
-	opacity: 0;
-
-	@media screen and (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%;
-		display: flex;
-		flex-direction: column;
-
-		/* workaround for angular */
-		> :is(db-header, dbheader, dbfooter, db-footer) {
-			@include header-footer-style();
-		}
-
-		> .db-main {
-			display: flex;
-			flex-direction: column;
-			overflow: auto;
-			flex: 1 1 auto;
-			inline-size: 100%;
-		}
-	}
-}