@openui5/sap.ui.documentation 1.123.1 → 1.124.1

package/src/sap/ui/documentation/themes/base/DemoApps.less

@@ -20,16 +20,26 @@
 	.sapUiDemoKitDemoAppsPage {
 
 		// Utilities
-		.sapUiDemoKitDemoAppsContentPadding {
-			padding: 1rem;
+		.sapUiDemoKitDemoAppsLayoutSpacing {
+			padding: 0 2rem 3rem 2rem;
 		}
 
-		.sapUiDemoKitDemoAppsPaddingBeginEnd {
-			padding: 0 2rem;
+		.sapUiDemoKitDemoAppsIntroCardSpacing {
+			margin: 2rem 2rem 3rem 2rem;
 		}
 
-		.sapUiDemoKitDemoAppsPaddingBottom {
-			padding-bottom: 3rem;
+		.sapUiDemoKitDemoAppsCardContentSpacing {
+			padding: 1rem 1rem .5rem 1rem;
+			row-gap: .5rem;
+		}
+
+		.sapUiDemoKitDemoAppsCardLink {
+			&:before {
+				content: "\e05a";
+				font-family: "SAP-icons";
+				vertical-align: bottom;
+				margin-right: .25rem;
+			}
 		}
 
 		// Intro Card
@@ -87,37 +97,11 @@
 			}
 
 			.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-				.sapUiDemoKitCardHeader.sapFCardHeader {
-					transition: background-color 0.2s ease;
-					text-decoration: none;
-
-					&:hover {
-						.sapFCardHeaderText {
-							.sapFCardTitle {
-								::after {
-									visibility: visible;
-									opacity: 1;
-								}
-							}
-						}
-					}
-
+				.sapFCardHeader {
 					.sapFCardHeaderText {
 						.sapFCardTitle {
 							font-size: @sapMFontLargeSize;
 							color: @demoAppsCardHeaderTextColor;
-							cursor: pointer;
-
-							::after {
-								font-family: SAP-icons;
-								font-size: .8rem;
-								content: "\e05a";
-								vertical-align: middle;
-								visibility: hidden;
-								opacity: 0;
-								transition: all 200ms ease;
-								margin-left: .5rem;
-							}
 						}
 					}
 
@@ -129,48 +113,32 @@
 
 			.sapUiDemoKitDemoAppsCategoryShowcase {
 				.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-					.sapUiDemoKitCardHeader.sapFCardHeader {
+					.sapFCardHeader {
 						background-color: @demoAppsShowcaseCardHeaderBgColor;
-
-						&:hover {
-							background-color: lighten(@demoAppsShowcaseCardHeaderBgColor, 5%);
-						}
 					}
 				}
 			}
 
 			.sapUiDemoKitDemoAppsCategoryTutorial {
 				.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-					.sapUiDemoKitCardHeader.sapFCardHeader {
+					.sapFCardHeader {
 						background-color: @demoAppsTutorialCardHeaderBgColor;
-
-						&:hover {
-							background-color: lighten(@demoAppsTutorialCardHeaderBgColor, 5%);
-						}
 					}
 				}
 			}
 
 			.sapUiDemoKitDemoAppsCategoryRTA {
 				.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-					.sapUiDemoKitCardHeader.sapFCardHeader {
+					.sapFCardHeader {
 						background-color: @demoAppsRTACardHeaderBgColor;
-
-						&:hover {
-							background-color: lighten(@demoAppsRTACardHeaderBgColor, 5%);
-						}
 					}
 				}
 			}
 
 			.sapUiDemoKitDemoAppsCategoryMisc {
 				.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-					.sapUiDemoKitCardHeader.sapFCardHeader {
+					.sapFCardHeader {
 						background-color: @demoAppsMiscCardHeaderBgColor;
-
-						&:hover {
-							background-color: lighten(@demoAppsMiscCardHeaderBgColor, 5%);
-						}
 					}
 				}
 			}
@@ -220,6 +188,14 @@
 		}
 
 		@media screen and (max-width: 63.9375em) {
+			.sapUiDemoKitDemoAppsLayoutSpacing {
+				padding: 0 1rem 2rem 1rem;
+			}
+
+			.sapUiDemoKitDemoAppsIntroCardSpacing {
+				margin: 1rem 1rem 2rem 1rem;
+			}
+
 			.sapUiDemoKitDemoAppsAside {
 				order: -1;
 				margin-top: 0;

package/src/sap/ui/documentation/themes/base/Resources.less

@@ -31,6 +31,15 @@
 			row-gap: .5rem;
 		}
 
+		.sapUiDemoKitResourcesCardLink {
+			&:before {
+				content: "\e05a";
+				font-family: "SAP-icons";
+				vertical-align: bottom;
+				margin-right: .25rem;
+			}
+		}
+
 		// Intro Card
 		.sapUiDemoKitResourcesIntroCard.sapFCard {
 			background: url("../../sdk/images/intro_card_stripe.svg") no-repeat center center,
@@ -156,7 +165,7 @@
 
 		@media screen and (max-width: 63.9375em) {
 			.sapUiDemoKitResourcesLayoutSpacing {
-				padding: 0 1rem 1rem 1rem;
+				padding: 0 1rem 2rem 1rem;
 			}
 
 			.sapUiDemoKitResourcesIntroCardSpacing {

package/src/sap/ui/documentation/themes/sap_horizon_hcb/DemoApps.less

@@ -4,14 +4,13 @@
 	}
 
 	.sapUiDemoKitDemoAppsMain {
-		[class*="sapUiDemoKitDemoAppsCategory"]
-		.sapUiDemoKitDemoAppsRegularCard.sapFCard {
-			.sapUiDemoKitCardHeader.sapFCardHeader {
-				background-color: @sapUiTileBackground;
+		.sapUiDemoKitDemoAppsCardContentSpacing {
+			padding: 1rem;
+		}
 
-				&:hover {
-					background-color: @sapActiveColor;
-				}
+		[class*="sapUiDemoKitDemoAppsCategory"] .sapUiDemoKitDemoAppsRegularCard.sapFCard {
+			.sapFCardHeader {
+				background-color: @sapUiTileBackground;
 
 				.sapFAvatar:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
 					background-color: unset;

package/src/sap/ui/documentation/themes/sap_horizon_hcw/DemoApps.less

@@ -12,14 +12,14 @@
 	}
 
 	.sapUiDemoKitDemoAppsMain {
+		.sapUiDemoKitDemoAppsCardContentSpacing {
+			padding: 1rem;
+		}
+
 		[class*="sapUiDemoKitDemoAppsCategory"] .sapUiDemoKitDemoAppsRegularCard.sapFCard {
-			.sapUiDemoKitCardHeader.sapFCardHeader {
+			.sapFCardHeader {
 				background-color: @sapUiTileBackground;
 
-				&:hover {
-					background-color: @sapActiveColor;
-				}
-
 				.sapFCardHeaderText {
 
 					.sapFCardTitle,

package/src/sap/ui/documentation/DemoKitCardHeader.js

@@ -1,70 +0,0 @@
-/*!
- * OpenUI5
- * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
- * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
- */
-
-sap.ui.define([
-	"sap/base/Log",
-	"sap/f/cards/Header"
-], function (Log, Header) {
-	"use strict";
-
-	var DemoKitCardHeader = Header.extend("sap.ui.documentation.DemoKitCardHeader", {
-		metadata: {
-			properties: {
-				href: { type: "sap.ui.core.URI", defaultValue: null }
-			}
-		},
-		renderer: {
-			apiVersion: 2
-		}
-	});
-
-	DemoKitCardHeader.prototype.onAfterRendering = function () {
-		if (Header.prototype.onAfterRendering) {
-			Header.prototype.onAfterRendering.call(this);
-		}
-
-		var sHref = this.getHref(),
-			oParent = this.getParent(),
-			cardHeader;
-
-		if (!oParent || !oParent.getDomRef) {
-			Log.warning("Demo Kit: parent or parent's dom reference not found");
-			return;
-		}
-
-		cardHeader = oParent.getDomRef().querySelector(".sapFCardHeader");
-
-		if (!sHref || !cardHeader) {
-			Log.warning("Demo Kit: href or card header not found. Href: " + sHref + ", card header: " + cardHeader);
-			return;
-		}
-
-		var anchor = document.createElement("a");
-		anchor.href = sHref;
-		anchor.target = "_blank";
-		anchor.rel = "noopener noreferrer";
-		anchor.addEventListener("click", function (oEvent) {
-			oEvent.stopPropagation();
-		});
-
-		try {
-			for (var attr of cardHeader.attributes) {
-				anchor.setAttribute(attr.name, attr.value);
-			}
-
-			anchor.classList.add("sapUiDemoKitCardHeader");
-			while (cardHeader.hasChildNodes()) {
-				anchor.appendChild(cardHeader.firstChild);
-			}
-
-			cardHeader.parentNode.replaceChild(anchor, cardHeader);
-		} catch (error) {
-			Log.error("Demo Kit: Error while setting the href to the card header", error);
-		}
-	};
-
-	return DemoKitCardHeader;
-});