@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
339 lines (297 loc) • 9.02 kB
JavaScript
// src/components/nav-item/nav-item.styles.ts
import { css } from "lit";
var nav_item_styles_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, var(--syn-color-neutral-50));
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, var(--syn-color-neutral-50));
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, var(--syn-color-primary-600));
}
.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)
}
`;
export {
nav_item_styles_default
};
//# sourceMappingURL=chunk.FCYQT7CQ.js.map