@db-ux/core-components 3.0.2-shell4-bdb351c → 3.0.3

package/build/components/navigation-item-group/navigation-item-group.css

@@ -1,432 +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 */
-/* 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 {}
-
-/**
- * @mixin screen-min-max
- * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
- */
-/**
-	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 {}
-
-.db-navigation-item-group, .db-navigation-item-group .db-navigation-item-group-expand-button {
-  font: var(--db-type-body-md);
-  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
-}
-@layer variables {
-  .db-navigation-item-group, .db-navigation-item-group .db-navigation-item-group-expand-button {
-    /* Those variables are only for components to calculate heights and change icons */
-    --db-icon-font-weight: var(--db-base-body-icon-weight-md);
-    --db-icon-font-size: var(--db-base-body-icon-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 {}
-
-/* Sub components for shell */
-.db-navigation-item-group .db-navigation-item-group-expand-button {
-  border: var(--db-border-width-3xs) solid transparent;
-}
-
-.db-navigation-item-group-menu[data-variant=popover] {
-  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-
-.db-navigation-item-group .db-navigation-item-group-expand-button {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  cursor: pointer;
-  inline-size: 100%;
-  display: inline-flex;
-  border-radius: var(--db-border-radius-sm);
-  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
-  white-space: nowrap;
-  text-align: center;
-  align-items: center;
-  justify-content: space-between;
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:hover:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item-group .db-navigation-item-group-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item-group .db-navigation-item-group-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:active:not(:disabled, [aria-disabled=true]) {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item-group .db-navigation-item-group-expand-button:active:not(:disabled, [aria-disabled=true]):is(input) {
-  cursor: initial;
-}
-.db-navigation-item-group .db-navigation-item-group-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item-group .db-navigation-item-group-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
-  cursor: pointer;
-}
-
-.db-navigation-item-group {
-  position: relative;
-  display: flex;
-  block-size: fit-content;
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (width <= 48em) {
-  .db-navigation-item-group {
-    inline-size: 100%;
-  }
-}
-@media screen and (48em < width) {
-  .db-navigation-item-group {
-    inline-size: fit-content;
-  }
-}
-.db-navigation-item-group :is(a, .db-navigation-item-expand-button):first-of-type {
-  white-space: normal;
-  text-align: start;
-}
-.db-navigation-item-group:has([aria-current=page]) > :is(a, button), .db-navigation-item-group:has([data-active=true]) > :is(a, button), [aria-current=page].db-navigation-item-group > :is(a, button), [data-active=true].db-navigation-item-group > :is(a, button) {
-  font-weight: 700;
-}
-[aria-disabled=true].db-navigation-item-group {
-  opacity: var(--db-opacity-md);
-  pointer-events: none;
-}
-
-@keyframes show-right-to-left {
-  from {
-    transform: translateX(110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-right-to-left {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(110%);
-  }
-}
-@keyframes show-left-to-right {
-  from {
-    transform: translateX(-110%);
-  }
-  to {
-    transform: translateX(0%);
-  }
-}
-@keyframes hide-left-to-right {
-  from {
-    transform: translateX(0%);
-  }
-  to {
-    transform: translateX(-110%);
-  }
-}
-@keyframes show-bottom-to-top {
-  from {
-    transform: translateY(110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-bottom-to-top {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(110%);
-  }
-}
-@keyframes show-top-to-bottom {
-  from {
-    transform: translateY(-110%);
-  }
-  to {
-    transform: translateY(0%);
-  }
-}
-@keyframes hide-top-to-bottom {
-  from {
-    transform: translateY(0%);
-  }
-  to {
-    transform: translateY(-110%);
-  }
-}
-@keyframes popover-animation {
-  0% {
-    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% {
-    opacity: 1;
-    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
-  }
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-.db-navigation-item-group-menu[data-variant=popover] {
-  --db-popover-distance: var(--db-spacing-fixed-xs);
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 70;
-  inset-inline-start: 0;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-  visibility: hidden;
-  max-block-size: 100vh;
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-navigation-item-group-menu[data-variant=popover]:empty {
-  display: none;
-}
-.db-navigation-item-group-menu[data-variant=popover] .db-navigation-item,
-.db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group {
-  inline-size: 100%;
-}
-.db-navigation-item-group-menu[data-variant=popover] .db-navigation-item::after,
-.db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group::after {
-  margin-inline-start: auto;
-}
-[data-force-mobile=true].db-navigation-item-group-menu[data-variant=popover] {
-  --db-navigation-item-group-menu-mobile: 1;
-  padding: var(--db-spacing-fixed-md);
-  border: 0;
-  inline-size: 100%;
-  position: fixed;
-  overflow: hidden auto;
-  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
-}
-@media screen and (max-width: 63.9375em) {
-  .db-navigation-item-group-menu[data-variant=popover] {
-    --db-navigation-item-group-menu-mobile: 1;
-    padding: var(--db-spacing-fixed-md);
-    border: 0;
-    inline-size: 100%;
-    position: fixed;
-    overflow: hidden auto;
-    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs))) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2);
-  }
-}
-@media screen and (min-width: 64em) {
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]), [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] {
-    border-radius: var(--db-border-radius-sm);
-    box-shadow: var(--db-elevation-md);
-    padding: var(--db-spacing-fixed-sm);
-    block-size: fit-content;
-    inline-size: fit-content;
-    position: absolute;
-    min-inline-size: var(--db-container-xs);
-    transition: visibility 1ms linear;
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-back-button, [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-back-button {
-    display: none;
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover]:is(:hover, :focus-within):not([data-force-close=true]) {
-    visibility: visible;
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile])[data-force-close=true], [data-force-mobile=false][data-force-close=true].db-navigation-item-group-menu[data-variant=popover] {
-    pointer-events: none;
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu, [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu {
-    inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
-    inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu::before, [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    block-size: 100%;
-    inline-size: var(--db-navigation-item-inline-size, 100%);
-    background: transparent;
-    transform: translateX(-100%);
-    clip-path: var(--db-navigation-item-clip-path, polygon(10% 30px, 100% 0, 100% 100%));
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu::after, [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu::after {
-    content: "";
-    position: absolute;
-    padding: var(--db-spacing-fixed-xs);
-    inset-block-start: var(--db-spacing-fixed-3xs);
-    inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
-    block-size: calc(100% - 2 * var(--db-spacing-fixed-3xs));
-    inline-size: var(--db-spacing-fixed-xs);
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vy=bottom], [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu[data-outside-vy=bottom] {
-    transform: translateY(calc(-200% + var(--db-spacing-fixed-xs)));
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right], [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu[data-outside-vx=right] {
-    transform: translateX(calc(-200% + var(--db-spacing-fixed-xs)));
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom], [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu[data-outside-vx=right][data-outside-vy=bottom] {
-    transform: translate(calc(-200% + var(--db-spacing-fixed-xs)), calc(-200% + var(--db-spacing-fixed-xs)));
-  }
-  .db-navigation-item-group-menu[data-variant=popover]:not([data-force-mobile]) .db-navigation-item-group-menu[data-outside-vx=right]::before, [data-force-mobile=false].db-navigation-item-group-menu[data-variant=popover] .db-navigation-item-group-menu[data-outside-vx=right]::before {
-    inset-block: auto 0;
-    transform: translateX(100%) scaleX(-1);
-  }
-}
-
-.db-navigation-item-group .db-navigation-item-group-expand-button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media screen and (width <= 48em) {
-  .db-navigation-item-group .db-navigation-item-group-expand-button::after {
-    --db-icon-margin-start: auto;
-  }
-}
-@media screen and (48em < width) {
-  .db-navigation-item-group .db-navigation-item-group-expand-button::after {
-    --db-icon-margin-start: var(--db-spacing-fixed-sm);
-  }
-}
-.db-navigation-item-group .db-navigation-item {
-  /* Hide tooltips for nested navigation items */
-}
-.db-navigation-item-group .db-navigation-item .db-tooltip {
-  display: none;
-}
-.db-navigation-item-group::after {
-  --indicator-vertical-block-size: var(--db-sizing-md);
-  --indicator-vertical-inset-block-start: calc(
-  	var(--db-sizing-md) / 2
-  );
-}
-
-.db-navigation-item-group-back-button {
-  display: flex;
-  font-weight: normal;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-  padding-block-end: var(--db-spacing-fixed-md);
-  margin-block-end: var(--db-spacing-fixed-md);
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
-  position: var(--db-tooltip-parent-position, relative);
-}
-.db-navigation-item-group-back-button[data-emphasis=strong] {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-}
-.db-navigation-item-group-back-button::before {
-  content: "";
-  background-color: var(--db-divider-bg-color);
-  position: absolute;
-  block-size: var(--db-border-width-3xs);
-  inset-block-end: 0;
-  inset-inline: 0;
-  /* stylelint-disable-next-line db-ux/use-border-color */
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-@media (forced-colors: active) {
-  .db-navigation-item-group-back-button::before {
-    border-block-end: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}

package/build/components/navigation-item-group/navigation-item-group.scss

@@ -1,69 +0,0 @@
-@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 "../../styles/internal/navigation-item";
-@use "navigation-item-group-menu-popover";
-@use "../../styles/internal/icon-passing";
-
-.db-navigation-item-group-menu {
-	&[data-variant="popover"] {
-		@extend %db-navigation-item-group-menu-popover;
-	}
-}
-
-.db-navigation-item-group {
-	@extend %navigation-item;
-
-	.db-navigation-item-group-expand-button {
-		@extend %navigation-item-interactive-element;
-
-		// Mobile
-		@include screen-sizes.screen-min-max(
-			(
-				max: "sm"
-			)
-		) {
-			&::after {
-				--db-icon-margin-start: auto;
-			}
-		}
-		// Desktop
-		@include screen-sizes.screen-min-max(
-			(
-				min: "sm"
-			)
-		) {
-			&::after {
-				--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
-			}
-		}
-	}
-
-	.db-navigation-item {
-		/* Hide tooltips for nested navigation items */
-		.db-tooltip {
-			display: none;
-		}
-	}
-
-	&::after {
-		// Mobile navigation item is always sizing-md
-		// We add this fixed block-size to avoid issues with tree navigation
-		--indicator-vertical-block-size: #{variables.$db-sizing-md};
-		--indicator-vertical-inset-block-start: calc(
-			#{variables.$db-sizing-md} / 2
-		);
-	}
-}
-
-.db-navigation-item-group-back-button {
-	display: flex;
-	font-weight: normal;
-	background-color: colors.$db-adaptive-bg-basic-level-1-default;
-	padding-block-end: variables.$db-spacing-fixed-md;
-	margin-block-end: variables.$db-spacing-fixed-md;
-
-	@include helpers.divider("bottom");
-}