@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,122 @@
+/* ============================ */
+/* CSS for control sap.m/Token  */
+/* Base theme                   */
+/* ============================ */
+
+@_sap_m_Token_TokenPadding: 0.5rem;
+@_sap_m_Token_TokenCompactPadding: 0.25rem;
+@_sap_m_Token_LeftPadding: 0.375rem;
+@_sap_m_Token_TokenSize: @sapMFontMediumSize + (2 * @_sap_m_Token_TokenPadding) - @_sap_m_Token_LeftPadding;
+@_sap_m_Token_TokenCompactSize: @sapMFontSmallSize + @_sap_m_Token_TokenCompactPadding;
+
+.sapMToken {
+	display: inline-block;
+	position: relative;
+	overflow: hidden;
+	box-sizing: border-box;
+	font-size: @sapMFontMediumSize;
+	padding-left: @_sap_m_Token_LeftPadding;
+	height: 1.625rem;
+	background: @sapUiButtonTokenBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonTokenBorderColor;
+	border-radius: @sapUiButtonBorderCornerRadius;
+	color: @sapUiButtonTextColor;
+}
+
+.sapMToken.sapMHiddenToken {
+	display: none;
+}
+
+.sapMToken.sapMTokenReadOnly {
+	padding: 0 0.375rem;
+	color: @sapUiContentForegroundTextColor;
+}
+
+html.sap-desktop .sapMToken:not(.sapMTokenReadOnly):hover {
+	background: @sapUiButtonHoverBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonHoverBorderColor;
+}
+
+.sapMTokenText {
+	display: inline-block;
+	overflow: hidden;
+	white-space: nowrap;
+
+	// at least for Microsoft Surface Tablet we experienced problems when not setting these properties - touches on the Token seemed to be propageted to the Span inside the Token-Div and thereby (part of) the text contained in the Span would appear selected
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+
+	pointer-events: none;
+
+	line-height: 1.5rem;
+	max-width: calc(~"100% - " @_sap_m_Token_TokenSize);
+	box-sizing: border-box;
+}
+
+.sapMToken.sapMTokenTruncated .sapMTokenText {
+	text-overflow: ellipsis;
+}
+
+.sapUiSizeCompact .sapMTokenText {
+	max-width: calc(~"100%  - " @_sap_m_Token_TokenCompactSize);
+	font-size: @sapMFontMediumSize;
+}
+
+.sapMTokenReadOnly .sapMTokenText,
+.sapMTokenizerReadonly .sapMTokenText {
+	max-width: 100%;
+}
+
+.sapMTokenIcon {
+	vertical-align: top;
+	display: inline-block;
+	line-height: 1.5625rem;
+	padding: 0 0.5rem;
+	color: @sapUiContentIconColor;
+	font-size: 0.75rem;
+	box-sizing: border-box;
+	touch-action: none;
+}
+
+.sapUiSizeCompact .sapMToken {
+	font-size: @sapMFontSmallSize;
+	padding-left: @_sap_m_Token_TokenCompactPadding;
+	height: 1.25rem;
+}
+
+.sapUiSizeCompact .sapMToken.sapMTokenReadOnly {
+	padding: 0 0.25rem;
+}
+
+.sapUiSizeCompact .sapMTokenText {
+	line-height: 1.125rem;
+}
+
+.sapUiSizeCompact .sapMToken .sapMTokenIcon {
+	font-size: @sapMFontSmallSize;
+	padding: 0 0.25rem;
+	line-height: 1.1875rem;
+}
+
+html.sap-desktop .sapMToken.sapMTokenSelected:not(.sapMTokenReadOnly):hover {
+	background: @sapUiToggleButtonPressedHoverBackground;
+	border: 1px solid @sapUiToggleButtonPressedHoverBorderColor;
+}
+
+.sapMTokenSelected,
+.sapMToken.sapMTokenReadOnly.sapMTokenSelected {
+	color: @sapUiButtonSelectedTextColor;
+	background: @sapUiButtonSelectedBackground;
+	border: @sapUiButtonBorderWidth solid @sapUiButtonSelectedBorderColor;
+}
+
+.sapMTokenSelected .sapMTokenIcon,
+.sapMTokenSelected .sapMTokenText {
+	color: @sapUiButtonSelectedTextColor;
+}
+
+.sapUiSizeCompact .sapMListTbl .sapMToken .sapUiIcon:not(.sapMLIBImgNav) {
+	font-size: 0.75rem;
+}

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

