@openui5/themelib_sap_horizon 1.96.0 → 1.96.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.96.0",
+  "version": "1.96.2",
   "description": "OpenUI5 Theme Library sap_horizon",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,22 +14,22 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "devDependencies": {
-    "@openui5/sap.f": "1.96.0",
-    "@openui5/sap.m": "1.96.0",
-    "@openui5/sap.tnt": "1.96.0",
-    "@openui5/sap.ui.codeeditor": "1.96.0",
-    "@openui5/sap.ui.commons": "1.96.0",
-    "@openui5/sap.ui.core": "1.96.0",
-    "@openui5/sap.ui.dt": "1.96.0",
-    "@openui5/sap.ui.fl": "1.96.0",
-    "@openui5/sap.ui.mdc": "1.96.0",
-    "@openui5/sap.ui.integration": "1.96.0",
-    "@openui5/sap.ui.layout": "1.96.0",
-    "@openui5/sap.ui.rta": "1.96.0",
-    "@openui5/sap.ui.suite": "1.96.0",
-    "@openui5/sap.ui.table": "1.96.0",
-    "@openui5/sap.ui.unified": "1.96.0",
-    "@openui5/sap.ui.ux3": "1.96.0",
-    "@openui5/sap.uxap": "1.96.0"
+    "@openui5/sap.f": "1.96.2",
+    "@openui5/sap.m": "1.96.2",
+    "@openui5/sap.tnt": "1.96.2",
+    "@openui5/sap.ui.codeeditor": "1.96.2",
+    "@openui5/sap.ui.commons": "1.96.2",
+    "@openui5/sap.ui.core": "1.96.2",
+    "@openui5/sap.ui.dt": "1.96.2",
+    "@openui5/sap.ui.fl": "1.96.2",
+    "@openui5/sap.ui.mdc": "1.96.2",
+    "@openui5/sap.ui.integration": "1.96.2",
+    "@openui5/sap.ui.layout": "1.96.2",
+    "@openui5/sap.ui.rta": "1.96.2",
+    "@openui5/sap.ui.suite": "1.96.2",
+    "@openui5/sap.ui.table": "1.96.2",
+    "@openui5/sap.ui.unified": "1.96.2",
+    "@openui5/sap.ui.ux3": "1.96.2",
+    "@openui5/sap.uxap": "1.96.2"
   }
 }

package/src/sap/f/themes/sap_horizon/AvatarGroup.less

