@openui5/sap.ui.commons 1.145.0 → 1.146.0

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

@@ -1,11 +1,16 @@
+/* ===================================== */
+/* CSS for control sap.ui.commons/Image  */
+/* Base theme                            */
+/* ===================================== */
+
 .sapUiImg {
 	vertical-align: top;
 	border: none;
 }
 
 .sapUiImgNoSource {
-	width:0px;
-	height:0px;
+	width: 0;
+	height: 0;
 }
 
 .sapUiImgWithHandler {

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

@@ -1,6 +1,7 @@
-/* ================================================== */
-/* CSS for control sap.ui.commons/InPlaceEdit.control */
-/* ================================================== */
+/* =========================================== */
+/* CSS for control sap.ui.commons/InPlaceEdit  */
+/* Base theme                                  */
+/* =========================================== */
 
 .sapUiIpeInvisible,
 .sapUiIpeInvisible.sapUiTv,
@@ -9,7 +10,7 @@
 	display: none;
 }
 
-.sapUiIpe{
+.sapUiIpe {
 	border: 1px solid transparent; /* to avoid reposition if border is painted on focus */
 	box-sizing: border-box;
 	overflow: hidden;
@@ -19,13 +20,13 @@
 }
 
 /* Content area if revert button is available*/
-.sapUiIpeUndo{
+.sapUiIpeUndo {
 	padding-right: 22px;
 }
 
 .sapUiIpe:hover,
-.sapUiIpeFocus{
-	border-color: @sapUiHighlight;
+.sapUiIpeFocus {
+	border-color: var(--sapHighlightColor);
 	cursor: text;
 	outline: none;
 }
@@ -33,111 +34,110 @@
 .sapUiIpe.sapUiIpeRo:hover,
 .sapUiIpeFocus.sapUiIpeRo,
 .sapUiIpe.sapUiIpeLink:hover,
-.sapUiIpeFocus.sapUiIpeLink{
+.sapUiIpeFocus.sapUiIpeLink {
 	border-color: transparent;
 	cursor: default;
 }
 
 /* disable outline on display controls - focus is visualized on outer DIV */
 .sapUiIpeFocus .sapUiTv,
-.sapUiIpeFocus .sapUiLnk:focus{
+.sapUiIpeFocus .sapUiLnk:focus {
 	outline: none;
 }
 
-.sapUiIpeUndo{
-	background-color: @sapUiListHoverBackground;
+.sapUiIpeUndo {
+	background-color: var(--sapList_Hover_Background);
 }
 
 .sapUiIpeEdit,
-.sapUiIpeEdit.sapUiIpeUndo{
+.sapUiIpeEdit.sapUiIpeUndo {
 	border: none;
-	background-color: @sapUiFieldBackground;
+	background-color: var(--sapField_Background);
 }
 
 /* success state */
 .sapUiIpeSucc,
-.sapUiIpeUndo.sapUiIpeSucc{
-	border-color: @sapUiFieldSuccessColor;
-	background-color: @sapUiFieldSuccessBackground;
+.sapUiIpeUndo.sapUiIpeSucc {
+	border-color: var(--sapField_SuccessColor);
+	background-color: var(--sapField_SuccessBackground);
 }
 
 /* invalid state */
 .sapUiIpeErr,
-.sapUiIpeUndo.sapUiIpeErr{
-	border-color: @sapUiFieldInvalidColor;
-	background-color: @sapUiFieldInvalidBackground;
+.sapUiIpeUndo.sapUiIpeErr {
+	border-color: var(--sapField_InvalidColor);
+	background-color: var(--sapField_InvalidBackground);
 }
 
 /* warning state */
 .sapUiIpeWarn,
-.sapUiIpeUndo.sapUiIpeWarn{
-	border-color: @sapUiFieldWarningColor;
-	background-color: @sapUiFieldWarningBackground;
+.sapUiIpeUndo.sapUiIpeWarn {
+	border-color: var(--sapField_WarningColor);
+	background-color: var(--sapField_WarningBackground);
 }
 
 /* Content area if revert button is available*/
-.sapUiIpeCont{
+.sapUiIpeCont {
 	height: 100%;
 	position: relative;
 	overflow: hidden;
 }
 
-.sapUiIpeLink > .sapUiIpeCont{
+.sapUiIpeLink > .sapUiIpeCont {
 	display: inline-block;
 	box-sizing: border-box;
 	max-width: 100%;
 }
 
-.sapUiIpeEdit.sapUiIpeLink > .sapUiIpeCont{
+.sapUiIpeEdit.sapUiIpeLink > .sapUiIpeCont {
 	display: block;
 	box-sizing: content-box;
 	padding-right: auto;
 }
 
 .sapUiIpeLink:hover > .sapUiIpeCont,
-.sapUiIpeFocus.sapUiIpeLink > .sapUiIpeCont{
+.sapUiIpeFocus.sapUiIpeLink > .sapUiIpeCont {
 	padding-right: 20px;
 }
 
-.sapUiIpeEdit.sapUiIpeFocus.sapUiIpeLink > .sapUiIpeCont{
+.sapUiIpeEdit.sapUiIpeFocus.sapUiIpeLink > .sapUiIpeCont {
 	padding-right: 0;
 }
 
 /* Revert/Edit Button */
 .sapUiIpe > .sapUiBtnS.sapUiBtnLite,
-.sapUiIpeCont > .sapUiBtnS.sapUiBtnLite{
+.sapUiIpeCont > .sapUiBtnS.sapUiBtnLite {
 	position: absolute;
 	right: -1px; /*because of border of outer DIV in display mode*/
-	/*top: -1px;*/ /*because of border of outer DIV in display mode*/
 	top: 0;
 	height: 100%;
 }
 
-.sapUiIpeEdit > .sapUiBtnS.sapUiBtnLite{
+.sapUiIpeEdit > .sapUiBtnS.sapUiBtnLite {
 	visibility: hidden;
-	border-color: @sapUiHighlight;
+	border-color: var(--sapHighlightColor);
 	right: 0;
 	top: 0;
 	border-style: solid;
 	border-width: 1px 1px 1px 0;
 }
 
-.sapUiIpeEdit.sapUiIpeUndo > .sapUiBtnS.sapUiBtnLite{
+.sapUiIpeEdit.sapUiIpeUndo > .sapUiBtnS.sapUiBtnLite {
 	visibility: visible;
 }
 
-.sapUiIpeCont > a{
+.sapUiIpeCont > a {
 	height: 100%;
 	padding-right: 2px; /* to have some space before edit button */
 }
 
-.sapUiIpeEBtn{
+.sapUiIpeEBtn {
 	visibility: hidden;
 }
 
 .sapUiIpe:hover > .sapUiIpeEBtn,
 .sapUiIpeFocus > .sapUiIpeEBtn,
 .sapUiIpe:hover > .sapUiIpeCont > .sapUiIpeEBtn,
-.sapUiIpeFocus > .sapUiIpeCont > .sapUiIpeEBtn{
+.sapUiIpeFocus > .sapUiIpeCont > .sapUiIpeEBtn {
 	visibility: visible;
 }

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

@@ -1,6 +1,7 @@
-/* ============= */
-/* Label control */
-/* ============= */
+/* ===================================== */
+/* CSS for control sap.ui.commons/Label  */
+/* Base theme                            */
+/* ===================================== */
 
 .sapUiLbl {
 	vertical-align: top;
@@ -31,21 +32,21 @@
 }
 
 /* a label for a required control */
-.sapUiLbl.sapUiLblReqEnd:after {
+.sapUiLbl.sapUiLblReqEnd::after {
 	padding-left: 5px;
 }
 
-.sapUiLbl.sapUiLblReqBeg:before {
+.sapUiLbl.sapUiLblReqBeg::before {
 	padding-right: 5px;
 }
 
 .sapUiLbLReqInd { /* to allow reuse */
-	content : '*';
-	color: @sapUiFieldInvalidColor;
+	content: '*';
+	color: var(--sapField_InvalidColor);
 }
 
-.sapUiLbl.sapUiLblReqEnd:after,
-.sapUiLbl.sapUiLblReqBeg:before {
+.sapUiLbl.sapUiLblReqEnd::after,
+.sapUiLbl.sapUiLblReqBeg::before {
 	.sapUiLbLReqInd;
 }
 
@@ -55,7 +56,7 @@
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiLbl {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 /* ============================ */
@@ -63,28 +64,30 @@
 /* ============================ */
 
 /* GridLayout */
-td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl{
+td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl {
 	max-width: 100%;
 	float: right;
 }
 
 /* required symbol is now left - if indicator is already at begin, don't change it */
-td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl.sapUiLblReqEnd:after {
+td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl.sapUiLblReqEnd::after {
 	padding-left: 0;
-	content : '';
+	content: '';
 }
 
-td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl.sapUiLblReqEnd:before {
+td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl.sapUiLblReqEnd::before {
+
 	.sapUiLbLReqInd;
 }
 
 /* ResponsiveLayout */
-.sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > div > .sapUiLbl.sapUiLblReqEnd:after { /* required symbol is now left */
+.sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > div > .sapUiLbl.sapUiLblReqEnd::after { /* required symbol is now left */
 	padding-left: 0;
-	content : '';
+	content: '';
 }
 
-.sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > div > .sapUiLbl.sapUiLblReqEnd:before {
+.sapUiRLElementWithLabel > .sapUiRFLRow:first-child > .sapUiRFLContainer:first-child:not(.sapUiRFLFullLength) > div > .sapUiLbl.sapUiLblReqEnd::before {
+
 	.sapUiLbLReqInd;
 }
 
@@ -101,30 +104,22 @@ td.sapUiFormElementLbl:not(.sapUiGridLabelFull) > .sapUiLbl.sapUiLblReqEnd:befor
 	float: right;
 }
 
-.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapUiLbl.sapUiLblReqEnd:after,
-.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapUiLbl.sapUiLblReqEnd:after,
-.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapUiLbl.sapUiLblReqEnd:after,
-.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapUiLbl.sapUiLblReqEnd:after {
+.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapUiLbl.sapUiLblReqEnd::after,
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapUiLbl.sapUiLblReqEnd::after,
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapUiLbl.sapUiLblReqEnd::after,
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapUiLbl.sapUiLblReqEnd::after {
 	padding-left: 0;
-	content : '';
+	content: '';
 }
 
-.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapUiLbl.sapUiLblReqEnd:before,
-.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapUiLbl.sapUiLblReqEnd:before,
-.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapUiLbl.sapUiLblReqEnd:before,
-.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapUiLbl.sapUiLblReqEnd:before {
+.sapUiRespGridMedia-Std-Phone.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanS12) > .sapUiLbl.sapUiLblReqEnd::before,
+.sapUiRespGridMedia-Std-Tablet.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanM12) > .sapUiLbl.sapUiLblReqEnd::before,
+.sapUiRespGridMedia-Std-Desktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanL12) > .sapUiLbl.sapUiLblReqEnd::before,
+.sapUiRespGridMedia-Std-LargeDesktop.sapUiFormResGridCont > .sapUiFormElementLbl:not(.sapUiRespGridSpanXL12) > .sapUiLbl.sapUiLblReqEnd::before {
+
 	.sapUiLbLReqInd;
 }
 
-/*
-.sapUiLblInfo{
-	position: absolute;
-	line-height: @sapUiLineHeight;
-	left: 0;
-	top: 0;
-	background-color: @sapBackgroundColor;
-}
-*/
 span.sapUiLblIco { /* icon font */
 	margin-top: 0;
 	line-height: @sapUiLineHeight;

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

@@ -1,13 +1,14 @@
-/* ============= */
-/* Link control  */
-/* ============= */
+/* ==================================== */
+/* CSS for control sap.ui.commons/Link  */
+/* base theme                           */
+/* ==================================== */
 
 .sapUiLnk,
 .sapUiLnkDsbl {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapUiFontSize;
 	line-height: @sapUiLineHeight;
-	color: @sapUiLink;
+	color: var(--sapLinkColor);
 	vertical-align: top;
 	white-space: nowrap;
 	overflow: hidden;
@@ -17,28 +18,28 @@
 
 .sapUiLnk:active,
 .sapUiLnk:focus {
-	color: @sapUiLinkActive;
+	color: var(--sapLink_Active_Color);
 }
 
 .sapUiLnk:visited {
-	color: @sapUiLinkVisited;
+	color: var(--sapLink_Visited_Color);
 }
 
 .sapUiLnk:hover {
-	color: @sapUiLinkHover;
+	color: var(--sapLink_Hover_Color);
 }
 
 .sapUiLnkDsbl {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 	cursor: default;
 }
 
 /* If control is used on black/dark background */
 .sapUiInverted-CTX .sapUiLnk {
-	color: @sapUiLinkInverted;
+	color: var(--sapLink_InvertedColor);
 }
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiLnk {
-	color: @sapUiLink;
+	color: var(--sapLinkColor);
 }

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

@@ -1,3 +1,8 @@
+/* =========================================== */
+/* CSS for control sap.ui.commons/RadioButton  */
+/* base theme                                  */
+/* =========================================== */
+
 .sapUiRb {
 	vertical-align: top;
 	line-height: @sapUiLineHeight;
@@ -14,7 +19,7 @@
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiRb {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapUiRb > label {
@@ -24,11 +29,11 @@
 
 /* disabled */
 .sapUiRbDis > label {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 /* make outline on control borders because otherwise it is cut in layout containers using overflow: hidden */
-.sapUiRb:focus{
+.sapUiRb:focus {
 	outline: 1px dotted @sapUiBaseBorder;
 	outline-offset: -1px;
 }

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

@@ -1,51 +1,47 @@
 
-/* ======================================================= */
-/* CSS for control sap.ui.commons/RadioButtonGroup.control */
-/* ======================================================= */
+/* ================================================ */
+/* CSS for control sap.ui.commons/RadioButtonGroup  */
+/* base theme                                       */
+/* ================================================ */
 
-.sapUiRbG:not(.sapUiRbGTab){
+.sapUiRbG:not(.sapUiRbGTab) {
 	display: inline-block;
 }
 
-.sapUiRbGTab{
-	display: -webkit-box;
-	display: -webkit-flex;
+.sapUiRbGTab {
 	display: flex;
 }
 
-.sapUiRbGCol{
+.sapUiRbGCol {
 	vertical-align: top;
 	min-width: 10px;
 	margin-right: 15px;
 	overflow: hidden; /* needed in Safari */
 }
 
-.sapUiRbGTabFlex > .sapUiRbGCol{
+.sapUiRbGTabFlex > .sapUiRbGCol {
 	flex-grow: 1;
-	-webkit-flex-grow: 1;
 }
 
-.sapUiRbGDummy{
+.sapUiRbGDummy {
 	flex-grow: 1000;
-	-webkit-flex-grow: 1000;
-	-webkit-box-flex: 1000;
 	min-width: 1px;
 }
 
 .sapUiRbG > .sapUiRb,
-.sapUiRbGCol > .sapUiRb{
+.sapUiRbGCol > .sapUiRb {
 	float: left;
 	clear: left;
 	text-overflow: ellipsis;
 	max-width: 100%;
 }
 
-.sapUiRbG.sapUiRbG1Row > .sapUiRb{
+.sapUiRbG.sapUiRbG1Row > .sapUiRb {
 	float: none;
 	clear: none;
 	margin-right: 15px;
 }
 
-.sapUiRbGCol > .sapUiRb{
+.sapUiRbGCol > .sapUiRb {
 	width: 100%;
-}
+}

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/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,