package.src.themes.MenuItem.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of webcomponents Show documentation
UI5 Web Components: webcomponents.main
The newest version!
@import "./Menu.css";

.ui5-menu-rp[sub-menu] {
	margin-top: 0.25rem;
	margin-inline: var(--_ui5_menu_submenu_margin_offset);
}

.ui5-menu-rp[sub-menu][actual-placement="Start"] {
	margin-top: 0.25rem;
	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
}

:host([disabled]) {
	pointer-events: initial;
	opacity: initial;
}

:host([disabled])::part(content) {
	opacity: var(--_ui5-listitembase_disabled_opacity);
}

/* hovered and active */
:host([disabled][actionable]:not([active]):not([selected]):hover),
:host([disabled][active][actionable]) {
	background: var(--ui5-listitem-background-color);
}

/* active */
:host([disabled][active][actionable]) .ui5-li-root .ui5-li-icon {
	color: var(--sapContent_NonInteractiveIconColor);
}

:host([active][actionable]:not([disabled]))::part(content),
:host([active][actionable]:not([disabled]))::part(additional-text)  {
	color: var(--sapList_Active_TextColor);
}

:host([focused]:not([active]):not([disabled])) {
	background-color: var(--sapList_Hover_Background);
}

:host(:not([is-phone]))::part(native-li) {
	padding: var(--_ui5_menu_item_padding);
}

:host::part(additional-text) {
	margin: unset;
	margin-inline-start: 1rem;
	color: var(--sapContent_LabelColor);
	min-width: max-content;
}

.ui5-menu-item-text {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	display: inline-block;
}

.ui5-menu-item-dummy-icon {
	visibility: hidden;
}

:host::part(title) {
	font-size: var(--sapFontSize);
	padding-top: 0.125rem;
}

:host([icon]:not([is-phone]))::part(title),
:host([is-phone]:not([icon=""]))::part(title) {
	padding-top: 0;
}

:host(:not([is-phone]))::part(native-li) {
	padding: var(--_ui5_menu_item_padding);
}

:host::part(content) {
	padding-inline-end: 0.25rem;
}

.ui5-menu-item-submenu-icon {
	min-width: var(--_ui5_list_item_icon_size);
	min-height: var(--_ui5_list_item_icon_size);
	display: inline-block;
	vertical-align: middle;
	pointer-events: none;
}

.ui5-menu-item-icon-end {
	display: inline-block;
	vertical-align: middle;
	padding-inline-start: 0.5rem;
	pointer-events: none;
	position: absolute;
	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
}

.ui5-menu-item-dummy-icon {
	min-width: var(--_ui5_list_item_icon_size);
	min-height: var(--_ui5_list_item_icon_size);
	display: inline-block;
	vertical-align: middle;
	padding-inline-end: 0.5rem;
	pointer-events: none;
}