@openui5/sap.ui.commons 1.145.1 → 1.147.0

package/src/sap/ui/commons/themes/base/RatingIndicator.less

@@ -1,7 +1,12 @@
-// Define image URLs to be used in control rendering code
-@_sap_ui_commons_RatingIndicator_SymbolSelected: url("img/rating/star_selected.png");
-@_sap_ui_commons_RatingIndicator_SymbolUnselected: url("img/rating/star_unselected.png");
-@_sap_ui_commons_RatingIndicator_SymbolHovered: url("img/rating/star_hover.png");
+/* =============================================== */
+/* CSS for control sap.ui.commons/RatingIndicator  */
+/* base theme                                      */
+/* =============================================== */
+
+/* Define image URLs to be used in control rendering code */
+@_sap_ui_commons_RatingIndicator_SymbolSelected: url('img/rating/star_selected.png');
+@_sap_ui_commons_RatingIndicator_SymbolUnselected: url('img/rating/star_unselected.png');
+@_sap_ui_commons_RatingIndicator_SymbolHovered: url('img/rating/star_hover.png');
 
 .sapUiRating {
 	display: inline-block;
@@ -19,7 +24,7 @@
 .sapUiRatingItm {
 	display: inline-block;
 	border: 0 none;
-	line-height: 0px;
+	line-height: 0;
 	position: relative;
 	margin-left: 1px;
 	margin-right: 1px;
@@ -28,8 +33,8 @@
 .sapUiRatingItmOvrflw {
 	display: inline-block;
 	position: absolute;
-	top: 0px;
-	right: 0px;
+	top: 0;
+	right: 0;
 	width: 100%;
 	height: 100%;
 	overflow:hidden;
@@ -41,6 +46,6 @@
 
 .sapUiRatingItmOvrflw > .sapUiRatingItmOvrflwImg {
 	position: absolute;
-	top: 0px;
-	right: 0px;
-}
+	top: 0;
+	right: 0;
+}

package/src/sap/ui/commons/themes/base/RichTooltip.less

@@ -1,7 +1,12 @@
+/* =========================================== */
+/* CSS for control sap.ui.commons/RichTooltip  */
+/* base theme                                  */
+/* =========================================== */
+
 .sapUiRtt {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapUiFontSize;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	background-color: @sapUiExtraLightBG;
 	position: relative;
 	display: table;

package/src/sap/ui/commons/themes/base/RoadMap.less

@@ -1,6 +1,7 @@
-/* ============================================== */
-/* CSS for control sap.ui.commons/RoadMap.control */
-/* ============================================== */
+/* ======================================= */
+/* CSS for control sap.ui.commons/RoadMap  */
+/* base theme                              */
+/* ======================================= */
 
 /* General Styles */
 .sapUiRoadMap {
@@ -41,25 +42,16 @@
 	position: relative;
 }
 
-.sapUiRoadMapSubStep {
-}
-
 .sapUiRoadMapSubStep.sapUiRoadMapStep {
 	padding-top: 4px;
 }
 
-.sapUiRoadMapStepEnd {
-}
-
 .sapUiRoadMapSelected {
 	font-weight: bold;
 }
 
-.sapUiRoadMapExpanded {
-}
-
 .sapUiRoadMapDisabled {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 .sapUiRoadMapStepAdd1,
@@ -73,11 +65,11 @@
 }
 
 .sapUiRoadMapStepAdd1 {
-	left: 0px;
+	left: 0;
 }
 
 .sapUiRoadMapStepAdd2 {
-	right: 0px;
+	right: 0;
 }
 
 .sapUiRoadMapStepEnd.sapUiRoadMapExpanded > .sapUiRoadMapStepAdd1,
@@ -105,21 +97,21 @@
 	position: relative;
 }
 
-.sapUiRoadMapStepBox:focus{
+.sapUiRoadMapStepBox:focus {
 	outline: 1px dotted @sapUiBlackBorder;
 }
 
-.sapUiRoadMapSubStep.sapUiRoadMapStep > .sapUiRoadMapStepBox{
+.sapUiRoadMapSubStep.sapUiRoadMapStep > .sapUiRoadMapStepBox {
 	line-height: 16px;
 	width: 19px;
 }
 
-.sapUiRoadMapSelected > .sapUiRoadMapStepBox{
-	border: 1px solid @sapUiFieldInvalidColor;
+.sapUiRoadMapSelected > .sapUiRoadMapStepBox {
+	border: 1px solid var(--sapField_InvalidColor);
 	cursor: default;
 }
 
-.sapUiRoadMapDisabled > .sapUiRoadMapStepBox{
+.sapUiRoadMapDisabled > .sapUiRoadMapStepBox {
 	border: 1px solid @sapUiButtonDisabledBorderColor;
 	cursor: default;
 }
@@ -132,13 +124,12 @@
 	display: inline-block;
 	width: 90px;
 	overflow: hidden;
-	/*text-overflow: ellipsis;*/
 	word-wrap: break-word;
-	height: 38px;/*double line-height*/
+	height: 38px; /*double line-height*/
 }
 
-.sapUiRoadMapTitle > span:after {
-	content: "...";
+.sapUiRoadMapTitle > span::after {
+	content: '...';
 }
 
 .sapUiRoadMapStep:hover > .sapUiRoadMapTitle {
@@ -153,28 +144,6 @@
 	text-decoration: none;
 }
 
-/* No special styling for Expanded Step titles according to UX
-.sapUiRoadMapExpanded > .sapUiRoadMapTitle {
-	position: relative;
-	left: 15px;
-	text-align: left;
-	width: 55px;
-}
-
-html[dir=rtl] .sapUiRoadMapExpanded > .sapUiRoadMapTitle {
-	text-align: right;
-}
-
-.sapUiRoadMapExpanded.sapUiRoadMapStepEnd > .sapUiRoadMapTitle{
-	left: auto;
-	right: 15px;
-	text-align: right;
-}
-
-html[dir=rtl] .sapUiRoadMapExpanded.sapUiRoadMapStepEnd > .sapUiRoadMapTitle {
-	text-align: left;
-}*/
-
 /* Delimiter Styles */
 .sapUiRoadMapDelim {
 	background-position: center 4px;
@@ -192,22 +161,22 @@ html[dir=rtl] .sapUiRoadMapExpanded.sapUiRoadMapStepEnd > .sapUiRoadMapTitle {
 	cursor: pointer;
 }
 
-.sapUiRoadMapStartScroll:after {
-	content: "<<";
+.sapUiRoadMapStartScroll::after {
+	content: '<<';
 }
 
-.sapUiRoadMapStartFixed:after{
-	content: "|>";
+.sapUiRoadMapStartFixed::after{
+	content: '|>';
 }
 
 .sapUiRoadMapEndScroll {
 	cursor: pointer;
 }
 
-.sapUiRoadMapEndScroll:after {
-	content: ">>";
+.sapUiRoadMapEndScroll::after {
+	content: '>>';
 }
 
-.sapUiRoadMapEndFixed:after {
-	content: "<|";
+.sapUiRoadMapEndFixed::after {
+	content: '<|';
 }

package/src/sap/ui/commons/themes/base/RowRepeater.less

@@ -1,6 +1,7 @@
-/* ================================================== */
-/* CSS for control sap.ui.commons/RowRepeater.control */
-/* ================================================== */
+/* =========================================== */
+/* CSS for control sap.ui.commons/RowRepeater  */
+/* base theme                                  */
+/* =========================================== */
 
 /* RowRepeater root
 
@@ -86,14 +87,10 @@ Three possible designs with corresponding CSS classes:
 /* Page */
 .sapUiRrPage {
 	list-style: none;
-	padding-left: 0px;
+	padding-left: 0;
 	position: relative;
-	margin-top: 0px;
-	margin-bottom:0px;
-}
-
-/* Row */
-.sapUiRrRow {
+	margin-top: 0;
+	margin-bottom:0;
 }
 
 /* No Data - Special Row */

package/src/sap/ui/commons/themes/base/SearchField.less

@@ -1,6 +1,7 @@
-/* ======================================================= */
-/* Base CSS for control sap.ui.commons/SearchField.control */
-/* ======================================================= */
+/* =========================================== */
+/* CSS for control sap.ui.commons/SearchField  */
+/* base theme                                  */
+/* =========================================== */
 
 .sapUiSearchField {
 	display: inline-block;
@@ -19,7 +20,7 @@
 	margin-top: 1px;
 }
 
-.sapUiSearchField input[type="search"]::-webkit-search-cancel-button {
+.sapUiSearchField input[type='search']::-webkit-search-cancel-button {
 	/* Do not show the 'X' in the searchfield */
 	-webkit-appearance: none;
 }
@@ -29,18 +30,19 @@
 }
 
 /*The cursor position in Safari on Mac in LTR case is to far on the right*/
-html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldTf > .sapUiTf,
-html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb > .sapUiTf {
+html[data-sap-ui-browser^='sf'][data-sap-ui-os='mac']:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldTf > .sapUiTf,
+html[data-sap-ui-browser^='sf'][data-sap-ui-os='mac']:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb > .sapUiTf {
 	margin-left: -4px;
 	padding-left: 0px;
 }
 
-html[data-sap-ui-browser^="cr"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb.sapUiSearchFieldCbProv > .sapUiTf,
-html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb.sapUiSearchFieldCbProv > .sapUiTf {
+html[data-sap-ui-browser^='cr'][data-sap-ui-os='mac']:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb.sapUiSearchFieldCbProv > .sapUiTf,
+html[data-sap-ui-browser^='sf'][data-sap-ui-os='mac']:not([dir=rtl]) .sapUiSearchField > .sapUiSearchFieldCb.sapUiSearchFieldCbProv > .sapUiTf {
 	padding-left: 16px;
 }
 
-.sapUiSearchFieldTf, .sapUiSearchFieldCb {
+.sapUiSearchFieldTf,
+.sapUiSearchFieldCb {
 	width: auto;
 	position: absolute;
 	left: 0;
@@ -64,9 +66,9 @@ html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearc
 	position: absolute;
 	font-size: 0;
 	color: transparent;
-	-moz-user-select: none;
 	-webkit-user-select: none;
-	background-image: url("img/search/search.png");
+	user-select: none;
+	background-image: url('img/search/search.png');
 	height: 15px;
 	width: 15px;
 	background-repeat: no-repeat;
@@ -80,7 +82,7 @@ html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearc
 .sapUiSearchFieldClear.sapUiSearchFieldVal.sapUiSearchFieldDsbl > .sapUiSearchFieldCb > .sapUiSearchFieldIco {
 	font-size: 0;
 	color: transparent;
-	background-image: url("img/search/search.png");
+	background-image: url('img/search/search.png');
 }
 
 .sapUiSearchFieldProvIco {
@@ -102,7 +104,7 @@ html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearc
 }
 
 .sapUiSearchFieldDsbl .sapUiSearchFieldProvIco,
-.sapUiSearchFieldDsbl .sapUiSearchFieldIco{
+.sapUiSearchFieldDsbl .sapUiSearchFieldIco {
 	cursor: auto;
 	opacity: 0.6;
 }
@@ -134,4 +136,4 @@ html[data-sap-ui-browser^="sf"][data-sap-ui-os="mac"]:not([dir=rtl]) .sapUiSearc
 	font-size: inherit;
 	color: inherit;
 	background-image: none;
-}
+}

package/src/sap/ui/commons/themes/base/SegmentedButton.less

@@ -1,9 +1,10 @@
-/* ====================================================== */
-/* CSS for control sap.ui.commons/SegmentedButton.control */
-/* ====================================================== */
+/* ============================================= */
+/* CSS for control sap.ui.commons/SegmentButton  */
+/* base theme                                    */
+/* ============================================= */
 
 .sapUiSegmentedButton {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 	white-space: nowrap;
 }
 
@@ -13,7 +14,7 @@
 }
 
 .sapUiSegmentedButton > span > button:first-of-type {
-	border-radius:  2px 0 0 2px;
+	border-radius: 2px 0 0 2px;
 	border-left-width: 1px;
 }
 
@@ -23,11 +24,11 @@
 
 .sapUiSegmentedButton > span > .sapUiBtnS.sapUiSegButtonSelected {
 	cursor: default;
-	background-color: @sapUiHighlight;
+	background-color: var(--sapHighlightColor);
 	color: @sapUiTextSelection;
 }
 
 .sapUiSegmentedButton > span > .sapUiBtnS.sapUiBtnStd:focus,
 .sapUiSegmentedButton > span > .sapUiBtnS.sapUiBtnStd.sapUiBtnStdFocus {
-	outline: 1px dashed @sapUiHighlight;
+	outline: 1px dashed var(--sapHighlightColor);
 }

package/src/sap/ui/commons/themes/base/Slider.less

@@ -1,16 +1,16 @@
-/* ================================================= */
-/* CSS for control sap.ui.commons/Slider.control     */
-/* ================================================= */
+/* ====================================== */
+/* CSS for control sap.ui.commons/Slider  */
+/* base theme                             */
+/* ====================================== */
 
-/* All DIV elements MUST have a POSITION definition, otherwise the calculation of the
-   grip position will not work */
+/* All DIV elements MUST have a POSITION definition, otherwise the calculation of the grip position will not work */
 
-.sapUiSli{
+.sapUiSli {
 	position: relative;
 	display: inline-block;
 	overflow: visible;
-	-moz-user-select: none;
 	-webkit-user-select: none;
+	user-select: none;
 	border: 1px solid @sapUiMediumBorder;
 }
 
@@ -76,12 +76,12 @@
 }
 
 .sapUiSliStd .sapUiSliText {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapUiSliRo .sapUiSliText,
 .sapUiSliDsbl .sapUiSliText {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 .sapUiSliVert .sapUiSliBar,

package/src/sap/ui/commons/themes/base/Splitter.less

@@ -1,19 +1,11 @@
-/* =============================================== */
-/* CSS for control sap.ui.commons/Splitter.control */
-/* =============================================== */
-/*
-.sapUiSplitterFocus,
-.sapUiVSplitterSecondPane:focus,
-.sapUiHSplitterSecondPane:focus,
-.sapUiVSplitterFirstPane:focus,
-.sapUiHSplitterFirstPane:focus {
-	outline: @sapUiBlackBorder dotted 1px;
-}
-*/
+/* ======================================== */
+/* CSS for control sap.ui.commons/Splitter  */
+/* base theme                               */
+/* ======================================== */
 
 .sapUiHorizontalSplitterBar:focus,
 .sapUiVerticalSplitterBar:focus {
-	outline: @sapUiHighlight dashed 1px;
+	outline: var(--sapHighlightColor) dashed 1px;
 }
 
 .sapUiVSplitterFirstPane {
@@ -21,14 +13,12 @@
 	display: inline-block;
 	vertical-align: top;
 	outline-offset: -1px;
-	/*overflow: hidden;*/
 }
 
 .sapUiHSplitterFirstPane {
 	width: 100%;
 	vertical-align: top;
 	outline-offset: -1px;
-	/*overflow: hidden;*/
 }
 
 .sapUiVSplitterSecondPane {
@@ -36,47 +26,41 @@
 	display: inline-block;
 	vertical-align: top;
 	outline-offset: -1px;
-	/*overflow: hidden;*/
 }
 
 .sapUiHSplitterSecondPane {
 	width: 100%;
 	vertical-align: top;
 	outline-offset: -1px;
-	/*overflow: hidden;*/
 }
 
 .sapUiVerticalSplitterBar {
-	background-image: url(img/splitter/splitter_vert_grip.gif);
+	background-image: url('img/splitter/splitter_vert_grip.gif');
 	background-color: darken(@sapUiBaseBG, 20);
 	background-position: center center;
 	background-repeat: no-repeat;
 	height: 100%;
 	display: inline-block;
 	vertical-align: top; /* needed to hide vertical scrollbar when all elements fit inside the pane. currently works only in FF*/
-	/*z-index:1;*/
 }
 
 .sapUiVerticalSplitterBarHidden {
 	display: none;
 	vertical-align: top; /* needed to hide vertical scrollbar when all elements fit inside the pane. currently works only in FF*/
 	height: 100%;
-	/*z-index:1;*/
 }
 
 .sapUiHorizontalSplitterBar {
-	background-image: url(img/splitter/splitter_horiz_grip.gif);
+	background-image: url('img/splitter/splitter_horiz_grip.gif');
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-color: darken(@sapUiBaseBG, 20);
-	width:100%;
-	/*z-index:1;*/
+	width: 100%;
 }
 
 .sapUiHorizontalSplitterBarHidden {
 	display: none;
 	width:100%;
-	/*z-index:1;*/
 }
 
 .sapUiVerticalSplitterBar:hover {
@@ -90,17 +74,17 @@
 }
 
 .sapUiVSBGhost {
-	background-image: url(img/splitter/checkerboard.png);
+	background-image: url('img/splitter/checkerboard.png');
 	background-repeat: repeat;
 	position: absolute;
-	cursor:   col-resize;
+	cursor: col-resize;
 	z-index: 20;
 }
 
 .sapUiHSBGhost {
-	background-image: url(img/splitter/checkerboard.png);
+	background-image: url('img/splitter/checkerboard.png');
 	background-repeat: repeat;
 	position: absolute;
-	cursor:  row-resize;
+	cursor: row-resize;
 	z-index: 20;
 }

package/src/sap/ui/commons/themes/base/TabStrip.less

@@ -1,9 +1,14 @@
+/* ======================================== */
+/* CSS for control sap.ui.commons/TabStrip  */
+/* base theme                               */
+/* ======================================== */
+
 .sapUiTabStrip {
 	border: solid 1px @sapUiMediumBorder;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapUiFontSize;
 	box-sizing: border-box;
-	position:relative;
+	position: relative;
 }
 
 .sapUiTabBar {
@@ -35,12 +40,11 @@
 }
 
 .sapUiTabDsbl {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
-.sapUiTabDsbl .sapUiTabIco {  /* make icon on disabled tab look faded out */
-	opacity: .3;
-	filter: alpha(opacity=30);
+.sapUiTabDsbl .sapUiTabIco { /* make icon on disabled tab look faded out */
+	opacity: 0.3;
 }
 
 .sapUiTabClose {
@@ -51,9 +55,9 @@
 }
 
 .sapUiTabIco {
-	width:16px; /* TODO: application contract... */
-	height:16px;
-	vertical-align:top;
+	width: 16px; /* TODO: application contract... */
+	height: 16px;
+	vertical-align: top;
 }
 
 span.sapUiTabIco {
@@ -63,23 +67,22 @@ span.sapUiTabIco {
 .sapUiTabBar .sapUiTabMenu {
 	display: inline-block;
 	float: right;
-	display:none; /* will be toggled by framework code */
+	display: none; /* will be toggled by framework code */
 }
 
 .sapUiTabPanel {
 	overflow: auto;
-	left:0;
-	right:0;
+	left: 0;
+	right: 0;
 }
 
 /* If height is defined it must be positioned absolute to fit the height*/
 .sapUiTabPanelHeight {
 	position: absolute;
-	bottom:0;
+	bottom: 0;
 }
 
 .sapUiTabStripNoSelection {
-	-moz-user-select: none;
 	-webkit-user-select: none;
 	user-select: none;
 }
@@ -88,7 +91,6 @@ span.sapUiTabIco {
 	display: inline-block;
 	position: absolute;
 	overflow: hidden;
-
 	left: 0;
 	right: 0;
 }
@@ -102,12 +104,9 @@ span.sapUiTabIco {
 	vertical-align: top;
 	visibility: hidden;
 	display: none;
-
 	box-sizing: border-box;
-
 	outline: none;
 	-webkit-user-select: none;  /* Chrome all / Safari all */
-	-moz-user-select: none;     /* Firefox all */
 	user-select: none;
 }
 
@@ -117,6 +116,7 @@ span.sapUiTabIco {
 }
 
 .sapUiTabStrip {
+
 	&.sapUiTabStripScrollForward .sapUiTabStripRightScrollIcon,
 	&.sapUiTabStripScrollBack .sapUiTabStripLeftScrollIcon {
 		visibility: visible;
@@ -124,6 +124,7 @@ span.sapUiTabIco {
 }
 
 .sapUiTabStrip.sapUiTabStripScrollable .sapUiTabBar {
+
 	.sapUiTabStripScrollIcon {
 		display: inline-block;
 	}
@@ -132,4 +133,4 @@ span.sapUiTabIco {
 		left: 16px;
 		right: 16px;
 	}
-}
+}

package/src/sap/ui/commons/themes/base/TextArea.less

@@ -1,12 +1,13 @@
-/* =============================================== */
-/* CSS for control sap.ui.commons/TextArea.control */
-/* =============================================== */
+/* ======================================== */
+/* CSS for control sap.ui.commons/TextArea  */
+/* base theme                               */
+/* ======================================== */
 
-.sapUiTxtA{
+.sapUiTxtA {
 	resize: none; /* disable safari resize */
 }
 
-.sapUiTf.sapUiTxtA:not(.sapUiTfInner){
+.sapUiTf.sapUiTxtA:not(.sapUiTfInner) {
 	height: auto; /* to overwrite defaults from TextField */
 	width: auto;
 	line-height: normal;