@openui5/themelib_sap_belize 1.124.0 → 1.125.0

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

@@ -0,0 +1,165 @@
+/* ================================== */
+/* CSS for control sap.m/FacetFilter  */
+/* Base theme                         */
+/* ================================== */
+
+.sapMFF > .sapMTB-Info-CTX.sapMTB,
+.sapUiSizeCompact .sapMFF {
+	height: 2rem;
+}
+
+.sapUiSizeCompact .sapMFFArrowScroll {
+	padding: 0.5rem 0.4rem;
+}
+
+.sapUiSizeCompact .sapMFF .sapMFFLRemoveIcon {
+	line-height: 0.8rem;
+	padding: 0.6rem;
+}
+
+.sapMFF {
+	position: relative;
+}
+
+.sapMFFHead {
+	margin-left: 0rem;
+	white-space: nowrap;
+	position: relative;
+	overflow: hidden;
+}
+
+.sapMFF .sapUiIcon,
+.sapMFF .sapMTB .sapMBtnIcon .sapUiIcon {
+	/* Override the default button icon size since it is too big. */
+	font-size: 1rem;
+}
+
+html.sap-phone .sapMFFHead {
+	margin: 1rem;
+}
+
+/* Scroll arrows */
+html.sap-desktop .sapMFFScrolling > .sapMFFHead {
+	margin-right: 2rem;
+	margin-left: 3rem;
+}
+
+.sapMFFArrowScroll {
+	font-size: 1rem;
+	line-height: 1rem;
+	position: absolute;
+	top: 0;
+	color: @sapUiContentIconColor;
+	padding: 1rem 0.4rem;
+}
+
+.sapMFFArrowScrollLeft {
+	left: 1rem;
+}
+
+.sapMFFArrowScrollRight {
+	right: 0;
+}
+
+.sapMFFNoScrolling > .sapMFFArrowScroll {
+	visibility: hidden;
+}
+
+html.sap-desktop .sapMFFScrolling.sapMFFNoScrollBack > .sapMFFArrowScrollLeft,
+html.sap-desktop .sapMFFScrolling.sapMFFNoScrollForward > .sapMFFArrowScrollRight {
+	visibility: hidden;
+}
+
+/* Reset button */
+.sapMFFResetDiv {
+	position: absolute;
+	width: 3rem;
+	right: -3rem;
+	top: 0;
+}
+
+.sapMFFResetSpacer {
+	/* Space reserved at the end of the FacetFilter for placing the reset button */
+	margin-right: 2.75rem;
+	margin-left: 1rem;
+}
+
+.sapUiSizeCompact {
+	.sapMFFResetSpacer {
+		/* Space reserved at the end of the FacetFilter for placing the reset button */
+		margin-right: 2.5rem;
+		margin-left: 1rem;
+	}
+}
+
+.sapMFF .sapMTB-Info-CTX .sapMBtnIcon .sapUiIcon {
+	color: @sapUiContentContrastIconColor;
+}
+
+/* Move the reset button to the end of the toolbar */
+.sapMFF .sapMTB-Info-CTX.sapMTB > .sapMBarChild.sapMBtn {
+    margin: 0;
+}
+
+.sapMFF .sapMTB-Info-CTX.sapMTB {
+    padding-right: 0;
+}
+
+
+.sapMFF .sapMTB-Info-CTX.sapMTB > .sapMBtn:hover {
+    background-color: @sapUiInfobarHoverBackground;
+}
+
+html.sap-desktop .sapMFFRefresh.sapMBtn:focus > .sapMFocusable {
+	outline-color: @sapUiContentContrastFocusColor;
+}
+
+html.sap-desktop .sapMFF > .sapMTB-Info-CTX.sapMTB > .sapMFFRefresh.sapMBtn:focus .sapMBtnFocusDiv {
+	border-color: @sapUiContentContrastFocusColor;
+}
+
+.sapMFF .sapMTB-Info-CTX.sapMTB > .sapMBtn:active {
+    background-color: @sapUiInfobarActiveBackground;
+}
+
+.sapMFFCheckbar {
+	cursor: pointer
+}
+
+.sapMFFDialog .sapMCbLabel {
+	cursor: pointer
+}
+
+.sapMFF .sapMFFArrowScroll:hover {
+	background-color: @sapUiButtonLiteHoverBackground;
+}
+
+.sapMFF .sapMFFArrowScroll:active {
+	background-color: @sapUiButtonLiteActiveBackground;
+	color: @sapUiContentContrastIconColor;
+}
+
+/* specific selector for the light facet filter text to use padding instead of margin,
+  otherwise the text gets cut off in Arabic because of the italic font
+*/
+.sapMFF > .sapMIBar.sapMTB.sapMTB-Info-CTX {
+	padding-right: 0.5rem;
+	padding-left: 0.75rem;
+	.sapMText {
+		padding: 0.5rem 0.5rem 0.5rem 0;
+	}
+}
+
+.sapMFFDialog,
+.sapMFFPop .sapMPopoverSubHeader {
+	.sapMFFCheckbar .sapMBarLeft {
+		padding-left: 0.1875rem;
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMFFDialog .sapMFFCheckbar .sapMBarLeft,
+	.sapMFFPop .sapMPopoverSubHeader .sapMFFCheckbar .sapMBarLeft {
+		padding-left: 0.5rem;
+	}
+}

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

@@ -0,0 +1,43 @@
+/* ====================================== */
+/* CSS for control sap.m/FacetFilterItem  */
+/* Base theme                             */
+/* ====================================== */
+
+/*
+	Fix alignment of the list item counter and force a min height.
+*/
+.sapMFFLI {
+	display: -webkit-box;
+	display: flex;
+	min-height: 3rem;
+}
+
+/*
+	Fix alignment of the list item counter.
+*/
+.sapMFFLI > .sapMLIBContent {
+	text-overflow: ellipsis;
+	-webkit-box-align: center;
+	align-items: center;
+}
+
+.sapMFFLITitle {
+	font-size: @sapMFontLargeSize;
+	color: @sapUiListTextColor;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sapMFFLITitleWrap {
+	word-wrap: break-word;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-box-flex: 1;
+	flex: auto;
+	-webkit-box-align: center;
+	align-items: center;
+}
+
+.sapUiSizeCompact .sapMFFLITitle{
+	font-size: @sapMFontMediumSize;
+}

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

@@ -0,0 +1,61 @@
+/* ====================================== */
+/* CSS for control sap.m/FacetFilterList  */
+/* Base theme                             */
+/* ====================================== */
+
+/* Facet Filter Popover */
+.sapMFFPop.sapMPopover,
+.sapMFFPop.sapMPopover .sapMPopoverCont {
+	min-width: 300px;
+}
+
+.sapMFFPop .sapMCbLabel {
+	cursor: pointer
+}
+
+.sapMFF .sapMFFLRemoveIcon {
+	color: @sapUiButtonIconColor;
+	font-size: 0.875rem;
+	line-height: 2rem;
+	padding-bottom: 0.25rem;
+	padding-top: 0.25rem;
+	padding-left: 0.65rem;
+	padding-right: 0.65rem;
+	margin-top: 0.2rem;
+	margin-bottom: 0.2rem;
+}
+
+.sapMFF .sapMFFLRemoveIcon:hover {
+	background-color: @sapUiButtonLiteHoverBackground;
+	border-radius: 0.2rem;
+}
+
+.sapUiSizeCompact .sapMFF .sapMFFLRemoveIcon {
+	line-height: 1.5rem;
+	padding-bottom: 0.05rem;
+	padding-top: 0.05rem;
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+}
+
+
+/*
+We need to toggle separate classes to show/hide the remove icon, otherwise
+clicking the icon does not remove the facet button in ie9
+*/
+.sapMFF .sapMFFLVisibleRemoveIcon {
+	visibility: visible;
+}
+
+.sapMFF .sapMFFLHiddenRemoveIcon {
+	visibility: hidden;
+}
+
+.sapMFF .sapMFFLRemoveIcon:hover {
+	background-color: @sapUiButtonLiteHoverBackground;
+}
+
+.sapMFF .sapMFFLRemoveIcon:active {
+	background-color: @sapUiButtonLiteActiveBackground;
+	color: @sapUiContentContrastIconColor;
+}

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

@@ -0,0 +1,119 @@
+/* ================================== */
+/* CSS for control sap.m/FeedContent  */
+/* Base theme                         */
+/* ================================== */
+
+.sapMFC {
+	outline: none;
+	position: relative;
+	width: 100%;
+	height: 3.875rem;
+	display: inline-block;
+}
+
+.sapMFCCTxt {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	height: 2.126rem;
+	max-width: 20.5rem;
+	margin-top: 0.3rem;
+
+	.sapMText {
+		display: inline;
+		line-height: 1.063rem;
+	}
+}
+
+.sapMFCSbh {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 20.5rem;
+	line-height: 1.063rem;
+	font-size: @sapMFontSmallSize;
+	color: @sapUiTileTextColor;
+}
+
+.sapMFCValue {
+	position: relative;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding-left: 1rem;
+	padding-top: 0.875rem;
+	font-size: 2.25rem;
+	line-height: 3rem;
+	max-width: 10.25rem;
+	min-width: 3rem;
+	float: right;
+	font-family: @sapUiFontHeaderFamily;
+	font-weight: @sapUiFontHeaderWeight;
+}
+
+.sapMFCCTxt > .sapMText {
+	cursor:inherit;
+}
+
+.sapMFC:focus:not([tabindex]) {
+	outline: none;
+}
+
+.sapMFCCTxt .sapMText {
+	font-size: @sapFontSize;
+	color: @sapUiTileTitleTextColor;
+}
+
+.sapMGT.TwoByOne.sapMTileSmallPhone{
+	.sapMFCCTxt .sapMText {
+		font-size: @sapFontSmallSize;
+	}
+}
+
+.sapMFCValue.Neutral {
+	color: @sapUiNeutralText;
+}
+
+.sapMFCValue.Good {
+	color: @sapUiPositiveText;
+}
+
+.sapMFCValue.Critical {
+	color: @sapUiCriticalText;
+}
+
+.sapMFCValue.Error {
+	color: @sapUiNegativeText;
+}
+
+html.sap-desktop .sapMFC:focus {
+	outline: 1px dotted @sapUiContentFocusColor;
+}
+
+html.sap-desktop .sapMFC:focus:not([tabindex]) {
+	outline: none;
+}
+
+.sapMTileSmallPhone {
+	.sapMFC {
+		width: 17.75rem;
+		height: 3.438rem;
+	}
+
+	.sapMFCCTxt {
+		max-width: 17.75rem;
+		margin-top: 0.1rem;
+	}
+
+	.sapMFCSbh {
+		max-width: 17.75rem;
+	}
+
+	.sapMFCValue {
+		padding-top: 1.188rem;
+		padding-left: 0.4rem;
+		font-size: 2rem;
+		line-height: 2.25rem;
+		max-width: 8.25rem;
+		min-width: 2.5rem
+	}
+}

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

@@ -0,0 +1,212 @@
+/* ================================ */
+/* CSS for control sap.m/FeedInput  */
+/* Base theme                       */
+/* ================================ */
+
+.sapMFeedInBase {
+		display: block;
+		position: relative;
+		height: auto;
+		width: 100%;
+		box-sizing: border-box;
+}
+
+.sapMFeedIn {
+		display: block;
+		position: relative;
+		padding: 0.5rem 0.5rem 0.5rem 5rem;
+		width: 100%;
+		box-sizing: border-box;
+}
+
+.sapMFeedIn.sapMFeedInDisabled {
+    	opacity: 0.5;
+}
+
+/*hide the icon if the width of the screen <=25rem */
+@media (max-width: 25rem) {
+    .sapMFeedInFigure {
+        display: none;
+    }
+
+    .sapMFeedIn {
+        padding-left: 0.5rem;
+    }
+}
+
+.sapMFeedInNoIcon {
+    	padding-left: 0.5rem;
+}
+
+.sapMFeedInFigure {
+		position: absolute;
+		height: 3rem;
+		width: 3rem;
+		margin: 0.5rem 1rem 0.5rem 1rem;
+		background-color: none;
+		box-sizing: border-box;
+		left: 0;
+		border-width: 0.125rem;
+		border-style: none;
+		border-color: @sapUiFieldBackground; /* the background parameter is used for to ensure the border theme is aligned with the text area background */
+}
+
+.sapMFeedInFigure .sapFAvatarSquare {
+    border-radius: @sapUiElementBorderCornerRadius;
+
+    // .sapFAvatarImageHolder {
+    //     border-radius: @sapUiElementBorderCornerRadius;
+    // }
+}
+
+.sapMFeedInFigure .sapFAvatarM {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1.125rem;
+		box-sizing: border-box;
+		border: 0.0625rem solid @sapGroup_ContentBorderColor;
+}
+
+.sapMFeedInFigure .sapFAvatarImageHolder {
+		background: none;
+		display: block;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		background-size: cover;
+}
+
+.sapMFeedInImage {
+		width: 3.75rem;
+		line-height: 3.75rem;
+		font-size: 2.25rem;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		color: @sapUiContentImagePlaceholderForegroundColor;
+}
+
+.sapMFeedInImageBgColor {
+    	background-color: @sapUiContentImagePlaceholderBackground;
+}
+
+.sapMFeedInBase .sapMFeedInCounter {
+		display: block;
+		width: 100%;
+		text-align: end;
+}
+.sapMFeedIn .sapMInputBase .sapMTextArea .sapMTextAreaInner {
+		box-sizing: border-box;
+		width: @sapField_BorderWidth; 
+		border-radius: @sapField_BorderCornerRadius;
+		font-style: italic;
+		font-weight: normal;
+		color: @sapField_PlaceholderTextColor;
+}
+
+.sapMFeedInBase .sapMFeedInCounter .sapMTextAreaCounter {
+		overflow: hidden;
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontSmallSize;
+		padding: 0.125rem;
+}
+
+.sapMFeedIn:not(.sapMFeedInDisabled) .sapMFeedInContainer {
+    	background-color: @sapGroup_ContentBackground;
+}
+
+.sapMFeedIn .sapMFeedInContainer {
+		width: 100%;
+		height: auto;
+		position: relative;
+		background-color: @sapGroup_ContentBackground;
+}
+
+.sapMFeedIn >.sapMFeedInContainer >.sapMInputBase {
+		width: 100%;
+		padding: 0 4.0rem 0 0;
+		margin: 0;
+		min-height: 4rem;
+}
+
+.sapMFeedIn >.sapMFeedInContainer > .sapMTextArea> .sapMInputBaseInner {
+		border-bottom-style: hidden;
+		border-top-style: hidden;
+		border-left-style: hidden;
+		border-right-style: hidden;
+		font-family: @sapUiFontFamily;
+		font-size: @sapMFontMediumSize;
+		font-style: normal;
+		font-weight: normal;
+		color: @sapUiFieldTextColor;
+		line-height: 1.5;
+		padding: 0.5rem 0.05rem 0.5rem 0.5rem;
+		min-height: 4rem;
+}
+
+.sapMFeedInContainer .sapMInputBaseInner {
+    	border: none;
+}
+
+.sapMFeedIn .sapMBtn {
+		width: 4.0rem;
+		height: 3.75rem;
+		padding: 0.25rem 0.625rem 0.25rem 0.625rem;
+		margin: 0.125rem 0 0.125rem 0.5rem;
+		position: absolute;
+		right: 0rem;
+		bottom: 0rem;
+		border-width: @sapButton_BorderWidth;
+		border-radius: @sapButton_BorderCornerRadius;
+		background-color:@sapGroup_ContentBackground;
+		font-size: @sapFontSize;
+		font-family: @sapFontSemiboldDuplexFamily;
+}
+
+.sapMFeedIn .sapMBtnInner {
+		width: 2.25rem;
+		height: 2.25rem;
+		padding:0;
+		border-radius: @sapButton_BorderCornerRadius;
+		background-color:@sapButton_Background;
+		border: 1px solid @sapButton_BorderColor;
+		color:@sapButton_TextColor;
+		border-width: @sapButton_BorderWidth;
+}
+
+.sapMFeedIn .sapMBtnIcon {
+		width: 2.25rem;
+		height: 2.25rem;
+}
+
+.sapMFeedIn .sapMInputBase.sapMTextArea .sapMTextAreaInner {
+		min-height: 4rem;
+		padding: 0.375rem 0.5rem;
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapMFeedIn .sapMBtnIcon {
+    	margin-left: 0;
+		padding: 0.25rem 0.625rem 0.25rem 0.625rem;
+}
+
+.sapUiSizeCompact .sapMFeedIn >.sapMFeedInContainer >.sapMInputBase {
+		margin: 0;
+		min-height: 4rem;
+}
+
+.sapMFeedIn .sapMInputBase .sapMTextArea .sapMInputBaseContentWrapper {
+    	min-height: 4rem;
+}
+.sapMFeedIn .sapMInputBase .sapMTextArea {
+		width:100%;
+		min-width:6rem;
+		min-height:2.25rem;
+		padding: 0 0.625rem;
+		margin: 0.25rem 0;
+		padding-top: 0.5rem;
+		box-sizing: border-box;
+		background-color:@sapGroup_ContentBackground;
+}