package.src.themes.ListItemBase.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!
:host {
	box-sizing: border-box;
	height: var(--_ui5_list_item_base_height);
	background-color: var(--ui5-listitem-background-color);
	border-bottom: 0.0625rem solid transparent;
}

:host(:not([hidden])) {
	display: block;
}

:host([disabled]) {
	opacity: var(--_ui5-listitembase_disabled_opacity);
	pointer-events: none;
}

/* actionable (type="Active" + desktop) */
:host([actionable]:not([disabled])) {
	cursor: pointer;
}

:host([has-border]) {
	border-bottom: var(--ui5-listitem-border-bottom);
}

/* selected */
:host([selected]) {
	background-color: var(--sapList_SelectionBackgroundColor);
	border-bottom: var(--ui5-listitem-selected-border-bottom);
}

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

/* selected and hovered */
:host([actionable][selected]:not([active], [data-moving]):hover) {
	background-color: var(--sapList_Hover_SelectionBackground);
}

/* selected and active */
:host([active][actionable]:not([data-moving])),
:host([active][actionable][selected]:not([data-moving])) {
	background-color: var(--sapList_Active_Background);
}

/* focused */
:host([desktop]:not([data-moving])) .ui5-li-root.ui5-li--focusable:focus::after,
:host([desktop][focused]:not([data-moving])) .ui5-li-root.ui5-li--focusable::after,
:host(:not([data-moving])) .ui5-li-root.ui5-li--focusable:focus-visible::after,
:host([desktop]:not([data-moving])) .ui5-li-root .ui5-li-content:focus::after,
:host([desktop][focused]:not([data-moving])) .ui5-li-root .ui5-li-content::after,
:host(:not([data-moving])) .ui5-li-root .ui5-li-content:focus-visible::after {
	content: "";
	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	position: absolute;
	inset: 0.125rem;
	pointer-events: none;
}

.ui5-li-root {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: var(--_ui5_list_item_base_padding);
	box-sizing: border-box;
	background-color: inherit;
}

.ui5-li-root.ui5-li--focusable {
	outline: none;
}

.ui5-li-content {
	display: flex;
	align-items: center;
	flex: auto;
	overflow: hidden;
	max-width: 100%;
	font-family: "72override", var(--sapFontFamily);
	color: var(--sapList_TextColor);
}

.ui5-li-content .ui5-li-title {
	color: var(--sapList_TextColor);
	font-size: var(--_ui5_list_item_title_size);
}

.ui5-li-text-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex: auto;
	min-width: 1px;
	line-height: normal;
}