@db-ux/core-components 4.12.1 → 4.13.0-shell-f221975

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

@@ -1,447 +0,0 @@
-/* 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, ... */
-.db-navigation-item, .db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  font: var(--db-type-body-md);
-  /* 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);
-}
-
-@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-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-.db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-  color: var(--db-icon-color, inherit);
-  display: inline-block;
-  /*** icon - placeholder ***/
-  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default", "icon-font-fallback")) !important;
-  font-size: var(--db-icon-font-size, 1.5rem);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: var(--db-icon-font-weight, normal);
-  line-height: 1;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
-  speak: none;
-  /* stylelint-disable-next-line declaration-property-value-no-unknown */
-  speak: never;
-  text-transform: none;
-  overflow: clip;
-  vertical-align: var(--db-icon-vertical-align, middle);
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  block-size: var(--db-icon-font-size, 1.5rem);
-  /* stylelint-disable-next-line db-ux/use-sizing */
-  inline-size: var(--db-icon-font-size, 1.5rem);
-  aspect-ratio: 1;
-  flex-shrink: 0;
-  content: var(--db-icon, attr(data-icon));
-}
-@supports (content: ""/"") {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-    content: var(--db-icon, attr(data-icon))/"";
-  }
-}
-@media aural {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-    content: none;
-  }
-}
-@media speech {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-    content: none;
-  }
-}
-
-.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
-}
-
-.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  border: var(--db-border-width-3xs) solid transparent;
-}
-
-.db-sub-navigation {
-  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
-}
-
-.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  border-radius: var(--db-border-radius-xs);
-}
-
-.db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-navigation-item .db-navigation-item-expand-button:not([data-force-mobile]):is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible) ~ .db-sub-navigation, .db-navigation-item [data-force-mobile=false].db-navigation-item-expand-button:is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
-  .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible) ~ .db-sub-navigation {
-    visibility: visible;
-  }
-}
-.db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-
-.db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button, .db-navigation-item a {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
-  cursor: pointer;
-  inline-size: 100%;
-  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;
-}
-.db-navigation-item .db-navigation-item-expand-button:not([hidden]):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:not([hidden]), .db-navigation-item a:not([hidden]) {
-  display: inline-flex;
-}
-.db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)), .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)) {
-  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
-}
-.db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover, .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):hover {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
-}
-.db-navigation-item .db-navigation-item-expand-button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active, .db-navigation-item a:not(:disabled, [aria-disabled=true], [tabindex="-1"], :has(:disabled)):active {
-  cursor: var(--db-overwrite-cursor, pointer);
-  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
-}
-.db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
-.db-navigation-item .db-navigation-item-expand-button > button:has(~ .db-sub-navigation:is(:hover, :focus)), .db-navigation-item a:has(~ .db-sub-navigation:is(:hover, :focus)) {
-  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
-}
-
-.db-navigation-item {
-  --db-has-before: 0;
-}
-.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-navigation-item[data-icon]:not([data-show-icon=false])::before {
-  position: absolute;
-  inset-block-start: calc(50% - 0.5em);
-  inset-inline-start: var(--db-icon-passing-inline-start, var(--db-spacing-fixed-sm));
-  pointer-events: none;
-  z-index: 1;
-}
-.db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-navigation-item[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-navigation-item[data-icon]:not([data-show-icon=false]) label, .db-navigation-item[data-icon]:not([data-show-icon=false]) button, .db-navigation-item[data-icon]:not([data-show-icon=false]) a {
-  --db-padding-inline-start: calc(
-  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + 1lh
-  );
-  /* stylelint-disable-next-line db-ux/use-spacings */
-  padding-inline-start: var(--db-padding-inline-start);
-}
-.db-navigation-item:not([hidden]) {
-  display: inline-flex;
-}
-.db-navigation-item {
-  position: relative;
-  inline-size: auto;
-}
-.db-navigation-item[data-wrap=true] :is(a, .db-navigation-item-expand-button):first-of-type {
-  white-space: normal;
-  text-align: start;
-}
-.db-navigation-item[data-force-mobile=true]:not([data-width=full]) {
-  inline-size: 100%;
-}
-.db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
-}
-.db-navigation-item {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (max-width: 63.9375em) {
-  .db-navigation-item:not([data-width=full]) {
-    inline-size: 100%;
-  }
-  .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-    --db-icon-margin-start: auto;
-  }
-}
-.db-navigation-item a {
-  text-decoration: none;
-}
-.db-navigation-item a:focus-visible {
-  z-index: 1;
-}
-.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
-  visibility: visible;
-  transform: translateX(0%);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
-    transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
-  }
-}
-.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
-  inset: 0;
-  inline-size: 100%;
-  border-color: transparent;
-}
-.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
-  transform: translateX(110%);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
-    transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
-  }
-}
-.db-navigation-item .db-navigation-item-expand-button {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (max-width: 63.9375em) {
-  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
-    visibility: visible;
-    transform: translateX(0%);
-  }
-}
-@media (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
-  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
-    transition: visibility 0ms linear 0ms, transform var(--db-transition-duration-extra-slow) var(--db-transition-timing-emotional);
-  }
-}
-@media (max-width: 63.9375em) {
-  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
-    inset: 0;
-    inline-size: 100%;
-    border-color: transparent;
-  }
-  .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
-    transform: translateX(110%);
-  }
-}
-@media (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
-  .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
-    transition: visibility 0ms linear 410ms, transform var(--db-transition-duration-slow) var(--db-transition-timing-emotional);
-  }
-}
-.db-navigation-item .db-navigation-item-expand-button:is(button),
-.db-navigation-item .db-navigation-item-expand-button > button {
-  font-weight: inherit;
-}
-.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-.db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-  --db-icon-trailing: "chevron_right";
-  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
-  content: var(--db-icon-trailing, attr(data-icon-trailing));
-}
-@supports (content: ""/"") {
-  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
-  .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
-    content: var(--db-icon-trailing, attr(data-icon-trailing))/"";
-  }
-}
-.db-navigation-item:has([aria-current=page]) > :is(a, button), .db-navigation-item:has([data-active=true]) > :is(a, button), .db-navigation-item[aria-current=page] > :is(a, button), .db-navigation-item[data-active=true] > :is(a, button) {
-  font-weight: 700;
-}
-.db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: var(--db-spacing-fixed-sm);
-}
-.db-navigation-item[data-width=full] {
-  inline-size: 100%;
-}
-.db-navigation-item[data-width=full] .db-navigation-item-expand-button::after {
-  --db-icon-margin-start: auto;
-}
-.db-navigation-item[aria-disabled=true] {
-  opacity: var(--db-opacity-md);
-  pointer-events: none;
-}
-
-.db-sub-navigation {
-  margin: 0;
-}
-.db-sub-navigation:not([hidden]) {
-  display: flex;
-}
-.db-sub-navigation {
-  flex-direction: column;
-  z-index: 70;
-  inset-inline-start: 0;
-  background-color: var(--db-adaptive-bg-basic-level-1-default);
-  visibility: hidden;
-}
-.db-sub-navigation[data-force-mobile=true] {
-  padding: var(--db-spacing-fixed-md);
-  inline-size: calc(100% - var(--db-spacing-fixed-xl));
-  position: fixed;
-  overflow: hidden auto;
-  inset-inline-start: var(--db-spacing-fixed-xl);
-}
-.db-drawer-container[data-direction=left] .db-sub-navigation[data-force-mobile=true] {
-  inset-inline: auto var(--db-spacing-fixed-xl);
-}
-.db-sub-navigation[data-force-mobile=true] {
-  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);
-}
-.db-sub-navigation {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (max-width: 63.9375em) {
-  .db-sub-navigation {
-    padding: var(--db-spacing-fixed-md);
-    inline-size: calc(100% - var(--db-spacing-fixed-xl));
-    position: fixed;
-    overflow: hidden auto;
-    inset-inline-start: var(--db-spacing-fixed-xl);
-  }
-  .db-drawer-container[data-direction=left] .db-sub-navigation {
-    inset-inline: auto var(--db-spacing-fixed-xl);
-  }
-  .db-sub-navigation {
-    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);
-  }
-}
-.db-sub-navigation {
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-sub-navigation:not([data-force-mobile]) .db-mobile-navigation-back:not([hidden]), .db-sub-navigation[data-force-mobile=false] .db-mobile-navigation-back:not([hidden]) {
-    display: none;
-  }
-}
-.db-sub-navigation {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-  /* stylelint-disable-next-line media-query-no-invalid */
-}
-@media (min-width: 64em) {
-  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
-    border-radius: var(--db-border-radius-sm);
-    box-shadow: var(--db-elevation-md);
-    padding: var(--db-spacing-fixed-sm);
-    position: absolute;
-    min-inline-size: var(--db-container-xs);
-    inset-block-start: calc(100% + var(--db-spacing-fixed-md));
-    transition: visibility 1ms linear;
-  }
-  .db-sub-navigation:not([data-force-mobile])[data-outside-vx=true], .db-sub-navigation[data-force-mobile=false][data-outside-vx=true] {
-    transform: translateX(-100%);
-    inset-inline-start: 100%;
-  }
-  .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within):not([data-force-close=true]), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within):not([data-force-close=true]) {
-    visibility: visible;
-  }
-  .db-sub-navigation:not([data-force-mobile])[data-force-close=true], .db-sub-navigation[data-force-mobile=false][data-force-close=true] {
-    pointer-events: none;
-  }
-  .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
-    content: "";
-    position: absolute;
-    inset-inline-start: 0;
-    inline-size: 100%;
-    block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
-    inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
-    inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
-    inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vy=bottom], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vy=bottom] {
-    inset-block-start: calc(100% + var(--db-spacing-fixed-md));
-    transform: translateY(-100%);
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right] {
-    transform: translateX(-100%);
-    inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right][data-outside-vy=bottom], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right][data-outside-vy=bottom] {
-    transform: translate(-100%, -100%);
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right]::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right]::before {
-    inset-block: auto 0;
-    transform: translateX(100%) scaleX(-1);
-  }
-  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::before {
-    content: "";
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    block-size: 100%;
-    /* stylelint-disable-next-line db-ux/use-sizing */
-    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-sub-navigation:not([data-force-mobile]) .db-sub-navigation::after, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::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: 100%;
-    inline-size: var(--db-spacing-fixed-xs);
-  }
-}
-.db-sub-navigation {
-  /* stylelint-disable-next-line at-rule-empty-line-before */
-}
-.db-sub-navigation:empty:not([hidden]) {
-  display: none;
-}
-.db-sub-navigation .db-navigation-item {
-  inline-size: 100%;
-}
-.db-sub-navigation .db-navigation-item::after {
-  margin-inline-start: auto;
-}
-
-.db-mobile-navigation-back:not([hidden]) {
-  display: flex;
-}
-.db-mobile-navigation-back {
-  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-mobile-navigation-back[data-emphasis=strong] {
-  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
-}
-.db-mobile-navigation-back::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 at-rule-empty-line-before */
-}
-@media (forced-colors: active) {
-  .db-mobile-navigation-back {
-    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
-    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
-  }
-}