@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,113 @@
+/* ======================================================== */
+/* CSS for control sap.m/OverflowToolbarAssociativePopover  */
+/* Base theme                                               */
+/* ======================================================== */
+
+.sapMOTAPopover {
+
+  &:focus{
+	outline: none;
+  }
+
+  .sapMBtn .sapMBtnInner {
+	justify-content: flex-start;
+  }
+
+  &.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	padding: 0.25rem 0.5rem;
+
+	/* Disappear */
+	&> .sapMOTAPHidden {
+	  display: none;
+	}
+
+	/* All elements inside must have display block */
+	&> :not(.sapMOTAPHidden) {
+	  display: block;
+	}
+
+	&> .sapMTBSeparator.sapMTBSeparatorOverflowToolbar {
+		&:first-child,
+		&:last-child {
+			display: none;
+		}
+	}
+
+	/* Button, ToggleButton, OverflowToolbarButton */
+	&> button.sapMBtn {
+	  width: 100% !important;
+	  max-width: 100% !important;
+
+	  /* Button alignment */
+	  &> .sapMBtnInner {
+		text-align: start;
+	  }
+	}
+
+	/* Select */
+	&> div.sapMSlt {
+	  width: auto !important;
+	}
+
+	/* SegmentedButton - select form */
+	&> div.sapMSegBSelectWrapper {
+	  width: 100% !important;
+	  &> div.sapMSlt {
+		width: 100% !important;
+		max-width: 100% !important;
+	  }
+	}
+
+	/* ComboBox */
+	&> div.sapMComboBox {
+	  width: auto !important;
+	  max-width: auto !important;
+	}
+
+	/* SearchField */
+	&> div.sapMSF {
+	  width: 100% !important;
+	  max-width: 100% !important;
+	}
+
+	/* Input */
+	&> div.sapMInput {
+	  width: 100% !important;
+	  max-width: 100% !important;
+	}
+
+	/* DateTimeInput */
+	&> div.sapMDTI {
+	  width: 100% !important;
+	  max-width: 100% !important;
+	}
+
+	/* Menu Button */
+	&> .sapMMenuBtn {
+		max-width: 100% !important;
+	}
+  }
+}
+
+/* Compact mode overrides */
+.sapUiSizeCompact{
+
+  .sapMOTAPopover {
+
+	&.sapMPopover .sapMPopoverCont .sapMPopoverScroll {
+	  padding: 0.1875rem 0.375rem;
+	}
+
+	.sapMBtnInner.sapMBtnIconFirst:not(.sapMBtnBack) {
+	  padding-left: 0.5rem;
+	  padding-right: 0.5rem;
+	}
+  }
+}
+
+/* Phone mode overrides */
+html.sap-phone {
+	.sapMOTAPopover {
+	  overflow: hidden !important;
+	}
+}

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

@@ -0,0 +1,48 @@
+/* ======================================= */
+/* CSS for control sap.m/P13nColumnsPanel  */
+/* Base theme                              */
+/* ======================================= */
+
+.sapMP13nColumnsPanel{
+  color: @sapUiBaseText;
+}
+
+.sapMP13nColumnsPanel .sapMLIB.sapMLIBSelected,
+.sapMP13nColumnsPanel .sapMLIB.sapMLIBSelected > td {
+  background-color: transparent;
+}
+
+.sapMP13nColumnsPanel .sapMListBGTranslucent .sapMLIB.sapMListTblRow.sapMP13nColumnsPanelItemSelected,
+.sapMP13nColumnsPanel .sapMListBGTranslucent .sapMLIB.sapMListTblRow.sapMP13nColumnsPanelItemSelected:focus,
+.sapMP13nColumnsPanel .sapMListBGTranslucent .sapMLIB:not(.sapMLIBActive):not(.sapMLIBSelected):not(:hover).sapMListTblRow.sapMP13nColumnsPanelItemSelected,
+.sapMP13nColumnsPanel .sapMListBGTranslucent .sapMLIB:not(.sapMLIBActive):not(.sapMLIBSelected):not(:hover).sapMListTblRow.sapMP13nColumnsPanelItemSelected:focus
+{
+	background-color: @sapUiListSelectionBackgroundColor;
+}
+
+.sapMP13nColumnsPanel .sapMLIBActive .sapMText,
+.sapMP13nColumnsPanel .sapMLIBActive .sapMListTblCell .sapMText {
+	color: @sapUiListTextColor;
+}
+
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg,
+.sapMP13nColumnsPanel .sapMLIBActive.sapMLIB,
+.sapMP13nColumnsPanel .sapMLIBActive.sapMLIB > td {
+	background-color: transparent;
+}
+
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg,
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg.sapMCbMarkChecked,
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg.sapMCbBgDis,
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg.sapMCbBgDis.sapMCbMarkChecked {
+	border-color: @sapUiFieldBorderColor;
+}
+
+.sapMP13nColumnsPanel .sapMLIBActive .sapMCbBg.sapMCbMarkChecked::before {
+	color: @sapUiSelected;
+}
+
+html.sap-desktop .sapMP13nColumnsPanel .sapMLIBSelected:not(.sapMLIBActive):not(.sapMALI):hover,
+html.sap-desktop .sapMP13nColumnsPanel .sapMLIBSelected:not(.sapMLIBActive):not(.sapMALI):hover > td {
+	background-color: @sapUiListHoverBackground;
+}

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

