@openui5/sap.f 1.125.0 → 1.126.0

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

@@ -0,0 +1,495 @@
+@_sap_f_ShellBar_PaddingDesktop: 3rem;
+@_sap_f_ShellBar_PaddingTablet: 2rem;
+@_sap_f_ShellBar_PaddingPhone: 1rem;
+@_sap_f_ShellBar_CoPilotWidth: 3rem;
+@_sap_f_ShellBar_CoPilotHalfWidth: 1.5rem;
+@_sap_f_ShellBar_SearchHalfMaxWidth: 17.5rem;
+
+@_sap_f_ShellBar_PrimaryTitle_FontSize: @sapMFontMediumSize;
+@_sap_f_ShellBar_SecondTitle_FontSize: @sapMFontSmallSize;
+
+.sapFShellBar {
+	height: 3rem;
+	box-sizing: border-box;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+	padding: 0 @_sap_f_ShellBar_PaddingDesktop;
+	display: flex;
+	align-items: center;
+
+	.sapFShellBarOLHB,
+	.sapFShellBarORHB {
+		margin-right: 0;
+		margin-left: 0;
+		display: inline-flex;
+		vertical-align: top;
+		box-sizing: border-box;
+		align-items: center;
+		min-width: 1px;
+		max-width: 100%;
+		height: 100%;
+	}
+
+	.sapFShellBarORHB {
+		padding-left: 0.5rem;
+		flex-grow: 1;
+		flex-shrink: 1;
+	}
+
+	.sapFShellBarOLHB {
+		padding-right: 0.5rem;
+		max-width: 75%;
+		flex-shrink: 0;
+		flex-grow: 0;
+		.sapFShellBarSearchIsOpen& {
+			max-width: 50%;
+		}
+	}
+
+	.sapFShellBarOAHB {
+		flex-shrink: 1;
+		flex-grow: 1;
+		min-width: 1px;
+		max-width: 100%;
+	}
+
+	.sapMBtn.sapFShellBarProfile:focus > .sapMFocusable {
+		outline-offset: -0.125rem;
+	}
+
+	.sapFShellBarTitleHidden {
+		position: absolute;
+		top: -10000px;
+		left: -10000px;
+	}
+
+	.sapMBarChild {
+		flex-shrink: 0;
+	}
+
+	.sapFShellBarItem,
+	.sapMIBar.sapMTB .sapFShellBarItem.sapMBarChild{
+		margin: 0 0 0 0.5rem;
+	}
+
+	.sapFShellBarOLHB>.sapFShellBarItem:first-child,
+	.sapFShellBarOLHB>.sapFShellBarOAHB:first-child > .sapFShellBarItem:first-child {
+		margin-left: 0;
+	}
+	.sapMIBar.sapMTB .sapMTBSpacer + .sapFShellBarItem.sapMBarChild,
+	.sapFShellBarCopilot + .sapFShellBarItem {
+		margin-left: 0;
+	}
+
+	// Assistant
+	.sapMTB-Transparent-CTX .sapFShellBarAssistantBtn.sapFShellBarItemActive.sapFShellBarItem,
+	.sapFShellBarAssistantBtn.sapFShellBarItemActive.sapFShellBarItem {
+		color: @sapShell_Assistant_ForegroundColor;
+		.sapMBtnIcon,
+		&.sapFShellBarItem.sapMBtn:hover:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnHoverable:not(.sapMToggleBtnPressed) > .sapMBtnIcon {
+			color: @sapShell_Assistant_ForegroundColor;
+		}
+	}
+
+	// Reflection: styles overwritten
+	.sapMBtn .sapMBtnInner {
+		.sapFAvatar {
+			vertical-align: middle;
+		}
+		&:after {
+			content: "";
+			display: inline-block;
+			vertical-align: middle;
+			height: 100%;
+		}
+	}
+
+	.sapFShellBarOTB.sapMIBar.sapMTB {
+		height: 3rem;
+		padding: 0;
+		flex-shrink: 1;
+		flex-grow: 1;
+		overflow: visible;
+		min-width: 0;
+		>:first-child {
+			margin-left: 0;
+		}
+
+		.sapUiHiddenPlaceholder:first-child + * {
+			margin-left: 0;
+		}
+
+		.sapFShellBarGridButton {
+			margin-right: 0;
+		}
+	}
+
+	.sapFSHMegaMenu {
+		max-width: 100%;
+		display: inline-block;
+		vertical-align: middle;
+		font-weight: bold;
+		overflow: hidden;
+
+		// Reflection: styles overwritten
+		.sapMBtnInner > img {
+			width: auto !important;
+			max-width: none !important;
+			height: 2rem;
+		}
+		.sapMBtnInner::after {
+			content: '\E287';
+			font-size: 1rem;
+			line-height: 2.2rem;
+			font-weight: bold;
+		}
+	}
+
+	.sapFShellBarHomeIcon {
+		height: 2rem;
+		vertical-align: middle;
+		&.sapMNoImg {
+			width: 0;
+		}
+	}
+
+	.sapFShellBarSearch {
+		max-width: 28rem; // max width of searchField + button width
+		width: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+		box-sizing: border-box;
+
+		.sapMSF {
+			max-width: 25rem;
+			margin-right: 0.5rem;
+			min-width: auto;
+		}
+
+		.sapFShellBarSearchCancelButton {
+			margin-left: 0.5rem;
+			display: none;
+		}
+		.sapFShellBarSearchWrap {
+			display: flex;
+			width: 100%;
+		}
+
+		&.sapFShellBarSearchOpenTick {
+			min-width: 12rem;
+		}
+	}
+
+	.CPImage {
+		width: ~"@{_sap_f_ShellBar_CoPilotWidth}";
+		height: ~"@{_sap_f_ShellBar_CoPilotWidth}";
+		overflow: hidden;
+		cursor: pointer;
+		outline: none;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		margin: 0;
+		html[data-sap-ui-animation='on'] & {
+			&:hover svg {
+				transition: transform 0.30s;
+				transform: scale(1.1);
+			}
+			&:active svg {
+				transition: transform 0.05s;
+				transform: scale(1.2);
+			}
+		}
+		html[data-sap-ui-animation='off'] & {
+			&:hover svg {
+				transform: scale(1.1);
+			}
+			&:active svg {
+				transform: scale(1.2);
+			}
+		}
+		.color1 {
+			stop-color: #00B8F3;
+		}
+		.color2 {
+			stop-color: #1C61BA;
+		}
+		.opacity7 {
+			stop-opacity:0.7;
+		}
+		.opacity36 {
+			stop-opacity: 0.36;
+		}
+		.opacity2 {
+			stop-opacity: 0.2;
+		}
+		&:focus {
+			outline: 1px dotted @sapUiContentFocusColor;
+			outline-offset: -0.3125rem;
+		}
+		html[data-sap-ui-browser^="ed"] &:focus {
+			outline-style: dashed;
+		}
+		html[data-sap-ui-browser^="ie"] &:focus {
+			outline: none;
+		}
+		html[data-sap-ui-browser^="ie"] &:focus:before {
+			content: " ";
+			box-sizing: border-box;
+			width: 88%;
+			height: 88%;
+			position: absolute;
+			left: 3px;
+			top: 3px;
+			border: 1px dashed @sapUiContentFocusColor;
+			pointer-events: none;
+		}
+	}
+
+	.sapFSHMegaMenu .sapMBtnContent {
+		font-weight: bold;
+		max-width: 100%;
+	}
+
+	&.sapFShellBarSizeTablet{
+		padding: 0 @_sap_f_ShellBar_PaddingTablet;
+	}
+
+	&.sapFShellBarSizePhone {
+		padding: 0 @_sap_f_ShellBar_PaddingPhone;
+		.sapFShellBarProfile {
+			margin-right: 0;
+		}
+		.sapFShellBarORHB {
+			padding-left: ~"@{_sap_f_ShellBar_CoPilotHalfWidth}";
+		}
+	}
+
+	.sapFShellBarProfile {
+		user-select: none;
+		-ms-user-select: none;
+		margin-left: 0.5rem;
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: -0.125rem;
+			left: -0.125rem;
+			bottom: -0.125rem;
+			right: -0.125rem;
+			z-index: -1;
+			border-radius: @sapUiButtonBorderCornerRadius;
+		}
+
+		&:hover::before {
+			background-color: @sapUiShellHoverBackground;
+		}
+
+		&:active::before {
+			background-color: @sapUiShellActiveBackground;
+		}
+	}
+
+	.sapFShellBarPrimaryTitle,
+	.sapFShellBarSecondTitle {
+		vertical-align: middle;
+	}
+
+	.sapFShellBarPrimaryTitle {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		background: transparent;
+		color: @sapUiShellTextColor;
+		font-size: @_sap_f_ShellBar_PrimaryTitle_FontSize;
+		line-height: 2.75rem;
+		vertical-align: middle;
+		font-weight: bold;
+	}
+
+	.sapFShellBarSecondTitle {
+		font-family: @sapUiFontFamily;
+		font-size: @_sap_f_ShellBar_SecondTitle_FontSize;
+		color: @sapUiShellTextColor;
+		line-height: 2rem;
+		vertical-align: middle;
+	}
+
+	.sapFShellBarProfile,
+	.sapFShellBarGridButton,
+	.sapFShellBarSearchWrap .sapMBtn {
+		flex-shrink: 0;
+	}
+
+	.sapUiSizeCompact & {
+		&.sapMPageHeader .sapMIBar {
+			height: 3rem;
+		}
+		.sapFShellBarProfile {
+			height: 2rem;
+		}
+
+		.sapFShellBarSearch {
+			max-width: 27.5rem; // max width of searchField + button width
+
+			.sapMSF {
+				max-width: 25rem;
+				min-width: auto;
+				margin-right: 0.5rem;
+			}
+
+			&.sapFShellBarSearchFullWidth {
+				max-width: 100%;
+				.sapMSF {
+					max-width: 100%;
+				}
+			}
+		}
+		&.sapFShellBarFullSearch {
+			.sapFShellBarSearch,
+			.sapMSF {
+				max-width: 100%;
+			}
+		}
+
+		// Reflection: styles overwritten
+		.sapMBtnInner {
+			&.sapMBtnIconFirst:not(.sapMBtnText),
+			&.sapMBadgeTopRight.sapMBadge.sapMBtnIconFirst:not(.sapMBtnText){
+				padding: 0;
+			}
+			&.sapMBadgeTopRight.sapMBadge .sapMBadgeIndicator {
+				top: -0.3125rem;
+				right: -0.4375rem;
+				padding-right: 0.125rem;
+				line-height: normal;
+				position: absolute;
+				display: block;
+			}
+		}
+	}
+	&.sapFShellBarFullSearch  {
+		.sapFShellBarOLHB,
+		.sapFShellBarORHB,
+		.sapFShellBarOTB {
+			position: static;
+		}
+		& * {
+			visibility: hidden;
+		}
+		.sapFShellBarSearch,
+		.sapFShellBarSearch * {
+			visibility: visible;
+		}
+		.sapFShellBarSearchWrap {
+			 box-sizing: border-box;
+			 padding: 0 1.25rem;
+			 position: absolute;
+			 align-items: center;
+			 right: 0;
+			 left: 0;
+			 top: 0;
+			 bottom: 0;
+		 }
+		.sapMSF,
+		.sapFShellBarSearch {
+			max-width: 100%;
+		}
+		.sapFShellBarSearchFullWidth {
+			height: 100%;
+			min-width: 1px;
+		}
+		.sapFShellBarSearchCancelButton {
+			display: block;
+		}
+	}
+}
+
+.sapFShellBar.sapFShellBarSizeExtraLargeDesktop {
+	.sapFShellBarSearch {
+		max-width: 35rem; // max width of searchField + button width
+		width: 100%;
+		flex-grow: 1;
+		flex-shrink: 1;
+		box-sizing: border-box;
+		position: absolute;
+		left: ~"calc(50% - @{_sap_f_ShellBar_SearchHalfMaxWidth})";
+
+		.sapMSF {
+			max-width: 35rem;
+			min-width: auto;
+		}
+	}
+
+	&.sapFShellBarWithSearch {
+		.sapFShellBarORHB {
+			width: 50%;
+			padding-left: ~"calc(@{_sap_f_ShellBar_SearchHalfMaxWidth} + 0.5rem)";
+		}
+		.sapFShellBarOLHB {
+			width: 50%;
+			padding-right: ~"calc(@{_sap_f_ShellBar_SearchHalfMaxWidth} + 0.5rem)";
+
+		}
+	}
+}
+.sapFButtonNotifications[data-notifications],
+.sapFShellBarOverflowButton[data-notifications] {
+	overflow: visible;
+	&:after
+	{
+		content: attr(data-notifications);
+		position: absolute;
+		top: 0.125rem;
+		right: -0.125rem;
+
+		box-sizing: border-box;
+		padding: 0 0.3125rem;
+		border-radius: 1.125rem;
+		height: 1.125rem;
+		max-width: 3.75rem;
+
+		line-height: 1.125rem;
+		font-size: 0.6875rem;
+		font-family: @sapUiFontFamily;
+
+		background-color: @sapUiContentBadgeBackground;
+		border-color: @sapUiContentBadgeBackground;
+		color: @sapUiShellTextColor;
+
+		text-overflow: ellipsis;
+		overflow: hidden;
+
+	}
+}
+
+.sapFShellBarSearchOverflowToolbar {
+	max-width: 100%;
+	width: 100%;
+
+	.sapMBtnContent {
+		text-align: left;
+	}
+}
+
+.sapFButtonNotifications ~ .sapFShellBarOverflowButton,
+.sapFButtonNotifications[data-notifications=""],
+.sapFShellBarOverflowButton[data-notifications=""] {
+	&:after {
+		display: none;
+	}
+}
+
+.sapFShellBar:not(.sapFShellBarNotifications) {
+	.sapFShellBarOverflowButton[data-notifications]:after {
+		display: none;
+	}
+}
+
+.sapFShellBarTitleCollapsed {
+	&>span {
+		display: none;
+	}
+
+}