@openui5/themelib_sap_belize 1.124.0 → 1.125.0

package/src/sap/m/themes/sap_belize_base/p13n.SelectionPanel.less

@@ -0,0 +1,32 @@
+//Display ':' for Labels in the 'list' view
+.sapMSelectionPanel.sapUiMDCAFLabelMarkingList tbody  .sapMLabel > .sapMLabelColonAndRequired::before{
+	content: attr(data-colon);
+}
+
+//Display checkbox at the top for items in the ListView
+.sapMSelectionPanel tbody .sapMListTblSelCol {
+    vertical-align: top;
+}
+
+//Remove padding for items in list view
+.sapMSelectionPanel.SelectionPanelHover .sapMListTblCell {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.sapMSelectionPanel .sapMPanelContent li {
+    align-items: start; //Checkbox should not be centered
+    display: flex; //Is the default for Lists - only needs to be set as the parent is a Table
+}
+
+//Align inner rows with the outer controls
+.sapMSelectionPanel table {
+    tr > td {
+        padding-left: 0.5rem;
+    }
+}
+
+//'Select All' should also be aligned correctly with the other controls in the panel
+.sapMSelectionPanel .sapMTableTH {
+    padding-left: 0.5rem;
+}

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

@@ -0,0 +1,315 @@
+/* ====================== */
+/* Shared CSS Base theme  */
+/* ====================== */
+
+/* Common CSS for condensed table cell content controls */
+.sapUiCondensedTableCellContent {
+	box-sizing: border-box;
+	padding: 0 0.5rem;
+	line-height: 1.5rem;
+	vertical-align: middle;
+}
+
+/* commons */
+.sapMScrollbarV,
+.sapMScrollbarH,
+.sapMScrollbarV > div,
+.sapMScrollbarH > div {
+	position: absolute;
+}
+
+.sapMScrollbarV > div,
+.sapMScrollbarH > div {
+	box-sizing: border-box;
+	-webkit-background-clip: padding-box;
+	background-clip: padding-box;
+	border-width: 0.0625rem;
+	border-style: solid;
+	border-color: rgba(255, 255, 255, 0.901961);
+	border-radius: 0.1875rem;
+	background-color: rgba(0, 0, 0, 0.498039);
+}
+
+/* vertical scrollbar */
+.sapMScrollbarV {
+	width: 0.438rem;
+	right: 0.063rem;
+	top: 0;
+	bottom: 0;
+}
+
+.sapMScrollbarV > div {
+	width: 100%;
+}
+
+/* horizontal scrollbar */
+.sapMScrollbarH {
+	height: 0.4375rem;
+	bottom: 0.0625rem;
+	left: 0.125rem;
+	right: 0.125rem;
+}
+
+.sapMScrollbarH > div {
+	height: 100%;
+}
+
+/* ObjectListItem and ObjectHeader share styles for markers such as flag and favorite */
+.sapMObjStatusMarker {
+	color: @sapUiContentMarkerIconColor;
+}
+
+.sapMObjStatusMarker .sapUiIcon + .sapUiIcon,
+.sapMObjStatusMarker .sapUiHiddenPlaceholder + .sapUiIcon {
+	margin-left: .5rem;
+}
+
+.sapMObjStatusMarkerInvisible{
+	visibility: hidden;
+}
+
+/* CURSORS */
+.sapMPointer{
+	cursor: pointer;
+}
+
+/* Enables native browser hyphenation where possible */
+.sapUiHyphenation {
+	-webkit-hyphens: auto;
+	-moz-hyphens: auto;
+	hyphens: auto;
+}
+
+.defaultHighlightedText {
+    background: @sapUiContentSearchHighlightColor;
+    font-weight: bold;
+}
+
+/* Enables sap.m.IBadge implementations where possible */
+
+@keyframes sapMBadgeAppearPulse {
+	0% {transform: scale(.9); opacity:1;}
+	100% {transform: scale(2);opacity: 0;}
+}
+
+@keyframes sapMBadgeAppearBounce {
+	0% {transform: scale(1);}
+	50% {transform: scale(1.4); }
+	100% {transform: scale(1);}
+}
+
+@keyframes sapMBadgeDisappear {
+	0% {transform: scale(1);}
+	100% {transform: scale(0);}
+}
+
+@keyframes sapMBadgeUpdate {
+	0% {transform: scale(1);}
+
+	50% {transform: scale(1.2);}
+
+	100% {transform: scale(1);}
+}
+
+@_sap_m_Badge_AttentionBackgroundColor: @sapUiContentBadgeBackground;
+@keyframes sapMBadgeAppearMotionSmall {
+	0% {
+		transform: scale(0.33); // 0.125rem / 0.375rem
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+
+	20% {
+		transform: scale(1.66); // 0.625rem / 0.375rem
+	}
+
+	40% {
+		transform: scale(1.33); // 0.5rem / 0.375rem
+		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); // 0.875rem pulse layer
+	}
+
+	60% {
+		transform: scale(1); // 0.375rem
+		box-shadow: 0 0 0 0.3125rem fade(@_sap_m_Badge_AttentionBackgroundColor, 15%); // 1rem pulse layer
+	}
+
+	100% {
+		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); // 1.125rem pulse layer
+	}
+}
+
+@keyframes sapMBadgeAppearMotion {
+	0% {
+		transform: scale(0.25); // 0.125rem / 0.5rem
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); // required for Internet Explorer
+	}
+
+	20% {
+		transform: scale(1.25); // 0.625rem / 0.5rem
+	}
+
+	40% {
+		transform: scale(1); // 0.5rem
+		box-shadow: 0 0 0 1px fade(@_sap_m_Badge_AttentionBackgroundColor, 20%); // 0.875rem pulse layer
+	}
+
+	100% {
+		box-shadow: 0 0 0 0.375rem fade(@_sap_m_Badge_AttentionBackgroundColor, 0%); // 1.125rem pulse layer
+	}
+}
+
+.sapMBadge {
+	overflow: visible;
+	position: relative;
+
+	.sapMBadgeDefault {
+		position: absolute;
+		top: -0.125rem;
+		right: -0.25rem;
+		z-index: 100;
+		max-width: 100%;
+
+		padding-right: 0.125rem;
+		box-sizing: border-box;
+		height: 100%;
+		transform-origin: center center;
+
+		pointer-events: none;
+
+		&:after {
+			border-radius: 1.125rem;
+			display: block;
+
+			padding: 0 0.3125rem;
+			min-width: 0.5rem;
+			height: 1.125rem;
+			line-height: 1.125rem;
+			font-size: @sapMFontSmallSize;
+			font-family: @sapUiFontFamily;
+			text-align: center;
+
+			background-color: @sapUiContentBadgeBackground;
+			border: 0.0625rem solid @sapUiContentBadgeBackground;
+			color: @sapUiContentBadgeTextColor;
+
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+
+			.badgeAccentColorMixin(10);
+		}
+		//We need one more pseudo-element, attached to the badge indicator, in order
+		//to show the pulse animation simultaneously with the bounce one.
+		&:before {
+			position: absolute;
+			border-radius: 1.125rem;
+			display: block;
+
+			padding: 0 0.3125rem;
+			min-width: 0.5rem;
+			height: 1.125rem;
+			line-height: 1.125rem;
+			font-size: @sapMFontSmallSize;
+			font-family: @sapUiFontFamily;
+
+			background-color: @sapUiContentBadgeBackground;
+			border: 0.0625rem solid @sapUiContentBadgeBackground;
+			color: @sapUiContentBadgeTextColor;
+
+			text-overflow: ellipsis;
+			overflow: hidden;
+			opacity:0;
+
+			.badgeAccentColorMixin(10);
+		}
+		.sapMBadgeTopLeft& {
+			top: -0.125rem;
+			left: -0.25rem;
+			right: auto;
+		 }
+		.sapMBadgeTopRight& {
+			top: -0.125rem;
+			right: -0.25rem;
+		}
+		.sapMBadgeInline& {
+			left: 0;
+			right: 0;
+			top: 0;
+		}
+	}
+
+	/* The attention badge is a single dot, which does not contain text or icons. */
+	.sapMBadgeAttention {
+		position: absolute;
+		top: -0.25rem;
+		right: -0.25rem;
+		width: 0.5rem;
+		height: 0.5rem;
+
+		border-radius: 1.125rem;
+		background-color: @_sap_m_Badge_AttentionBackgroundColor;
+		border: 0.125rem solid @sapUiObjectHeaderBackground;
+	}
+}
+
+.sapMBadgeIndicator.sapMBadgeDefault:after {
+	content: attr(data-badge);
+}
+
+.sapMBadgeIndicator.sapMBadgeDefault[data-badge=""]:after {
+	display: none;
+}
+
+html[data-sap-ui-animation='on'] {
+	.sapMBadge.sapMBadgeAnimationTypeFull {
+		.sapMBadgeDefault.sapMBadgeAnimationAdd:after {
+			animation: sapMBadgeAppearBounce .1s;
+		}
+
+		.sapMBadgeDefault.sapMBadgeAnimationAdd:before {
+			content: attr(data-badge);
+			animation: sapMBadgeAppearPulse .2s;
+		}
+
+		.sapMBadgeAttention.sapMBadgeAnimationRemove,
+		.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+			animation: sapMBadgeDisappear .1s;
+			animation-fill-mode: forwards;
+			transform-origin: center;
+		}
+	}
+	.sapMBadge:not(.sapMBadgeAnimationTypeNone) {
+		.sapMBadgeDefault.sapMBadgeAnimationUpdate:after {
+			animation: sapMBadgeUpdate .1s;
+			animation-fill-mode: forwards;
+		}
+	}
+}
+
+html[data-sap-ui-animation='off'] {
+	.sapMBadgeAttention.sapMBadgeAnimationRemove,
+	.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+		scale: 0;
+		opacity: 0;
+		display: none;
+	}
+}
+
+.sapMBadgeAnimationTypeUpdate,
+.sapMBadgeAnimationTypeNone {
+	.sapMBadgeAttention.sapMBadgeAnimationRemove,
+	.sapMBadgeDefault.sapMBadgeAnimationRemove:after {
+		scale: 0;
+		opacity: 0;
+		display: none;
+	}
+}
+
+.badgeAccentColorMixin(@n, @i: 1) when (@i =< @n) {
+	@value: 'sapAccentColor@{i}';
+
+	.sapMBadgeAccentColor@{i}& {
+		background-color: @@value;
+		border-color: @@value;
+	}
+	.badgeAccentColorMixin(@n, (@i + 1));
+}

