@openui5/sap.m/src/sap/m/themes/base/ActionTile.less

OpenUI5 UI Library sap.m

/* ================================== */
/* CSS for control sap.m/ActionTile  */
/* Base theme                         */
/* ================================== */

.sapMAT {
	width: 20rem;
	height: 23.125rem;
	border-radius: var(--sapTile_BorderCornerRadius);
	position: relative;
	padding: 1rem;
	box-shadow: var(--sapContent_Shadow0);
	background-color: var(--sapTile_Background);
	display: inline-block;
	box-sizing: border-box;
	user-select: none;
	vertical-align: top;
	text-decoration: none;

	.sapMGTHdrContent {
		padding: 0;
		height: 3.25rem;
		overflow: hidden;
		margin-bottom: 0.75rem;

		.sapMText {
			font-size: 1rem;
			font-weight: 700;
			color: var(--sapTile_TitleTextColor) !important;
			line-height: 1.5rem;
			cursor: pointer;
		}

		.sapMATHeaderContainer {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: center;
			gap: 0.25rem;

			.sapMGTTitle {
				line-height: 1.2;
				font-size: var(--sapFontSize);
			}

			.sapMTilePriorityValue {
				font-size: 0.875rem;

				&.High {
					color: var(--sapNegativeTextColor);
				}

				&.Medium {
					color: var(--sapCriticalTextColor);
				}

				&.Low {
					color: var(--sapPositiveTextColor);
				}

				&.VeryHigh {
					color: var(--sapIndicationColor_1_BorderColor);
				}
			}
		}
	}

	.sapMGTActionModeContainer {
		position: absolute;
		bottom: 0.25em;
		right: 1rem;
	}

	.sapMGTContent {
		height: 17.4rem;
		overflow: visible;

		.sapMTileCnt {
			display: flex;
			flex-direction: column;
			height: inherit;

			.sapMTileCntContent {
				margin-top: 0;
				padding: 0;

				.sapMFT {
					height: inherit;

					span {
						color: var(--sapTextColor);
						white-space: initial;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 16;
						-webkit-box-orient: vertical;
						height: fit-content;
						line-height: 1rem;
						overflow: hidden;
						text-overflow: ellipsis;
						font-weight: 400;
						font-size: var(--sapFontSize);
						margin-bottom: 0.75rem;
						max-height: 16rem;
					}

					p + span {
						margin-bottom: 1rem;
						-webkit-line-clamp: 14;
						max-height: 14rem;
					}

					p {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: var(--sapTextColor);
						font-weight: 400;
						font-size: var(--sapFontSize);
						margin: 0 0 1rem 0;
						line-height: 1.125rem;
					}

					p.sapMbrPresent::first-line {
						color: var(--sapContent_LabelColor);
					}

					p:not(.sapMbrPresent) {
						margin-bottom: 0.75rem;
						white-space: initial;
						word-break: break-all;
					}
				}
			}

			.sapMTileFtrCnt {
				position: absolute;
				bottom: 1rem;
				right: 0rem;
			}
		}
	}

	&.sapMATHideActionButton {

		.sapMTileCntContent {

			.sapMFT {

				span {
					-webkit-line-clamp: 14 !important;
				}

				p + span {
					-webkit-line-clamp: 12 !important;
				}
			}
		}

		.sapMGTActionModeContainer {
			display: none !important;
		}
	}
}

.sapMAT.sapMATHideActionButton {
	height: 20.75rem;
 }

.sapMAT:hover {
	background-color: var(--sapTile_Hover_Background);
	box-shadow:  var(--sapContent_Shadow2);
}

.sapMAT:active {
	background-color: var(--sapTile_Active_Background);
	box-shadow: none;
	outline: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
}

.sapMAT:focus-visible {
	outline: none;
}

.sapMAT.sapMATAutoPointer {

	.sapMText {
		cursor: auto !important;
	}
}

 .sapMAT:focus {

	.sapMATFocusDiv {
		position: absolute;
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
		border-radius:  1rem;
		inset: 0px;
		pointer-events: none;
	}
}

