@openui5/themelib_sap_belize 1.124.2 → 1.126.0

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

@@ -0,0 +1,150 @@
+/* =========================== */
+/* CSS for control sap.m/Text  */
+/* Base theme                  */
+/* =========================== */
+
+@_sap_m_Text_TextShadowInTransparentToolbar: none;
+
+.sapMText {
+	display: inline-block;
+	box-sizing: border-box;
+	white-space: pre-line;
+	word-wrap: break-word; /* works only if browser knows the width */
+	cursor: text;
+	font-size: @sapMFontMediumSize;
+	font-family: @sapUiFontFamily;
+	line-height: normal;
+	color: @sapUiBaseText;
+}
+html[data-sap-ui-browser="sf10"] {
+	.sapUiVltCell, .sapuiVltCell {
+		.sapMText {
+			display: block;
+		}
+	}
+}
+
+//BCP: 0020751295 0000279538 2020
+.sapMText.sapMTextMaxLineWrapper {
+	// needed for line clamp to work
+	overflow: hidden;
+}
+
+.sapMTextNoWrap,
+.sapMTextMaxLine {
+	overflow: hidden;
+}
+
+.sapMTextMaxLine {
+	display: block;
+}
+
+.sapMTextNoWrap {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	word-wrap: normal; /* overwrite */
+}
+
+.sapMTextRenderWhitespaceWrap {
+  white-space: pre-wrap;
+}
+
+.sapMTextRenderWhitespace{
+  white-space: pre;
+}
+
+.sapMTextLineClamp {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+}
+
+.sapMTextBreakWord {
+	/* to break all words even browser does not know the width */
+	word-break: break-all;
+	word-break: break-word;  /* Non standard for old webkits */
+}
+
+.sapMTextMaxWidth {
+	max-width: 100%;
+}
+
+.sapMLIBActionable .sapMText {
+	cursor: pointer;
+}
+
+/*Necessary to align vertically to labels */
+.sapUiForm .sapMText {
+	overflow: hidden;
+}
+
+.sapUiFormEdit .sapMText {
+	display: block;
+	min-height: 3rem; /* for empty text */
+	line-height: 1.375rem;
+	padding-top: 0.8125rem;
+	padding-bottom: 0.8125rem;
+}
+
+.sapUiForm:not(.sapUiFormEdit) .sapMText {
+	min-height: 1rem; /* for empty text */
+}
+
+.sapMLIBActive .sapMText,
+.sapMLIBActive .sapMListTblCell .sapMText,
+.sapMLIBActive .sapMListTblSubCntRow .sapMText {
+	color: @sapUiListActiveTextColor;
+}
+
+.sapMLIBUnread .sapMText,
+.sapMLIBUnread + .sapMListTblSubRow .sapMText {
+	font-family: @sapUiFontFamily;
+	font-weight: bold;
+}
+
+/* HorizontalLayout */
+.sapUiHLayoutChildWrapper > .sapMText {
+	vertical-align: text-bottom;
+}
+
+/* Transparent Toolbar Context*/
+.sapMTB-Transparent-CTX .sapMText {
+	font-weight: @sapUiFontHeaderWeight;
+	font-family: @sapUiFontHeaderFamily;
+	text-shadow: @_sap_m_Text_TextShadowInTransparentToolbar;
+	color: @sapUiGroupTitleTextColor;
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapUiFormEdit .sapMText{
+	min-height: 2rem; /* for empty text */
+	padding-top: 0.3125rem;
+	padding-bottom: 0.3125rem;
+}
+html[data-sap-ui-browser^="cr"] .sapUiSizeCompact .sapUiFormEdit .sapMText {
+	line-height: 1.375rem;
+}
+
+/* Condensed size / Table Specifics */
+.sapUiTableCell .sapMText,
+.sapMListTblCell > .sapMText.sapMTextNoWrap {
+	vertical-align: middle;
+}
+
+.sapUiSizeCondensed .sapUiTableDataCell .sapMText {
+	line-height: 1.5rem;
+}
+
+.sapUiTableHeaderDataCell .sapMText,
+.sapMColumnHeader .sapMText {
+	font-weight: @sapUiColumnHeaderFontWeight;
+	font-size: @sapUiColumnHeaderFontSize;
+	color: @sapUiListHeaderTextColor;
+}
+
+.sapMText .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: none;
+}
+
+.sapMShowEmpty-CTX .sapMText .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: inline-block;
+}

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

