@openui5/sap.m 1.126.1 → 1.128.0

package/src/sap/m/themes/base/ActionTile.less

@@ -3,339 +3,409 @@
 /* Base theme                         */
 /* ================================== */
 
-.sapMAT{
-    width: 20rem;
-    height: 22.875rem;
-    border-radius: @sapTile_BorderCornerRadius;
-    position: relative;
-    padding: 1rem;
-    box-shadow: @sapContent_Shadow0;
-    background-color: @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: @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: 0.875rem;
-            }
-            .sapMTilePriorityValue {
-                font-size: 0.875rem;
-                &.High {
-                    color: @sapNegativeTextColor;
-                }
-                &.Medium {
-                    color: @sapCriticalTextColor;
-                }
-                &.Low {
-                    color: @sapPositiveTextColor;
-                }
-                &.VeryHigh {
-                    color: @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: @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: 0.875rem;
-                        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: @sapTextColor;
-                        font-weight: 400;
-                        font-size: 0.875rem;
-                        margin: 0 0 1rem 0;
-                        line-height: 1.125rem;
-                    }
-                    p.sapMbrPresent::first-line {
-                        color: @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 {
+	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: 0.875rem;
+			}
+
+			.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: 0.875rem;
+						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: 0.875rem;
+						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: 19.625rem;
+	height: 20.75rem;
  }
 
 .sapMAT:hover {
-    background-color: @sapTile_Hover_Background;
-    box-shadow:  @sapContent_Shadow2;
+	background-color: var(--sapTile_Hover_Background);
+	box-shadow:  var(--sapContent_Shadow2);
 }
 
 .sapMAT:active {
-    background-color: @sapTile_Active_Background;
-    box-shadow: none;
-    outline: 0.0625rem solid @sapTile_Interactive_BorderColor;
+	background-color: var(--sapTile_Active_Background);
+	box-shadow: none;
+	outline: 0.0625rem solid var(--sapTile_Interactive_BorderColor);
 }
 
 .sapMAT:focus-visible {
-    outline: none;
+	outline: none;
 }
 
 .sapMAT.sapMATAutoPointer {
-    .sapMText {
-        cursor: auto !important;
-    }
+
+	.sapMText {
+		cursor: auto !important;
+	}
 }
 
  .sapMAT:focus {
-    .sapMATFocusDiv{
-        position: absolute;
-        border: 2px solid @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:  @sapUiNeutralText;
-        }
-        .sapMGTHdrIconImage.Good {
-            color: @sapUiPositiveText;
-        }
-        .sapMGTHdrIconImage.Critical {
-            color: @sapUiCriticalElement;
-        }
-        .sapMGTHdrIconImage.Error {
-            color: @sapUiNegativeText;
-        }
-        .sapMGTHdrIconImage.None {
-            color: @sapUiTileIconColor
-        }
-        .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;
-                        }
-                    }
-                }
-            }
-        }
-    }
+	.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: @sapTile_BorderCornerRadius;
-        border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-    }
-
-    .sapMATFocusDiv{
-        position: absolute !important;
-        pointer-events: none;
-        inset: 0;
-        z-index: 2;
-        border-radius: @sapTile_BorderCornerRadius;
-        border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-    }
- }
 
- .sapMAT.sapMATDynamicHeight {
-    height: auto;
-    display: inline-flex;
-    flex-direction: column;
-    .sapMGTContent {
-        height: auto;
-        .sapMATC {
-            height: auto;
-        }
-        .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 {
-        .sapMTileCntContent {
-            .sapMFT {
-                span {
-                    -webkit-line-clamp: initial !important;
-                    max-height: none;
-                }
-                p + span {
-                    -webkit-line-clamp: initial !important;
-                    max-height: none;
-                }
-            }
-        }
-    }
- }
+	.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 {
 
-//Loading State Styles
+				.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;
-        }
-    }
+
+	.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;
-                }
-            }
-        }
-    }
+
+	.sapMGTContentShimmerPlaceholderItem {
+		height: 17.5rem;
+		justify-content: space-evenly;
+		padding: 0px;
+
+		.sapMGTContentShimmerPlaceholderRows {
+
+			.sapMGTContentShimmerPlaceholderItemHeader,
+			.sapMGTContentShimmerPlaceholderItemText {
+				margin-top: 0;
+			}
+
+			.sapMGTContentShimmerPlaceholderItemText {
+				margin-bottom: 0;
+			}
+		}
+	}
+}