@openui5/themelib_sap_belize 1.124.0 → 1.125.0

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

@@ -0,0 +1,137 @@
+/* =========================== */
+/* CSS for control sap.m/Link  */
+/* Base theme                  */
+/* =========================== */
+
+.sapMLnk {
+	color: @sapUiLink;
+	text-decoration: @sapUiLinkTextDecoration;
+	display: inline-block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-wrap: normal;
+	font-family: @sapUiFontFamily;
+	font-size: @sapMFontMediumSize;
+	cursor: pointer;
+
+	&:visited {
+		color: @sapUiLinkVisitedColor;
+	}
+
+	&:not(.sapMLnkDsbl) {
+		&:active {
+			color: @sapUiLinkActiveColor;
+			text-decoration: @sapUiLinkActiveTextDecoration;
+		}
+	}
+}
+
+html.sap-desktop .sapMLnk:not(.sapMLnkDsbl) {
+	&:focus {
+		outline: 1px dotted @sapUiContentFocusColor;
+		outline-offset: -1px;
+		text-decoration: underline;
+	}
+
+	&:hover:not(:active):not(:focus) {
+		color: @sapUiLinkHoverColor;
+		text-decoration: @sapUiLinkHoverTextDecoration;
+	}
+
+}
+
+.sapUiInverted-CTX .sapUiLnk {
+	color: @sapUiLinkInvertedColor;
+}
+
+.sapMLnk.sapMLnkWrapping {
+	white-space: normal;
+	word-wrap: break-word;
+}
+
+.sapMLnk.sapMLinkContainsEmptyIdicator,
+.sapMLnk.sapMLinkContainsEmptyIdicator > * {
+	pointer-events: none;
+	text-decoration: none;
+}
+
+.sapMLnkMaxWidth {
+	max-width: 100%;
+}
+
+
+/* Link in sap.ui.table.* tables */
+
+.sapUiTableCell .sapMLnk {
+	vertical-align: middle;
+}
+
+.sapUiSizeCondensed .sapUiTableCell .sapMLnk {
+	line-height: 1.5rem;
+}
+
+.sapUiHLayoutChildWrapper > .sapMLnk {
+	vertical-align: text-bottom;
+}
+
+.sapMFT .sapMLnk,
+.sapMFT .sapMTitle .sapMLnk {
+	vertical-align: top;
+}
+
+/* Link focus offset and visualization in sap.ui.table.* tables */
+html.sap-desktop .sapUiSizeCondensed .sapUiTableCell .sapMLnk:focus:not(.sapMLnkDsbl) {
+	outline-offset: -2px;
+}
+
+.sapUiForm .sapMLnk {
+	min-height: 1rem; /* do give empty links a size too. Keep the Form stable */
+}
+
+.sapUiFormEdit .sapMLnk {
+	line-height: normal;
+	margin-top: 1rem; /* don't use padding as this would stretch the focus outline */
+	margin-bottom: 0.75rem; /* for some reason browser adds 4px, display: block would lead to stretched focus outline*/
+}
+
+.sapUiFormToolbar .sapMTB .sapMLnk {
+	line-height: normal;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+.sapMLnkEmphasized {
+	font-family: @sapUiFontBoldFamily;
+}
+
+.sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: none;
+}
+
+.sapMShowEmpty-CTX .sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto {
+	display: inline-block;
+}
+
+.sapMShowEmpty-CTX .sapMLnk .sapMEmptyIndicator.sapMEmptyIndicatorAuto,
+.sapMLnk .sapMEmptyIndicator {
+	color: @sapUiBaseText;
+}
+
+
+.sapMListTblRow.sapMLIBActive .sapMLnk,
+.sapMListTblSubRow.sapMLIBActive .sapMLnk,
+.sapMLIB.sapMLIBActive .sapMLink {
+	text-decoration: none;
+	text-shadow: none;
+ }
+
+/* Compact size */
+.sapUiSizeCompact .sapUiFormEdit .sapMLnk {
+	margin-top: 0.5rem;
+	margin-bottom: 0.25rem;
+}
+
+.sapMLnk:-webkit-any-link:focus {
+	outline: none;
+}

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

@@ -0,0 +1,17 @@
+.sapLTC {
+    margin-left: 3rem;
+    height: 1rem;
+    .sapMLnk {
+        margin-left: 1rem;
+        max-width: 16.6rem;
+    }
+}
+
+//When the linktilecontent is present inside the GenericTile
+.sapMGT.sapMGTLinkTileContent.sapMTileSmallPhone {
+    .sapLTC {
+        .sapMLnk {
+            max-width: 13.1rem;
+        }
+    }
+}

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