package/src/sap/m/themes/sap_belize_hcb/library.source.less

@@ -4,7 +4,16 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/***********************************************************************************
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the
+/* inheritance of the base theme is now updated to an inheritance of a static
+/* copy of the base theme named sap_belize_base. The respective
+/* control css files of base are copied to the sap_belize_base theme folder.
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.
+***********************************************************************************/
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../sap/ui/core/themes/sap_belize_hcb/base.less";
 @import "../../../../sap/ui/core/themes/sap_belize_hcb/global.less";
 @import "shared.less";

package/src/sap/m/themes/sap_belize_hcw/library.source.less

@@ -4,7 +4,16 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/***********************************************************************************
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the
+/* inheritance of the base theme is now updated to an inheritance of a static
+/* copy of the base theme named sap_belize_base. The respective
+/* control css files of base are copied to the sap_belize_base theme folder.
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.
+***********************************************************************************/
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../sap/ui/core/themes/sap_belize_hcw/base.less";
 @import "../../../../sap/ui/core/themes/sap_belize_hcw/global.less";
 @import "shared.less";

package/src/sap/tnt/themes/sap_belize/library.source.less

@@ -4,7 +4,16 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/***********************************************************************************
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the
+/* inheritance of the base theme is now updated to an inheritance of a static
+/* copy of the base theme named sap_belize_base. The respective
+/* control css files of base are copied to the sap_belize_base theme folder.
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.
+***********************************************************************************/
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../sap/ui/core/themes/sap_belize/base.less";
 @import "../../../../sap/ui/core/themes/sap_belize/global.less";
 @import "global.less";