/* Styles when Icon(headerImage) is present */

.sapMAT.sapMATHeaderImage {
	overflow: hidden;

	.sapMGTHdrContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		height: 3.25rem;
		margin-bottom: 0.75rem;

		.sapMGTHdrIconImage.Neutral {
			color:  var(--sapNeutralTextColor);
		}

		.sapMGTHdrIconImage.Good {
			color: var(--sapPositiveTextColor);
		}

		.sapMGTHdrIconImage.Critical {
			color: var(--sapCriticalElementColor);
		}

		.sapMGTHdrIconImage.Error {
			color: var(--sapNegativeTextColor);
		}

		.sapMGTHdrIconImage.None {
			color: var(--sapTile_IconColor);
		}

		.sapMGTHdrIconImage.sapUiIcon {

			&::before {
				height: 2.75rem;
				font-weight: 400;
				font-size: 2.25rem;
				line-height: 2.4375rem;
				display: flex;
				align-items: end;
				text-align: center;
			}
		}

		.sapMATIconFrame {
			flex-shrink: 0;

			&.sapMGTIconFrameBadge {
				align-self: start;

				.sapFAvatarBadgeIconActiveArea {
					height: 3rem;
					width: 3rem;

					.sapFAvatarBadgeIcon {
						height: 1.125rem;
						width: 1.125rem;

						.sapUiIcon {
							font-size: 0.75rem;
						}
					}
				}
			}
		}
	}
}

.sapMAT:focus {

	.sapMGTFocusDiv {
		position: absolute !important;
		pointer-events: none;
		inset: 0;
		z-index: 2;
		border-radius: var(--sapTile_BorderCornerRadius);
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	}

	.sapMATFocusDiv {
		position: absolute !important;
		pointer-events: none;
		inset: 0;
		z-index: 2;
		border-radius: var(--sapTile_BorderCornerRadius);
		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
	}
}

.sapMAT.sapMATDynamicHeight {
	height: auto;
	display: inline-flex;
	flex-direction: column;
	padding-bottom: 0.4375rem;

	.sapMGTContent {
		height: auto;

		.sapMATC {
			height: auto;
			margin-bottom: 1.0625rem;
		}

		.sapMTileCnt {
			height: auto;

			.sapMTileCntContent {
				height: auto;
			}

			.sapMTileCntContent {

				.sapMFT {

					span {
						-webkit-line-clamp: initial;
						max-height: none;
					}

					p + span {
						-webkit-line-clamp: initial;
						max-height: none;
					}
				}
			}
		}
	}

	.sapMGTActionModeContainer {
		position: relative;
		height: fit-content;
		width: inherit;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		padding-right: 2rem;
		inset: 0;
		margin-top: auto;
		top: 0.1875rem;
	}

	&.sapMATHideActionButton {
		padding-bottom: 1rem;

		.sapMTileCntContent {

			.sapMFT {

				span {
					-webkit-line-clamp: initial !important;
					max-height: none;
				}

				p + span {
					-webkit-line-clamp: initial !important;
					max-height: none;
				}
			}
		}

		.sapMGTContent {
			height: auto;

			.sapMATC {
				margin-bottom: 0;
			}
		}
	}
}

/* Loading State Styles */

.sapMAT.sapMATStateLoading {

	.sapMGTContentShimmerPlaceholderItem {
		padding: 0;
		height: 20rem;
		align-items: initial;
		flex-direction: column;
		justify-content: space-around;

		.sapMGTContentShimmerPlaceholderRows {
			flex-grow: 0;
		}
	}
}

.sapMAT.sapMATStateLoading.sapMATHideActionButton {

	.sapMGTContentShimmerPlaceholderItem {
		height: 17.5rem;
		justify-content: space-evenly;
		padding: 0px;

		.sapMGTContentShimmerPlaceholderRows {

			.sapMGTContentShimmerPlaceholderItemHeader,
			.sapMGTContentShimmerPlaceholderItemText {
				margin-top: 0;
			}

			.sapMGTContentShimmerPlaceholderItemText {
				margin-bottom: 0;
			}
		}
	}
}