@synergy-design-system/components
Version:
291 lines (246 loc) • 8.59 kB
JavaScript
// src/components/menu-item/menu-item.styles.ts
import { css } from "lit";
var menu_item_styles_default = css`
/* stylelint-disable no-descending-specificity */
:host {
--submenu-offset: -2px;
/* Custom override for hiding the checkmark in menus it is not needed */
--display-checkmark: flex;
/**
* Default size settings for menu-item
* This prepares the custom sizes that we will add later on
* @see https://github.com/synergy-design-system/design/issues/277
*/
--menuitem-inset-border-horizontal: var(--syn-spacing-2x-small);
--menuitem-inset-border-vertical: calc(var(--syn-spacing-x-small) - 1px);
--menuitem-min-height: var(--syn-input-height-medium);
--menuitem-padding: var(--syn-input-spacing-medium);
--menuitem-font-size: var(--syn-input-font-size-medium);
--menuitem-icon-size: var(--syn-spacing-large);
display: block;
}
:host([inert]) {
display: none;
}
.menu-item {
align-items: center;
/*
* #1127: Brand2025 defines a small gap between options
* and rounded corners. We achieve that using an border
* that simulates the gap using the menu background color.
*/
border: solid var(--syn-panel-background-color);
/* Border Radius needs to be increased to cover the outline */
border-radius: calc(var(--syn-focus-ring-border-radius) + var(--menuitem-inset-border-vertical));
border-width: var(--menuitem-inset-border-horizontal) var(--menuitem-inset-border-vertical);
color: var(--syn-option-color);
cursor: pointer;
display: flex;
font-family: var(--syn-font-sans);
font-size: var(--menuitem-font-size);
font-weight: var(--syn-font-weight-normal);
letter-spacing: var(--syn-letter-spacing-normal);
line-height: var(--syn-line-height-normal);
/* Height is dependent on line-height of .option__label, which does not fit the layout completely */
min-height: var(--menuitem-min-height, var(--syn-input-height-medium));
padding: 0 calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
position: relative;
transition: var(--syn-transition-fast) fill;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
}
.menu-item.menu-item--disabled {
cursor: not-allowed;
/** #429: Use token for opacity */
opacity: var(--syn-opacity-50);
outline: none;
}
.menu-item.menu-item--loading {
cursor: wait;
outline: none;
}
.menu-item.menu-item--loading *:not(syn-spinner) {
opacity: var(--syn-opacity-50);
}
.menu-item--loading syn-spinner {
--indicator-color: currentColor;
--track-width: 2px;
color: var(--syn-interactive-emphasis-color);
font-size: var(--syn-font-size-medium);
left: calc(var(--menuitem-padding) - var(--menuitem-inset-border-vertical));
opacity: 1;
position: absolute;
top: calc(50% - 0.5em);
}
.menu-item .menu-item__label {
display: inline-block;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-item .menu-item__prefix {
align-items: center;
display: flex;
flex: 0 0 auto;
}
.menu-item .menu-item__prefix::slotted(*) {
margin-inline-end: var(--syn-spacing-small);
}
.menu-item .menu-item__suffix {
align-items: center;
display: flex;
flex: 0 0 auto;
}
.menu-item .menu-item__suffix::slotted(*) {
margin-inline-start: var(--syn-spacing-small);
}
/**
* Set the default font size to make icons appear correct
*/
.menu-item .menu-item__prefix::slotted(syn-icon),
.menu-item .menu-item__suffix::slotted(syn-icon) {
color: var(--syn-option-icon-color);
font-size: var(--syn-font-size-x-large);
}
/**
* #1194: Make sure hover is only done on non disabled items
*/
:host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__prefix::slotted(syn-icon),
:host(:hover) .menu-item:not(.menu-item--disabled) .menu-item__suffix::slotted(syn-icon) {
color: var(--syn-option-icon-color-hover);
}
:host(:focus-visible) .menu-item .menu-item__prefix::slotted(syn-icon),
:host(:focus-visible) .menu-item .menu-item__suffix::slotted(syn-icon) {
color: var(--syn-option-icon-color-active);
}
/* Safe triangle */
.menu-item--submenu-expanded::after {
clip-path: polygon(
var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
);
content: '';
inset: 0;
position: fixed;
z-index: calc(var(--syn-z-index-dropdown) - 1);
}
:host(:focus-visible) {
outline: none;
}
:host(:hover:not([aria-disabled='true']):not(:focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--syn-option-background-color-hover);
color: var(--syn-option-color-hover);
}
:host(:focus-visible) .menu-item {
background-color: var(--syn-option-background-color-active);
color: var(--syn-color-neutral-0);
opacity: 1;
outline: none;
}
.menu-item .menu-item__check,
.menu-item .menu-item__chevron {
align-items: center;
display: var(--display-checkmark);
flex: 0 0 auto;
font-size: var(--syn-font-size-x-large);
justify-content: center;
visibility: hidden;
width: var(--syn-font-size-x-large);
}
.menu-item .menu-item__check {
color: var(--syn-option-check-color);
margin-inline-end: var(--syn-spacing-small);
}
/**
* This makes sure the chevron does not take any space if we do not have children
*/
.menu-item .menu-item__chevron {
display: none;
margin-inline-start: var(--syn-spacing-small);
}
.menu-item--checked .menu-item__check,
.menu-item--has-submenu .menu-item__chevron {
visibility: visible;
}
/**
* Make sure to show the chevron if there are children
*/
.menu-item--has-submenu .menu-item__chevron {
display: flex;
}
/**
* When in loading state, do not show the checkmark as it would bleed through
*/
.menu-item--loading .menu-item__check {
visibility: hidden;
}
/**
* Make sure the checkbox is also visible when the item is active
*/
:host(:focus-visible) .menu-item--checked .menu-item__check {
color: var(--syn-option-check-color-active);
}
:host(:hover) .menu-item--checked:not(.menu-item--disabled) .menu-item__check {
color: var(--syn-option-check-color-hover);
}
/**
* Special handling for the submenu chevron:
* We are using the "chevron-down" icon per default as
* we do not want all chevrons to be part of the bundle
* Therefore, we have to transform it into the right direction
*/
.menu-item .menu-item__chevron syn-icon {
transform: rotate(-90deg);
}
.menu-item--rtl .menu-item__chevron syn-icon {
transform: rotate(90deg);
}
/**
* Highlight checked items
*/
.menu-item--checked .menu-item__label {
font-weight: var(--syn-font-weight-semibold);
}
/* Needed if we do not show the checkmark */
:host(:not([type="checkmark"]):not([loading])) .menu-item__label {
min-height: var(--syn-font-size-x-large);
}
/* Add elevation and z-index to submenus */
syn-popup::part(popup) {
/* #1131: Make sure that slotted menus do show the correct border radius */
border-radius: var(--syn-input-border-radius-medium);
box-shadow: var(--syn-shadow-large);
margin-left: var(--submenu-offset);
z-index: var(--syn-z-index-dropdown);
}
.menu-item--rtl syn-popup::part(popup) {
margin-left: calc(-1 * var(--submenu-offset));
}
/**
* #1009: Adjust the position for submenus when they are opened to the left, too.
* This works because the data-current-placement attribute is set on the popup accordingly.
* We do not use the actual placement attribute, because it does not update when the placement changes
*/
syn-popup[data-current-placement^="left"]::part(popup) {
margin-left: calc(-1 * var(--submenu-offset));
}
@media (forced-colors: active) {
:host(:hover:not([aria-disabled='true'])) .menu-item,
:host(:focus-visible) .menu-item {
outline: dashed 1px SelectedItem;
outline-offset: -1px;
}
}
::slotted(syn-menu) {
max-height: var(--auto-size-available-height) ;
max-width: var(--auto-size-available-width) ;
}
`;
export {
menu_item_styles_default
};
//# sourceMappingURL=chunk.CAEBFUZN.js.map