@synergy-design-system/mcp 2.15.0 → 3.0.0

package/metadata/packages/components/components/syn-nav-item/component.styles.ts

@@ -1,333 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /**
-   * Default alignment is inline block when we are in horizontal mode
-   */
-  :host {
-    /**
-     * The indentation property defines the current "level" the component is on
-     * It may be set per hand, but is normally set during the render phase
-     * of a <syn-nav-item /> for slotted children
-     */
-    --indentation: 0;
-
-    /**
-     * Defines the amount of pixels each indentation level will shift the content to the left
-     */
-    --indentation-stepping: var(--syn-spacing-x-large);
-
-    /**
-     * Display property of the children. Defaults to "contents"
-     */
-    --display-children: contents;
-
-    display: block;
-  }
-
-  /**
-   * Switch alignment to inline-block when we are in horizontal mode
-   */
-  :host([horizontal]) {
-    display: inline-block;
-  }
-
-  /**
-   * Core nav item wrapper
-   */
-  .nav-item {
-    align-items: center;
-    background: transparent;
-    border: none;
-    box-shadow: inset 0 -1px 0 0 transparent;
-    box-sizing: border-box;
-    color: var(--syn-typography-color-text);
-    cursor: pointer;
-    display: inline-flex;
-    font: var(--syn-font-sans);
-    font-size: var(--syn-font-size-small);
-    min-height: var(--syn-spacing-2x-large);
-    padding: var(--syn-spacing-small) var(--syn-spacing-large);
-    position: relative;
-    text-align: left;
-    text-decoration: none;
-    transition: background-color var(--syn-transition-fast) ease-in-out, box-shadow var(--syn-transition-fast) ease-in-out;
-    width: 100%;
-    z-index: 0;
-  }
-
-  .nav-item:focus-visible {
-    outline: none;
-  }
-
-  .nav-item:focus-visible::after {
-    content: '';
-    display: block;
-    height: 100%;
-    left: calc(var(--syn-spacing-x-small) * -1);
-    outline: var(--syn-focus-ring);
-    outline-offset: -2px;
-    position: absolute;
-    top: 0;
-    width: calc(100% + 2 * var(--syn-spacing-x-small));
-  }
-
-  .nav-item--vertical:focus-visible::after {
-    left: 0;
-    width: 100%;
-  }
-
-  /**
-   * Horizontal nav items use narrower paddings
-   */
-  .nav-item--horizontal {
-    padding: var(--syn-spacing-small) 0;
-  }
-
-  /**
-   * Nav Items acting as accordion use a slightly narrower padding on the right side
-   */
-  .nav-item.nav-item-is-accordion {
-    padding-right: var(--syn-spacing-medium);
-  }
-
-  .nav-item--disabled {
-    cursor: not-allowed;
-  }
-
-  .nav-item--current {
-    font-weight: var(--syn-font-weight-bold);
-  }
-
-  /**
-   * Basic set up for the nav item prefix.
-   */
-  .nav-item:not(.nav-item--disabled)::before {
-    background: var(--syn-interactive-background-color-hover);
-    content: '';
-    display: block;
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: -1;
-  }
-
-  /**
-   * Hover effect for the nav item.
-   * We use opacity to make sure the border-bottom is visible if used in the prio-nav in header
-   */
-  .nav-item:not(.nav-item--disabled):hover::before {
-    opacity: 1;
-  }
-
-  /**
-   * #443: Add support for active state
-   */
-  .nav-item:not(.nav-item--disabled):active::before {
-    background: var(--syn-interactive-background-color-active);
-    opacity: 1;
-  }
-
-  /**
-   * When using horizontal, the background should extend the element
-   * on the left and right so the animation for the indicator can be seen
-   */
-  .nav-item--horizontal:not(.nav-item--disabled)::before {
-    left: calc(var(--syn-spacing-x-small) * -1);
-    width: calc(100% + 2 * var(--syn-spacing-x-small));
-  }
-
-  /**
-   * The content wrapper is needed to get the disabled state right
-   * and also sets the left padding, according to the given indentation level.
-   *
-   * Normally, we would just use opacity directly on the button.
-   * However, when using the divider prop, this leads to problems
-   * as the divider itself will also get opaque.
-   */
-  .nav-item__content {
-    align-items: center;
-    display: flex;
-    padding-inline-start: calc(var(--indentation) * var(--indentation-stepping));
-    width: 100%;
-  }
-
-  .nav-item--disabled .nav-item__content {
-    opacity: var(--syn-opacity-50);
-  }
-
-  /**
-   * Slotted icons should use a default font size of large
-   */
-  .nav-item--has-prefix ::slotted(syn-icon),
-  .nav-item--has-suffix ::slotted(syn-icon) {
-    font-size: var(--syn-font-size-x-large);
-    min-width: var(--syn-font-size-x-large);
-  }
-
-  /**
-   * The chevron indicates the use as a <details /> element OR a link
-   */
-  .nav-item__chevron {
-    color: var(--syn-interactive-quiet-color);
-    font-size: var(--syn-font-size-x-large);
-    margin-inline-start: var(--syn-spacing-x-small);
-    rotate: 0deg;
-    transition: var(--syn-transition-medium) rotate ease;
-  }
-
-  .nav-item__chevron-open {
-    rotate: -180deg;
-  }
-
-  /**
-   * Items that have the chevron attribute set and are NOT accordions should always show a chevron pointing to the right
-   */
-  .nav-item:not(.nav-item-is-accordion) .nav-item__chevron {
-    rotate: -90deg;
-  }
-
-  /**
-   * Make the primary content container fill all available space
-   */
-  .nav-item__content-container {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /**
-   * Horizontal navigation items should not break words
-   */
-  .nav-item--horizontal .nav-item__content-container {
-    font-weight: var(--syn-font-weight-bold);
-    white-space: nowrap;
-  }
-
-  /**
-   * Show prefix only
-   */
-  /* stylelint-disable no-descending-specificity */
-  .nav-item--show-prefix-only .nav-item__content-container,
-  .nav-item--show-prefix-only .nav-item__suffix,
-  .nav-item--show-prefix-only .nav-item__chevron {
-    height: var(--syn-spacing-large);
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  /**
-   * Adjust the paddings for the label, depending if there is a pre- and/or suffix available.
-   * But only if the there is a main content or additionally a prefix / suffix
-   */
-  .nav-item--has-prefix.nav-item--has-content .nav-item__content-container,
-  .nav-item--has-prefix.nav-item--has-suffix .nav-item__content-container {
-    margin-inline-start: var(--syn-spacing-x-small);
-  }
-
-  .nav-item--has-suffix.nav-item--has-content .nav-item__content-container,
-  .nav-item--has-suffix.nav-item--has-prefix .nav-item__content-container {
-    margin-inline-end: var(--syn-spacing-x-small);
-  }
-
-  /**
-   * Multi line content
-   */
-  /* stylelint-disable no-descending-specificity */
-  .nav-item--multi-line .nav-item__suffix,
-  .nav-item--multi-line .nav-item__prefix,
-  .nav-item--multi-line .nav-item__chevron {
-    align-self: flex-start;
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  /* stylelint-disable no-descending-specificity */
-  .nav-item--multi-line .nav-item__suffix::slotted(syn-icon),
-  :not(.nav-item--show-prefix-only).nav-item--multi-line .nav-item__prefix::slotted(syn-icon),
-  .nav-item--multi-line .nav-item__chevron {
-    align-self: flex-start;
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  /**
-   * The current indicator tells the user that the nav-item is the active one
-   */
-  .current-indicator {
-    background: transparent;
-    border: none;
-    margin: 0;
-    position: absolute;
-    transition: var(--syn-transition-medium) top ease,
-      var(--syn-transition-medium) right ease,
-      var(--syn-transition-medium) bottom ease,
-      var(--syn-transition-medium) left ease;
-    z-index: 1;
-  }
-
-  .current-indicator--visible {
-    background: var(--syn-interactive-emphasis-color);
-  }
-
-  .nav-item--horizontal .current-indicator {
-    bottom: 0;
-    height: var(--syn-spacing-2x-small);
-    left: 0;
-    right: 0;
-  }
-
-  .nav-item--horizontal:hover .current-indicator--visible,
-  .nav-item--horizontal:focus-visible .current-indicator--visible {
-    left: calc(var(--syn-spacing-x-small) * -1);
-    right: calc(var(--syn-spacing-x-small) * -1);
-  }
-
-  .nav-item--vertical .current-indicator {
-    bottom: var(--syn-spacing-x-small);
-    left: 0;
-    top: var(--syn-spacing-x-small);
-    width: var(--syn-spacing-2x-small);
-  }
-
-  .nav-item--vertical:hover .current-indicator--visible,
-  .nav-item--vertical:focus-visible .current-indicator--visible {
-    bottom: 0;
-    top: 0;
-  }
-
-  /**
-   * Dividers are optionally displayed in horizontal nav items
-   */
-  .divider {
-    left: var(--syn-spacing-medium);
-    margin: 0;
-    position: absolute;
-    right: var(--syn-spacing-medium);
-    top: 0;
-  }
-
-  /**
-   * Make sure the divider blends into the background on hover
-   * for items that are NOT disabled.
-   */
-  .nav-item--vertical:not(.nav-item--disabled):hover .divider {
-    --color: var(--syn-interactive-background-color-hover);
-  }
-
-  /**
-   * Sub menu styling
-   */
-  summary.nav-item {
-    box-sizing: border-box;
-    display: flex;
-  }
-
-  details summary::-webkit-details-marker {
-    visibility: hidden;
-  }
-
-  .children {
-    display: var(--display-children)
-  }
-`;