@openui5/themelib_sap_horizon 1.108.20 → 1.108.22

package/.reuse/dep5

@@ -192,11 +192,6 @@ Copyright: 2012 Matteo Spinelli
 License: MIT
 Comment: these files belong to: cubiq.org - swipeview
 
-Files: src/sap.ui.core/src/sap/ui/thirdparty/mobify-carousel.js
-Copyright: Mobify R&D Inc.
-License: MIT
-Comment: these files belong to: Mobify.js
-
 Files: src/sap.ui.core/src/sap/ui/thirdparty/zyngascroll.js
 Copyright: 2011 Zynga Inc.
 License: MIT

package/THIRDPARTY.txt

@@ -143,12 +143,6 @@ License: MIT
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
 Contained in: src/sap.ui.core/src/sap/ui/thirdparty/swipe-view.js
 
-Component: Mobify.js, version: 1.1
-Copyright: Mobify R&D Inc.
-License: MIT
-License Text: https://github.com/SAP/openui5/blob/master/LICENSES/MIT.txt
-Contained in: src/sap.ui.core/src/sap/ui/thirdparty/mobify-carousel.js
-
 Component: Zynga Scroller, version: 1.2.1-0-g5d43806
 Copyright: 2011 Zynga Inc.
 License: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/themelib_sap_horizon",
-  "version": "1.108.20",
+  "version": "1.108.22",
   "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.108.20",
-    "@openui5/sap.m": "1.108.20",
-    "@openui5/sap.tnt": "1.108.20",
-    "@openui5/sap.ui.codeeditor": "1.108.20",
-    "@openui5/sap.ui.commons": "1.108.20",
-    "@openui5/sap.ui.core": "1.108.20",
-    "@openui5/sap.ui.dt": "1.108.20",
-    "@openui5/sap.ui.fl": "1.108.20",
-    "@openui5/sap.ui.mdc": "1.108.20",
-    "@openui5/sap.ui.integration": "1.108.20",
-    "@openui5/sap.ui.layout": "1.108.20",
-    "@openui5/sap.ui.rta": "1.108.20",
-    "@openui5/sap.ui.suite": "1.108.20",
-    "@openui5/sap.ui.table": "1.108.20",
-    "@openui5/sap.ui.unified": "1.108.20",
-    "@openui5/sap.ui.ux3": "1.108.20",
-    "@openui5/sap.uxap": "1.108.20"
+    "@openui5/sap.f": "1.108.22",
+    "@openui5/sap.m": "1.108.22",
+    "@openui5/sap.tnt": "1.108.22",
+    "@openui5/sap.ui.codeeditor": "1.108.22",
+    "@openui5/sap.ui.commons": "1.108.22",
+    "@openui5/sap.ui.core": "1.108.22",
+    "@openui5/sap.ui.dt": "1.108.22",
+    "@openui5/sap.ui.fl": "1.108.22",
+    "@openui5/sap.ui.mdc": "1.108.22",
+    "@openui5/sap.ui.integration": "1.108.22",
+    "@openui5/sap.ui.layout": "1.108.22",
+    "@openui5/sap.ui.rta": "1.108.22",
+    "@openui5/sap.ui.suite": "1.108.22",
+    "@openui5/sap.ui.table": "1.108.22",
+    "@openui5/sap.ui.unified": "1.108.22",
+    "@openui5/sap.ui.ux3": "1.108.22",
+    "@openui5/sap.uxap": "1.108.22"
   }
 }

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

@@ -1,43 +1,101 @@
-/* ============================= */
-/* CSS for control sap.f/AvatarGroup  */
-/* Horizon theme                 */
-/* ============================= */
+/* ===================================== */
+/* CSS for control sap.f/AvatarGroup	 */
+/* Horizon theme            	 		 */
+/* ===================================== */
 