@@ -0,0 +1,137 @@
+/* ================================ */
+/* CSS for control sap.m/Tokenizer  */
+/* Base theme                       */
+/* ================================ */
+@_sap_m_Tokenizer_OutlineOffset: 0.1875rem;
+@_sap_m_Tokenizer_Token_MarginRight: 0.375rem;
+@_sap_m_Tokenizer_FontSizeRatioCozy: (@sapMFontMediumSize / @sapFontLargeSize);
+@_sap_m_Tokenizer_FontSizeRatioCompact: 1;
+
+.sapMTokenizer {
+	padding-left: 0.375rem;
+	position: relative;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	box-sizing: border-box;
+	vertical-align: inherit;
+}
+
+html.sap-desktop .sapMTokenizer:focus {
+	outline: 1px dotted @sapUiContentFocusColor;
+	outline-offset: -@_sap_m_Tokenizer_OutlineOffset;
+}
+
+.sapMTokenizer .sapMToken {
+	margin-top: 0.25rem;
+	margin-bottom: 0.25rem;
+	margin-right: @_sap_m_Tokenizer_Token_MarginRight;
+	line-height: normal;
+	vertical-align: middle;
+}
+
+.sapMTokenizer.sapMTokenizerReadonly {
+	.sapMToken {
+		padding: 0 0.375rem;
+	}
+
+	.sapMTokenIcon {
+		display: none;
+	}
+
+	.sapMTokenizerIndicator {
+		color: @sapUiLink;
+
+		&:hover{
+			color: @sapUiLinkHover;
+		}
+	}
+}
+
+.sapMTokenizerClip {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 1px;
+	height: 1px;
+	display: block;
+	font-size: 1px;
+	z-index: -1;
+	color: transparent;
+	background: transparent;
+	overflow: hidden;
+	border: none;
+	padding: 0;
+	resize: none;
+	outline: none;
+	-webkit-user-select: text;
+	user-select: text;
+}
+
+.sapMTokenizerIndicator {
+	display: inline-block;
+	cursor: pointer;
+	font-size: @sapMFontMediumSize;
+	line-height: 2rem;
+	overflow: hidden;
+	vertical-align: middle;
+}
+
+.sapUiSizeCompact .sapMTokenizer {
+	padding-left: 0.25rem;
+
+	.sapMToken {
+		height: 1.25rem;
+		margin-top: 0.125rem;
+		margin-bottom: 0.125rem;
+		margin-right: 0.25rem;
+		max-width: calc(~"100% - 0.25rem");
+	}
+}
+
+.sapUiSizeCompact .sapMTokenizerIndicator {
+	line-height: 1.5rem;
+}
+
+.sapMTokenizerScrollContainer {
+	display: inline-block;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	height: 100%;
+}
+
+.sapMTokenizer.sapMTokenizerOneLongToken .sapMTokenizerScrollContainer{
+	width: 100%;
+	overflow: hidden;
+
+	.sapMToken {
+		width: calc(~"100% - " @_sap_m_Tokenizer_Token_MarginRight);
+	}
+}
+
+.sapMTokenizerScrollContainerNoVisibleTokens {
+	display: none;
+}
+
+.sapMTokenizerTokensPopup {
+	.sapMListUl > .sapMLIB.sapMSLIWrapping {
+		min-height: 2.5rem;
+	}
+
+	.sapMSLIWrapping > .sapMLIBContent > .sapMSLIDiv {
+		padding: 0.25rem 0;
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMTokenizerTokensPopup,
+	&.sapMTokenizerTokensPopup {
+		.sapMListUl > .sapMLIB.sapMSLIWrapping {
+			min-height: 2rem;
+		}
+
+		.sapMSLIWrapping > .sapMLIBContent > .sapMSLIDiv {
+			padding: 0.25rem 0;
+		}
+	}
+}

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

@@ -0,0 +1,165 @@
+/* ============================== */
+/* CSS for control sap.m/Toolbar  */
+/* Base theme                     */
+/* ============================== */
+
+@_sap_m_Toolbar_ShrinkItem_MinWidth: 2.5rem;
+
+//we want the first visible element on the row to have specific padding-left value
+.sapMIBar.sapMTB .sapMBarChild {
+	margin-left: 0.25rem;
+}
+
+.sapMIBar.sapMTB .sapMBarChild ~ .sapMBarChild {
+	margin: 0 0 0 0.5rem;
+}
+
+.sapMIBar.sapMTB .sapMBarChild.sapMBarChildFirstChild {
+	margin-left: 0;
+}
+
+.sapMIBar.sapMTB.sapMTBHeader-CTX {
+	padding-left: 1rem;
+}
+
+.sapMTB {
+	white-space: nowrap;
+	overflow: hidden;
+	-webkit-align-items: center;
+	-webkit-box-align: center;
+	align-items: center;
+	box-sizing: border-box;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+	height: 3rem;
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+	background: @sapUiToolbarBackground;
+}
+
+.sapMTB.sapMTB-Transparent-CTX {
+	background: transparent;
+}
+
+.sapMIBar.sapMTB .sapMTBHiddenElement {
+	position: absolute;
+	visibility: hidden;
+}
+
+.sapMTBFocused {
+	outline: 0;
+}
+
+.sapMTBStandard {
+	border-bottom: solid 0.0625rem @sapUiGroupTitleBorderColor;
+}
+
+.sapMTBClear {
+	border-bottom: none;
+}
+
+/* Info Toolbar Context */
+.sapMIBar.sapMTB.sapMTB-Info-CTX {
+	padding: 0 1rem;
+}
+
+.sapMIBar.sapMTB.sapMTB-Info-CTX > .sapUiIcon:first-child {
+	padding: 1px;
+}
+
+/* Background and text colors for different states */
+.sapMTB-Info-CTX > .sapUiIcon:focus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: 0.0625rem;
+}
+
+.sapMTBActive,
+.sapMTBActive > * {
+	cursor: pointer;
+}
+
+.sapMTBShrinkItem:not(.sapMSF) {
+	min-width: @_sap_m_Toolbar_ShrinkItem_MinWidth; /* default min-width value for the shrinkable items */
+}
+
+/* NewFlex */
+.sapMTBNewFlex {
+	display: -webkit-flex;
+	display: flex;
+}
+
+.sapMTBNewFlex > * {
+	-webkit-flex-shrink: 0;
+	flex-shrink: 0;
+}
+
+.sapMTBNewFlex > .sapMTBShrinkItem {
+	-webkit-flex-shrink: 1;
+	flex-shrink: 1;
+}
+
+/*** Toolbar inside of Form as Form- and Container- header ***/
+.sapUiFormContainerToolbar > .sapMTB.sapMIBar {
+	border-bottom: none;
+	padding: 0;
+}
+
+.sapUiFormCLContainer .sapMIBar.sapMTB .sapMBarChild:first-child,
+.sapUiRespGrid .sapMIBar .sapMBarChild:first-child {
+	margin-left: 0.25rem;
+}
+
+/* Solid Toolbar Context */
+.sapMTB-Solid-CTX.sapMTB {
+	background: @sapUiListHeaderBackground;
+}
+
+/* Info Toolbar Context */
+.sapMTB-Info-CTX.sapMTB {
+	background: @sapUiInfobarBackground;
+	color: contrast(@sapUiInfobarBackground, @sapUiListActiveTextColor, @sapUiListTextColor, @sapUiContentContrastTextThreshold);
+	height: 2rem;
+
+	.sapMText {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	> .sapMTitle {
+		font-size: @sapMFontHeader6Size;
+		text-shadow: none;
+	}
+
+	&.sapMTBActive {
+		&:hover {
+			background: @sapUiInfobarHoverBackground;
+		}
+
+		&:active {
+			background: @sapUiInfobarActiveBackground;
+		}
+	}
+}
+
+/********** COMPACT DESIGN ************/
+
+/* toolbar has 2rem height in compact mode */
+.sapUiSizeCompact .sapMTB {
+	height: 2rem;
+}
+
+/* class used to get a height of 3rem in compact mode */
+.sapUiSizeCompact .sapMTB.sapMTBHeader-CTX {
+	height: @sapUiElementLineHeight;
+}
+
+/* default min-width value for the shrinkable items */
+.sapUiSizeCompact .sapMTBShrinkItem:not(.sapMSF),
+.sapUiSizeCondensed .sapUiTableCell .sapMTBShrinkItem{
+	min-width: 2rem;
+}
+
+.sapFDynamicPageTitleContent-CTX .sapMTB.sapMTBStandard {
+	border-bottom: none;
+}

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

@@ -0,0 +1,25 @@
+/* ======================================= */
+/* CSS for control sap.m/ToolbarSeparator  */
+/* Base theme                              */
+/* ======================================= */
+
+.sapMTBSeparator {
+	width: 0.0625rem;
+	height: 2rem;
+	background: @sapUiToolbarSeparatorColor;
+
+	&.sapMTBSeparatorOverflowToolbar {
+		height: 0.0625rem;
+		margin: 0.25rem 0.5rem;
+		width: auto;
+	}
+}
+
+.sapUiSizeCompact .sapMTBSeparator {
+	height: 1.5rem;
+
+	&.sapMTBSeparatorOverflowToolbar {
+		height: 0.0625rem;
+		margin: 0.1875rem 0.375rem;
+	}
+}

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

@@ -0,0 +1,20 @@
+/* ==================================== */
+/* CSS for control sap.m/ToolbarSpacer  */
+/* Base theme                           */
+/* ==================================== */
+
+.sapMTBSpacer {
+	/* should never have padding/margin/border */
+	margin: 0 !important;
+	padding: 0 !important;
+	border: 0 !important;
+
+	/* without height chrome ignores the element */
+	height: 1px;
+}
+
+.sapMTBSpacerFlex {
+	-webkit-flex-grow: 1;
+	-webkit-box-flex: 1;
+	flex: auto;
+}

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

@@ -0,0 +1,67 @@
+/* =================================== */
+/* CSS for control sap.m/TreeItemBase  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMTreeItemBase {
+	min-height: @sapUiElementHeight;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	padding-left: 0;
+	color: @sapUiListTextColor;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.sapMTreeItemBaseExpander {
+	width: @sapUiElementLineHeight;
+	height: @sapUiElementHeight;
+	line-height: @sapUiElementHeight;
+	font-size: 1rem;
+	color: @sapUiContentIconColor;
+	flex-shrink: 0;
+}
+
+.sapMTreeItemBaseLeaf > .sapMTreeItemBaseExpander {
+	opacity: 0;
+	pointer-events: none;
+}
+
+.sapMLIBActive .sapMTreeItemBaseExpander {
+	color: @sapUiListActiveTextColor;
+}
+
+.sapMListHighlight .sapMTreeItemBaseExpander {
+	margin-left: 0.375rem;
+}
+
+.sapMTreeItemBaseChildren {
+	background-color: @sapUiListAlternatingBackground;
+	border-bottom-color: transparent;
+}
+
+.sapMTIBWrapTitle {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sapMTreeItemBase > .sapMLIBContent {
+	display: flex;
+	align-items: center;
+}
+
+.sapUiSizeCompact .sapMTreeItemBase {
+	min-height: 1.5rem;
+}
+
+.sapUiSizeCompact .sapMTreeItemBaseWrapping {
+	min-height: 1.5rem;
+}
+
+.sapUiSizeCompact .sapMTreeItemBaseExpander {
+	font-size: 0.75rem;
+	width: 2rem;
+	height: 1.5rem;
+	line-height: 1.5rem;
+}