@openui5/sap.m 1.123.0 → 1.124.0

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

@@ -5,7 +5,7 @@
 
 .sapMAT{
     width: 20rem;
-    height: 21.875rem;
+    height: 22.875rem;
     border-radius: @sapTile_BorderCornerRadius;
     position: relative;
     padding: 1rem;
@@ -20,6 +20,7 @@
         padding: 0;
         height: 3rem;
         overflow: hidden;
+        margin-bottom: 0.75rem;
         .sapMText{
             font-size: 1rem;
             font-weight: 700;
@@ -27,162 +28,37 @@
             line-height: 1.5rem;
             cursor: pointer;
         }
+        .sapMATHeaderContainer {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            justify-content: space-between;
+            .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.9em;
         right: 1rem;
     }
-}
-
-.sapMAT.sapMATHideActionButton {
-    height: 19.625rem;
- }
-
-.sapMAT:hover {
-    background-color: @sapTile_Hover_Background;
-    box-shadow:  @sapContent_Shadow2;
-}
-
-.sapMAT:active {
-    background-color: @sapTile_Active_Background;
-    box-shadow: none;
-    outline: 0.0625rem solid @sapTile_Interactive_BorderColor;
-}
-
-.sapMAT:focus-visible {
-    outline: none;
-}
-
-.sapMAT.sapMATAutoPointer {
-    .sapMText {
-        cursor: auto !important;
-    }
-}
-// ToDo card Styles
-
-.sapMAT.sapMToDoCard {
-    .sapMGTHdrContent {
-        margin-bottom: 0.75rem;
-    }
-    .sapMATC {
-    height: 14.375rem;
-     overflow: hidden;
-     .sapMTilePriorityValue {
-         font-size: 0.875rem;
-         font-weight: 400;
-         margin-bottom: 0.75rem;
-         &.High {
-             color: @sapNegativeTextColor;
-             }
-         &.Medium {
-                 color: @sapCriticalTextColor;
-             }
-         &.Low {
-             color: @sapPositiveTextColor;
-             }
-         &.VeryHigh {
-                 color: @sapIndicationColor_1_BorderColor;
-             }
-     }
-     .sapMContainer {
-             display: flex;
-             flex-direction: column;
-             gap: 1rem;
-         .sapMElementWrapper {
-             display: flex;
-             flex-direction: column;
-             gap: 0.25rem;
-             font-weight: 400;
-             font-size: 0.875rem;
-             white-space: nowrap;
-             overflow: hidden;
-             text-overflow: ellipsis;
-             .sapMATCLabel {
-                 color: @sapContent_LabelColor;
-                 white-space: nowrap;
-                 overflow: hidden;
-                 text-overflow: ellipsis;
-                 font-size: 14px;
-                    font-weight: 400;
-                    line-height: 1rem;
-             }
-             .sapMATCValue {
-                 color: @sapTextColor;
-                 white-space: nowrap;
-                 overflow: hidden;
-                 text-overflow: ellipsis;
-                 font-size: 14px;
-                font-weight: 400;
-                line-height: 1rem;
-                height: 1rem;
-                .sapMText {
-                    cursor: pointer;
-                }
-             }
-         }
-     }
-    }
-    .sapMATActionModeContainer {
-     position: absolute;
-     bottom: 0.9rem;
-     right: 1rem;
-    }
-    &.sapMATHideActionButton {
-        .sapMGTActionModeContainer {
-            display: none;
-        }
-    }
- }
-
- .sapMAT:focus {
-    .sapMATFocusDiv{
-        position: absolute;
-        border: 2px solid @sapContent_FocusColor;
-        border-radius:  1rem;
-        inset: 0px;
-        pointer-events: none;
-    }
- }
-
-// Situation Card Styles
-
-.sapMAT.sapMATSituationCard{
-    overflow: hidden;
-    .sapMGTHdrContent {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 0.5rem;
-        margin-bottom: 0.75rem;
-        height: 2.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;
-            }
-        }
-    }
     .sapMGTContent {
         height: 17.4rem;
         overflow: visible;
@@ -255,7 +131,94 @@
             }
         }
         .sapMGTActionModeContainer {
-            display: none;
+            display: none !important;
+        }
+    }
+}
+
+.sapMAT.sapMATHideActionButton {
+    height: 19.625rem;
+ }
+
+.sapMAT:hover {
+    background-color: @sapTile_Hover_Background;
+    box-shadow:  @sapContent_Shadow2;
+}
+
+.sapMAT:active {
+    background-color: @sapTile_Active_Background;
+    box-shadow: none;
+    outline: 0.0625rem solid @sapTile_Interactive_BorderColor;
+}
+
+.sapMAT:focus-visible {
+    outline: none;
+}
+
+.sapMAT.sapMATAutoPointer {
+    .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: 1rem;
+        .sapMGTHdrIconImage.Neutral {
+            color:  @sapUiNeutralText;
+        }
+        .sapMGTHdrIconImage.Good {
+            color: @sapUiPositiveText;
+        }
+        .sapMGTHdrIconImage.Critical {
+            color: @sapUiCriticalElement;
+        }
+        .sapMGTHdrIconImage.Error {
+            color: @sapUiNegativeText;
+        }
+        .sapMGTHdrIconImage.None {
+            color: @sapUiTileIconColor
+        }
+        .sapMGTHdrIconImage.sapUiIcon:not(.sapMATIconFrame) {
+            &::before {
+                height: 2.75rem;
+                font-weight: 400;
+                font-size: 2.25rem;
+                line-height: 2.4375rem;
+                display: flex;
+                align-items: end;
+                text-align: center;
+            }
+        }
+        .sapMGTHdrIconImage.sapUiIcon.sapMATIconFrame {
+            height: 3.25rem;
+            width: 3.25rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: @sapAvatar_10_Background;
+            border-radius: @sapElement_BorderCornerRadius;
+            &::before {
+                font-size: 1.125rem;
+            }
         }
     }
 }
