@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,361 @@
+/* ============================= */
+/* CSS for control sap.m/Avatar  */
+/* Base theme                    */
+/* ============================= */
+
+@_sap_m_Avatar_Font_Size_XL: 3rem;
+@_sap_m_Avatar_Font_Size_L: 2.5rem;
+@_sap_m_Avatar_Font_Size_M: 2rem;
+@_sap_m_Avatar_Font_Size_S: 1.5rem;
+@_sap_m_Avatar_Font_Size_XS: 1rem;
+@_sap_m_Avatar_Hover_Box_Shadow_Offset: 0px 0px 0px 0.0625rem;
+
+.sapFAvatar {
+	display: inline-block;
+	position: relative;
+	box-sizing: border-box;
+
+
+	&.sapFAvatarBorder {
+		border: 0.0625rem solid @sapGroup_ContentBorderColor;
+	}
+
+	&.sapMAvatarDisabled {
+		opacity: @sapUiContentDisabledOpacity;
+	}
+}
+
+// Define a loop and go trough 10 color sets
+.loop-colors(@i: 1) when (@i =< 10) {
+	.generateColor(@i);
+
+	.loop-colors(@i + 1); // Execute next loop iteration
+}
+
+// Execute Loop through color sets
+.loop-colors(1);
+
+// Create classes which would just set background color of Avatar
+.generateColor (@accentIndex) {
+	@css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
+	@color-param: ~"sapUiAccent@{accentIndex}"; // Build the color param which is a sapUiAccent
+	@border-param: ~"sapAvatar_@{accentIndex}_TextColor"; // Build the border param
+
+	// Build the real CSS selector.
+	// The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
+	.@{css-selector} {
+		background-color: @@color-param;
+
+		&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+			box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @@border-param;
+		}
+	}
+}
+
+.sapFAvatarIcon {
+	text-align: center;
+	color: @sapUiContentContrastTextColor;
+
+	.sapUiIcon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		-webkit-transform: translate(-50%, -50%);
+	}
+}
+
+.sapFAvatarHiddenIcon {
+	display: none;
+}
+
+.sapFAvatarColorTransparent {
+	background-color: transparent;
+
+	&.sapFAvatarIcon,
+	&>.sapFAvatarInitialsHolder {
+		color: @sapUiContentIconColor;
+	}
+
+	&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiContentIconColor;
+	}
+}
+
+.sapFAvatarColorTileIcon {
+	background-color: @sapUiTileIconColor;
+
+	&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiTileIconColor;
+	}
+}
+
+.sapFAvatarColorPlaceholder {
+	background-color: @sapUiContentImagePlaceholderBackground;
+
+	&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapUiContentImagePlaceholderForegroundColor;
+	}
+}
+
+.sapFAvatarInitialsHolder {
+	color: @sapUiContentContrastTextColor;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	-webkit-transform: translate(-50%, -50%);
+}
+
+.sapFAvatarImage {
+	text-align: center;
+	background-color: transparent;
+
+	.sapFAvatarTypeIcon, .sapFAvatarInitialsHolder {
+		display: none;
+	}
+
+	&.sapFAvatarFocusable:not(.sapMAvatarPressed):not(.sapMAvatarDisabled):hover {
+		box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapAvatar_10_TextColor;
+	}
+}
+
+.sapFAvatarImageHolder {
+	background: no-repeat center;
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	.sapFAvatar:not(.sapFAvatarImage) &
+	{
+		display: none;
+	}
+}
+
+.sapFAvatarImageCover {
+	background-size: cover;
+}
+
+.sapFAvatarImageContain {
+	background-size: contain;
+}
+
+.sapFAvatarCircle {
+	border-radius: 50%;
+	-webkit-border-radius: 50%;
+
+	.sapMImg,
+	.sapFAvatarImageHolder {
+		border-radius: 50%;
+		-webkit-border-radius: 50%;
+	}
+}
+
+.sapFAvatarXS {
+	height: 2rem;
+	width: 2rem;
+	font-size: @_sap_m_Avatar_Font_Size_XS;
+
+	.sapFAvatarInitialsHolder {
+		font-size: 0.75rem;
+	}
+}
+
+.sapFAvatarS {
+	height: 3rem;
+	width: 3rem;
+	font-size: @_sap_m_Avatar_Font_Size_S;
+
+	.sapFAvatarInitialsHolder {
+		font-size: 1.125rem;
+	}
+}
+
+.sapFAvatarM {
+	height: 4rem;
+	width: 4rem;
+	font-size: @_sap_m_Avatar_Font_Size_M;
+
+	.sapFAvatarInitialsHolder {
+		font-size: 1.625rem;
+	}
+}
+
+.sapFAvatarL {
+	height: 5rem;
+	width: 5rem;
+	font-size: @_sap_m_Avatar_Font_Size_L;
+
+	.sapFAvatarInitialsHolder {
+		font-size: 2rem;
+	}
+}
+
+.sapFAvatarXL {
+	height: 7rem;
+	width: 7rem;
+	font-size: @_sap_m_Avatar_Font_Size_XL;
+
+	.sapFAvatarInitialsHolder {
+		font-size: 2.75rem;
+	}
+}
+
+.sapFAvatarFocusable.sapMAvatarPressed {
+	background-color: @sapUiButtonSelectedBackground;
+	color: @sapUiButtonSelectedTextColor;
+	outline-offset: 0.0625rem;
+
+	&:hover {
+		background-color: @sapUiButtonSelectedHoverBackground;
+	}
+
+	.sapUiRespGrid & {
+		z-index: 100;
+	}
+}
+
+.sapFAvatarFocusable:focus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: 0.0625rem;
+
+	.sapUiRespGrid & {
+		z-index: 100;
+	}
+}
+
+html:not(.sap-desktop) .sapFAvatarFocusable.sapMAvatarPressed {
+	outline: none;
+}
+
+.sapFAvatarInitialsHolder {
+	color: @sapUiContentImagePlaceholderForegroundColor;
+}
+
+// Apply LightBox Magnifying glass mixin to control
+.lightBoxMagnifyingGlassMixing(~".sapFAvatar", ~".sapFAvatarMagnifyingGlass");
+
+
+//restrinct inner elements of blocking press event of the whole control
+.sapFAvatar * {
+	pointer-events: none;
+}
+
+.sapFAvatarBadgeIconActiveArea {
+	position: absolute;
+	pointer-events: all;
+
+	.sapFAvatarCircle & {
+		width: 100%;
+		height: 100%;
+		bottom: 0;
+		right: 0;
+	}
+	.sapFAvatarSquare & {
+		width: ~"calc(100% + 0.125rem)";
+		height: ~"calc(100% + 0.125rem)";
+		bottom: -0.125rem;
+		right:  -0.125rem;
+	}
+	.sapFAvatarSquare.sapFAvatarXL & {
+		width: ~"calc(100% + 0.25rem)";
+		height: ~"calc(100% + 0.25rem)";
+		bottom: -0.25rem;
+		right: -0.25rem;
+	}
+	.sapFAvatarSquare.sapFAvatarL & {
+		width: ~"calc(100% + 0.1875rem)";
+		height: ~"calc(100% + 0.1875rem)";
+		bottom: -0.1875rem;
+		right: -0.1875rem;
+	}
+	.sapFAvatarSquare.sapFAvatarCustom & {
+		width: 104%;
+		height: 104%;
+		bottom: -4%;
+		right: -4%;
+	}
+}
+
+.sapFAvatarWarning .sapFAvatarBadgeIcon {
+	background-color: @sapWarningBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapWarningBorderColor;
+	>.sapUiIcon {
+		color: @sapCriticalTextColor;
+	}
+}
+
+.sapFAvatarError .sapFAvatarBadgeIcon {
+	background-color: @sapErrorBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapErrorBorderColor;
+	>.sapUiIcon {
+		color: @sapNegativeTextColor;
+	}
+}
+
+.sapFAvatarInformation .sapFAvatarBadgeIcon {
+	background-color: @sapInformationBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapInformationBorderColor;
+	>.sapUiIcon {
+		color: @sapInformativeTextColor;
+	}
+}
+
+.sapFAvatarSuccess .sapFAvatarBadgeIcon {
+	background-color: @sapSuccessBackground;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapSuccessBorderColor;
+	>.sapUiIcon {
+		color: @sapPositiveTextColor;
+	}
+}
+
+.sapFAvatarBadgeIcon {
+	display: inline-block;
+	box-sizing: border-box;
+	position: absolute;
+	bottom: 0;
+	right:  0;
+
+	width: 1.125rem;
+	height: 1.125rem;
+
+	border-radius: 50%;
+	font-size: 0.75rem;
+	text-align: center;
+
+	background-color: @sapButton_Emphasized_Background;
+	box-shadow: @_sap_m_Avatar_Hover_Box_Shadow_Offset @sapButton_Emphasized_BorderColor;
+
+	>.sapUiIcon {
+		vertical-align: middle;
+		color: @sapButton_Emphasized_TextColor;
+	}
+	&:after {
+		content: "";
+		display: inline-block;
+		vertical-align: middle;
+		height: 100%;
+	}
+	.sapFAvatarL & {
+
+		width: 1.25rem;
+		height: 1.25rem;
+		font-size: 0.875rem;
+	}
+
+	.sapFAvatarXL & {
+
+		width: 1.75rem;
+		height: 1.75rem;
+		font-size: 1rem;
+	}
+
+	.sapFAvatarCustom & {
+		font-size: 16.5%;
+
+		width: 25%;
+		height: 25%;
+	}
+}

