@openui5/themelib_sap_belize 1.124.1 → 1.125.0

package/src/sap/ui/ux3/themes/sap_belize_hcw/library.source.less

@@ -4,7 +4,16 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/***********************************************************************************
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the
+/* inheritance of the base theme is now updated to an inheritance of a static
+/* copy of the base theme named sap_belize_base. The respective
+/* control css files of base are copied to the sap_belize_base theme folder.
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.
+***********************************************************************************/
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_belize_hcw/base.less";
 @import "../../../../../sap/ui/core/themes/sap_belize_hcw/global.less";
 @import "shared.less";

package/src/sap/uxap/themes/sap_belize/library.source.less

@@ -4,7 +4,16 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
-@import "../base/library.source.less";
+/***********************************************************************************
+/* Due to deprecation of the Belize theme family with SAPUI5 version 1.120 the
+/* inheritance of the base theme is now updated to an inheritance of a static
+/* copy of the base theme named sap_belize_base. The respective
+/* control css files of base are copied to the sap_belize_base theme folder.
+/* This decoupling of the base theme is introduced with SAPUI5 version 1.125.
+***********************************************************************************/
+
+
+@import "../sap_belize_base/library.source.less";
 @import "../../../../sap/ui/core/themes/sap_belize/base.less";
 @import "../../../../sap/ui/core/themes/sap_belize/global.less";
 

package/src/sap/uxap/themes/sap_belize_base/AnchorBar.less