@@ -0,0 +1,192 @@
+/* =============================== */
+/* CSS for control sap.m/TextArea  */
+/* Base theme                      */
+/* =============================== */
+
+@_sapMTextAreaPadding: 0.4375rem 0.5625rem;
+@_sapMTextAreaPadding_Compact: 0.125rem 0.4375rem;
+@_sapMTextAreaReadonlyPadding: 0.4375rem 0.5625rem;
+@_sapMTextAreaReadonlyPadding_Compact: 0.125rem 0.4375rem;
+@_sapMTextAreaValueStateSuccessPadding: 0.4375rem 0.5625rem;
+@_sapMTextAreaValueStateSuccessPadding_Compact: 0.125rem 0.4375rem;
+@_sapMTextAreaValueStateInformationPadding: 0.375rem 0.5rem;
+@_sapMTextAreaValueStateInformationPadding_Compact: 0.0625rem 0.375rem;
+@_sapMTextAreaValueStateErrorWarningPadding: 0.375rem 0.5rem;
+@_sapMTextAreaValueStateErrorWarningPadding_Compact: 0.0625rem 0.375rem;
+@_sapMTextAreaContentWrapperPadding: 0;
+@_sapMTextAreaContentWrapperValueStateSuccessPadding: 0;
+@_sapMTextAreaContentWrapperValueStateInformationPadding: 0;
+@_sapMTextAreaContentWrapperValueStateErrorWarningPadding: 0;
+
+/* uses sapMInputBase styles */
+
+.sapMTextAreaInner {
+	overflow: auto; /* remove scrollbars if not needed */
+	-webkit-transform: none; /* transform is blocking scroll */
+	resize: none;
+	margin: 0;
+}
+
+.sapMTextArea .sapMInputBaseContentWrapper {
+	-webkit-overflow-scrolling: touch;
+	height: 100%;
+	width: 100%;
+	line-height: 0;
+	display: block;
+	padding: @_sapMTextAreaContentWrapperPadding;
+}
+
+.sapMTextArea .sapMTextAreaInner {
+	-webkit-overflow-scrolling: touch;
+	line-height: 1.4;
+	height: 100%;
+	width: 100%;
+}
+
+.sapMTextAreaWithCounter {
+	& .sapMTextAreaCounter {
+		float:right;
+		overflow: hidden;
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontSmallSize;
+		color: @sapUiContentLabelColor;
+		padding: 0.3725rem 0.125rem 0.5rem;
+	}
+
+	& .sapMInputBaseContentWrapper {
+		height: calc(~"100% - 1.5rem");
+	}
+}
+
+.sapMTextAreaGrow {
+	overflow: hidden;
+	position: absolute;
+	height: 100%;
+	top: 0;
+}
+
+/* ensure that the mirror div has the same styles like the inner text area */
+.sapMTextAreaMirror {
+	/* should not grow more than screen size */
+	max-height: calc(100vh - 6rem);
+	white-space: pre-wrap;
+	border: none;
+	overflow: hidden;
+	line-height: 1.4;
+	visibility: hidden;
+	word-break: break-word;
+	font-size: @sapFontSize;
+}
+
+.sapMInputBase.sapMTextArea {
+	height: auto;
+	min-height: 2.5rem;
+	min-width: 6rem;
+
+	.sapMTextAreaInner {
+		line-height: 1.4;
+		-webkit-overflow-scrolling: touch; /* IOS only */
+	}
+
+	&.sapMInputBaseReadonly .sapMInputBaseReadonlyWrapper {
+		background-image: none;
+	}
+}
+
+.sapMInputBase.sapMTextArea {
+	.sapMTextAreaInner, .sapMTextAreaMirror {
+		padding: @_sapMTextAreaPadding;
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperError,
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperWarning {
+		padding: @_sapMTextAreaContentWrapperValueStateErrorWarningPadding;
+
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateErrorWarningPadding;
+		}
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperSuccess {
+		padding: @_sapMTextAreaContentWrapperValueStateSuccessPadding;
+
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateSuccessPadding;
+		}
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperInformation {
+		padding: @_sapMTextAreaContentWrapperValueStateInformationPadding;
+
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateInformationPadding;
+		}
+	}
+}
+
+.sapMInputBase.sapMTextArea.sapMInputBaseReadonly:not(.sapMInputBaseDisabled) {
+	.sapMTextAreaInner, .sapMTextAreaMirror {
+		padding: @_sapMTextAreaReadonlyPadding;
+	}
+}
+
+.sapMFocus.sapMTextArea {
+	& .sapMInputBaseContentWrapper {
+		outline: none;
+
+		.sapMInputBaseInner {
+			outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+			outline-offset: -2px;
+		}
+	}
+}
+
+/**** Compact Size ****/
+.sapUiSizeCompact {
+	.sapMInputBase.sapMTextArea {
+		min-height: 1.625rem;
+		margin: 0.1875rem 0;
+	}
+
+	.sapMTextAreaWithCounter {
+		& .sapMTextAreaCounter {
+			padding-top: 0.3125rem;
+		}
+	}
+	.sapMInputBase.sapMTextArea.sapMInputBaseReadonly:not(.sapMInputBaseDisabled) {
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaReadonlyPadding_Compact;
+		}
+	}
+}
+
+.sapUiSizeCompact .sapMInputBase.sapMTextArea {
+	.sapMTextAreaInner, .sapMTextAreaMirror {
+		padding: @_sapMTextAreaPadding_Compact;
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperError,
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperWarning {
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateErrorWarningPadding_Compact;
+		}
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperSuccess {
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateSuccessPadding_Compact;
+		}
+	}
+	.sapMInputBaseContentWrapperState.sapMInputBaseContentWrapperInformation {
+		.sapMTextAreaInner, .sapMTextAreaMirror {
+			padding: @_sapMTextAreaValueStateInformationPadding_Compact;
+		}
+	}
+}
+
+/**
+	Fix for iOS. When growing is enabled, the mirrored, hidden content should have pixel perfect proportions
+	as the textarea. Otherwise, words could break differently and this would lead to inconsistent height.
+	For some reason iOS devices need wider padding on left & right in order to have this consistency.
+ */
+html.sap-tablet, html.sap-phone {
+	&[data-sap-ui-os*="iOS"] .sapMInputBase.sapMTextArea .sapMTextAreaMirror {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+}

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

@@ -0,0 +1,73 @@
+/* =========================== */
+/* CSS for control sap.m/Tile  */
+/* Base theme                  */
+/* =========================== */
+
+.sapMTile {
+	display: inline-block;
+	-webkit-transition-property: transform3d;
+	-webkit-transition-duration: 0.2s;
+	transition-property: transform3d;
+	transition-duration: 0.2s;
+	width: 12rem;
+	height: 14rem;
+	margin: 0.5rem;
+	-webkit-touch-callout: none;
+	background-color: @sapUiTileBackground;
+	border: 1px solid @sapUiTileBorderColor;
+	border-radius: 0.125rem;
+	box-shadow: @sapUiShadowLevel0;
+	/*margin:0.6em;*/ /* in case of some behavior problems uncomment this line, it was comment because the margin causes the blurring of the focus rectangle in IE9*/
+}
+
+.sapMTile * {   /* FIXME!!! (star rule with any-parent selector...) */
+	-webkit-user-select: none;
+	-webkit-user-drag: none;
+	-moz-user-select:  -moz-none;
+}
+
+.sapMTCEditable .sapMTile {
+	background-color: fade(@sapUiTileBackground, 50);
+}
+
+.sapMTile.sapMTileActive{
+	background: @sapUiHighlight;
+}
+
+html.sap-phone .sapMTile {
+	width: 8.5rem;
+	height: 10rem;
+	margin: 0.5rem;
+}
+
+html.sap-phone .sapMTileContent {
+	width: 8.5rem;
+	height: 10rem;
+}
+
+.sapMTileContent {
+	overflow: hidden;
+	width: 12rem;
+	height: 14rem;
+}
+
+.sapMTileDrag {
+	opacity : 0.8;
+	z-index : 10;
+	-webkit-transition-property : none;
+	transition-property: none;
+}
+
+.sapMNavItemFlipping .sapMTile {
+	opacity: 0.01;
+}
+
+.sapMTile:focus {
+	outline: 1px dotted @sapUiContentFocusColor;
+	position: relative;
+}
+
+.sapMTile .sapMTileDrag {
+	opacity : 0.6;
+	box-shadow: 0px 1px 3px fade(@sapUiContentShadowColor,60);
+}

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

@@ -0,0 +1,263 @@
+/* ==================================== */
+/* CSS for control sap.m/TileContainer  */
+/* Base theme                           */
+/* ==================================== */
+
+.sapMTC {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	position: relative;
+	overflow: hidden;
+}
+
+.sapMTC .sapMTCScrl {
+	padding: 0;
+	position: absolute;
+	left: 0;
+	top: 0;
+	overflow: visible;
+}
+
+.sapMTC:focus,
+.sapMTC .sapMTCScroller:focus {
+	outline: none;
+}
+
+.sapMTC .sapMTCCnt {
+	height: 100%;
+	width: 100%;
+	overflow: visible;
+	position: absolute;
+	left: 0;
+	top: 0;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+}
+
+html.sap-tablet .sapMTC .sapMTCScrl,
+html.sap-phone .sapMTC .sapMTCScrl {
+	padding: 0;
+}
+
+.sapMTC.sapMTCEditable .sapMTCCnt {
+	opacity : 1;
+}
+
+.sapMTC .sapMTCCnt.sapMTCAnim {
+	-webkit-transition-property: -webkit-transform3d;
+	-webkit-transition-duration: 0.4s;
+	transition-property: transform3d;
+	transition-duration: 0.4s;
+}
+
+.sapMTC .sapMTCPager {
+	position: absolute;
+	bottom: 0;
+	box-sizing: border-box;
+	width: 100%;
+	height: 1.875rem;
+	padding: 0.313rem;
+	text-align: center;
+}
+
+.sapMTC .sapMTCPager SPAN {
+	display: inline-block;
+	background-color : @sapUiContentForegroundColor;
+	border-radius: 0.25rem;
+	height: 0.5rem;
+	width: 0.5rem;
+	margin-right: 0.5rem;
+	margin-bottom: 1px;
+	cursor: default;
+}
+
+.sapMTC .sapMTCBlind {
+	background-color: @sapUiGroupContentBackground;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	display:none;
+	box-shadow: @sapUiShadowLevel1;
+}
+
+.sapMTC .sapMTCPager SPAN.sapMTCActive {
+	background-color: @sapUiContentNonInteractiveIconColor;
+}
+
+.sapMTC .sapMTCScroller {
+	position: absolute;
+	display: none;
+	top: 41%;
+	border-radius: 50%;
+	background-color: @sapUiButtonBackground;
+	height: 3rem;
+	width: 3rem;
+	opacity: 0;
+	cursor: default;
+	-webkit-transition-property: opacity, left, right;
+	-webkit-transition-duration: 0.4s;
+	transition-property: opacity, left, right;
+	transition-duration: 0.4s;
+	box-shadow: @sapUiShadowLevel1;
+	padding: 0.25rem;
+	box-sizing: border-box;
+}
+
+.sapMTC .sapMTCScroller .sapMTCInner {
+	background-color: @sapUiButtonBackground;
+	height: 100%;
+	width: 100%;
+	border-radius: 50%;
+	font-family: "SAP-icons";
+	font-size: 1.313rem;
+	vertical-align: middle;
+	color: @sapUiButtonIconColor;
+	padding-top: 0.5rem;
+	box-sizing: border-box;
+}
+
+.sapMTC:hover .sapMTCScroller {
+	opacity: 0.1;
+}
+
+.sapMTC:hover .sapMTCScroller:hover {
+	opacity: 1;
+}
+
+.sapMTC .sapMTCScroller.sapMTCLeft {
+	left: -100px;
+}
+
+.sapMTC .sapMTCScroller.sapMTCLeft .sapMTCInner::before {
+	content: "\e067";
+	padding-left: 0.813rem;
+}
+
+.sapMTC:hover .sapMTCScroller.sapMTCLeft {
+	left: 1rem;
+}
+
+.sapMTC .sapMTCScroller.sapMTCRight {
+	right: -100px;
+}
+
+.sapMTC:hover .sapMTCScroller.sapMTCRight {
+	right: 1rem;
+}
+
+.sapMTC .sapMTCScroller.sapMTCRight .sapMTCInner::before {
+	content: "\e066";
+	padding-left: 1rem;
+}
+
+.sapMTC .sapMTile, .sapMTC .sapMCustomTile {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+html[dir=rtl] .sapMTC .sapMTile,
+html[dir=rtl] .sapMTC .sapMCustomTile{
+	left: auto;
+	right: 0px;
+}
+
+html.sap-tablet .sapMTC .sapMTCScroller,
+html.sap-phone .sapMTC .sapMTCScroller {
+	display : none;
+}
+
+.sapMTC .sapMTCRemove {
+	display: none;
+}
+
+.sapMTC.sapMTCEditable .sapMTile {
+	cursor: move;
+	box-shadow: @sapUiShadowLevel0;
+}
+
+.sapMTC.sapMTCEditable .sapMTCRemove {
+	position: absolute;
+	display: block;
+	height: 2rem;
+	width: 2rem;
+	border-radius: 50%;
+	font-family: "SAP-icons";
+	font-size: 1rem;
+	line-height: 2rem;
+	text-align: center;
+	box-sizing: border-box;
+	margin-top : -0.5rem;
+	margin-left : -0.5rem;
+	z-index: 1;
+	cursor: default;
+	background-color: @sapUiButtonBackground;
+	border: 1px solid @sapUiButtonBorderColor;
+	color: @sapUiButtonIconColor;
+}
+
+html[data-sap-ui-browser^="ff"] .sapMTC.sapMTCEditable .sapMTile .sapMTCRemove {
+	width: 2rem;
+}
+
+.sapMTC.sapMTCEditable .sapMTile .sapMTCNoRemove {
+	height: 1.5rem;
+	width: 1.563rem;
+	margin-top : -0.5em;
+	margin-left : -0.5em;
+	z-index: 1;
+	visibility: hidden;
+}
+
+.sapMTC.sapMTCEditable .sapMTCRemove:hover {
+	background-color: @sapUiButtonHoverBackground;
+}
+
+.sapMTC.sapMTCEditable .sapMTCRemove:active {
+	background-color: @sapUiButtonActiveBackground;
+	color: @sapUiButtonActiveTextColor;
+}
+
+.sapMTC.sapMTCEditable .sapMTCRemove::before {
+	content: "\e03e";
+}
+
+/* use dir-specific rules to prevent mirroring in dir=rtl mode */
+.sapMTC .sapMTCEdgeRight,
+html[dir=rtl] .sapMTC .sapMTCEdgeLeft {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 2.5rem;
+	height: 100%;
+	border-right: 0.125rem solid fade(lighten(@sapUiHighlight,20),60);
+	opacity: 0.01;
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(76%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 76%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 76%,rgba(255,255,255,1) 100%); /* W3C */
+}
+
+/* use dir-specific rules to prevent mirroring in dir=rtl mode */
+.sapMTC .sapMTCEdgeLeft,
+html[dir=rtl] .sapMTC .sapMTCEdgeRight {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 2.5rem;
+	height: 100%;
+	border-left: 0.125rem solid fade(lighten(@sapUiHighlight,20),60);
+	opacity: 0.01;
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(24%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 24%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 24%,rgba(255,255,255,0) 100%); /* W3C */
+}
+
+html.sap-phone .sapMTC .sapMTCEdgeLeft,
+html.sap-phone .sapMTC .sapMTCEdgeRight {
+	width: 1.25rem;
+}