package/src/sap/tnt/themes/sap_belize_base/InfoLabel.less

@@ -0,0 +1,152 @@
+/* ================================= */
+/* CSS for control sap.tnt/InfoLabel */
+/* Base theme                        */
+/* ================================= */
+
+@_sap_tnt_InfoLabel_NarrowPadding: 0 0.1875rem;
+@_sap_tnt_InfoLabel_LineHeight: normal;
+@_sap_tnt_InfoLabel_LineHeightDisplayOnly: 1rem;
+@_sap_tnt_InfoLabel_Height: 1rem;
+@_sap_tnt_InfoLabel_HeightWithoutBorders: 0.875rem;
+@_sap_tnt_InfoLabel_FontFamily: @sapUiFontFamily;
+@_sap_tnt_InfoLabel_FontSize: @sapMFontSmallSize;
+@_sap_tnt_InfoLabel_DisplayFontSize: @_sap_tnt_InfoLabel_FontSize;
+@_sap_tnt_InfoLabel_DisplayFontSizeIcon: @_sap_tnt_InfoLabel_FontSize;
+@_sap_tnt_InfoLabel_Padding: 0 0.3125rem;
+@_sap_tnt_InfoLabel_DisplayPadding: @_sap_tnt_InfoLabel_Padding;
+@_sap_tnt_InfoLabel_IconMargin: 0.125rem;
+@_sap_tnt_InfoLabel_DisplayIconMargin: 0.1875rem;
+@_sap_tnt_InfoLabel_PaddingWhenEmpty: 0 @_sap_tnt_InfoLabel_HeightWithoutBorders/2;
+@_sap_tnt_InfoLabel_DisplayModeBorder: none;
+@_sap_tnt_InfoLabel_DisplayModeBackground: @sapUiBaseText;
+@_sap_tnt_InfoLabel_DisplayModeColor: @sapUiContentContrastTextColor;
+@_sap_tnt_InfoLabel_BorderRadius: 0.5rem;
+@_sap_tnt_InfoLabel_DisplayBorderRadius: @_sap_tnt_InfoLabel_BorderRadius;
+@_sap_tnt_InfoLabel_Text: uppercase;
+@_sap_tnt_InfoLabel_LetterSpacing: 0.0125rem;
+
+/* ==========================================================================
+   Root element
+   ========================================================================== */
+.sapTntInfoLabel {
+	box-sizing: border-box;
+	padding: @_sap_tnt_InfoLabel_Padding;
+	text-align: center;
+	border-radius: @_sap_tnt_InfoLabel_BorderRadius;
+	height: @_sap_tnt_InfoLabel_Height;
+	display: inline-block;
+	max-width: 100%;
+	line-height: @_sap_tnt_InfoLabel_LineHeight;
+
+	.sapTntInfoLabelInner {
+		font-size: @_sap_tnt_InfoLabel_FontSize;
+		font-weight: bold;
+		font-family: @_sap_tnt_InfoLabel_FontFamily;
+		vertical-align: top;
+		letter-spacing: @_sap_tnt_InfoLabel_LetterSpacing;
+		text-transform: @_sap_tnt_InfoLabel_Text;
+		display: inline-block;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		max-width: 100%;
+	}
+}
+
+.sapTntInfoLabelRenderModeNarrow { // Recommended for numeric labels (Numeric Mode)
+	padding: @_sap_tnt_InfoLabel_NarrowPadding
+}
+
+/* ==========================================================================
+   InfoLabel Display Only
+   ========================================================================== */
+.sapTntInfoLabel.sapTntInfoLabelDisplayOnly {
+	border: @_sap_tnt_InfoLabel_DisplayModeBorder;
+	background: @_sap_tnt_InfoLabel_DisplayModeBackground;
+	height: 1rem;
+	border-radius: @_sap_tnt_InfoLabel_DisplayBorderRadius;
+	padding: @_sap_tnt_InfoLabel_DisplayPadding;
+
+	.sapTntInfoLabelInner {
+		color: @_sap_tnt_InfoLabel_DisplayModeColor;
+		line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
+		font-size: @_sap_tnt_InfoLabel_DisplayFontSize;
+	}
+}
+
+/* ==========================================================================
+   InfoLabel No Text
+   ========================================================================== */
+   .sapTntInfoLabel.sapTntInfoLabelNoText {
+	padding: 0 0.1875rem;
+   }
+
+   /* ==========================================================================
+   InfoLabel With Icon
+   ========================================================================== */
+
+.sapTntInfoLabel.sapTntInfoLabelWithIcon {
+
+	.sapTntInfoLabelInner .sapTntInfoLabelText {
+		vertical-align: top;
+	}
+
+	.sapUiIcon {
+		padding-right: @_sap_tnt_InfoLabel_IconMargin;
+		line-height: @_sap_tnt_InfoLabel_HeightWithoutBorders;
+		vertical-align: top;
+		font-size: @_sap_tnt_InfoLabel_FontSize;
+	}
+
+	&.sapTntInfoLabelNoText {
+		padding: @_sap_tnt_InfoLabel_NarrowPadding;
+
+		.sapTntInfoLabelInner .sapUiIcon {
+			padding-right: 0 !important;
+		}
+	}
+
+	&.sapTntInfoLabelDisplayOnly .sapTntInfoLabelInner {
+		.sapUiIcon:not(.sapMBtnIcon) { // needs this to override Form styles
+			line-height: @_sap_tnt_InfoLabel_LineHeightDisplayOnly;
+			padding-right: @_sap_tnt_InfoLabel_DisplayIconMargin;
+			font-size: @_sap_tnt_InfoLabel_DisplayFontSizeIcon;
+		}
+	}
+}
+
+/* ==========================================================================
+   Empty InfoLabel
+   ========================================================================== */
+
+// It is recommended for the empty InfoLabel to be circle
+.sapTntInfoLabel.sapTntInfoLabelNoText:not(.sapTntInfoLabelWithIcon) {
+	&:not(.sapTntInfoLabelDisplayOnly) {
+		padding: @_sap_tnt_InfoLabel_PaddingWhenEmpty;
+	}
+	&.sapTntInfoLabelDisplayOnly {
+		padding: 0 @_sap_tnt_InfoLabel_LineHeightDisplayOnly/2;
+	}
+};
+
+/* ==========================================================================
+   InfoLabel in Form
+   ========================================================================== */
+
+.sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
+	margin-top: 0.875rem;
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapUiFormEdit .sapTntInfoLabel:not(.sapTntInfoLabelDisplayOnly) {
+	margin-top: 0.5rem;
+}
+
+
+/* ==========================================================================
+   InfoLabel in Table
+   ========================================================================== */
+
+.sapMListTbl .sapTntInfoLabel.sapTntInfoLabelWithIcon .sapUiIcon:not(.sapMLIBImgNav):not(.sapMBtnIcon) {
+	font-size: @sapMFontSmallSize;
+}