@@ -0,0 +1,384 @@
+/* =================================== */
+/* CSS for control sap.uxap/AnchorBar  */
+/* Base theme                          */
+/* =================================== */
+
+/**********************************
+Common Compact/Cozy
+**********************************/
+
+/* BAR */
+
+.sapUxAPAnchorBar {
+	height: 3rem;
+}
+
+.sapUxAPAnchorBar.sapMTB {
+	padding-left: 2rem;
+	box-shadow: inset 0 -0.125rem @sapUiObjectHeaderBorderColor;
+}
+
+/* M, L or splitview paddings */
+.sapUxAPObjectPageLayout-Std-Phone,
+html .sapUiContainer-Narrow {
+	.sapUxAPAnchorBar.sapMTB {
+		padding-left: 0;
+	}
+}
+
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPAnchorBar.sapMTB,
+html .sapUiContainer-Medium .sapUxAPAnchorBar.sapMTB {
+	padding-left: 1rem;
+}
+
+.sapUxAPObjectPageLayoutTitleClickEnabled .sapUxAPAnchorBar,
+.sapUxAPObjectPageLayoutHeaderPinnable .sapUxAPAnchorBar {
+	margin-top: 0.8125rem;
+}
+
+.sapUxAPAnchorBar {
+	vertical-align: middle;
+	position: relative;
+	width: 100%;
+	padding: 0;
+}
+
+.sapUxAPAnchorBarScrollContainer {
+	width: 100%;
+}
+
+/* leave space for the overflow button to the right */
+.sapUxAPObjectPageLayout:not(.sapUxAPObjectPageLayout-Std-Phone) .sapUxAPAnchorBarOverflow {
+	padding-right: 4rem;
+}
+
+/* not display the select if the bar does not overflow */
+.sapUxAPAnchorBarOverflow:not(.sapUxAPAnchorBarScrollRight):not(.sapUxAPAnchorBarScrollLeft) .sapUxAPHierarchicalSelect {
+	display: none;
+}
+
+/* BAR ITEMS */
+
+.sapUxAPAnchorBar .sapUxAPAnchorBarScrollContainer .sapMBarChild {
+	display: inline-block;
+}
+
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild:first-child {
+	margin-left: 0;
+
+	&.sapUxAPHierarchicalSelect {
+		padding-left: 1rem;
+	}
+}
+.sapUxAPAnchorBar .sapUxAPAnchorBarButton.sapMMenuBtn {
+	max-width: 100%;
+
+	.sapMSB {
+		padding-right: 1.5rem;
+		width: auto !important;
+	}
+
+	.sapMSBText {
+		padding-left: 1rem;
+	}
+
+	.sapMSB .sapMSBText.sapMSBTextIE {
+		width: auto !important;
+	}
+
+	.sapMSB .sapMSBText.sapMSBTextIE,
+	.sapMSB .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
+		margin-right: 1.25rem;
+	}
+
+	.sapMSBArrow {
+		padding-right: 0.25rem;
+	}
+
+	.sapMSBText:focus >  .sapMBtnInner {
+		outline: none;
+	}
+
+	.sapMSB:focus .sapMSBInner::after {
+		top: 0.125rem;
+		bottom: 0.125rem;
+	}
+}
+
+.sapUxAPAnchorBar .sapUxAPAnchorBarButton {
+	height: 3rem;
+	padding: 0;
+
+	.sapMBtnInner {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		height: 3rem;
+
+		.sapMBtnContent,
+		.sapMBtnIcon {
+			height: 2.8rem;
+			line-height: 3rem;
+		}
+	}
+
+	.sapMBtn,
+	.sapMSBText .sapMBtnInner,
+	.sapMSBArrow .sapMBtnInner {
+		padding: 0;
+	}
+}
+
+.sapUxAPAnchorBar.sapMIBar.sapMTB .sapMBarChild {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnIcon {
+	font-size: 0.75rem;
+	width: 1.5rem;
+	right: 0;
+}
+
+.sapUxAPAnchorBar .sapUxAPAnchorBarButton > .sapMBtnIconLast > .sapMBtnContent {
+	padding-right: 1.375rem;
+}
+
+.sapUxAPAnchorBarUpperCase .sapUxAPAnchorBarButton,
+.sapUxAPAnchorBarUpperCase .sapUxAPAnchorBarButton .sapMBtn {
+	text-transform: uppercase;
+}
+
+/* visual in anchor bar */
+
+.sapUxAPAnchorBarButton .sapMBtnInner {
+	background: transparent !important;
+	border: none !important;
+	text-shadow: none !important;
+}
+
+.sapUxAPAnchorBarButton {
+	border: none;
+}
+
+.sapUxAPAnchorBar .sapMBtnInner,
+.sapUxAPAnchorBar .sapMBtnInner:hover {
+	background: transparent;
+	border: none;
+}
+
+/***********************/
+/* BEGIN Scroll Arrows */
+/***********************/
+
+// Not displayed on phone
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPAnchorBar .anchorBarArrowLeft,
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPAnchorBar .anchorBarArrowRight,
+.sapUxAPObjectPageLayout-Std-Phone .sapUxAPAnchorBar .sapUxAPAnchorBarScrollContainer,
+html .sapUiContainer-Narrow .sapUxAPAnchorBar .anchorBarArrowLeft,
+html .sapUiContainer-Narrow .sapUxAPAnchorBar .anchorBarArrowRight,
+html .sapUiContainer-Narrow .sapUxAPAnchorBar .sapUxAPAnchorBarScrollContainer {
+	display: none;
+}
+
+// Gradient mask + arrows container
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrowLeft,
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrowRight {
+	width: 3rem;
+	height: 3rem;
+	position: absolute;
+	top: 0;
+	z-index: 1;
+}
+
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrowRight {
+	right: 2.5rem;
+}
+
+// Tablet alignment
+.sapUxAPObjectPageLayout-Std-Tablet .sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrowLeft,
+html .sapUiContainer-Medium .sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrowLeft {
+	left: 0;
+}
+
+// Hides the gradient mask + arrows container when it is not needed
+.sapUxAPAnchorBar:not(.sapUxAPAnchorBarScrollLeft) .anchorBarArrowLeft,
+.sapUxAPAnchorBar:not(.sapUxAPAnchorBarScrollRight) .anchorBarArrowRight {
+	display: none;
+}
+
+// Scroll buttons
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtn,
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtn {
+	width: 1.625rem;
+	height: 1.625rem;
+	position: absolute;
+	top: 0.6875rem;
+	padding: 0;
+}
+
+.sapUxAPAnchorBar .anchorBarArrowLeft .sapMBtn {
+	left: 0;
+}
+
+.sapUxAPAnchorBar .anchorBarArrowRight .sapMBtn {
+	right: 0;
+}
+
+// Inner button elements
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtnInner,
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtnInner {
+	min-width: 1.625rem;
+	width: 1.625rem;
+	height: 1.625rem;
+	padding: 0;
+	border-radius: 0.125rem;
+}
+
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtnIcon,
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtnIcon {
+	position: relative;
+	font-size: 1rem;
+	width: 1.625rem;
+	height: 1.625rem;
+	line-height: 1.625rem;
+}
+
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtnIcon::before,
+.sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtnIcon::before {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 1.625rem;
+	height: 1.625rem;
+}
+
+// Scroll button container
+.sapUxAPAnchorBar .anchorBarArrow > .sapUiHLayoutChildWrapper {
+	width: 2rem;
+	height: 3rem;
+	position: absolute;
+}
+
+.sapUxAPAnchorBar .anchorBarArrowLeft > .sapUiHLayoutChildWrapper {
+	left: 0;
+}
+
+.sapUxAPAnchorBar .anchorBarArrowRight > .sapUiHLayoutChildWrapper {
+	right: 0;
+}
+
+/*********************/
+/* END Scroll Arrows */
+/*********************/
+
+/**********************************
+Compact
+**********************************/
+
+.sapUiSizeCompact {
+	.sapUxAPAnchorBar .sapUxAPAnchorBarButton.sapMMenuBtn {
+		.sapMSB .sapMSBText.sapMSBTextIE,
+		.sapMSB .sapMSBText:not(.sapMSBTextIE) .sapMBtnInner {
+			margin-right: 0.75rem;
+		}
+	}
+
+	.sapUxAPObjectPageLayoutTitleClickEnabled .sapUxAPAnchorBar,
+	.sapUxAPObjectPageLayoutHeaderPinnable .sapUxAPAnchorBar{
+		margin-top: 0.5rem;
+	}
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar,
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton {
+	height: 2rem;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnText > .sapMBtnIcon {
+	top: 0.1rem
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBarButton .sapMBtnInner {
+	padding-bottom: 1px;
+	height: 2rem;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrowLeft,
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrowRight {
+	width: 2rem;
+	height: 2rem;
+}
+
+// Scroll buttons
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtn,
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtn {
+	top: 0.125rem;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollLeft .anchorBarArrow .sapMBtnIcon,
+.sapUiSizeCompact .sapUxAPAnchorBar.sapUxAPAnchorBarScrollRight .anchorBarArrow .sapMBtnIcon {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnInner .sapMBtnContent,
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnInner .sapMBtnIcon {
+	height: 1.8rem;
+	line-height: 1.8rem;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnInner.sapMBtnIconLast {
+	padding-right: 0;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBar .sapUxAPAnchorBarButton .sapMBtnIcon {
+	right: 0;
+	line-height: 1.5rem;
+	margin: 0;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBarButton > sapMBtnIconLast > .sapMBtnContent {
+	padding-right: 0;
+}
+
+.sapUiSizeCompact .sapUxAPAnchorBarButton .sapMBtnContent {
+	line-height: 1.375rem;
+}
+
+// Scroll button container
+.sapUiSizeCompact .sapUxAPAnchorBar .anchorBarArrow > .sapUiHLayoutChildWrapper {
+	height: 2rem;
+}
+
+//Override showing focus of the internal button of MenuButton in IE and Edge
+html[data-sap-ui-browser^="ie"],
+html[data-sap-ui-browser^="ed"] {
+	.sapUxAPAnchorBarButton.sapMMenuBtn .sapMSBInner .sapMBtnFocusDiv {
+		border: 0 none;
+	}
+}
+
+// Styles needed for the anchorBarButtonColor property
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorPositive:hover:not(.sapMBtnDisabled) .sapMBtnInner .sapMBtnContent > bdi,
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorPositive .sapMBtnInner .sapMBtnContent,
+.sapUiSizeCompact .sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorPositive .sapMBtnInner .sapMBtnContent  {
+	color: @sapUiPositiveText;
+}
+
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNegative:hover:not(.sapMBtnDisabled) .sapMBtnInner .sapMBtnContent > bdi,
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNegative .sapMBtnInner .sapMBtnContent,
+.sapUiSizeCompact .sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNegative .sapMBtnInner .sapMBtnContent {
+	color: @sapUiNegativeText;
+}
+
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorCritical:hover:not(.sapMBtnDisabled) .sapMBtnInner .sapMBtnContent > bdi,
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorCritical .sapMBtnInner .sapMBtnContent,
+.sapUiSizeCompact .sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorCritical .sapMBtnInner .sapMBtnContent  {
+	color: @sapUiCriticalText;
+}
+
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNeutral:hover:not(.sapMBtnDisabled) .sapMBtnInner .sapMBtnContent > bdi,
+.sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNeutral .sapMBtnInner .sapMBtnContent,
+.sapUiSizeCompact .sapMIBar.sapUxAPAnchorBar .sapMBarChild.sapUxAPAnchorBarButton.sapUxAPAnchorBarButtonColorNeutral .sapMBtnInner .sapMBtnContent   {
+	color: @sapUiNeutralText;
+}

package/src/sap/uxap/themes/sap_belize_base/BreadCrumbs.less

@@ -0,0 +1,92 @@
+/* ===================================== */
+/* CSS for control sap.uxap/BreadCrumbs  */
+/* Base theme                            */
+/* ===================================== */
+
+.sapUxAPBreadCrumbs {
+	margin: 0 0 0.5rem 0;
+	height: 1.25rem;
+
+	.sapMLnk, .sapMText, .sapUxAPTubeIcon, .sapMSlt {
+		vertical-align: middle;
+	}
+
+	& .sapMSlt {
+		border: 0;
+		margin: 0;
+		height: 1.25rem;
+
+		.sapMSltArrow {
+			margin-right: -0.5rem;
+			background-color: transparent;
+			line-height: 1.25rem;
+		}
+		.sapMSltLabel {
+			padding-left: 0;
+			padding-right: 1.5rem;
+			line-height: 1.25rem;
+		}
+	}
+
+	& .sapMSltHoverable:hover:not(.sapMSltPressed) > .sapMSltArrow {
+		background-color: transparent;
+	}
+
+	.sapUxAPBreadCrumbsDots {
+		color: @sapUiLink;
+		font-weight: normal;
+		font-size: 0.875rem;
+		text-decoration: none;
+	}
+
+	div:nth-child(1) {
+		white-space: nowrap;
+		padding-right: 2rem;
+	}
+
+	& > ul {
+		list-style-type: none;
+		display: inline;
+		padding: 0;
+		margin: 0;
+
+		li {
+			display: inherit;
+			padding: 0;
+			margin: 0;
+		}
+	}
+
+	.sapUxAPTubeIcon {
+		margin: 0 0.5rem 0 0.5rem;
+	}
+
+	&.sapUxAPFullWidth {
+		width: 100%;
+	}
+
+	.sapUxAPInvisible {
+		visibility: hidden;
+	}
+	
+	.sapMText:focus {
+		outline: 0.0625rem dotted @sapUiContentFocusColor;
+		outline-offset: 0.2rem;
+	}
+
+	.sapMSlt {
+		background-color: transparent;
+
+		.sapMSltLabel {
+			color: @sapUiContentLabelColor;
+		}
+	}
+
+	.sapMSltPressed > .sapMSltArrow::before {
+		color: @sapUiContentIconColor;
+	}
+}
+
+.sapUiSizeCompact .sapUxAPBreadCrumbs & .sapMSlt {
+	height: 1.625rem;
+}

package/src/sap/uxap/themes/sap_belize_base/HierarchicalSelect.less

@@ -0,0 +1,197 @@
+/* ============================================ */
+/* CSS for control sap.uxap/HierarchicalSelect  */
+/* Base theme                                   */
+/* ============================================ */
+
+.sapUxAPHierarchicalSelect {
+	width: 2rem;
+	margin: 0;
+
+	.sapMSltLabel {
+		padding: 0 2.5rem 0 1rem;
+	}
+
+	.sapMSltIcon {
+		width: 1.625rem;
+		height: 1.625rem;
+		line-height: 1.625rem;
+		font-size: 1rem;
+		padding: 0;
+		border-radius: 0.125rem;
+		position: absolute;
+		top: 0.6875rem;
+
+		&::before {
+			width: 1.625rem;
+			height: 1.625rem;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+	}
+
+	&.sapMSltHoverable.sapMSltIconOnly.sapMSltPressed.sapMSlt.sapMSltFocused > .sapMSltIcon {
+		outline: none;
+	}
+}
+
+.sapUiSizeCompact .sapUxAPHierarchicalSelect.sapMSlt,
+.sapUiSizeCompact .sapUiContainer-Narrow .sapUxAPHierarchicalSelect.sapMSlt {
+	height: 2rem;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.sapUiSizeCompact .sapUxAPHierarchicalSelect .sapMSltIcon {
+	top: 0.125rem;
+}
+
+/* select label */
+
+.sapUxAPHierarchicalSelect,
+.sapUxAPHierarchicalSelect .sapMSltLabel,
+.sapUxAPHierarchicalSelect .sapMSltArrow {
+	line-height: 3rem;
+}
+
+.sapUiSizeCompact .sapUxAPHierarchicalSelect,
+.sapUiSizeCompact .sapUxAPHierarchicalSelect .sapMSltLabel,
+.sapUiSizeCompact .sapUxAPHierarchicalSelect .sapMSltArrow {
+	line-height: 2rem;
+}
+
+.sapUxAPHierarchicalSelect .sapMSltArrow,
+.sapUiSizeCompact .sapUxAPHierarchicalSelect .sapMSltArrow {
+	width: 2.5rem;
+}
+
+.sapMSltPicker .sapUxAPHierarchicalSelect.sapMSltBar::after {
+	font-family: "SAP-icons";
+	speak: none;
+	content: "\e03e";
+}
+
+.sapUiSizeCompact .sapMSltPicker .sapUxAPHierarchicalSelect.sapMSltBar::after {
+	line-height: 2rem;
+}
+
+/* OVERVIEW BUTTON */
+.sapUxAPHierarchicalSelect.sapMSltIconOnly {
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 3rem;
+}
+
+.sapUiSizeCompact .sapUxAPHierarchicalSelect.sapMSltIconOnly {
+	height: 2rem;
+}
+
+/* inner list */
+
+.sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem,
+.sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
+	height: auto;
+	border-bottom: none;
+}
+
+.sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem,
+.sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
+	white-space: normal;
+	line-height: normal;
+	padding: 1rem 0.5rem 1rem 1rem;
+}
+
+.sapUiSizeCompact .sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem,
+.sapUiSizeCompact .sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
+	padding: 0.5rem;
+}
+
+.sapUxAPHierarchicalSelectSecondLevel.sapMSelectListItem {
+	text-indent: 1.5rem;
+}
+
+.sapUxAPHierarchicalSelectUpperCase .sapMSltLabel,
+.sapMSltPickerFirstLevelUpperCase .sapMInputBaseInner,
+.sapMSltPickerFirstLevelUpperCase .sapUxAPHierarchicalSelectFirstLevel.sapMSelectListItem {
+	text-transform: uppercase;
+}
+
+/* styling needed to achieve underline of the select label on phone */
+.sapUxAPObjectPageLayout-Std-Phone, .sap-phone {
+
+	.sapUxAPHierarchicalSelect {
+		display: flex;
+		 .sapMSltLabel {
+			position: relative;
+			padding-left: 0;
+			display: inline-block;
+			vertical-align: top;
+			line-height: 2.2rem;
+			width: auto;
+			padding-right: 0;
+			overflow: visible;
+		 	min-width: 0;
+			.sapMSelectListItemText {
+				display: inline-block;
+				width: 100%;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				box-sizing: border-box;
+			}
+		}
+
+		.sapMSltArrow {
+			position: static;
+			flex-shrink: 0;
+			margin-left: auto;
+		}
+	}
+
+	.sapMSlt.sapUxAPHierarchicalSelect.sapMBarChild {
+		height: 3rem;
+		border: none;
+		padding-left: 1rem;
+	}
+}
+
+.sap-phone .sapUiSizeCompact,
+.sapUiSizeCompact .sapUxAPObjectPageLayout-Std-Phone {
+	.sapUxAPHierarchicalSelect .sapMSltLabel {
+		padding-bottom: 0.3rem;
+	}
+
+	.sapMSlt.sapUxAPHierarchicalSelect {
+		height: 2rem;
+	}
+}
+
+/* IE and Edge ignores outline-offset. Use an overlay: */
+/* TODO remove after the end of support for Internet Explorer */
+html[data-sap-ui-browser^="ie"].sap-desktop,
+html[data-sap-ui-browser^="ed"].sap-desktop {
+	.sapMSlt.sapUxAPHierarchicalSelect:focus  > .sapMSltArrow {
+		box-shadow: none;
+	}
+
+	.sapUxAPHierarchicalSelect.sapMSltHoverable.sapMSltIconOnly.sapMSlt:not(.sapMSltPressed):focus {
+		&:before {
+			border: none;
+		}
+		> .sapMSltIcon {
+			outline: none;
+			position: relative;
+		}
+		> .sapMSltIcon:after {
+			content: " ";
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			left: 0;
+			top: 0;
+			border: 1px dashed @sapUiContentFocusColor;
+			pointer-events: none;
+		}
+	}
+}