@openui5/themelib_sap_belize 1.124.2 → 1.126.0

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

@@ -0,0 +1,138 @@
+/* ======================================= */
+/* CSS for control sap.m/RadioButtonGroup  */
+/* Base theme                              */
+/* ======================================= */
+
+@_sap_m_RadioButtonGroup_WidthWithLabel: 3rem;
+@_sap_m_RadioButtonGroup_PaddingLeftLabel: 3rem;
+@_sap_m_RadioButtonGroup_PaddingLeftLabel_Form: 2.3rem;
+
+.sapMRbG{
+	display: inline-block;
+}
+
+.sapMRbG:focus {
+	outline: none;
+}
+
+.sapMRbGTab{
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+}
+
+.sapMRbGCol{
+	vertical-align: top;
+	min-width: 10px;
+	margin-right: 0;
+	overflow: hidden; /* needed in Safari */
+}
+
+.sapMRbG > .sapMRb,
+.sapMRbGCol > .sapMRb{
+	float: left;
+	clear: left;
+	text-overflow: ellipsis;
+}
+
+.sapMRbG.sapMRbG1Row > .sapMRb{
+	clear: none;
+}
+
+.sapMRbGCol > .sapMRb{
+	width: 100%;
+	outline-offset: -1px;
+}
+
+.sapMRbG .sapMRbB {
+	position: absolute;
+	left: 0;
+}
+
+.sapMRbG  .sapMRbHasLabel .sapMRbB {
+	width: @_sap_m_RadioButtonGroup_WidthWithLabel;
+}
+
+.sapMRbG .sapMRbBLabel {
+	margin-left: 0;
+	padding-left: @_sap_m_RadioButtonGroup_PaddingLeftLabel;
+	display: inline-block;
+}
+
+.sapMRbG .sapMRbHasLabel .sapMRbBOut {
+	margin: 0.8125rem;
+}
+
+/* Right to left */
+.sapMRbG[dir=rtl] .sapMRbB {
+	right: 0;
+}
+
+.sapMRbG[dir=rtl] .sapMRbBLabel {
+	padding-left: 0.125rem;
+	padding-right: 2.75rem;
+}
+
+/* Align RadioButton in Form with other controls */
+.sapUiForm.sapUiFormEdit-CTX{
+	.sapMRbG{
+		.sapMRbBLabel {
+			padding-left: @_sap_m_RadioButtonGroup_PaddingLeftLabel_Form;
+		}
+
+		.sapMRbGCol{
+			padding-left: 0.5rem; // to align to spaced between Form cells
+		}
+
+		.sapMRbGCol:first-child{
+			padding-left: 0;
+		}
+	}
+
+	.sapMRbG[dir=rtl] .sapMRbBLabel {
+		padding-left: 0;
+		padding-right: @_sap_m_RadioButtonGroup_PaddingLeftLabel_Form;
+	}
+
+	.sapMRbG.sapMRbG1Row{
+		.sapMRb{
+			padding-left: 0;
+			margin-left: 0.5rem; // to align to spaced between Form cells
+		}
+
+		.sapMRb:first-child{
+			margin-left: 0;
+		}
+	}
+}
+
+/* Compact Size */
+.sapUiSizeCompact {
+	.sapMRbG .sapMRbHasLabel .sapMRbB {
+		width: 2rem;
+	}
+
+	.sapMRbG .sapMRbHasLabel .sapMRbBOut {
+		margin: 0.5rem;
+	}
+
+	.sapMRbG .sapMRbBLabel {
+		padding-left: 2rem;
+	}
+
+	.sapMRbG[dir=rtl] .sapMRbBLabel {
+		padding-left: 0.125rem;
+		padding-right: 2rem;
+	}
+
+	.sapUiForm.sapUiFormEdit-CTX{
+		.sapMRbG .sapMRbBLabel {
+			padding-left: 1.625rem;
+		}
+
+		.sapMRbG[dir=rtl] .sapMRbBLabel {
+			padding-left: 0;
+			padding-right: 1.625rem;
+		}
+	}
+}

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