@@ -12,6 +12,7 @@
 .sapFAvatarGroup:focus {
 	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 	outline: none;
+	border-radius: 0.35rem;
 }
 
 .sapFAvatarGroup {

package/src/sap/m/themes/sap_horizon/CheckBox.less

@@ -20,7 +20,7 @@
 	height: 1.375rem;
 	width: 1.375rem;
 	line-height: 1.125rem;
-	border-width: 0.125rem;
+	border-width: 0.0625rem;
 	box-sizing: border-box;
 	border-radius: @sapField_BorderCornerRadius;
 
@@ -58,7 +58,7 @@
 
 .sapMCb.sapMCbSucc .sapMCbBg {
 	background-color: @sapUiFieldSuccessBackground;
-	border: 0.125rem solid @sapUiFieldSuccessColor;
+	border: 0.0625rem solid @sapUiFieldSuccessColor;
 
 	&.sapMCbMarkChecked:before {
 		color: @sapUiFieldSuccessColor;
@@ -191,7 +191,7 @@ html.sap-desktop {
 
 .sapMCbDisplayOnly .sapMCbBg:not(.sapMCbMarkPartiallyChecked) {
 	border-style: solid;
-	border-width: 0.125rem;
+	border-width: 0.0625rem;
 	margin: 0;
 }
 

package/src/sap/m/themes/sap_horizon/GenericTile.less

@@ -5,8 +5,8 @@
 
 .sapMGT.sapMGTBackgroundImage {
 	.sapMGTContent {
-		border-bottom-left-radius: 0.125rem;
-		border-bottom-right-radius: 0.125rem;
+		border-bottom-left-radius: @sapElement_BorderCornerRadius;
+		border-bottom-right-radius: @sapElement_BorderCornerRadius;
 		height: auto;
 	}
 }
@@ -237,3 +237,106 @@ html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv {
 		z-index: 0;
 	}
 }
+
+.sapUshellSection .sapUshellSectionHeader, .sapUshellSection .sapUshellSectionDefaultArea, .sapUshellSection .sapUshellSectionFlatArea
+{
+	gap: 0.75rem !important;
+}
+large.sapUiSizeCompact .sapMGT.sapMGTLineMode, .sapUiMedia-GenericTileDeviceSet-large .sapUiSizeCompact .sapMGT.sapMGTLineMode {
+	margin-right: 1rem;
+	border: 1px solid @sapTile_BorderColor
+}
+.sapMGT {
+	border-radius: @sapElement_BorderCornerRadius;
+	border-color: @sapTile_BorderColor;
+}
+.sapUshellSection {
+	.sapMGT.TwoByOne {
+		width: 23rem;
+	}
+	.sapMGT.TwoByHalf {
+		width: 23rem;
+	}
+}
+.sapMGT.TwoByOne {
+	width: 22.5rem;
+}
+.sapMGT.TwoByHalf {
+	width: 22.5rem;
+}
+.sapMGTHdrTxt>.sapMText {
+	font-weight: bold;
+	font-size: @sapFontHeader6Size;
+}
+.sapMGTLineMode .sapMGTHdrTxt {
+	font-weight: bold;
+}
+.sapMGT.sapMGTLineMode {
+	border: 1px solid @sapTile_BorderColor !important;
+	border-radius: @sapElement_BorderCornerRadius !important;
+	box-shadow: @sapContent_Shadow0 !important;
+}
+.sap-desktop .sapMGT.sapMGTLineMode:not(.sapMGTDisabled):not(.sapMGTLineModePress):hover {
+	background: @sapTile_Hover_Background;
+	border: 1px solid @sapTile_BorderColor !important;
+	box-shadow: @sapContent_Shadow1 !important;
+}
+html.sap-desktop .sapMGT:hover:not(.sapMGTPressActive) {
+	border: 1px solid @sapTile_BorderColor !important;
+	box-shadow: @sapContent_Shadow1 !important;
+}
+html.sap-desktop .sapMGTIconMode.sapMGT:hover:not(.sapMGTPressActive) {
+	border: none !important;
+}
+.sapMTileCntFtrTxt .sapMLnk .sapUiIcon {
+	font-size: 0.75rem !important;
+	margin-left: 1px;
+	margin-right: 1px;
+}
+html.sap-desktop .sapFGridContainer .sapFGridContainerItemWrapperNoVisualFocus:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:focus .sapMGTFocusDiv, html.sap-desktop .sapMGT:active .sapMGTFocusDiv, html.sap-desktop .sapMGTLineModePress .sapMGTFocusDiv {
+	border-radius: @sapElement_BorderCornerRadius;
+	box-shadow: inset 0 0 0 0.063rem @sapContent_ContrastFocusColor, 0 0 0 @sapContent_FocusWidth @sapContent_FocusColor;
+}
+html.sap-desktop .sapMGT.sapMGTBackgroundImage:focus .sapMGTFocusDiv:after, html.sap-desktop .sapMGT.sapMGTBackgroundImage:active .sapMGTFocusDiv:after {
+	border: none;
+	border-radius: @sapElement_BorderCornerRadius;
+}
+.sapMGTLineMode .sapMGTFocusDiv {
+	border-radius: 10px !important;
+}
+.sapFGridContainer .sapFGridContainerItemWrapper:not(.sapFGridContainerItemWrapperNoVisualFocus):focus::before {
+	border: 2px solid @sapContent_FocusColor;
+	border-radius: @sapElement_BorderCornerRadius;
+}
+.miniTileBackground {
+	background: @sapTile_Background;
+	box-shadow: @sapContent_Shadow0 !important;
+}
+.miniTileContainer .sapMGT {
+	background: @sapTile_Background;
+	box-shadow: @sapContent_Shadow0 !important;
+}
+.sapUshellTile, .sapUshellTileWrapper, .sapUshellTileInner, .sapUshellTileBase, .sapUshellInner .sapUshellTile-placeholder, .sapUshellInner .sapUshellLinkTile-placeholder {
+	border-radius: @sapElement_BorderCornerRadius;
+}
+.sapUshellTile{
+	margin: 0 1rem 1rem 0;
+}
+.sapUshellSection .sapUshellSectionTitle {
+	font-weight: bold;
+}
+.OneByOne.tileWithAppInfo {
+	.sapMGTTInfoContainer {
+		.sapMGTTInfo {
+			background-color: @sapTile_Active_Background;
+		}
+	}
+}
+.TwoByOne.sapMGTActionMode {
+	width: 20rem;
+	height: 11.375rem;
+	border-radius: 1rem;
+	.sapMGTFocusDiv {
+		border-radius: 1rem !important;
+	}
+}

package/src/sap/m/themes/sap_horizon/Select.less

@@ -166,4 +166,112 @@ html.sap-desktop .sapMSlt.sapMSltFocused:not(.sapMSltExpanded):not(.sapMSltDisab
     &:before {
         box-shadow: inset 0px 0px 0px 2px @sapField_Focus_BorderColor;
     }
+}
+
+// =====================================
+// Input Information state
+// =====================================
+.sapMSltInformation {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_InformationColor 0, @sapField_InformationColor 100%);
+    background-size: 100% @sapField_InformationBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltInformation.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Informative_Shadow; // NEW Parameter
+    }
+}
+
+.sapMSltHoverable.sapMSltInformation:not(.sapMSltIconOnly):active,
+.sapMSltFocused.sapMSltInformation {
+    box-shadow: inset 0px 0px 0px 2px @sapField_Active_BorderColor;
+    background-color: @sapField_Focus_Background;
+}
+
+// =====================================
+// Input Success state
+// =====================================
+
+.sapMSltSuccess {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_SuccessColor 0, @sapField_SuccessColor 100%);
+    background-size: 100% @sapField_SuccessBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltSuccess.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover  {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Positive_Shadow; // New Parameter
+    }
+}
+
+// Field Success Focus - Experimental
+.sapMSltHoverable.sapMSltSuccess:not(.sapMSltIconOnly):active,
+.sapMSltFocused.sapMSltSuccess {
+    box-shadow: inset 0px 0px 0px 2px @sapField_SuccessColor;
+    border-radius: @sapField_BorderCornerRadius;
+    background-color: @sapField_Focus_Background;
+}
+
+// =====================================
+// Input Warning state
+// =====================================
+
+.sapMSltWarning {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_WarningColor 0, @sapField_WarningColor 100%);
+    background-size: 100% @sapField_WarningBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltWarning.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Critical_Shadow; // NEW Parameter
+    }
+}
+
+// Field Warning Focus - Experimental
+.sapMSltHoverable.sapMSltWarning:not(.sapMSltIconOnly):active,
+.sapMSltFocused.sapMSltWarning {
+    box-shadow: inset 0px 0px 0px 2px @sapField_WarningColor; // Experimental
+    background-color: @sapField_Focus_Background;
+}
+
+
+// =====================================
+// Input Error state
+// =====================================
+
+.sapMSltError {
+    border: none;
+    background-image: linear-gradient(0deg, @sapField_InvalidColor 0, @sapField_InvalidColor 100%);
+    background-size: 100% @sapField_InvalidBorderWidth;
+    background-repeat: repeat-x;
+    background-position: bottom;
+}
+
+.sapMSltError.sapMSltHoverable:not(.sapMSltIconOnly):not(.sapMSltDisabled):not(.sapMSltPressed):hover {
+    background-color: @sapField_Hover_Background;
+
+    &:not(.sapMSltFocused) {
+        box-shadow: @sapContent_Negative_Shadow; // New Parameter
+    }
+}
+
+// Field Error Focus - Experimental
+.sapMSltHoverable.sapMSltError:not(.sapMSltIconOnly):active,
+.sapMSltFocused.sapMSltError {
+    box-shadow: inset 0px 0px 0px 2px @sapField_InvalidColor;
+    background-color: @sapField_Focus_Background;
 }