@@ -280,6 +243,62 @@
     }
  }
 
+ .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;
+                }
+            }
+        }
+    }
+ }
+
 //Loading State Styles
 
 .sapMAT.sapMATStateLoading {

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

@@ -0,0 +1,62 @@
+/* ================================== */
+/* CSS for control sap.m/ActionTileContent  */
+/* Base theme                         */
+/* ================================== */
+.sapMATC {
+    height: 14.375rem;
+     overflow: hidden;
+     .sapMTilePriorityValue {
+         font-size: 0.875rem;
+         font-weight: 400;
+         margin-bottom: 0.75rem;
+         &.High {
+             color: @sapNegativeTextColor;
+             }
+         &.Medium {
+                 color: @sapCriticalTextColor;
+             }
+         &.Low {
+             color: @sapPositiveTextColor;
+             }
+         &.VeryHigh {
+                 color: @sapIndicationColor_1_BorderColor;
+             }
+     }
+     .sapMContainer {
+             display: flex;
+             flex-direction: column;
+             gap: 1rem;
+         .sapMElementWrapper {
+             display: flex;
+             flex-direction: column;
+             gap: 0.25rem;
+             font-weight: 400;
+             font-size: 0.875rem;
+             white-space: nowrap;
+             overflow: hidden;
+             text-overflow: ellipsis;
+             .sapMATCLabel {
+                 color: @sapContent_LabelColor;
+                 white-space: nowrap;
+                 overflow: hidden;
+                 text-overflow: ellipsis;
+                 font-size: 14px;
+                    font-weight: 400;
+                    line-height: 1rem;
+             }
+             .sapMATCValue {
+                 color: @sapTextColor;
+                 white-space: nowrap;
+                 overflow: hidden;
+                 text-overflow: ellipsis;
+                 font-size: 14px;
+                font-weight: 400;
+                line-height: 1rem;
+                height: 1rem;
+                .sapMText {
+                    cursor: pointer;
+                }
+             }
+         }
+     }
+    }

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

@@ -7,6 +7,11 @@
 		width: 7px;
 		margin-left: -3.5px;
 		cursor: ew-resize;
+
+		html[dir=rtl] & {
+			margin-left: 0;
+			margin-right: -3.5px;
+		}
 	}
 
 	&.sapMPluginsHorizontalBorder {
@@ -21,6 +26,11 @@
 		margin-top: -5px;
 		margin-left: -5px;
 
+		html[dir=rtl] & {
+			margin-left: 0;
+			margin-right: -5px;
+		}
+
 		&.sapMPluginsNESW {
 			cursor: nesw-resize;
 		}
@@ -54,21 +64,83 @@
 }
 
 .sapMLIBSelected > .sapMPluginsCellSelectorSelected {
-	border-bottom: @sapList_BorderWidth @sapList_SelectionBorderColor solid !important;
+	border-bottom: @sapList_BorderWidth @sapList_SelectionBorderColor solid;
 }
 
 .sapMPluginsCellSelectorTop {
-	border-top: @sapList_BorderWidth @sapList_SelectionBorderColor solid !important;
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor;
 }
 
 .sapMPluginsCellSelectorRight {
-	border-right: @sapList_BorderWidth @sapList_SelectionBorderColor solid !important;
+	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor;
 }
 
 .sapMPluginsCellSelectorBottom {
-	border-bottom: @sapList_BorderWidth @sapList_SelectionBorderColor solid !important;
+	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
 }
 
 .sapMPluginsCellSelectorLeft {
-	border-left: @sapList_BorderWidth @sapList_SelectionBorderColor solid !important;
+	box-shadow: inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorBottom {
+	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorBottom {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorLeft {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom {
+	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
+				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorLeft {
+	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
+	box-shadow: inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
+				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor;
 }
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorLeft {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
+	box-shadow: inset 0 @sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
+	box-shadow: inset -@sapList_BorderWidth 0 @sapList_SelectionBorderColor,
+				inset 0 -@sapList_BorderWidth @sapList_SelectionBorderColor,
+				inset @sapList_BorderWidth 0 @sapList_SelectionBorderColor;
+}
+
+.sapMPluginsCellSelectorTop.sapMPluginsCellSelectorRight.sapMPluginsCellSelectorBottom.sapMPluginsCellSelectorLeft {
+	box-shadow: inset 0 0 0 @sapList_BorderWidth @sapList_SelectionBorderColor;
+}

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

@@ -85,10 +85,6 @@ html.sap-phone .sapMDialog {
 	& > footer .sapMFooter-CTX {
 		display: flex;
 		padding: 0 0.25rem;
-
-		.sapMTBSpacer {
-			display: none;
-		}
 	}
 }
 html.sap-tablet .sapMDialog,