@@ -0,0 +1,69 @@
+/* ================================== */
+/* CSS for control sap.m/RangeSlider  */
+/* Base theme                         */
+/* ================================== */
+
+.sapMSliderProgress {
+  width: auto;
+}
+
+.sapMSliderProgress:focus {
+  outline: none;
+}
+
+html.sap-desktop .sapMSliderProgress:focus:before {
+  border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  pointer-events: none;
+}
+
+//----- RangeSlider Labels------------
+.sapMSliderLabels {
+  margin: 0.875rem -0.875rem 0 -0.875rem;
+  height: 1rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin-left: -1.0625rem;
+  margin-right: -1.406rem;
+}
+
+.sapMSliderRangeLabel {
+  display: block;
+  width: 1.75rem;
+  font-size: 0.75rem;
+  align-self: flex-end;
+  text-align: center;
+  direction: ltr;
+}
+
+/* overlap */
+.sapMSliderHandle.sapMSliderHandleOverlap {
+  background-color: @sapUiFieldActiveBorderColor;
+  border: @sapUiFieldActiveBorderColor;
+}
+
+/* pressed */
+.sapMSliderInner > .sapMSliderHandle.sapMSliderHandlePressed {
+  background: @sapUiHighlight;
+  border: 0.125rem solid @sapUiFieldActiveBorderColor;
+}
+
+
+/* ============ */
+/* compact size */
+/* ============ */
+.sapUiSizeCompact {
+  .sapMSliderLabels {
+    margin: 0.5rem -0.6875rem 0 -0.6875rem;
+  }
+
+  .sapMSliderRangeLabel {
+    width: 1.375rem;
+  }
+}

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