@@ -0,0 +1,53 @@
+/* ========================================= */
+/* CSS for control sap.m/P13nConditionPanel  */
+/* Base theme                                */
+/* ========================================= */
+
+.sapMConditionPanel .sapUiRespGridMedia-Std-Phone .floatRight {
+	float: right;
+}
+
+.sapMConditionPanel .displayNone {
+	display: none;
+}
+
+.sapMConditionPanel .conditionRootGrid > div + div .sapUiRespGridMedia-Std-Tablet {
+	margin-top: 1rem;
+}
+
+.sapMConditionPanel .conditionRootGrid > div + div .sapUiRespGridMedia-Std-Phone {
+	margin-top: 1rem;
+}
+
+.sapMConditionPanel .conditionAddBtnFloatRight {
+	float: right;
+}
+
+.sapUiSizeCompact .sapMConditionPanel .conditionLabel {
+	margin-top: 0.5rem;
+}
+
+.sapMConditionPanel .conditionLabel {
+	margin-top: 1rem;
+}
+
+.sapMConditionPanel .sapMCb {
+	display: block;
+}
+
+.sapMConditionPanel .sapMTB {
+    border-bottom: 0px; 
+}
+
+.sapMFilterPanel .sapMPanelWrappingDivTb {
+    border-bottom: 0px;
+}
+
+.sapMFilterPanel .sapMTB  {
+    border-bottom: 0px;
+}
+
+//WORKAROUND BCP:1770523047 : set min-height back to 0px 
+.sapMConditionPanel div[class*="sapUiRespGrid"] > div[class*="sapUiRespGridSpan"] {
+	min-height: 0px;
+}

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

@@ -0,0 +1,29 @@
+/* ================================= */
+/* CSS for control sap.m/P13nDialog  */
+/* Base theme                        */
+/* ================================= */
+
+.sapMP13nDialog {
+  color: @sapUiBaseText;
+}
+
+.sapMP13nDialog .sapMITBHead {
+	margin : 0rem;
+}
+
+.sapMP13nDialog.sapMDialog > .sapMDialogSection {
+    background-color: @sapUiBaseBG;
+}
+
+.sapMP13nDialog .sapMBarLeft,
+.sapMP13nDialog.sapMDialog .sapMBarLeft {
+    padding-left: 0rem;
+}
+
+.sapMP13nDialog .sapMITH.sapMITBInLine .sapMITBHead {
+    padding-top: 1.875rem;
+}
+
+.sapUiSizeCompact .sapMP13nDialog .sapMITH.sapMITBInLine .sapMITBHead {
+    padding-top: 1.5rem;
+}

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

@@ -0,0 +1,41 @@
+/* ====================================== */
+/* CSS for control sap.m/P13nFilterPanel  */
+/* Base theme                             */
+/* ====================================== */
+
+.sapMFilterPanel .compPadding {
+	padding-left: 1rem;
+	padding-right: 1rem;
+	padding-bottom: 1rem;
+}
+
+.sapMFilterPanel .sapMPanelContent {
+	padding : 0px;
+	border-bottom-width: 0px;
+}
+
+.sapMFilterPanel .sapMPanelBGTranslucent {
+  	background-color: Transparent;
+}
+
+.sapMFilterPanel .sapUiRespGrid.sapUiRespGridVSpace1>div {
+    margin-bottom: 0px;
+    margin-left: 0px;
+}
+
+.sapMFilterPanel .sapMPanelWrappingDiv {
+ 	border-bottom: 0px;
+}
+
+.sapMFilterPanel .panelTopMargin {
+	margin-top : 1rem;
+}
+
+.sapMFilterPanel .panelNoHeader .sapMPanelHdr {
+	height : 0rem;
+	border-bottom: 0px;
+}
+
+.sapMFilterPanel .sapMPanelContent:not(.sapMPanelBGTransparent) {
+    border-bottom-width: 0px;
+}

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