@@ -0,0 +1,322 @@
+/* =============================== */
+/* CSS for control sap.m/ListBase  */
+/* Base theme                      */
+/* =============================== */
+
+.sapMList {
+	position: relative;	/* This should not break the list but help swipe list content position calculation */
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+.sapMListUl {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.sapMListUl:focus {
+	outline: none;
+}
+
+.sapMListPreventFocus .sapMListDummyArea {
+	display: none;
+}
+
+.sapMListSwp {
+	overflow: hidden;
+	position: absolute;
+	right: 0.5em;
+	z-index: 1;
+	opacity: 0;
+	pointer-events: auto;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	align-items: center;
+	margin-top: -1px;
+}
+
+.sapMListDummyArea {
+	position: fixed; /* keep it in the visible viewport, so that IE does not scroll on focus */
+}
+
+.sapMListDummyAreaSticky {
+	position: sticky; /* keep it in the scrollable area, so that browser does not scroll on focus */
+	height: 0.1px; /* webkit needs height for the sticky elements */
+	bottom: 0px;
+}
+
+/* swipe animations */
+@-webkit-keyframes sapMListSwpInAnim {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+@keyframes sapMListSwpInAnim {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@-webkit-keyframes sapMListSwpOutAnim {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+@keyframes sapMListSwpOutAnim {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
+.sapMListSwpInAnim {
+	-webkit-animation: sapMListSwpInAnim 0.2s ease-in forwards;
+	animation: sapMListSwpInAnim 0.2s ease-in forwards;
+}
+
+.sapMListSwpOutAnim {
+	-webkit-animation: sapMListSwpOutAnim 0.2s ease-in forwards;
+	animation: sapMListSwpOutAnim 0.2s ease-in forwards;
+}
+
+.sapMListNoData {
+	list-style-type: none;
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-align: center;
+	align-items: center;
+	-webkit-box-pack: center;
+	justify-content: center;
+	color: @sapUiListTextColor;
+	background-color: @sapUiListBackground;
+	border-bottom: 1px solid @sapUiListBorderColor;
+	padding: 0.5rem 1rem !important;
+	min-height: 3rem;
+	line-height: 1.4;
+}
+
+.sapMListNoDataText {
+	overflow: hidden;
+    overflow: clip;
+	white-space: pre-wrap;
+	text-align: center;
+}
+
+.sapMListNoDataContent {
+	flex: 1 1 auto;
+}
+
+.sapMListShowSeparatorsAll {
+	/*class will be added for others, just a reminder*/
+}
+
+.sapMListShowSeparatorsInner {
+	/*class will be added for others, just a reminder*/
+}
+
+.sapMListShowSeparatorsNone {
+	/*class will be added for others, just a reminder*/
+}
+
+/* Growing feature */
+
+.sapMGrowingList {
+	border-bottom: 1px solid @sapUiButtonActionSelectBorderColor;
+}
+
+.sapMGrowingListTrigger {
+	display: block;
+	text-align: center;
+	overflow: hidden;
+	border-top: 1px solid @sapUiListHeaderBorderColor;
+}
+
+.sapMGrowingListDummyColumn {
+	border-right: 1px solid @sapList_TableFooterBorder;
+}
+
+/* .sapMSLIDescription also has padding defined, hence making the style rule stronger */
+.sapMGrowingListDescription.sapMSLIDescription {
+	display: none;
+	padding: 0.375rem 2rem 0.875rem 2rem;
+	text-align: center;
+}
+
+.sapMGrowingList > .sapMCLI.sapMLIB:not(.sapMLIBActive) {
+	background: @sapUiButtonActionSelectBackground;
+	border-bottom: none;
+}
+
+.sapMGrowingList > .sapMCLI.sapMLIBHoverable:hover {
+	background: @sapUiButtonLiteActionSelectHoverBackground;
+}
+
+.sapMGrowingListBusyIndicatorVisible .sapMGrowingListTriggerText,
+.sapMGrowingListBusyIndicatorVisible .sapMGrowingListDescription {
+	visibility: hidden;
+}
+
+/* mixin call for creating container content padding classes (arguments: rootContainer, contentSelector) */
+.sapUiContainerContentPadding(~".sapMList");
+
+.sapUiFioriObjectPage > section > .sapMList:not(.sapMListInsetBG) {
+	margin: 1rem 0;
+	padding: 0 1rem;
+	box-sizing:           border-box;
+}
+.sapUiFioriObjectPage > section > .sapMITB + .sapMList:not(.sapMListInsetBG) {
+	margin-top: 1rem;
+}
+html.sap-phone .sapUiFioriObjectPage > section > .sapMList:not(.sapMListInsetBG) {
+	padding: 0;
+}
+
+.sapUIMeTabContainerContent .sapMList {
+	padding: 1rem;
+	box-sizing: border-box;
+}
+
+html.sap-phone .sapUIMeTabContainerContent .sapMList {
+	padding: 0rem;
+	box-sizing: border-box;
+}
+
+.sapMListInsetBG {
+	padding: 2rem;
+}
+
+.sapMListInsetBG > .sapMListSwp {
+	margin-right: 2rem;
+}
+
+html.sap-phone .sapMListInsetBG{
+	padding: 1rem;
+}
+html.sap-phone .sapMListInsetBG > .sapMListSwp {
+	margin-right: 1rem;
+}
+
+.sapMListHdrText {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	box-sizing: border-box;
+	font-size: @sapMFontHeader4Size;
+	font-family: @sapUiFontHeaderFamily;
+	color: @sapUiGroupTitleTextColor;
+	height: 3rem;
+	line-height: 3rem;
+	padding: 0 1rem;
+	background-color: @sapUiGroupTitleBackground;
+	border-bottom: 1px solid @sapUiGroupTitleBorderColor;
+}
+
+.sapMListFtr{
+	height: 2rem;
+	box-sizing: border-box;
+	-webkit-text-size-adjust: none;	/* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */
+	font-size: @sapMFontMediumSize;
+	line-height: 2rem;
+	background-color: @sapUiListFooterBackground;
+	color: @sapUiListFooterTextColor;
+	padding: 0 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.sapMListTopBorder {
+	border-top: 1px solid @sapUiListBorderColor;
+}
+
+.sapMListShowSeparatorsNone .sapMListNoData {
+	border-bottom: 0px;
+}
+
+.sapUIMeTabContainerContent .sapMFeedListItem {
+	display: block;
+	padding: .5rem 0;
+}
+
+/* Growing feature */
+.sapMGrowingListBusyIndicator {
+	margin: 1.5rem 1.0rem ;
+	position: absolute;
+}
+
+.sapMGrowingListTriggerText {
+	padding: 0 1rem;
+}
+
+.sapMGrowingListTriggerText > .sapMSLITitle {
+	margin: 0.813rem 0; /* overwrites any user-agent default margin values */
+	padding-bottom: 0;
+	color: @sapUiButtonTextColor;
+	font-weight: bold;
+}
+
+.sapMGrowingListDescription.sapMSLIDescription {
+	color: @sapUiButtonTextColor;
+}
+
+/* sticky headers */
+.sapMSticky > .sapMListHdr,
+.sapMSticky > .sapMListInfoTBarContainer {
+	position: sticky;
+	position: -webkit-sticky;
+}
+
+/* sticky headerToolbar/headerText background when transparent */
+.sapMSticky > .sapMListHdrText,
+.sapMSticky > .sapMListHdrTBar.sapMTB-Transparent-CTX {
+	background: @sapUiListHeaderBackground;
+}
+
+.sapMSticky > .sapMListHdr,
+.sapMSticky > .sapMTableOverlay,
+.sapMSticky > .sapUiLocalBusyIndicator {
+	z-index: 3;
+}
+
+.sapMSticky > .sapMListInfoTBarContainer {
+	z-index: 2;
+}
+
+/* .sapMSticky3 denotes that the headerToolbar/headerText and the infoToolbar are sticky */
+/* .sapMSticky2 denotes that only the infoToolbar is sticky */
+/* .sapMSticky1 denotes that only the headerToolbar/headerText is sticky */
+/* top: 0 sticky conditions : 1st sticky elements */
+.sapMSticky1 > .sapMListHdr,
+.sapMSticky2 > .sapMListInfoTBarContainer,
+.sapMSticky3 > .sapMListHdr {
+	top: 0;
+}
+
+/* top: 3rem sticky conditions : 2nd sticky elements*/
+.sapMSticky3 > .sapMListInfoTBarContainer {
+	top: @sapUiElementLineHeight;
+}
+
+/* Compact size */
+.sapUiSizeCompact .sapMListNoData {
+	min-height: 2rem;
+	font-size: @sapMFontMediumSize;
+}
+
+.sapUiSizeCompact .sapMGrowingListDescription{
+	padding-top: 0;
+}