@openui5/sap.f 1.125.0 → 1.126.0

package/src/sap/f/themes/sap_hcb/base_DynamicPageHeader.less

@@ -0,0 +1,66 @@
+/* ======================================== */
+/* CSS for control sap.f/DynamicPageHeader  */
+/* Base theme                               */
+/* ======================================== */
+
+// Synced with ObjectPageLayout.HEADER_CONTENT_PADDING_BOTTOM and DynamicPage.HEADER_CONTENT_PADDING_BOTTOM
+@_sap_f_DynamicPageHeader_PaddingBottom: 1rem;
+
+// Default base icon for the pin button
+@_sap_f_DynamicPageHeader_PinButton_Icon: pushpin-off;
+
+.sapFDynamicPageHeader {
+	z-index: 3;
+	position: relative;
+
+	-webkit-flex-shrink: 0;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	background: @sapUiObjectHeaderBackground;
+}
+
+.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
+	padding: 1rem 3rem @_sap_f_DynamicPageHeader_PaddingBottom 3rem;
+	box-shadow: @sapUiContentHeaderShadow;
+}
+
+.sapFDynamicPageHeader.sapFDynamicPageHeaderPinnable {
+	min-height: 2rem;
+}
+
+.sapFDynamicPageHeader:focus {
+	outline: none;
+}
+
+.sapFDynamicPageHeaderHidden {
+	display: none;
+}
+
+.sapFDynamicPage-Std-Tablet {
+	.sapFDynamicPageHeaderWithContent {
+		padding: 1rem 2rem @_sap_f_DynamicPageHeader_PaddingBottom 2rem;
+	}
+
+	.sapFDynamicPageHeader.sapFDynamicPageHeaderPinnable {
+		min-height: 3rem;
+	}
+}
+
+.sapFDynamicPage-Std-Phone {
+	.sapFDynamicPageHeaderWithContent {
+		padding: 0.5rem 1rem @_sap_f_DynamicPageHeader_PaddingBottom 1rem;
+	}
+}
+
+.sapFDynamicPageHeader.sapFDynamicPageHeaderWithContent {
+	.sapMObjectAttributeDiv .sapMText,
+	.sapMObjectAttributeDiv .sapMObjectAttributeTitle,
+	.sapMObjectAttributeDiv .sapMObjectAttributeColon,
+	.sapMObjectAttributeDiv .sapMObjectAttributeText {
+		vertical-align: middle;
+	}
+
+	.sapMFFResetSpacer {
+		margin-left: 0;
+	}
+}

package/src/sap/f/themes/sap_hcb/base_DynamicPageTitle.less