@@ -0,0 +1,201 @@
+/* ====================================== */
+/* CSS for control sap.m/RatingIndicator  */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMRI {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	vertical-align: top;
+	padding: 0;
+	margin: 0.8125rem 0;
+}
+
+.sapUiSizeCompact .sapMRI {
+	margin: 0.5rem 0;
+}
+
+html.sap-phone .sapMRI:focus,
+html.sap-tablet .sapMRI:focus {
+	outline: none;
+}
+
+.sapMRISelector {
+	position: absolute;
+	background: transparent;
+	width: 100%;
+	height: 100%;
+}
+
+.sapMRISel {
+	float: left;
+	display: block;
+	overflow: hidden;
+	padding:0;
+	margin:0;
+	color: @sapUiAccent1;
+	word-wrap: normal;
+	white-space: nowrap;
+}
+
+.sapMRIUnsel {
+	position: relative;
+	float: right;
+	color: darken(@sapUiContentForegroundColor, 25);
+	word-wrap: normal;
+	white-space: nowrap;
+}
+
+.sapMRIUnselWrapper {
+	float: right;
+	overflow: hidden;
+}
+
+.sapMRIHov {
+	float: left;
+	display: none;
+	overflow: hidden;
+	word-wrap: normal;
+	white-space: nowrap;
+	color: darken(@sapUiAccent1, 5);
+}
+
+.sapMRIIconSel, .sapMRIIconUnsel, .sapMRIIconHov, .sapMRIIconReadOnly {
+    font-family: SAP-icons;
+}
+
+.sapMListTblCell > .sapMRI {
+  margin: 0;
+}
+
+.sapUiSizeCondensed .sapUiTableDataCell > .sapUiTableCellInner > .sapMRI {
+	box-sizing: content-box;
+	padding: 0;
+	margin: 0 0.5rem;
+}
+
+.sapUiRatingIndicatorXS .sapMRI .sapUiIcon,
+.sapUiRatingIndicatorXS .sapMRI .sapMImg {
+	padding-right: @sapUiRIIconPaddingXS;
+	vertical-align:top;
+}
+	.sapUiRatingIndicatorS .sapMRI .sapUiIcon,
+	.sapUiRatingIndicatorS .sapMRI .sapMImg {
+		padding-right: @sapUiRIIconPaddingS;
+		vertical-align:top;
+	}
+
+	.sapUiRatingIndicatorM .sapMRI .sapUiIcon,
+	.sapUiRatingIndicatorM .sapMRI .sapMImg {
+		padding-right: @sapUiRIIconPaddingM;
+		vertical-align:top;
+	}
+
+	.sapUiRatingIndicatorL .sapMRI .sapUiIcon,
+	.sapUiRatingIndicatorL .sapMRI .sapMImg {
+		padding-right: @sapUiRIIconPaddingL;
+		vertical-align:top;
+	}
+
+.sapMRI.sapUiRatingIndicatorXS .sapUiIcon:last-child,
+.sapMRI.sapUiRatingIndicatorXS .sapMImg:last-child,
+.sapMRI.sapUiRatingIndicatorS  .sapUiIcon:last-child,
+.sapMRI.sapUiRatingIndicatorS .sapMImg:last-child,
+.sapMRI.sapUiRatingIndicatorM .sapUiIcon:last-child,
+.sapMRI.sapUiRatingIndicatorM .sapMImg:last-child,
+.sapMRI.sapUiRatingIndicatorL .sapUiIcon:last-child,
+.sapMRI.sapUiRatingIndicatorL .sapMImg:last-child {
+	padding-right: 0;
+}
+
+.sapMRIIcon { /* required for size calculation */
+	height: 1.375rem; /* default size */
+	overflow: hidden;
+}
+
+.sapMRIDisabled {
+	outline: none;
+	cursor: default;
+}
+
+.sapMRIDisplayOnly {
+	outline: none;
+	cursor: default;
+	margin: 0;
+}
+
+.sapMRI .sapUiIcon,
+.sapMRI .sapMImg {
+	padding-right: 0.25rem;
+}
+
+.sapMRI .sapUiIcon:last-child,
+.sapMRI .sapMImg:last-child {
+	padding-right: 0;
+}
+
+/* Compact mode */
+.sapUiSizeCompact {
+	.sapMRI {
+		margin: 0.5rem 0;
+
+		&.sapMRIDisplayOnly {
+			margin: 0;
+		}
+	}
+	.sapMRIIcon {
+		height: 1rem; /* default size for the compact mode */
+	}
+}
+/* Condensed mode */
+.sapUiSizeCondensed .sapUiTableDataCell .sapMRI .sapUiIcon,
+.sapUiSizeCondensed .sapUiTableDataCell .sapMRI .sapMImg{
+	vertical-align: top;
+}
+
+.sapUiSizeCondensed .sapMRI .sapUiIcon,
+.sapUiSizeCondensed .sapMRI .sapMImg{
+	padding-right: 0;
+}
+
+.sapMRI.sapUiRatingIndicatorXS {
+	.sapUiIcon, .sapMImg {
+		padding-right: @sapUiRIIconPaddingXS;
+		vertical-align: top;
+	}
+}
+
+.sapMRI.sapUiRatingIndicatorS {
+	.sapUiIcon, .sapMImg {
+		padding-right: @sapUiRIIconPaddingS;
+		vertical-align: top;
+	}
+}
+
+.sapMRI.sapUiRatingIndicatorM {
+	.sapUiIcon, .sapMImg {
+		padding-right: @sapUiRIIconPaddingM;
+		vertical-align: top;
+	}
+}
+
+.sapMRI.sapUiRatingIndicatorL {
+	.sapUiIcon, .sapMImg {
+		padding-right: @sapUiRIIconPaddingL;
+		vertical-align: top;
+	}
+}
+
+.sapMRI.sapUiRatingIndicatorXS, .sapMRI.sapUiRatingIndicatorS, .sapMRI.sapUiRatingIndicatorM,
+.sapMRI.sapUiRatingIndicatorL {
+	.sapUiIcon:last-child, .sapMImg:last-child {
+		padding-right: 0;
+	}
+}
+
+.sapMRI.sapMRIDisplayOnly {
+	.sapMRIIconSel {
+		color: @sapUiBaseText;
+	}
+}

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

