@openui5/themelib_sap_belize 1.124.2 → 1.126.0

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

@@ -0,0 +1,144 @@
+/* ================================= */
+/* CSS for control sap.m/SelectList  */
+/* Base theme                        */
+/* ================================= */
+
+@_sap_m_SelectList_ItemHeight: 2.5rem;
+@_sap_m_SelectList_ItemCompactHeight: 2rem;
+
+/* ------------------------------ */
+/* commons styles                 */
+/* ------------------------------ */
+
+.sapMSelectList,
+.sapMSelectListItemBase {
+	box-sizing: border-box;
+}
+
+/* disabled */
+
+.sapMSelectListDisabled {
+	pointer-events: none;
+}
+
+/* ------------------------------ */
+/* list                           */
+/* ------------------------------ */
+
+.sapMSelectList {
+	margin: 0;
+	padding: 0;
+	outline: none;
+	list-style-type: none;
+	background: @sapUiListBackground;
+}
+
+/* ------------------------------ */
+/* item                           */
+/* ------------------------------ */
+
+.sapMSelectListItemBase {
+	outline: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	color: @sapUiListTextColor;
+	font-size: @sapMFontMediumSize;
+	height: @_sap_m_SelectList_ItemHeight;
+	cursor: pointer;
+}
+
+.sapMSelectListItem {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 0 1rem 0 1rem;
+	line-height: @_sap_m_SelectList_ItemHeight;
+}
+
+.sapMSelectListItemIcon {
+	padding-right: 0.4375rem;
+}
+
+li.sapMSelectListItemBaseInvisible {
+	display: none;
+}
+
+/* elements inside the select effects the size of the browsers default dragging ghost element */
+.sapUiDnDDragging .sapMSelectListItemBase + .sapMSelectListItemBase {
+	display: none;
+}
+
+/* disabled */
+.sapMSelectListItemBaseDisabled {
+	cursor: unset;
+}
+
+/* hover */
+.sapMSelectListItemBaseHoverable:hover {
+	background: @sapUiListHoverBackground;
+}
+
+/* hover selected */
+.sapMSelectListItemBaseSelected.sapMSelectListItemBaseHoverable:hover {
+	background-color: @sapUiListSelectionHoverBackground;
+}
+
+/* pressed and pressed selected */
+:not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed,
+:not(.sapMSelectListItemBaseDisabled).sapMSelectListItemBase.sapMSelectListItemBasePressed.sapMSelectListItemBaseSelected {
+	color: @sapUiListActiveTextColor;
+	background: @sapUiListActiveBackground;
+}
+
+/* focus */
+html.sap-desktop .sapMSelectListItemBase:focus {
+	outline: dotted 1px;
+	outline-offset: -2px;
+}
+
+/* ------------------------------ */
+/* row                            */
+/* ------------------------------ */
+
+.sapMSelectListRow {
+	display: table-row;
+}
+
+/* ------------------------------ */
+/* cell                           */
+/* ------------------------------ */
+
+.sapMSelectListCell {
+	display: table-cell;
+	vertical-align: middle;
+	padding-left: 1rem;
+}
+
+
+.sapMSelectListLastCell {
+	text-align: right;
+	padding-right: 1rem;
+}
+
+/* ------------------------------ */
+/* separator                      */
+/* ------------------------------ */
+
+.sapMSelectListSeparatorItem {
+	border: 1px solid @sapUiListBorderColor;
+}
+
+/* compact size  */
+
+/* ------------------------------ */
+/* commons styles                 */
+/* ------------------------------ */
+
+.sapUiSizeCompact .sapMSelectListItemBase {
+	height: @_sap_m_SelectList_ItemCompactHeight;
+}
+
+.sapUiSizeCompact .sapMSelectListItem {
+	line-height: @_sap_m_SelectList_ItemCompactHeight;
+}

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

@@ -0,0 +1,16 @@
+.sapMSD .sapMDialogStretchContent {
+	padding: 0px;
+
+	&.sapMDialogScrollCont {
+		height: 100%;
+	}
+}
+
+.sapMSD .sapMSDFirstActionGroup {
+	border-top: 1px solid @sapUiListBorderColor;
+	box-sizing: border-box;
+}
+
+.sapMSD .sapMTB.sapMSDPageHeader {
+	padding: 0px;
+}

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