+.applyBorderColorAccent(@counter) when (@counter > 0) {
+	.sapFAvatar.sapFAvatarColorAccent@{counter} {
+		border: 0.0625rem solid~"@{sapUiAccent@{counter}}";
+	}
 
-/* ============================= */
-/* CSS for control sap.f/AvatarGroup  */
-/* Base theme                    */
-/* ============================= */
-
-.sapFAvatarGroup:focus {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
-	outline: none;
-	border-radius: 0.35rem;
+	.applyBorderColorAccent(@counter - 1);
 }
 
 .sapFAvatarGroup {
 	padding: 0.125rem;
-}
 
-.sapFAvatarGroupIndividual {
+	.sapFAvatar {
+		border: none;
+	}
 
-	.sapFAvatarGroupItem:focus {
+	&:focus {
+		box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 		outline: none;
-		.sapFAvatar  {
-			outline: none;
-			box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+		border-radius: 0.35rem;
+	}
+
+	&.sapFAvatarGroupIndividual {
+		.sapFAvatarGroupItem {
+
+			&:hover:not(:active):not(:focus) {
+				.applyBorderColorAccent(10)
+			}
+
+			&:active {
+				.sapFAvatar {
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder,
+					&.sapFAvatarIcon {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			&:focus {
+				outline: none;
+
+				.sapFAvatar {
+					outline: none;
+					box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+				}
+			}
+
 		}
 	}
+
+	&.sapFAvatarGroupGroup {
+		&:hover:not(:active) {
+			.sapFAvatarGroupItem {
+				.applyBorderColorAccent(10);
+			}
+		}
+
+		&:active {
+			.sapFAvatarGroupItem {
+				.sapFAvatar {
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder,
+					&.sapFAvatarIcon {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			.sapFAvatarGroupMoreButton {
+				.sapMBtnInner {
+					background-color: @sapUiButtonActiveBackground;
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+
+					.sapMBtnContent {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+		}
+	}
+}
+
+.sapFAvatarGroupPopover .sapFCard {
+	border-radius: 0;
 }
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus>.sapMFocusable:not(.sapMBadgeIndicator):before {
 	border-radius: 50%;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
-}
-
-.sapFAvatarGroupPopover .sapFCard {
-	border-radius: 0;
-}
+}

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

@@ -96,14 +96,20 @@
 		font-size: @sapMFontHeader5Size;
 		font-weight: bold;
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
+		.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
+		.sapMBtnTransparent {
+			color: @sapUiShellTextColor;
+		}
+
+		.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
 			background: @sapUiShellHoverBackground;
 			box-shadow: @sapUiContentInteractionShadow;
 			border-color: @sapUiButtonLiteBorderColor;
+			color: @sapUiShellActiveTextColor;
 		}
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
+		.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
+			background: @sapUiShellHoverBackground;
 			color: @sapUiShellActiveTextColor;
 			border-color: @sapUiButtonLiteActiveBorderColor;
 		}
@@ -496,7 +502,7 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelB
 
 		// sap.m.Button
 		.sapFShellBarItem.sapMBtn,
-		.sapFShellBarItem .sapMBtn,
+		.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
 			.sapMBtnInner::after,

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

@@ -1,42 +1,99 @@
-/* ================================== */
-/* CSS for control sap.f/AvatarGroup  */
-/* Evening Horizon theme              */
-/* ================================== */
-
-.sapFAvatarGroup:focus {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
-	outline: none;
-	border-radius: 0.35rem;
+/* ===================================== */
+/* CSS for control sap.f/AvatarGroup	 */
+/* Evening Horizon theme            	 */
+/* ===================================== */
+
+.applyBorderColorAccent(@counter) when (@counter > 0) {
+	.sapFAvatar.sapFAvatarColorAccent@{counter} {
+		border: 0.0625rem solid~"@{sapUiAccent@{counter}}";
+	}
+
+	.applyBorderColorAccent(@counter - 1);
 }
 
 .sapFAvatarGroup {
 	padding: 0.125rem;
-}
 
-.sapFAvatarGroupIndividual {
+	.sapFAvatar {
+		border: none;
+	}
 
-	.sapFAvatarGroupItem:focus {
+	&:focus {
+		box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 		outline: none;
-		.sapFAvatar  {
-			outline: none;
-			box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+		border-radius: 0.35rem;
+	}
+
+	&.sapFAvatarGroupIndividual {
+		.sapFAvatarGroupItem {
+
+			&:hover:not(:active):not(:focus) {
+				.applyBorderColorAccent(10)
+			}
+
+			&:active {
+				.sapFAvatar {
+					background-color: @sapUiButtonActiveBackground;
+
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+
+			&:focus {
+				outline: none;
+
+				.sapFAvatar {
+					outline: none;
+					box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+				}
+			}
+
 		}
 	}
-}
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
-	border-radius: 50%;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-}
+	&.sapFAvatarGroupGroup {
+		&:hover:not(:active) {
+			.sapFAvatarGroupItem {
+				.applyBorderColorAccent(10);
+			}
+		}
+
+		&:active {
+			.sapFAvatarGroupItem {
+				.sapFAvatar {
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+					background-color: @sapUiButtonActiveBackground;
 
+					.sapFAvatarInitialsHolder {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
 
-html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus > .sapMBtnActive.sapMFocusable {
-	border-color: transparent;
+			.sapFAvatarGroupMoreButton {
+				.sapMBtnInner {
+					background-color: @sapUiButtonActiveBackground;
+					border: 0.0625rem solid @sapUiButtonActiveBorderColor;
+
+					.sapMBtnContent {
+						color: @sapUiButtonActiveTextColor;
+					}
+				}
+			}
+		}
+	}
 }
 
 .sapFAvatarGroupPopover .sapFCard {
 	border-radius: 0;
+}
+
+html.sap-desktop .sapFAvatarGroupMoreButton.sapMBtn:focus>.sapMFocusable:not(.sapMBadgeIndicator):before {
+	border-radius: 50%;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
 }

package/src/sap/f/themes/sap_horizon_dark/ShellBar.less

@@ -96,14 +96,20 @@
 		font-size: @sapMFontHeader5Size;
 		font-weight: bold;
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed:not(.sapMBtnActive) {
+		.sapMBtn:not(:hover) .sapMBtnInner.sapMBtnTransparent::after,
+		.sapMBtnTransparent {
+			color: @sapUiShellTextColor;
+		}
+
+		.sapMBtn:hover > .sapMBtnHoverable:not(.sapMBtnActive) {
 			background: @sapUiShellHoverBackground;
 			box-shadow: @sapUiContentInteractionShadow;
 			border-color: @sapUiButtonLiteBorderColor;
+			color: @sapUiShellActiveTextColor;
 		}
 
-		.sapMBtn:hover > .sapMBtnHoverable.sapMToggleBtnPressed.sapMBtnActive {
-			background: @sapUiShellActiveBackground;
+		.sapMBtn:hover > .sapMBtnHoverable.sapMBtnActive {
+			background: @sapUiShellHoverBackground;
 			color: @sapUiShellActiveTextColor;
 			border-color: @sapUiButtonLiteActiveBorderColor;
 		}
@@ -496,7 +502,7 @@ html.sap-desktop .sapFShellBarSearchWrap .sapMBtn:not(.sapFShellBarSearchCancelB
 
 		// sap.m.Button
 		.sapFShellBarItem.sapMBtn,
-		.sapFShellBarItem .sapMBtn,
+		.sapFShellBarItem:not(.sapFSHMegaMenu ) .sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem.sapMBtn,
 		.sapMTB-Transparent-CTX .sapFShellBarItem .sapMBtn {
 			.sapMBtnInner::after,

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

@@ -22,10 +22,10 @@
 }
 
 .sapFAvatarFocusable.sapMAvatarPressed {
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+	box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedBorderColor;
 
 	&:hover {
-		box-shadow: 0px 0px 0px 0.125rem @sapUiButtonSelectedHoverBorderColor;
+		box-shadow: 0px 0px 0px @sapUiButtonBorderWidth @sapUiButtonSelectedHoverBorderColor;
 	}
 }
 

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

@@ -3,9 +3,6 @@
 /* Horizon theme                     */
 /* ===============================   */
 
-
-
-
 .sapMBreadcrumbs {
 	.sapMBreadcrumbsCurrentLocation {
 		&:focus {
@@ -17,4 +14,48 @@
 	.sapMSltPressed:not(.sapMSltDisabled):not(.sapMSltState), .sapMSlt.sapMSltFocused:not(.sapMSltDisabled):not(.sapMSltState) {
 		outline-offset: 0;
 	}
+
+	.sapMSltIcon:before,
+	.sapMSltIcon:after {
+		font-size: @sapMFontMediumSize;
+		color: @sapUiLink;
+		padding-bottom: 0.0625rem;
+		speak: none;
+	}
+
+	.sapMSltIcon:before {
+		font-family: @sapUiFontLightFamily;
+		content: "••• ";
+		vertical-align: text-top;
+	}
+
+	.sapMSltIcon:after {
+		font-family: @sapUiContentIconFontFamily;
+		content: "\e1ef";
+		vertical-align: text-bottom;
+	}
+
+	.sapMBreadcrumbsItem.sapMBreadcrumbsSelectItem >
+	.sapMSlt.sapMSltIconOnly.sapMSltWithIcon.sapMSltHoverable.sapMSltWithArrow {
+		background: transparent;
+		border: none;
+
+		&.sapMSltFocused,
+		&:hover {
+			.sapMSltIcon {
+				background-color: @sapUiContentFocusColor;
+				text-decoration: underline;
+				color: @sapUiContentContrastTextColor;
+			}
+
+			.sapMSltIcon:before {
+				border-bottom: none;
+			}
+
+			.sapMSltIcon:before,
+			.sapMSltIcon:after {
+				color: @sapUiWhite;
+			}
+		}
+	}
 }

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

@@ -159,6 +159,19 @@ html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable
 	border-color:    @sapUiContentFocusColor;
 }
 
+// Value State Message buttons
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnCritical.sapMBtnActive {
+	border-color: @sapUiButtonCriticalBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnNegative.sapMBtnActive {
+	border-color: @sapUiButtonNegativeBorderColor;
+}
+
+:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnSuccess.sapMBtnActive {
+	border-color: @sapButton_Success_BorderColor;
+}
+
 html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before {
 	content: "";
 	position: absolute;
@@ -173,10 +186,9 @@ html.sap-desktop .sapMBtn:focus > .sapMFocusable:not(.sapMBadgeIndicator):before
 }
 
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMFocusable:not(.sapMBtnActive):not(.sapMToggleBtnPressed):not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBadgeIndicator):before,
-html.sap-desktop .sapMBtn:focus > .sapMBtnNeutral.sapMFocusable:not(.sapMBadgeIndicator):before {
+html.sap-desktop .sapMBtn:focus > .sapMBtnCritical.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnNegative.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before,
+html.sap-desktop .sapMBtn:focus > .sapMBtnSuccess.sapMFocusable:not(.sapMBtnActive):not(.sapMBadgeIndicator):before {
 	border: 0.125rem solid @sapUiContentContrastFocusColor;
 }
 

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

@@ -10,7 +10,6 @@
 @_sap_m_IconTabBar_TextColor: @sapTextColor;
 @_sap_m_IconTabBar_TextShadow: none;
 @_sap_m_IconTabBar_Separator_Font_Size:@sapFontLargeSize;
-@_sap_m_IconTabBar_More_Button_Font_size: 1rem;
 @_sap_m_IconTabBar_More_Button_Focus_Offset: -0.3125rem;
 @_sap_m_IconTabBar_Arrow_SubItem_Left_Padding: 0.5rem;
 

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

@@ -17,6 +17,10 @@
 	}
 }
 
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner::after {
+	line-height: 2.125rem;
+}
+
 .sapMMenuBtn.sapMMenuBtnRegular .sapMBtnInner:not(.sapMBtnText) {
 	padding-left: 0rem;
 }
@@ -56,12 +60,8 @@
 }
 
 .sapMMenuBtnSplit .sapMSB:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnEmphasized.sapMBtnActive {
-	padding-right: 0.4375rem;
-	padding-left: 0.4375rem;
-
 	.sapMBtnContent {
 		position: relative;
-		top: -1px;
 		left: 0;
 	}
 }
@@ -71,4 +71,22 @@
 		padding-right: 0.3125rem;
 		padding-left: 0.3125rem;
 	}
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnIcon,
+	.sapMMenuBtn .sapMBtn:not(.sapMSBArrow) .sapMBtnInner .sapMBtnContent {
+		position: relative;
+		top: 0;
+		left: 0;
+	}
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnNegative.sapMBtnActive::after {
+	color: @sapUiButtonNegativeActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnCritical.sapMBtnActive::after {
+	color: @sapUiButtonCriticalActiveTextColor;
+}
+
+.sapMMenuBtn.sapMMenuBtnRegular .sapMBtn:not(.sapMBtnDisabled) .sapMBtnInner.sapMBtnSuccess.sapMBtnActive::after {
+	color: @sapUiButtonSuccessActiveTextColor;
 }