@@ -0,0 +1,45 @@
+/* ====================================== */
+/* CSS for control sap.m/ScrollBar  */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMScrollBarTouch {
+	-webkit-overflow-scrolling: auto;
+}
+
+.sapMScrollBarTouch ::-webkit-scrollbar {
+	height: 7px;
+	width: 7px;
+	-webkit-appearance: none;
+}
+
+.sapMScrollBarTouch ::-webkit-scrollbar-thumb {
+	background-color: rgba(0,0,0,.5);
+	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+.sapMScrollBarOuterDiv {
+	overflow: hidden;
+	height: 100%;
+	right: 0;
+	position: absolute;
+	z-index: 100;
+}
+
+html.sap-desktop.sapUiNativeScrollbars .sapMScrollBarOuterDiv {
+	display: none;
+}
+
+.sapMScrollBarInnerDiv {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	height: 100%;
+}
+
+.sapMScrollBarDistantSpan {
+	position: absolute;
+	top: -9000px;
+	left: -9000px;
+	visibility: hidden;
+	line-height: normal;
+}

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

@@ -0,0 +1,22 @@
+/* ====================================== */
+/* CSS for control sap.m/ScrollContainer  */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMScrollCont {
+	overflow: hidden;
+	position: relative; /* to make the iScroll scrollbars appear at the correct position, if enabled */
+	outline: none;
+}
+
+.sapMScrollContV .sapMScrollContScroll {
+	display: block; /* when there is only vertical scrolling, the whole available width should be consumed */
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
+.sapUiContainerContentPadding(~".sapMScrollCont", ~"> .sapMScrollContScroll");
+
+.sapMScrollCont:focus {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: 0.0625rem;
+}

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

@@ -0,0 +1,243 @@
+/* ================================== */
+/* CSS for control sap.m/SearchField  */
+/* Base theme                         */
+/* ================================== */
+
+@_sap_m_SearchField_Height: 3rem;
+@_sap_m_SearchField_ButtonSize: 2.375rem;
+@_sap_m_SearchField_ButtonFontSize: 1.125rem;
+@_sap_m_SearchField_CompactButtonLineHeight: 1.5rem;
+@_sap_m_SearchField_Compact_FormPaddingLeft: 0.375rem;
+@_sap_m_SearchField_ResetIcon: "\e1c7";
+@_sap_m_SearchField_SearchIcon: "\e00d";
+@_sap_m_SearchField_PlaceholderColor: @sapUiFieldPlaceholderTextColor;
+@_sap_m_SearchField_Border: @sapUiFieldBorderWidth @sapUiFieldBorderStyle @sapUiFieldBorderColor;
+@_sap_m_SearchField_FocusOffset: 1px;
+@_sap_m_SearchField_FocusBorderRadius: unset;
+@_sap_m_SearchField_PlaceholderFontStyle: italic;
+@_sap_m_SearchField_ActiveBackgroundStyle: @sapUiFieldFocusBackground;
+
+.sapMSF {
+	position: relative;
+	-moz-user-modify: read-only;
+	-webkit-user-modify: read-only;
+	-webkit-user-select: none;
+	user-select: none;
+	box-sizing: border-box;
+	width: 100%;
+	min-width: 7rem;
+	height: @_sap_m_SearchField_Height;
+	background: transparent;
+	padding: 0.25rem 0;
+}
+
+.sapUiUfdShellHead .sapMSF {
+	padding: 0;
+}
+
+.sapUiSizeCompact .sapUiUfdShellHead .sapMSF {
+	padding: 0.25rem 0;
+}
+
+html.sap-desktop .sapMFocus > .sapMSFF::before {
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiFieldActiveBorderColor;
+	position: absolute;
+	content: " ";
+	top: @_sap_m_SearchField_FocusOffset;
+	right: @_sap_m_SearchField_FocusOffset;
+	left: @_sap_m_SearchField_FocusOffset;
+	bottom: @_sap_m_SearchField_FocusOffset;
+	border-radius: @_sap_m_SearchField_FocusBorderRadius;
+	z-index: 2;
+	pointer-events: none;
+}
+
+.sapMSFI[type="search"] {
+	font-size: 0.88em;
+	-webkit-appearance:none;
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.sapMSFI[type="search"]::-webkit-search-decoration,
+.sapMSFI[type="search"]::-webkit-search-results-decoration,
+.sapMSFI[type="search"]::-webkit-search-results-button {
+	-webkit-appearance: none;
+}
+
+.sapMSFI[type="search"]:focus {
+	-webkit-appearance: none;
+}
+
+input.sapMSFI[type="search"]:focus {
+	outline: none;
+	outline-width: 0;
+}
+
+.sapMSFR {
+	visibility: hidden;
+	background: transparent;
+}
+
+.sapMSplitContainerMaster .sapMSF {
+	padding-right: 1px;
+}
+
+.sapMSFF {
+	display: flex;
+	box-sizing: border-box;
+	height: @sapUiElementHeight;
+	box-shadow: @sapUiFieldShadow;
+	border: @_sap_m_SearchField_Border;
+	background: @sapUiFieldBackgroundStyle;
+	background-color: @sapUiFieldBackground;
+	vertical-align: top;
+	width: 100%;
+	position: relative;
+	padding-left: 0.625rem;
+	overflow: hidden;
+}
+
+/* Block elements do not work with bar layout */
+.sapMBar .sapMSF {
+	display : inline-block;
+}
+
+.sapMFocus>.sapMSFF {
+	border-color: @sapUiFieldFocusBorderColor;
+}
+
+:not(.sapMSFDisabled) > .sapMSFF:hover {
+	border-color: @sapUiFieldHoverBorderColor;
+	box-shadow: @sapUiFieldHoverShadow;
+}
+
+:not(.sapMSFDisabled) > .sapMSFF:active {
+	background: @_sap_m_SearchField_ActiveBackgroundStyle;
+}
+
+.sapMSFI {
+	color: @sapUiFieldTextColor;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	background: transparent;
+	height: 100%;
+	border: none;
+	outline: none;
+	padding: 0;
+	margin: 0;
+	text-indent: 0.125rem;
+	vertical-align: top;
+	text-overflow: ellipsis;
+	flex: 1;
+}
+
+.sapMSFI[type='search']{
+	font-size: 0.875rem;
+}
+
+/* remove clear x button in webkit */
+.sapMSFI[type="search"]::-webkit-search-cancel-button{
+	-webkit-appearance: none;
+	display: none;
+}
+
+.sapMSFB {
+	width: @_sap_m_SearchField_ButtonSize;
+	height: 100%;
+	line-height: @_sap_m_SearchField_ButtonSize;
+	font-size: @_sap_m_SearchField_ButtonFontSize;
+	color: @sapUiContentIconColor;
+	text-align: center;
+	cursor: pointer;
+	padding:0;
+	box-sizing: border-box;
+}
+
+.sapMSFB::after {
+	speak: none;
+	font-weight: normal;
+	font-family: 'SAP-icons';
+	-webkit-font-smoothing: antialiased;
+}
+
+.sapMSFR::after {
+	content: @_sap_m_SearchField_ResetIcon;
+}
+
+.sapMSFVal > .sapMSFF .sapMSFR,
+:not(.sapMSFVal):not(.sapMFocus) > .sapMSFReload .sapMSFR {
+	visibility: visible;
+}
+
+/* search icon in place of the reset button */
+:not(.sapMSFVal) > .sapMSFReload .sapMSFR::after {
+	content: @_sap_m_SearchField_SearchIcon;
+}
+
+/* search button */
+.sapMSFS::after {
+	content: @_sap_m_SearchField_SearchIcon;
+}
+
+/* refresh icon in some cases */
+:not(.sapMFocus) > .sapMSFReload .sapMSFS::after {
+	content: "\e010";
+}
+
+/*grouping is not allowed here*/
+.sapMSFI::-webkit-input-placeholder {
+	color: @_sap_m_SearchField_PlaceholderColor;
+	font-size: @sapMFontMediumSize;
+	font-style: @_sap_m_SearchField_PlaceholderFontStyle;
+}
+
+.sapMSFI::-moz-placeholder {
+	color: @_sap_m_SearchField_PlaceholderColor;
+	font-size: @sapMFontMediumSize;
+	font-style: @_sap_m_SearchField_PlaceholderFontStyle;
+	opacity: 1; // in FF by default the opacity is 60%
+}
+
+.sapMSF.sapMSFDisabled form,
+.sapMSF:not(.sapMSFVal) form.sapMSFNS:not(.sapMSFReload) {
+	padding-right: 0.625rem;
+}
+
+/*Static search icon, needed for the Search Field in the Tool Header*/
+.sapMSFSSI {
+	display: none;
+}
+
+/* Suggestion Item Description */
+.sapMSFSItemDescr {
+	padding-inline-start: 0.5rem;
+}
+
+/* Compact size */
+.sapUiSizeCompact {
+
+	.sapMSF {
+		height: 2rem;
+		padding: 0.1875rem 0;
+		min-width: 6rem;
+	}
+
+	.sapMSFF {
+		height: @sapUiElementCompactHeight;
+		padding-left: @_sap_m_SearchField_Compact_FormPaddingLeft;
+	}
+
+	.sapMSFB {
+		width: 2rem;
+		font-size: 1rem;
+		text-align: center;
+		padding:0;
+		line-height: @_sap_m_SearchField_CompactButtonLineHeight;
+	}
+
+	.sapMSF.sapMSFDisabled form,
+	.sapMSF:not(.sapMSFVal) form.sapMSFNS:not(.sapMSFReload) {
+		padding-right: @_sap_m_SearchField_Compact_FormPaddingLeft;
+	}
+}