@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,205 @@
+/* =========================================== */
+/* CSS for control sap.m/IconTabBarSelectList  */
+/* Base theme                                  */
+/* =========================================== */
+
+@_sap_m_IconTabBar_SelectListItem_PaddingLeft: 0.5rem;
+@_sap_m_IconTabBar_SelectListItem_PaddingLeftAdditional: 0;
+@_sap_m_IconTabBar_ListBorderRadius: 0px;
+@_sap_m_IconTabBar_List_Focus_Offset: 1px;
+
+.sapMITBSelectList {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.sapMITBSelectList .sapMITBSelectItem {
+	position: relative;
+
+	width : 100%;
+
+	box-sizing: border-box;
+
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: flex;
+
+	-webkit-box-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+
+	cursor: pointer;
+
+	.sapUiIcon {
+		cursor: pointer;
+	}
+
+	&.sapMITHUnselectable {
+		cursor: default;
+	}
+}
+
+.sapMITBSelectList .sapMITBSelectItem:not(.sapMITBSep) {
+	padding: 0.75rem 0 0.75rem;
+}
+
+.sapMITBSelectList .sapMITBSep {
+	margin: 0;
+	height: 1rem;
+	justify-content: center;
+	padding-right: 0;
+
+	&:first-child {
+		margin-top: 0.5rem;
+	}
+
+	&.sapMITBSepLine {
+		margin-left: 0;
+		border: 0;
+		position: relative;
+		height: 0.25rem;
+		padding-right: 17px; // big enough to cover the case when a scrollbar appears
+
+		&::before {
+			width: 1rem;
+			content: "";
+		}
+
+		&::after {
+			content: "";
+			width: 100%;
+			border-top: 0.0625rem solid @sapUiGroupTitleBorderColor;
+		}
+	}
+
+	.sapMITBSepIcon {
+		height: 1rem;
+		line-height: 1rem;
+		overflow: hidden;
+	}
+}
+
+.sapMITBSelectItem .sapMITBSelectItemIcon {
+	outline: none;
+	-webkit-user-select: none; /* Chrome all / Safari all */
+	-moz-user-select: none; /* Firefox all */
+	user-select: none;
+}
+
+.sapMITBSelectItem .sapMITBText {
+	display: block;
+	padding: 0 1rem 0 0;
+	pointer-events: none;
+	min-width: 0;  // chrome flex overflow issue
+	overflow: visible;
+	white-space: normal;
+	font-size: @sapMFontMediumSize;
+}
+
+.sapMITBSelectListTextOnly .sapMITBSelectItem .sapMITBText {
+	padding-left: 1rem;
+}
+
+.sapMITBSelectItem:not(.sapMITBSep) .sapUiIcon {
+	font-size: 1.125rem;
+	min-width: 2.75rem;
+}
+
+/* Compact size */
+.sapUiSizeCompact {
+	.sapMITBSelectList .sapMITBSelectItem:not(.sapMITBSep) {
+		padding: 0.5rem 0 0.5rem;
+	}
+
+	.sapMITBSelectItem:not(.sapMITBSep) .sapUiIcon {
+		font-size: 1rem;
+		min-width: 2rem;
+	}
+
+	.sapMITBSelectList .sapMITBSep {
+		&.sapMITBSepLine {
+			padding-right: 0.5rem;
+
+			&::before {
+				width: 0.5rem;
+			}
+		}
+	}
+}
+
+.sapMITBSelectItem {
+	background-color: @sapUiListBackground;
+}
+
+.sapMITBSelectItem {
+	&.sapMITBFilterNeutral,
+	&.sapMITBFilterNegative,
+	&.sapMITBFilterPositive,
+	&.sapMITBFilterCritical {
+		.sapMITBText {
+			color: inherit;
+		}
+	}
+}
+
+.sapMITBSelectItem {
+	&.sapMITBFilterDefault {
+		.sapMITBInlineIcon {
+			color: @sapUiListTextColor
+		}
+	}
+}
+
+.sapMITBSelectItem:not(.sapMITHUnselectable):hover {
+	background-color: @sapUiListHoverBackground;
+}
+
+.sapMITBSelectList .sapMITBSelectItem:not(.sapMITHUnselectable) {
+
+	&:not(.sapUiDnDDragging):active,
+	&.sapMITBSelectItemSelected:not(.sapUiDnDDragging):active {
+		background-color: @sapUiListActiveBackground;
+
+		& > .sapMITBText {
+			color: @sapUiListActiveTextColor;
+		}
+
+		& > .sapUiIcon {
+			color: @sapUiListActiveTextColor;
+		}
+	}
+}
+
+.sapMITBSelectItem:focus {
+	outline: none;
+}
+
+.sapMITBSelectItem:focus::before {
+	border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	position: absolute;
+	content: " ";
+	top: @_sap_m_IconTabBar_List_Focus_Offset;
+	right:  @_sap_m_IconTabBar_List_Focus_Offset;
+	bottom:  @_sap_m_IconTabBar_List_Focus_Offset;
+	left:  @_sap_m_IconTabBar_List_Focus_Offset;
+	z-index: 2;
+	border-radius: @_sap_m_IconTabBar_ListBorderRadius;
+	pointer-events: none;
+}
+
+.sapMITBSelectItem.sapMITBSelectItemSelected {
+	background-color: @sapUiListSelectionBackgroundColor;
+}
+
+.sapMITBSelectItem.sapMITBSelectItemSelected:hover {
+	background-color: @sapUiListSelectionHoverBackground;
+}
+
+.sapUiDnDIndicator {
+	z-index: 100;
+}

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

@@ -0,0 +1,171 @@
+/* ================================== */
+/* CSS for control sap.f/IllustratedMessage */
+/* Base theme                         */
+/* ================================== */
+
+.sapMIllustratedMessage {
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
+	padding: 1rem;
+	box-sizing: border-box;
+	justify-content: center;
+
+	.sapMIllustratedMessageMainContent {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	figcaption {
+		margin: inherit;
+	}
+
+	.sapMTitle {
+		font-family: @sapFontHeaderFamily;
+		color: @sapGroup_TitleTextColor;
+		display: block;
+	}
+
+	.sapMIllustratedMessageDescription {
+		font-size: @sapFontSize;
+		font-family: @sapFontFamily;
+		color: @sapTextColor;
+	}
+
+	&.sapMIllustratedMessageScalable {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	&.sapMIllustratedMessage-Base {
+		figcaption {
+			max-width: 10rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent,
+		.sapMIllustration {
+			display: none;
+		}
+	}
+
+	&.sapMIllustratedMessage-Dot {
+		padding: 0.25rem;
+
+		.sapMIllustratedMessageMainContent {
+			display: inline-flex;
+			justify-content: center;
+			flex-direction: row;
+		}
+
+		figcaption {
+			display: grid;
+			max-width: 18rem;
+		}
+
+		.sapMIllustration {
+			flex-shrink: 0;
+			width: 2.813rem;
+			height: 2.813rem;
+			margin-right: 0.25rem;
+			align-self: baseline;
+		}
+
+		.sapMTitle {
+			font-size: @sapFontHeader5Size;
+			margin-bottom: 0.25rem;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 0.25rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin: 0.25rem 0;
+			padding-left: 3.063rem; // width of dot svg + its margin right
+		}
+	}
+
+
+	&.sapMIllustratedMessage-Spot {
+		padding: 0.5rem;
+
+		figcaption {
+			max-width: 16.25rem;
+		}
+
+		.sapMIllustration {
+			width: 8rem;
+			height: 8rem;
+			margin-bottom: 0.5rem;
+		}
+
+		.sapMTitle {
+			font-size: @sapFontHeader4Size;
+			margin-bottom: 0.5rem;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 0.5rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin: 0.5rem 0;
+		}
+	}
+
+	&.sapMIllustratedMessage-Dialog {
+		figcaption {
+			max-width: 20rem;
+		}
+
+		.sapMIllustration {
+			width: 10rem;
+			height: 10rem;
+			margin: 1rem 0;
+		}
+
+		.sapMTitle {
+			margin-bottom: 0.5rem;
+			font-size: @sapFontHeader3Size;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 0.5rem;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin-top: 0.5rem;
+			margin-bottom: 1rem;
+		}
+	}
+
+	&.sapMIllustratedMessage-Scene {
+		figcaption {
+			max-width: 30rem;
+		}
+
+		.sapMIllustration {
+			width: 20rem;
+			height: 15rem;
+			margin: 2rem 0;
+		}
+
+		.sapMTitle {
+			margin-bottom: 1rem;
+			font-size: @sapMFontHeader2Size;
+		}
+
+		.sapMIllustratedMessageDescription {
+			margin-bottom: 0.5rem;
+			font-size: @sapMFontLargeSize;
+		}
+
+		.sapMIllustratedMessageAdditionalContent {
+			margin: 1rem 0;
+		}
+	}
+}

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

@@ -0,0 +1,58 @@
+:root {
+	--sapIllus_BrandColorPrimary: @sapContent_Illustrative_Color1;
+	--sapIllus_BrandColorSecondary: @sapContent_Illustrative_Color2;
+	--sapIllus_StrokeDetailColor: @sapContent_Illustrative_Color4;
+	--sapIllus_Layering1: @sapContent_Illustrative_Color5;
+	--sapIllus_Layering2: @sapContent_Illustrative_Color6;
+	--sapIllus_BackgroundColor: @sapContent_Illustrative_Color7;
+	--sapIllus_ObjectFillColor: @sapContent_Illustrative_Color8;
+	--sapIllus_AccentColor: @sapContent_Illustrative_Color3;
+	--sapIllus_NoColor: none;
+	--sapIllus_PatternShadow: ~"url(#sapIllus_PatternShadow)";
+	--sapIllus_PatternHighlight: ~"url(#sapIllus_PatternHighlight)";
+
+	.generate-illustrative-colors (20);
+}
+
+.generate-illustrative-colors (@colorsCount, @i: 1) when (@i =< @colorsCount) {
+	@illusColorLESSvar: 'sapContent_Illustrative_Color@{i}';
+	--sapContent_Illustrative_Color@{i}: @@illusColorLESSvar;
+	.generate-illustrative-colors(@colorsCount, (@i + 1));
+}
+
+.sapIllus_MaskTypeAlpha {
+	mask-type:alpha;
+}
+.sapIllus_BrandColorPrimary {
+	fill: var(--sapIllus_BrandColorPrimary);
+}
+.sapIllus_BrandColorSecondary {
+	fill: var(--sapIllus_BrandColorSecondary);
+}
+.sapIllus_StrokeDetailColor {
+	fill: var(--sapIllus_StrokeDetailColor);
+}
+.sapIllus_Layering1 {
+	fill: var(--sapIllus_Layering1);
+}
+.sapIllus_Layering2 {
+	fill: var(--sapIllus_Layering2);
+}
+.sapIllus_BackgroundColor {
+	fill: var(--sapIllus_BackgroundColor);
+}
+.sapIllus_ObjectFillColor {
+	fill: var(--sapIllus_ObjectFillColor);
+}
+.sapIllus_AccentColor {
+	fill: var(--sapIllus_AccentColor);
+}
+.sapIllus_NoColor {
+	fill: var(--sapIllus_NoColor);
+}
+.sapIllus_PatternShadow {
+	fill: var(--sapIllus_PatternShadow);
+}
+.sapIllus_PatternHighlight {
+	fill: var(--sapIllus_PatternHighlight);
+}

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

@@ -0,0 +1,60 @@
+/* ============================ */
+/* CSS for control sap.m/Image  */
+/* Base theme                   */
+/* ============================ */
+
+.sapMImg {
+	border: none;
+
+	/* fix the highlight color on tap*/
+	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-webkit-touch-callout: none;
+}
+
+span.sapMImg {
+	display: inline-block;
+}
+
+.sapMImg.sapMNoImg {
+	visibility: hidden;
+}
+
+/* fix chrome browser yellow border on focus problem*/
+.sapMImg:focus {
+	outline: none;
+}
+
+.sapMImgFocusable:focus {
+	outline: 0.0625rem dotted @sapUiContentFocusColor;
+    outline-offset: 0.0625rem;
+	.sapUiRespGrid & {
+		z-index: 100;
+	}
+}
+
+html:not(.sap-desktop) .sapMImgFocusable:focus {
+	outline: none;
+}
+
+
+/* ==========================================================================
+   Image opening a LightBox
+  ========================================================================== */
+
+.sapMLightBoxImage {
+	position: relative;
+	display: inline-block;
+
+	.sapMImg {
+		display: block;
+	}
+
+	.sapMLightBoxMagnifyingGlass {
+		line-height: normal;
+	}
+}
+
+// Apply LightBox Magnifying glass mixin to control
+.lightBoxMagnifyingGlassMixing(~".sapMLightBoxImage", ~".sapMLightBoxMagnifyingGlass");

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

@@ -0,0 +1,57 @@
+/* =================================== */
+/* CSS for control sap.m/ImageContent  */
+/* Base theme                          */
+/* =================================== */
+
+.sapMImageContent {
+	position: relative;
+	height: 3.875rem;
+	width: 9rem;
+	outline: none;
+}
+
+.sapMImageContentImageIcon {
+	display: block;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	max-height: 3.5rem;
+}
+
+.sapMGT .sapMImageContentImageIcon {
+	left: 0;
+	right: auto;
+}
+
+
+html.sap-desktop .sapMImageContent:focus {
+	outline-color: @sapUiContentFocusColor;
+	outline-style: dotted;
+	outline-width: 1px;
+}
+
+html.sap-desktop .sapMImageContent:focus:not([tabindex]) {
+	outline: none;
+}
+
+.sapMImageContentImageIcon.sapUiIcon {
+	font-size: 1.75rem;
+	color: @sapUiTileIconColor;
+	padding-bottom: 0.675rem;
+}
+
+.sapMTileSmallPhone {
+	.sapMImageContent {
+		height: 3.438rem;
+		width: 8rem;
+	}
+
+	.sapMImageContentImageIcon {
+		max-height: 3rem;
+	}
+
+	.sapMImageContentImageIcon.sapUiIcon {
+		font-size: 1.5rem;
+		padding-bottom: 0.25rem;
+	}
+}

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

@@ -0,0 +1,107 @@
+/* ============================ */
+/* CSS for control sap.m/Input  */
+/* Base theme                   */
+/* ============================ */
+
+:root {
+	--sPopoverMaxWidth: 640;
+}
+
+.sapMListFocus .sapMLIBFocused {
+	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline-offset: -0.125rem;
+}
+
+.sapMInputDescriptionText {
+	padding-left: 0.5rem;
+	font-size: @sapFontSize;
+	line-height: normal;
+	color: @sapUiFieldTextColor;
+	font-family: @sapUiFontFamily;
+	font-style: normal;
+	font-weight: normal;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.sapMInputWithDescription {
+	white-space: nowrap;
+}
+
+.sapMInputDescriptionWrapper {
+	display: inline-flex;
+}
+
+/* Input with description */
+.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
+	.sapMInputDescriptionWrapper {
+		max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth}))";
+		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth}))";
+		}
+	}
+}
+
+.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
+	.sapMInputDescriptionWrapper {
+		max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth}))";
+		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth}))";
+		}
+	}
+}
+
+.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
+	.sapMInputDescriptionWrapper {
+		max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth}))";
+		.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+			max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth}*2))";
+		}
+	}
+}
+
+.sapUiSizeCompact {
+	.sapMInputBaseHasEndIcons, .sapMInputBaseHasBeginIcons {
+		.sapMInputDescriptionWrapper {
+			max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_MinWidth_Compact}))";
+			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+				max-width: ~"calc(100% - (@{_InputBase_Control_OneIcon_State_MinWidth_Compact}))";
+			}
+		}
+	}
+
+	.sapMInputBaseHasEndIcons.sapMInputBaseHasBeginIcons {
+		.sapMInputDescriptionWrapper {
+			max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_MinWidth_Compact}))";
+			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+				max-width: ~"calc(100% - (@{_InputBase_Control_TwoIcons_State_MinWidth_Compact}))";
+			}
+		}
+	}
+
+	.sapMInputBase:not(.sapMInputBaseHasEndIcons):not(.sapMInputBaseHasBeginIcons) {
+		.sapMInputDescriptionWrapper {
+			max-width: ~"calc(100% - (@{_InputBase_Control_MinWidth_Compact}))";
+			.sapMInputBaseState:not(.sapMInputBaseContentWrapperSuccess) & {
+				max-width: ~"calc(100% - (@{_InputBase_Control_State_MinWidth_Compact}*2))";
+			}
+		}
+	}
+}
+
+.sapMInputHighlight {
+	font-weight: bold;
+}
+
+/* Overrides due to experimental flex layouting after IE drop */
+
+.sapMInput.sapMInputBaseHasEndIcons .sapMInputBaseInner,
+.sapMInput.sapMInputBaseHasBeginIcons .sapMInputBaseInner {
+	width: auto;
+	flex: 1
+}
+
+.sapMInput .sapMInputBaseContentWrapper {
+	display: inline-flex;
+}