@@ -0,0 +1,373 @@
+/* ======================================= */
+/* CSS for control sap.f/DynamicPageTitle  */
+/* Base theme                              */
+/* ======================================= */
+.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle,
+.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
+	box-shadow: @sapUiShadowHeader;
+
+	.sapFDynamicPageHeader {
+		border-bottom: none;
+	}
+}
+
+.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+	.sapFDynamicPageTitleMain {
+		.sapFDynamicPageTitleMainContent {
+			padding-bottom: 0;
+		}
+	}
+}
+
+.sapFDynamicPageTitle {
+	z-index: 4;
+	position: relative;
+	min-height: 3rem;
+	padding: 0.5rem 2rem 0.5rem 3rem;
+	display: flex;
+	display: -webkit-flex;
+	flex-direction: column;
+	-webkit-flex-direction: column;
+	box-sizing: border-box;
+	background: @sapUiObjectHeaderBackground;
+
+	.sapFDynamicPageToggleHeaderIndicator.sapUiHidden {
+		display: none;
+	}
+
+	.sapFDynamicPageTitleExpanded.sapUiHidden *,
+	.sapFDynamicPageTitleSnapped.sapUiHidden * {
+		visibility: hidden;
+	}
+
+	.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
+		.sapFDynamicPageTitleMainContent .sapMTB {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+		}
+
+		.sapFDynamicPageTitleMainActions {
+			padding-left: 0.5rem;
+		}
+	}
+
+	html.sap-desktop & {
+		&.sapFDynamicPageTitleFocus {
+			outline: 0.0625rem dotted @sapUiContentFocusColor;
+			outline-offset: -0.0625rem;
+		}
+	}
+
+	.sapFDynamicPageTitleFocusSpan {
+		outline: none;
+	}
+
+	.sapFDynamicPageTitleTop {
+		display: flex;
+		display: -webkit-flex;
+		align-items: center;
+		-webkit-align-items: center;
+
+		justify-content: space-between;
+		-webkit-justify-content: space-between;
+
+		&> .sapFDynamicPageTitleTopLeft {
+			min-height: 1rem;
+			width: 75%;
+
+			&> :first-child {
+				margin: 0;
+			}
+		}
+
+		&> .sapFDynamicPageTitleTopRight {
+			width: 25%;
+			display: flex;
+			display: -webkit-flex;
+			align-items: center;
+			-webkit-align-items: center;
+			justify-content: flex-end;
+			-webkit-justify-content: flex-end;
+		}
+
+		&.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
+			width: 100%;
+		}
+
+		&.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight{
+			width: 100%;
+		}
+	}
+
+	.sapFDynamicPageTitleMain {
+		position: relative;
+		display: flex;
+		display: -webkit-flex;
+		align-items: flex-start;
+		-webkit-align-items: flex-start;
+		flex-direction: row;
+		-webkit-flex-direction: row;
+		box-sizing: border-box;
+
+		&.sapUiHidden {
+			position: absolute;
+		}
+
+		&> .sapFDynamicPageTitleMainNavigationArea,
+		&> .sapFDynamicPageTitleMainNavigationArea > .sapFDynamicPageTitleMainNavigationAreaInner{
+			display: flex;
+			display: -webkit-flex;
+			align-items: center;
+			-webkit-align-items: center;
+		}
+	}
+
+	.sapFDynamicPageTitleActionsBar.sapMTB {
+		justify-content: flex-end;
+		-webkit-justify-content: flex-end;
+		overflow: visible;
+	}
+}
+
+ .sapFDynamicPageTitleMainNavigationAreaInner .sapMIBar.sapMTB .sapMBarChild:first-child {
+	 margin-left: 0.25rem;
+ }
+
+ .sapFDynamicPageTitleMainContent .sapMIBar.sapMTB .sapMBarChild:first-child {
+	margin-left: 0;
+}
+
+/* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"].sap-desktop,
+html[data-sap-ui-browser^="ed"].sap-desktop {
+	.sapFDynamicPageTitleMain {
+		height: 100%; /* fixes IE flexbox item centering issue BCP: 1680351222 */
+	}
+}
+
+/* IE and Edge ignores outline-offset. Use an overlay: */
+/* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"].sap-desktop,
+html[data-sap-ui-browser^="ed"].sap-desktop {
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
+		outline: none;
+		position: relative;
+	}
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
+		content: " ";
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		border: 0.0625rem dashed @sapUiContentFocusColor;
+		pointer-events: none;
+	}
+}
+
+/* Firefox fix due to focus cut out from top and left */
+html[data-sap-ui-browser^="ff"].sap-desktop {
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus {
+		outline: none;
+		position: relative;
+	}
+	.sapFDynamicPageTitle.sapFDynamicPageTitleFocus:before {
+		content: " ";
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		border: 0.0625rem dotted @sapUiContentFocusColor;
+		pointer-events: none;
+	}
+}
+
+/* ========== */
+/* Title Main */
+/* ========== */
+
+/* Heading area */
+.sapFDynamicPageTitleMain > .sapFDynamicPageTitleMainInner {
+	display: flex;
+	display: -webkit-flex;
+	align-items: flex-start;
+	-webkit-align-items: flex-start;
+	flex-grow: 1;
+	width: 100%; // to make Edge work
+
+	.sapFDynamicPageTitleMainHeading {
+		display: flex;
+		display: -webkit-flex;
+		align-items: flex-start;
+		-webkit-align-items: flex-start;
+		flex-direction: column;
+		-webkit-flex-direction: column;
+		justify-content: space-between;
+		-webkit-justify-content: space-between;
+		min-width: 0;
+
+		.sapFDynamicPageTitleMainHeadingInner,
+		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			box-sizing: border-box;
+			vertical-align: middle;
+		}
+
+		.sapFDynamicPageTitleMainHeadingInner {
+			min-width: 1px;
+			max-width: 100%;
+			color: @sapUiGroupTitleTextColor;
+			margin-top: 0.1875rem;
+
+			/* Override Title styles, required by VD */
+			.sapMTitle {
+				font-size: @sapMFontHeader3Size;
+			}
+		}
+
+		.sapFDynamicPageTitleMainHeadingSnappedExpandContent {
+			color: @sapUiContentLabelColor;
+			font-size: @sapMFontMediumSize;
+		}
+
+		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainSnapContentVisible,
+		.sapFDynamicPageTitleMainHeadingSnappedExpandContent.sapFDynamicPageTitleMainExpandContentVisible {
+			min-width: 4rem;
+			max-width: 100%;
+		}
+	}
+
+	.sapFDynamicPageTitleMainContent {
+		min-width: 0.0625rem;
+		padding: 0 0 0 0.5rem;
+
+		&.sapFDynamicPageTitleMainContentHasContent {
+			min-width: 3rem;
+			flex-grow: 1;
+		}
+	}
+
+	.sapFDynamicPageTitleMainActions {
+		margin-left: auto;
+		min-width: 0.0625rem;
+		flex-grow: 1;
+
+		&.sapFDynamicPageTitleMainActionsHasContent {
+			min-width: 3rem;
+		}
+
+	.sapFDynamicPageTitleActionsBar .sapMLabel.sapMLabelMaxWidth,
+	.sapFDynamicPageTitleActionsBar .sapMLnk.sapMLnkMaxWidth {
+		// overwriting the existing max-width constraint of sapMLabel and sapMLnk
+		// because in this context the label/link parent should instead adjust its flex-basis with respect to its content width
+		max-width: none;
+	}
+  }
+}
+
+.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainInner {
+	width: 60%;
+}
+.sapFDynamicPageTitleMain.sapFDynamicPageTitleMainNoContent > .sapFDynamicPageTitleMainRight {
+	width: 40%;
+}
+
+/* Tablet Size */
+.sapFDynamicPage-Std-Tablet {
+
+	// Needed because on some high-end phones in landscape mode,
+	// the width of the viewport is bigger than 600 (Tablet breakpoint).
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
+		padding: 0 0.25rem 0 2rem;
+		min-height: 2rem;
+		height: 2rem;
+	}
+
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+		padding: 0.5rem 1rem 1rem 2rem;
+	}
+
+	.sapFDynamicPageTitle {
+		padding: 0.5rem 1rem 0.5rem 2rem;
+
+		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
+			width: 65%;
+		}
+
+		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
+			width: 35%;
+		}
+
+		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
+			width: 100%;
+		}
+
+		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
+			width: 100%;
+		}
+	}
+}
+
+.sapFDynamicPageTitle .sapFDynamicPageTitleSnappedTitleOnMobile {
+	min-height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex: 0 1 auto;
+
+	.sapUiIcon {
+		flex: 0 0 2rem;
+	}
+}
+
+
+.sapFDynamicPageTitleMainSnapContentVisible .sapFDynamicPageTitleSnapped .sapMText {
+	overflow: hidden;
+}
+
+/* Phone Size */
+.sapFDynamicPage-Std-Phone {
+
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+		.sapFDynamicPageTitleMain {
+			.sapFDynamicPageTitleMainContent {
+				padding-bottom: 0;
+			}
+		}
+	}
+
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnappedTitleOnMobile > .sapFDynamicPageTitle {
+		padding: 0 0.25rem 0 1rem;
+		min-height: 2rem;
+		height: 2rem;
+	}
+
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleSnapped > .sapFDynamicPageTitle {
+		padding: 0.5rem 0rem 1rem 1rem;
+	}
+
+	.sapFDynamicPageTitle,
+	.sapFDynamicPageTitleWrapper.sapFDynamicPageTitleOnly > .sapFDynamicPageTitle {
+		padding: 0.5rem 0rem 0.5rem 1rem;
+
+		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopLeft {
+			width: 60%;
+		}
+
+		.sapFDynamicPageTitleTop > .sapFDynamicPageTitleTopRight {
+			width: 40%;
+		}
+
+		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopBreadCrumbsOnly > .sapFDynamicPageTitleTopLeft {
+			width: 100%;
+		}
+
+		.sapFDynamicPageTitleTop.sapFDynamicPageTitleTopNavActionsOnly > .sapFDynamicPageTitleTopRight {
+			width: 100%;
+		}
+	}
+}