package/src/sap/m/themes/sap_belize_base/Bar.less

@@ -0,0 +1,229 @@
+/* ========================== */
+/* CSS for control sap.m/Bar  */
+/* Base theme                 */
+/* ========================== */
+
+@_sap_m_Bar_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
+@_sap_m_Bar_HeaderHeight: 68px; // should be 4.25rem
+@_sap_m_Bar_MinHeightForHeader: (@_sap_m_Bar_AppHeight + @_sap_m_Bar_HeaderHeight);
+
+.sapMBarShadow(@color) {
+	box-shadow: inset 0 -0.0625rem @color;
+}
+
+.sapMBar {
+	display: block;
+	width: 100%;
+	position: relative;
+	height: 3rem;
+	line-height: 3rem;
+	color: @sapUiPageHeaderTextColor;
+	background-color: @sapUiPageHeaderBackground;
+	/* 1px down white shadow with 50% opacity */
+	text-shadow: @sapUiShadowText;
+	/* 1px inside border line at the bottom of a bar */
+	.sapMBarShadow(@sapUiPageHeaderBorderColor);
+}
+
+.sapMBarLeft.sapMBarContainer.sapMBarEmpty,
+.sapMBarMiddle.sapMBarContainer.sapMBarEmpty,
+.sapMBarRight.sapMBarContainer.sapMBarEmpty {
+	padding: 0;
+}
+
+.sapMBarContainer {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+
+/* fix for ff */
+html[data-sap-ui-browser^="ff"].sap-desktop {
+	.sapMBarContainer {
+		display: flex;
+		align-items: center;
+	}
+
+	.sapMBarPH {
+		justify-content: center;
+	}
+
+	.sapMBarRight {
+		justify-content: flex-end;
+	}
+
+	.sapMBarContainer > .sapMBarChild {
+		flex : none;
+	}
+
+	.sapMBarContainer > .sapMButton,
+	.sapMBarContainer > .sapMText,
+	.sapMBarContainer > .sapMLabel {
+		flex : initial;
+	}
+}
+
+
+.sapMBarLeft,
+.sapMBarRight {
+	position: absolute;
+	height: 100%;
+}
+
+.sapMBarLeft {
+	left: 0px;
+}
+
+.sapMBarRight {
+	text-align: end;
+	right: 0px;
+}
+
+.sapMBarPH {
+	display: inline-block;
+	height: 3rem;
+	vertical-align: top;
+}
+
+.sapMBarMiddle {
+	text-align: center;
+	width: 100%;
+	height: 0px;
+	top: 0px;
+	left: 0px;
+}
+
+.sapMBar .sapMLabel,
+.sapMBar .sapMLnk {
+	display: inline;
+}
+
+.sapMBarFlexBoxWidth100 {
+	width: 100%;
+}
+
+/* select control in a bar */
+.sapMBar .sapMSlt {
+	vertical-align: top;
+}
+
+.sapMBar:active {
+	text-shadow: none;
+}
+
+/* this "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any pages inside will not display their branding bar */
+.sapMBrandingBar-CTX .sapMBar.sapMPageHeader:before,
+/* since Shell may run without sap.m and we can run without the shell this selector is currently in our lib */
+.sapUiUfdShell .sapMBar.sapMPageHeader:before {
+	display: none;
+}
+
+@media (min-height: @_sap_m_Bar_MinHeightForHeader) {
+	/* Shell draws its own branding bar */
+	.sap-desktop .sapMShell .sapMBar.sapMPageHeader:before {
+		display: none;
+	}
+}
+
+.sapMBar .sapMBarLeft > .sapMImg,
+.sapMBar .sapMBarPH > .sapMImg,
+.sapMBar .sapMBarRight > .sapMImg {
+	vertical-align: middle;
+}
+
+.sapMBarLeft > .sapMBarChild,
+.sapMBarRight > .sapMBarChild {
+	flex-shrink: 0;
+}
+
+.sapMBarLeft > .sapMBarChild.sapMPI,
+.sapMBarRight > .sapMBarChild.sapMPI {
+	flex-shrink: 1;
+}
+
+.sapMBarLeft {
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.sapMBarPH {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.sapMBarRight {
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+/* Compact size */
+.sapUiSizeCompact{
+	.sapMBar {
+		height: 2rem;
+		line-height: 2rem;
+	}
+	.sapMBarLeft, .sapMBarRight, .sapMBarPH {
+		height: 2rem;
+		line-height: 2rem;
+	}
+}
+
+.sapMBarRight > .sapMBarChild:not(.sapMTB) {
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-right: 0;
+}
+
+.sapUiSizeCompact{
+	.sapMBarRight > .sapMBarChild:not(.sapMTB) {
+		margin-bottom: 0;
+		margin-right: 0;
+	}
+}
+
+.sapMBarLeft,
+.sapMIBar.sapMBar .sapMBarChild:first-child {
+	margin-left: 0;
+}
+
+/*To replace margins, add padding to the containers*/
+.sapMBarRight,
+.sapMBarLeft,
+.sapMBarPH {
+	box-sizing: border-box;
+	.sapMObjectAttributeDiv .sapMText {
+		vertical-align: text-top;
+	}
+}
+
+.sapMBarRight,
+.sapMBarPH {
+	padding-right: 0.25rem;
+}
+
+.sapMBarLeft,
+.sapMBarPH {
+	padding-left: 0.25rem;
+}
+
+.sapMIBar > .sapMBarLeft > .sapMBarChild:last-child,
+.sapMIBar .sapMBarPH > .sapMBarChild:last-child {
+	margin-right: 0;
+}
+
+.sapMIBar > .sapMBarLeft > .sapMBarChild.sapMGenericTag:last-child {
+	margin-right: 0.0625rem;
+}
+
+/* Bar Title Alignment */
+.sapMBarTitleAlignStart .sapMBarPH {
+	justify-content: flex-start;
+}
+
+html[data-sap-ui-browser^="ff"].sap-desktop .sapMBarTitleAlignStart .sapMBarPH {
+	justify-content: start;
+}

package/src/sap/m/themes/sap_belize_base/BarBase.less

@@ -0,0 +1,63 @@
+/* ============================== */
+/* CSS for control sap.m/BarBase  */
+/* Base theme                     */
+/* ============================== */
+
+.sapMIBar .sapMBarChild:first-child {
+	margin-left: 0;
+}
+
+.sapMIBar .sapMBarChild {
+	margin-left:0.25rem;
+}
+
+.sapMIBar > .sapMBarChild:last-child {
+	margin-right: 0.25rem;
+}
+
+.sapMIBar-CTX.sapMFooter-CTX {
+	color: @sapUiPageFooterTextColor;
+	/* 1px down black shadow with 50% opacity */
+	text-shadow: @sapUiShadowText;
+	background-color: @sapUiPageFooterBackground;
+	background-image: none;
+	border-top: 1px solid @sapUiPageFooterBorderColor;
+	box-shadow: none;
+}
+
+.sapMIBar-CTX.sapMFooter-CTX:active {
+	text-shadow: none;
+}
+
+.sapMIBar.sapMSubHeader-CTX {
+	color: @sapUiPageHeaderTextColor;
+	background-color: @sapUiPageHeaderBackground;
+}
+
+html.sap-desktop .sapMIBar.sapMFooter-CTX {
+	background-color: @sapUiPageFooterBackground;
+	border-top: 1px solid @sapUiPageFooterBorderColor;
+}
+
+.sapMIBar-CTX.sapMFooter-CTX.sapMTBClear,
+html.sap-desktop .sapContrast.sapMIBar.sapMFooter-CTX.sapMTBClear {
+	border-top: none;
+}
+
+/* footer separator inside of a SplitContainer control */
+.sapMSplitContainerMaster .sapMFooter-CTX:not(.sapMIBar) {
+	border-right: 1px solid @sapUiPageFooterBorderColor;
+}
+
+.sapMIBar.sapMHeader-CTX {
+	color: @sapUiPageHeaderTextColor;
+	background-color: @sapUiPageHeaderBackground;
+	filter: none;
+	background-image: none;
+}
+
+.sapMPopup-CTX .sapMIBar.sapMHeader-CTX { /* remove gradient in popups; restore grey header color when in popup on desktop */
+	background-color: @sapUiPageHeaderBackground;
+	filter: none;
+	background-image: none;
+}