@@ -0,0 +1,114 @@
+/* ========================================== */
+/* CSS for control sap.m/SelectionDetailsItem */
+/* Base theme                                 */
+/* ========================================== */
+
+.sapMSDItem {
+	display: block;
+	padding: 0px;
+}
+
+.sapMSDItem > .sapMLIBContent {
+	padding: 0.5rem 0px;
+	box-sizing: border-box;
+	width: 100%;
+
+	display: -webkit-box;
+	-webkit-box-pack: center;
+	-webkit-box-align: center;
+	display: -webkit-flex;
+	display: flex;
+	align-items: center;
+}
+
+.sapMSDItem .sapMSDItemLines {
+	-webkit-box-flex: 1;
+	-webkit-flex: 1 1;
+	flex: 1 1;
+	max-width: ~"calc(100% - 3rem)";
+}
+
+.sapMSDItem .sapMSDItemActions {
+	width: 100%;
+	-webkit-flex: 0 0 100%;
+	flex: 0 0 100%;
+
+	.sapMTB {
+		border-bottom: none;
+	}
+}
+
+.sapMSDItem:not(.sapMLIBTypeNavigation) {
+
+	.sapMSDItemActions {
+		-webkit-flex-basis:  ~"calc(100% + 2rem)";
+		flex-basis: ~"calc(100% + 2rem)";
+	}
+}
+
+.sapMSDItem .sapMLIBImgNav {
+	cursor: pointer;
+}
+
+.sapMSDItemLine {
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+	overflow: hidden;
+}
+
+.sapMSDItem .sapMSDItemLineMarkerContainer {
+	-webkit-box-flex: 0;
+	-webkit-flex: 0 0 3rem;
+	flex: 0 0 3rem;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding-left: 2px;
+	padding-right: 2px;
+}
+
+.sapMSDItem .sapMSDItemLineLabel,
+.sapMSDItem .sapMSDItemLineValue {
+	-webkit-box-flex: 1;
+	-webkit-flex: 1 1;
+	flex: 1 1;
+
+	padding: 0.25rem;
+	box-sizing: border-box;
+	font-size: smaller;
+	min-width: 0; //explicitly allow items to shrink to 0
+	word-wrap: break-word;
+}
+
+.sapMSDItem .sapMSDItemLineLabel {
+	margin-right: 1rem;
+	color: @sapUiContentLabelColor;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sapMSDWrapLabels .sapMSDItem .sapMSDItemLineLabel {
+  white-space: normal;
+  text-overflow: clip;
+}
+
+.sapMSDItem .sapMSDItemLineValue {
+	color: @sapUiListTextColor;
+
+	&.sapMSDItemLineBold {
+		font-weight: bold;
+	}
+}
+.sapMSDItem .sapMSDItemLineUnit {
+	font-weight: normal;
+}
+
+.sapMSDItem.sapMLIBActive {
+	.sapMSDItemLineLabel, .sapMSDItemLineValue, .sapMBtnText, .sapMBtnTransparent > .sapMBtnIcon {
+		color: @sapUiListActiveTextColor;
+		text-shadow: none;
+	}
+}

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

@@ -0,0 +1,9 @@
+/* =================================== */
+/* CSS for control sap.m/SemanticPage  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMSemanticPage {
+	height: 100%;
+	width: 100%;
+}

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

@@ -0,0 +1,233 @@
+/* ============================ */
+/* CSS for control sap.m/Shell  */
+/* Base theme                   */
+/* ============================ */
+
+@_sap_m_Shell_AppWidthLimit: 1280px;
+@_sap_m_Shell_AppWidthLimitBy2: @_sap_m_Shell_AppWidthLimit / 2;
+@_sap_m_Shell_AppWidthLimitPlusPadding: @_sap_m_Shell_AppWidthLimit + 16px;
+
+@_sap_m_Shell_AppHeight: 3333px; // Ux decision: never show the header, so make this value large enough even for zoom-out cases
+@_sap_m_Shell_HeaderHeight: 68px; // should be 4.25rem
+@_sap_m_Shell_MinHeightForHeader: (@_sap_m_Shell_AppHeight + @_sap_m_Shell_HeaderHeight);
+
+@_sap_m_Shell_MinWidthForLogoAside: 1480px;     // = @_sap_m_Shell_AppWidthLimit + 200; but additions do not work in LESS for media query arguments
+@_sap_m_Shell_MinWidthForBigLogoAside: 1680px;  // = @_sap_m_Shell_AppWidthLimit + 400; but additions do not work in LESS for media query arguments
+
+.sapMShell {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.sapMShellBrandingBar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 4px;
+	z-index: 2; /* to lift it above the CenterBox shadow and SplitApp */
+	background-color: @sapUiBrand;
+}
+
+/* this "sapMBrandingBar-CTX" CSS class can be set by any container control that comes with its own branding bar, so any shell inside will not display its branding bar */
+.sapMBrandingBar-CTX .sapMShellBrandingBar,
+.sapUiUfdShell .sapMShellBrandingBar {
+	display: none;
+}
+
+.sapMShellBG {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.sapMShellCentralBox {
+	position: relative;
+	height: 100%;
+}
+
+.sapMShellHeader {
+	position: relative;
+	width: 100%;
+	text-align: center;
+	box-sizing: border-box;
+	padding: 0 16px; /* must be px because of calculations further below */
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+.sapMShellHeaderText {
+	display: none;
+	cursor: default;
+	position: relative;
+}
+
+.sapMShellLogo {
+	display: none;
+	position: relative;
+	z-index: 1; /* above background image */
+}
+
+.sapMShellLogoImgAligner {
+	display: none;
+}
+
+.sapMShellHeaderRight {
+	display: none;
+	position: relative;
+}
+
+.sapMShellContent {
+	box-sizing: border-box;
+	height: 100% !important; /* important because overwritten by SplitApp/App control */
+	width: 100%;
+	position: relative;
+	margin: 0 auto;
+}
+
+
+/* modifications for taller screens */
+
+@media (min-height: @_sap_m_Shell_MinHeightForHeader) { /* 1500px plus 96px for header */
+	html.sap-desktop .sapMShellLogo {
+		position: absolute;
+		float: left;
+		display: -webkit-flex;
+		display: flex;
+		height: 40px;
+		margin: 0.75em;
+		margin-left: 0;
+	}
+
+	html.sap-desktop .sapMShellLogoImg {
+		margin: auto;
+		max-width: 6rem;
+		max-height: 40px;
+	}
+
+	html.sap-desktop .sapMShellHeader {
+		display: block;
+		position: relative;
+		height: 4.25rem;
+		color: @sapUiPageHeaderTextColor;
+		border-bottom: 1px solid @sapUiShellBorderColor;
+	}
+
+	html.sap-desktop .sapMShellHeaderText {
+		display: inline-block;
+		margin-top: 1.25rem;
+		font-size: 1.75em;
+		font-weight: lighter;
+	}
+
+	html.sap-desktop .sapMShellHeaderRight {
+		display: inline-block;
+		float: right;
+		font-size: 0.875em;
+		margin-top: 30px;
+	}
+
+	html.sap-desktop .sapMShellHeaderRightText {
+		padding: 0.75em 0.57em; /* text size is 14px here... */
+	}
+
+	html.sap-desktop .sapMShellHeaderLogout {
+		cursor: pointer;
+		padding: 0.75em 0.57em; /* text size is 14px here... */
+	}
+	
+	html.sap-desktop .sapMShellHeaderLogout:focus {
+		outline: none;
+	}
+	
+	html.sap-desktop .sapMShellHeaderLogout:active {
+		background-color: @sapUiButtonActiveBackground;
+		color: @sapUiButtonActiveTextColor;
+		outline: none;
+	}
+
+	html.sap-desktop .sapMShellContent {
+		position: absolute;
+		top: @_sap_m_Shell_HeaderHeight;
+		bottom: 0;
+		height: auto !important; /* important because overwritten by SplitApp/App control */
+	}
+	
+	.sapMShellHeader {
+		border-top: 4px solid transparent;
+	}
+}
+
+@media (min-height: 769px) and (max-width: 640px) { /* logo would appear above but the window is really slim */
+	html.sap-desktop  .sapMShellLogo {
+		display: none;
+	}
+}
+
+
+/* modifications for wider screens */
+
+@media (min-width: @_sap_m_Shell_AppWidthLimit) {
+
+	html.sap-desktop .sapMShellLogo {
+		margin-left: 1rem;
+	}
+
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellCentralBox {
+		width: @_sap_m_Shell_AppWidthLimit;
+		margin-left: -@_sap_m_Shell_AppWidthLimitBy2; /* @_sap_m_Shell_AppWidthLimit divided by 2 */
+		left: 50%;
+		background-color: fade(lighten(@sapUiBaseBG, 5), 30);
+	}
+}
+
+@media (min-width: @_sap_m_Shell_AppWidthLimit) {
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellHeader {
+		padding: 0;
+	}
+}
+
+@media (min-width: @_sap_m_Shell_MinWidthForLogoAside) {
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogo {
+		position: absolute;
+		opacity: 1;
+		height: auto;
+		width: 80px;
+		text-align: center;
+		display: block;
+		right: @_sap_m_Shell_AppWidthLimit;
+		top: 0;
+		margin: 0.75em;
+		margin-left: 0;
+	}
+
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogoImg {
+		max-width: 80px;
+		max-height: 80px;
+	}
+}
+
+@media (min-width: @_sap_m_Shell_MinWidthForBigLogoAside) {
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogo {
+		width: 160px;
+		margin: 2rem;
+	}
+
+	html.sap-desktop .sapMShellAppWidthLimited .sapMShellLogoImg {
+		max-width: 160px;
+		max-height: 160px;
+	}
+}
+
+.sapUiUfdShell .sapMShellHeader {
+	border-top: none;
+}
+
+html.sap-desktop .sapMShellHeaderText {
+	font-size: @sapMFontHeader2Size;
+	color: @sapUiShellTextColor;
+}

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

@@ -0,0 +1,27 @@
+.sapUiSimpleFixFlex{
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	box-sizing: border-box;
+
+	.sapUiSimpleFixFlexFixed {
+		width: 100%;
+		overflow:auto;
+
+		&.sapUiSimpleFixFlexFixedWrap {
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	.sapUiSimpleFixFlexFlexContentContainer {
+		flex: 1 1 auto;
+		overflow: auto;
+		width: 100%;
+
+		.sapUiSimpleFixFlexFlexContent{
+			height: 100%;
+			overflow: auto;
+		}
+	}
+}

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

@@ -0,0 +1,55 @@
+/* ============================================= */
+/* CSS for control sap.m/SinglePlanningCalendar  */
+/* Base theme                                    */
+/* ============================================= */
+
+@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight_Compact: 3rem;
+@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight: 2.75rem;
+@_sap_m_SinglePlanningCalendarGrid_HoursBackground: @sapUiListBackground;
+
+.sapMPCHead, .sapMSinglePCColumnHeader{
+	position: -webkit-sticky;
+	position: sticky;
+	z-index: 3;
+}
+
+.sapMSinglePCStickyAll {
+	.sapMPCHead {
+		top: 0;
+	}
+}
+
+.sapMSinglePCStickyNavBarAndColHeaders {
+	.sapMPCHead {
+		top: -@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight;
+	}
+
+	// If the actions toolbar are hidden, then the navigation toolbar will
+	// be on top by default.
+	&.sapMSinglePCActionsHidden {
+		.sapMPCHead {
+			top: 0;
+		}
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMSinglePCStickyNavBarAndColHeaders {
+		.sapMPCHead {
+			top: -@_sap_m_PlanningCalendarHeader_ActionsToolbarHeight_Compact;
+		}
+	}
+}
+
+
+html.sap-desktop .sapMSinglePC .sapUiCalItem:not(.sapUiCalItemSel):hover {
+  background-color: darken(@sapUiContentForegroundColor,5);
+}
+
+html.sap-desktop .sapMSinglePC .sapUiCalItem:not(.sapUiCalItemSel) :not(.sapUiCalWeekNum):hover {
+  background-color: transparent;
+}
+
+.sapMSinglePCGridContent {
+	background-color: @_sap_m_SinglePlanningCalendarGrid_HoursBackground;
+}