@@ -0,0 +1,18 @@
+/* ==================================== */
+/* CSS for control sap.m/P13nSortPanel  */
+/* Base theme                           */
+/* ==================================== */
+
+.sapMSortPanel {
+	width: 100%;
+}
+
+.sapMSortPanelContent {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
+
+.sapMGroupPanelContent {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}

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

@@ -0,0 +1,38 @@
+
+.sapMPDFViewerLoading {
+	visibility: hidden;
+}
+
+.sapMPDFViewerWrapper {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.sapMPDFViewerContent {
+	width: 100%;
+	height: 100%;
+	border: 0 none;
+	outline: 0 none;
+}
+
+.sapMPDFViewerContent.sapMPDFViewerReducedContent {
+	height: calc(~'100% - 3.5rem');
+}
+
+.sapMPDFViewerError {
+	width: 100%;
+	height: 100%;
+    .sapMMessagePage {
+        min-height: 300px;
+    }
+}
+
+.sapMPDFViewerError.sapMPDFViewerReducedContent {
+	height: calc(~'100% - 3.5rem');
+}
+
+.sapMPDFViewerNonTrustedIllustratedMessage {
+	width: 100%;
+	height: 100%;
+}

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

@@ -0,0 +1,365 @@
+/* =========================== */
+/* CSS for control sap.m/Page  */
+/* Base theme                  */
+/* =========================== */
+
+@_sap_m_Page_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
+@_sap_m_Page_HeaderHeight: 68px; // should be 4.25rem
+@_sap_m_Page_MinHeightForHeader: (@_sap_m_Page_AppHeight + @_sap_m_Page_HeaderHeight);
+@_sap_m_Page_FloatinFooterHeight: 2.75rem;
+@_sap_m_Page_FloatinFooterHeight_Compact: 2.5rem;
+@_sap_m_Page_FloatingFooterMarginBottom: 0.5rem;
+
+.sapMPage,
+.sapMPage > section {
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.sapMPage {
+  height: 100%;
+  position: relative;
+  isolation: isolate; /* makes sure the z-index stuff for headers/footer has no effect outside the Page; only works in the very newest browsers as of 03/2015 */
+  z-index: 0; /* workaround for missing "isolation" support in most browsers; TODO: check when this can be removed */
+}
+
+.sapMPage > section {
+  position: absolute;
+  overflow-y: hidden;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.sapMPage > section.sapMPageEnableScrolling {
+	overflow-y: auto;
+	will-change: scroll-position;
+}
+
+// If there are subpages with disabled scrolling, then its content should overflow. I.e. reset overflow-y to defaults.
+.sapMPage > section.sapMPageEnableScrolling .sapMPage > section {
+	overflow-y: visible;
+}
+
+html[data-sap-ui-os^="iOS"] {
+  .sapMPage > section.sapMPageEnableScrolling {
+    overflow-y: scroll;
+  }
+}
+
+/* Fix for a ToolBar set as headerContent */
+html[data-sap-ui-browser^="ff"].sap-desktop {
+  .sapMPage > .sapMBar.sapMPageHeader .sapMBarContainer {
+    display: initial;
+  }
+
+  .sapUiSizeCompact .sapMPage > .sapMBar.sapMPageHeader .sapMBarContainer {
+    vertical-align: -moz-middle-with-baseline;
+  }
+
+  .sapMPage > .sapMTitle {
+    font-size: 1rem;
+  }
+}
+
+/*
+	* Workaround for IOS 7 - on orientation change to lanscape mode:
+	* on the Ipad the footer is cut off.
+	* on the phone, the header is cut off and if you open the nav Bar(clicking in the footer), the header will be cut off even more.
+	* setting the body to fixed seems to work. We also tried it with absolute, but it does not work (tested only on ipad).
+ */
+@media (orientation: landscape) {
+  html[data-sap-ui-os^="iOS7"][data-sap-ui-browser^="msf"] {
+    padding: 0;
+    margin: 0;
+    bottom: 0;
+  }
+
+  html[data-sap-ui-os^="iOS7"][data-sap-ui-browser^="msf"] body {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+  }
+}
+
+/* ============================================= */
+/* CSS for displaying the Footer/Header controls at the correct position */
+/* ============================================= */
+
+.sapMPageFooter {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  /* footer has to overlap the header if the page is very small (phone with open keyboard)*/
+  z-index: 2;
+  width: 100%;
+}
+
+.sapMPageFooter.sapMPageFloatingFooter {
+  left: 0;
+  right: 0;
+}
+
+.sapMPageFooter.sapUiHidden {
+  bottom: auto;
+}
+
+.sapMPageFooter .sapMTB.sapMIBar {
+  right: 0;
+  border-bottom-width: 0;
+}
+
+.sapMPageWithFloatingFooter .sapMPageFooter .sapMIBar-CTX.sapMFooter-CTX.sapMTB {
+  border-top-width: 0;
+}
+
+.sapMPageSubHeader,
+.sapMPageHeader {
+  /* header has to be on top of the Scroll container */
+  z-index: 1;
+}
+
+.sapMPage.sapMPageBusyCoversAll > .sapUiLocalBusyIndicator {
+  /* busyIndicator within page needs a z-index to render on top of header/footer */
+  z-index: 3;
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
+.sapUiContainerContentPadding(~".sapMPage", ~"> section");
+
+/* Fiori 2.0 adaptation */
+
+.sapF2CollapsedHeader > .sapMPageHeader {
+  display: none;
+}
+
+.sapMPage.sapF2CollapsedHeader > .sapMPageHeader + section, .sapMPage.sapF2CollapsedHeader > .sapMPageHeader + .sapUiHiddenPlaceholder + section {
+  top: 0em;
+}
+
+.sapMPage.sapF2CollapsedHeader > .sapMPageHeader + .sapMPageSubHeader + section {
+  top: 3rem;
+}
+
+.sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader > section {
+  top: 0rem;
+}
+
+.sapUiSizeCompact .sapF2CollapsedHeader.sapMPageWithHeader.sapMPageWithSubHeader > section {
+  top: 2rem;
+}
+
+.sapUiSizeCompact .sapF2CollapsedHeader > .sapMPageHeader .sapMIBar {
+  height: 0rem;
+}
+
+.sapMIBar .sapF2AdaptedTitle,
+.sapMIBar .sapF2AdaptedNavigation {
+  display: none;
+}
+
+/* page with footer */
+.sapMPageWithFooter > section {
+  bottom: 3rem;
+}
+
+.sapMPageWithFloatingFooter {
+  > .sapMPageFooter {
+    border-radius: 0.25rem;
+    margin: 0.5rem;
+    width: ~"calc(100% - 1rem)";
+    opacity: 0.9;
+
+    .sapMIBar {
+      border-radius: 0.25rem;
+    }
+  }
+}
+
+.sapMPageWithFloatingFooter.sapMPageWithFooter > section {
+    bottom: 0;
+	scroll-padding-bottom: ~"calc(@{_sap_m_Page_FloatinFooterHeight} +  @{_sap_m_Page_FloatingFooterMarginBottom} + 2px)";
+
+    &:after {
+        content: "";
+        display: block;
+        height: 0;
+        width: 100%;
+        margin-bottom: 4rem;
+    }
+}
+
+.sapUiSizeCompact .sapMPageWithFooter.sapMPageWithFloatingFooter > section {
+  bottom: 0;
+  scroll-padding-bottom: ~"calc(@{_sap_m_Page_FloatinFooterHeight_Compact} +  @{_sap_m_Page_FloatingFooterMarginBottom} + 2px)";
+  padding-bottom: 3.5rem;
+}
+
+html[data-sap-ui-animation='on'] .sapMPageWithFloatingFooter {
+  .sapMPageFooterControlShow {
+    -webkit-animation: bounceShow 0.35s forwards ease-in-out;
+    animation: bounceShow 0.35s forwards ease-in-out;
+  }
+  .sapMPageFooterControlHide {
+    -webkit-animation: bounceHide 0.35s forwards ease-in-out;
+    animation: bounceHide 0.35s forwards ease-in-out;
+  }
+
+  @-webkit-keyframes bounceShow {
+    0% {
+      -webkit-transform: translateY(100%);
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.9;
+    }
+  }
+  @keyframes bounceShow {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.9;
+    }
+  }
+  @-webkit-keyframes bounceHide {
+    0% {
+      -webkit-transform: translateY(-5%);
+      transform: translateY(-5%);
+      opacity: 1;
+    }
+    100% {
+      -webkit-transform: translateY(100%);
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+  @keyframes bounceHide {
+    0% {
+      transform: translateY(-5%);
+      opacity: 0.9;
+    }
+    100% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+  }
+}
+
+.sapMPageBgSolid {
+	background-color: @sapUiBaseBG;
+}
+
+/* page with header and subHeader */
+.sapMPage > .sapMPageHeader + .sapMPageSubHeader + section {
+	top: 6rem;
+}
+
+.sapMPage > .sapMPageHeader + .sapMPageSubHeader.sapMPageSubHeaderInfoBar + section {
+	top: 5rem;
+}
+
+/* page with header */
+.sapMPage > .sapMPageHeader + section,
+/* page with subheader */
+.sapMPage > .sapMPageSubHeader + section,
+/* page with header and invisible subheader */
+.sapMPage > .sapMPageHeader + .sapUiHiddenPlaceholder + section {
+	top: 3rem;
+}
+
+/* page app icon */
+
+.sapMBar-CTX .sapMBarLeft > .sapMImg.sapMPageAppIcon {
+	max-height: 1.375rem;
+	max-width: 1.375rem;
+	margin: 0.8125rem;
+}
+
+/* vertical scroll bar */
+
+.sapMPage .sapMScrollbarV > div {
+	background-color: @sapUiScrollBarFaceColor;
+	border-color: @sapUiScrollBarBorderColor;
+}
+
+/* sap.m.Shell + Tiles Page specific style */
+
+@media (min-height: @_sap_m_Page_MinHeightForHeader) {
+	.sap-desktop .sapMShell .sapMPage.sapMPageHideHeaderWhenShellHeader header.sapMIBar {
+		display: none;
+	}
+}
+
+html.sap-tablet .sapUiFioriObjectPage > section,
+html.sap-desktop .sapUiFioriObjectPage > section {
+	padding-bottom: 1rem;
+}
+
+/* Compact size */
+.sapUiSizeCompact {
+	/* Header and footer have 2.5 rem */
+	.sapMPageWithHeader > section {
+		top: 2.5rem;
+	}
+
+	.sapMPageHeader .sapMIBar,
+	.sapMPageFooter .sapMIBar {
+		height : 2.5rem;
+
+		.sapMBarLeft,
+		.sapMBarRight,
+		.sapMBarPH {
+			height: 2.5rem;
+			padding-top: 0.25rem;
+			padding-bottom: 0.25rem;
+		}
+	}
+
+	.sapMPageWithFooter > section {
+		bottom: 2.5rem;
+	}
+
+	/* Subheader only 2 rem */
+	.sapMPageWithSubHeader > section {
+		top: 2rem;
+	}
+
+	.sapMPageWithHeader {
+		&.sapFShellBar-CTX > section {
+			top: 3rem;
+		}
+		&.sapMPageWithSubHeader.sapFShellBar-CTX > section {
+			top: 5rem;
+		}
+	}
+
+	&.sapMPage.sapMPageWithHeader.sapMPageWithSubHeader,
+  .sapMPage.sapMPageWithHeader.sapMPageWithSubHeader {
+		> section {
+			top: 4.5rem;
+		}
+
+		.sapMPageSubHeader.sapMPageSubHeaderInfoBar + section {
+			top: 4.5rem;
+		}
+	}
+
+	.sapMBar-CTX .sapMBarLeft > .sapMImg.sapMPageAppIcon {
+		max-height: 1rem;
+		max-width: 1rem;
+		margin: 0.5rem;
+	}
+}
+
+/*
+	In order to skip adding that to each control we decided to move that on Popup level
+	will-change property has been aded for performance improvements when having a huge scroll of the page (painting improvement)
+	Usually the Popover/Dialog does not have that much of a content and the scrolling performance is good
+*/
+.sapMPopup-CTX .sapMPage > section.sapMPageEnableScrolling {
+	will-change: unset; // fixes iOS and OS X issue - the content and the header sometimes get misplaced
+}

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

@@ -0,0 +1,8 @@
+/* =================================== */
+/* CSS for control sap.m/PagingButton  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMPagingButton {
+	display: inline-block;
+}