package/src/sap/m/themes/sap_horizon/SelectList.less

@@ -50,13 +50,15 @@ html.sap-desktop .sapMSelectListItemBase:focus {
 .sapMSelectListItemBase {
 	position: relative;
 
+	&:last-child:not(:only-child)::after {
+		border-bottom-left-radius: 0.75rem;
+		border-bottom-right-radius: 0.75rem;
+	}
+}
+
+.sapMSltPicker-CTX:not(.sapMSltPickerWithSubHeader) .sapMSelectListItemBase {
 	&:first-child::after {
 		border-top-left-radius: 0.75rem;
 		border-top-right-radius: 0.75rem;
 	}
-
-	&:last-child::after {
-		border-bottom-left-radius: 0.75rem;
-		border-bottom-right-radius: 0.75rem;
-	}
 }

package/src/sap/m/themes/sap_horizon/SlideTile.less

@@ -37,6 +37,19 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 	box-shadow: 0 0 0.25rem fade(@sapUiContentShadowColor, 25);
 }
 
+.sapMST {
+	border-radius: @sapElement_BorderCornerRadius;
+	border-color: @sapTile_BorderColor;
+}
+
+.sapMST.TwoByOne {
+	width: 23rem;
+}
+
+.sapMST.TwoByHalf {
+	width: 23rem;
+}
+
 .sapMST .sapMSTIconDisplayArea {
 	background-color: darken(@sapUiBrand, 18);
 }
@@ -49,7 +62,15 @@ html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
 	text-shadow: 0px 1px @sapUiButtonEmphasizedTextShadow;
 }
 
-html.sap-desktop .sapMST .sapMGT:active .sapMGTFocusDiv,
-html.sap-desktop .sapMST .sapMGT:active .sapMGTFocusDiv:after {
+html.sap-desktop .sapMST:focus .sapMSTFocusDiv,
+html.sap-desktop .sapMST:active .sapMSTFocusDiv {
 	border: none;
+	border-radius: @sapElement_BorderCornerRadius;
+	box-shadow: inset 0 0 0 0.063rem @sapContent_ContrastFocusColor, 0 0 0 @sapContent_FocusWidth @sapContent_FocusColor;
 }
+
+html.sap-desktop .sapMST:focus .sapMSTFocusDiv:after,
+html.sap-desktop .sapMST:active .sapMSTFocusDiv:after {
+	border: none;
+	border-radius: @sapElement_BorderCornerRadius;
+}

package/src/sap/ui/core/themes/sap_horizon/.theme

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.96.0</version>
+	<version>1.96.2</version>
 
 	<documentation>SAPUI5 Horizon theme library.</documentation>