package/src/sap/f/themes/sap_hcb/base_FlexibleColumnLayout.less

@@ -0,0 +1,281 @@
+/* =========================================== */
+/* CSS for control sap.f/FlexibleColumnLayout  */
+/* Base theme                                  */
+/* =========================================== */
+
+// synced with FlexibleColumnLayout.COLUMN_SEPARATOR_WIDTH
+@_sap_f_FCL_SeparatorWidth: 1rem;
+@_sap_f_FCL_SeparatorActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
+@_sap_f_FCL_SeparatorDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
+@_sap_f_FCL_SeparatorBorder: none;
+@_sap_f_FCL_SeparatorHoverIconBorderColor: @sapUiButtonLiteBorderColor;
+@_sap_f_FCL_SeparatorHoverIconBackground: @sapUiButtonLiteBackground;
+@_sap_f_FCL_SeparatorButtonColor: @sapUiContentIconColor;
+
+.sapFFCL {
+	&, &.sapMNavItem:not(.sapMNavItemHidden) {
+		display: -webkit-flex;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		isolation: isolate;
+		z-index: 0;
+		position: relative;
+	}
+
+
+	.sapFFCLColumn {
+		height: 100%;
+		position: relative;
+		visibility: hidden;
+		box-sizing: border-box;
+
+		// When there is content in a panel, it needs min-width
+		&.sapFFCLColumnActive {
+			visibility: visible;
+		}
+
+		&.sapFFCLColumnHidden {
+			display: none;
+		}
+
+		.sapFFCLContainer {
+			height: 100%;
+		}
+
+		&.sapFFCLPinnedColumn {
+			overflow-x: hidden;
+
+			.sapFFCLColumnContent {
+				position: absolute;
+				right: 0;
+			}
+		}
+
+		&.sapFFCLColumnInset {
+			padding: 0 0 0 @_sap_f_FCL_SeparatorWidth;
+		}
+	}
+
+	.sapFFCLColumnContent {
+		height: 100%;
+	}
+
+	.sapUiLocalBusyIndicator {
+		z-index: 4;
+	}
+}
+
+.sapFFCL .sapFFCLColumnSeparator {
+	color: @_sap_f_FCL_SeparatorButtonColor;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background-color: @sapUiShellBackground;
+	box-sizing: border-box;
+}
+
+.sapFFCLOverlay {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+}
+
+.sapFFCLOverlay > .sapFFCLOverlaySeparator {
+	position: absolute;
+	z-index: 3;
+
+	.sapFFCLColumnSeparatorDecorationBefore {
+		flex-grow: 1;
+		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorActiveDecorationColors);
+	}
+
+	.sapFFCLColumnSeparatorDecorationAfter {
+		flex-grow: 1;
+		background-image: linear-gradient(to bottom ,@_sap_f_FCL_SeparatorActiveDecorationColors);
+	}
+}
+
+.sapFFCL .sapFFCLColumnSeparator {
+	cursor: col-resize;
+	width: 1rem;
+	height: 100%;
+	display: inline-flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	border-left: @_sap_f_FCL_SeparatorBorder;
+	border-right: @_sap_f_FCL_SeparatorBorder;
+	vertical-align: top;
+
+	.sapFFCLColumnSeparatorDecorationBefore {
+		width: 1rem;
+		height: 4rem;
+		background-image: linear-gradient(to top, @_sap_f_FCL_SeparatorDecorationColors);
+		background-size: 0.0625rem 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	.sapFFCLColumnSeparatorDecorationAfter {
+		width: 1rem;
+		height: 4rem;
+		height: 4rem;
+		background-image: linear-gradient(to bottom, @_sap_f_FCL_SeparatorDecorationColors);
+		background-size: 0.0625rem 100%;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+
+	.sapFFCLColumnSeparatorGrip {
+		cursor: col-resize;
+		width: 1.5rem;
+		height: 2rem;
+		line-height: 2rem;
+		position: relative;
+		z-index: 1;
+
+		.sapFFCLColumnSeparatorGripIcon {
+			cursor: col-resize;
+			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
+			box-sizing: border-box;
+			height: 1.625rem;
+			width: 1.5rem;
+			margin-top: 3px;
+			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
+			border-radius: @sapUiButtonBorderCornerRadius;
+			background: @sapUiButtonLiteBackground;
+		}
+	}
+
+	&:hover {
+		.sapFFCLColumnSeparatorDecorationBefore,
+		.sapFFCLColumnSeparatorDecorationAfter {
+			flex-grow: 1;
+			transition: all 0.1s ease-in;
+		}
+
+		.sapFFCLColumnSeparatorGripIcon {
+			background: @_sap_f_FCL_SeparatorHoverIconBackground;
+			border-color: @_sap_f_FCL_SeparatorHoverIconBorderColor;
+		}
+	}
+}
+
+
+// focus outline
+.sapFFCL > .sapFFCLColumnSeparator,
+.sapFFCL > .sapFFCLOverlay > .sapFFCLOverlaySeparator {
+	position: relative;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus::after {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	}
+}
+
+
+.sapFFCLNavigationButton,
+.sapUiSizeCompact & .sapFFCLNavigationButton {
+	// Button hit area size
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0; // Vertical button hit area must be the same size as its visible area
+	transition: all 0.1s ease-in;
+	margin-left: -0.25rem;
+	margin-right: -0.25rem;
+	display: inline-block;
+	vertical-align: middle;
+	position: relative;
+	overflow: visible;
+	cursor: col-resize;
+
+	// Reflection: styles overwritten
+	.sapMBtnInner {
+		width: 1.5rem;
+		height: 1.5rem;
+		min-width: auto;
+
+		.sapMBtnIcon {
+			line-height: 1.5rem;
+			width: 1rem;
+			font-size: 1rem;
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+	&:before {
+		background-image: linear-gradient(to top, @sapUiHighlight, fade(@sapUiHighlight, 0));
+		background-position-y: -0.3125rem;
+		bottom: 100%;
+	}
+
+	&:after {
+		background-image: linear-gradient(to bottom, @sapUiHighlight,  fade(@sapUiHighlight, 0));
+		background-position-y: 0.3125rem;
+		top: 100%;
+	}
+
+	&:after,
+	&:before {
+		content: '';
+		position: absolute;
+		left: 0;
+		height: 4rem;
+		width: 100%;
+		transition: all 0.1s ease-in;
+		background-repeat: no-repeat;
+		background-size: 0.0625rem 100%;
+		background-position-x: calc(50% - 0.03125rem);
+	}
+	&:hover{
+			&:after,
+			&:before {
+				height: 7rem;
+			}
+	}
+}
+
+// In order to have reveal effect, columns should overlap each other
+.sapFFCLColumnBegin {
+	z-index: 3;
+	flex-shrink: 0;
+	width: 0;
+}
+
+.sapFFCLColumnMid {
+	z-index: 2;
+	width:100%;
+	overflow-x: auto;
+}
+
+.sapFFCLColumnEnd {
+	z-index: 1;
+	flex-shrink: 0;
+	width: 0;
+}
+
+html[data-sap-ui-animation='on'] {
+	.sapFFCL {
+		.sapFFCLColumn.sapFFCLAnimatedColumn {
+			transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
+			-webkit-transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
+		}
+	}
+}
+