@openui5/sap.ui.commons 1.145.1 → 1.147.0

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

@@ -1,122 +1,115 @@
-/* ================================================ */
-/* CSS for control sap.ui.commons/TextField.control */
-/* ================================================ */
+/* ========================================= */
+/* CSS for control sap.ui.commons/TextField  */
+/* base theme                                */
+/* ========================================= */
 
 @_sap_ui_commons_TextField_Height: 16px;
 
-.sapUiTf{
+.sapUiTf {
 	box-sizing: border-box;
 	vertical-align: top;
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapUiFontSize;
 	-webkit-appearance: none; /*Needed for safari mobile*/
 }
 
-.sapUiTf::-ms-clear{
-	width : 0;
-	height: 0;
-	display:none;
-}
-
-.sapUiTf:not(.sapUiTfInner){
+.sapUiTf:not(.sapUiTfInner) {
 	width: 22ex;
 }
 
 /* Inner (ComboBox) */
-.sapUiTfInner.sapUiTf{
+.sapUiTfInner.sapUiTf {
 	height: 100%;
 	background: transparent;
 	color: inherit; /* not automatic inherited from outer DIV */
 	outline: none; /* disable safari outline */
 }
 
-html[data-sap-ui-os^='mac'] .sapUiTfDsbl .sapUiTfInner.sapUiTf{
+html[data-sap-ui-os^='mac'] .sapUiTfDsbl .sapUiTfInner.sapUiTf {
 	color: darken(@sapUiContentDisabledTextColor, 25); /* color for disabled inputs is lighter by browser */
 }
 
-.sapUiTfBrd{
-	border: 1px solid @sapUiFieldBorderColor;
-	-webkit-border-radius: 0px; /*Needed for safari mobile*/
+.sapUiTfBrd {
+	border: 1px solid var(--sapField_BorderColor);
+	border-radius: 0; /*Needed for safari mobile*/
 }
 
-.sapUiTf:not(.sapUiTfBrd){
+.sapUiTf:not(.sapUiTfBrd) {
 	border: none;
 }
 
-.sapUiTfMono{
+.sapUiTfMono {
 	font-family: @sapUiFontMonospaceFamily;
 }
 
-.sapUiTfStd{
-	background-color: @sapUiFieldBackground;
-	color: @sapUiBaseText;
+.sapUiTfStd {
+	background-color: var(--sapField_Background);
+	color: var(--sapTextColor);
 }
 
-.sapUiTfRo{
-	background-color: @sapUiFieldReadOnlyBackground;
-	color: @sapUiBaseText;
+.sapUiTfRo {
+	background-color: var(--sapField_ReadOnly_Background);
+	color: var(--sapTextColor);
 }
 
-.sapUiTfRo > .sapUiTfInner{
+.sapUiTfRo > .sapUiTfInner {
 	cursor: default; /* in ComboBox Cursor is overwitten */
 }
 
-.sapUiTfFoc{
-	background-color: @sapUiFieldBackground;
+.sapUiTfFoc {
+	background-color: var(--sapField_Background);
 	outline: none; /* hide e.g. chrome focus outline */
 }
 
-.sapUiTfBrd.sapUiTfFoc{
-	border-color: @sapUiFieldFocusBorderColor;
+.sapUiTfBrd.sapUiTfFoc {
+	border-color: var(--sapField_Focus_BorderColor);
 }
 
-.sapUiTfBrd.sapUiTfErr{
-	border-color: @sapUiFieldInvalidColor;
+.sapUiTfBrd.sapUiTfErr {
+	border-color: var(--sapField_InvalidColor);
 }
 
 .sapUiTfBrd.sapUiTfWarn {
-	border-color: @sapUiFieldWarningColor;
+	border-color: var(--sapField_WarningColor);
 }
 
 .sapUiTfBrd.sapUiTfSucc {
-	border-color: @sapUiFieldSuccessColor;
+	border-color: var(--sapField_SuccessColor);
 }
 
-.sapUiTfErr.sapUiTfStd{
-	background-color: @sapUiFieldInvalidBackground;
+.sapUiTfErr.sapUiTfStd {
+	background-color: var(--sapField_InvalidBackground);
 }
 
-.sapUiTfWarn.sapUiTfStd{
-	background-color: @sapUiFieldWarningBackground;
+.sapUiTfWarn.sapUiTfStd {
+	background-color: var(--sapField_WarningBackground);
 }
 
-.sapUiTfSucc.sapUiTfStd{
-	background-color: @sapUiFieldSuccessBackground;
+.sapUiTfSucc.sapUiTfStd {
+	background-color: var(--sapField_SuccessBackground);
 }
 
-.sapUiTfDsbl{
-	background-color: @sapUiFieldReadOnlyBackground;
-	color: @sapUiContentDisabledTextColor;
+.sapUiTfDsbl {
+	background-color: var(--sapField_ReadOnly_Background);
+	color: var(--sapContent_DisabledTextColor);
 	/* Avoid text selection in disabled TextFields */
-	-moz-user-select: none;
 	-webkit-user-select: none;
 	user-select: none;
 }
 
-.sapUiTfBrd.sapUiTfDsbl{
-	border-color: @sapUiFieldDisabledBorderColor;
+.sapUiTfBrd.sapUiTfDsbl {
+	border-color: var(--sapField_Disabled_BorderColor);
 }
 
 /* need to be separate statements for each browser, otherwise it will not work */
-.sapUiTfPlace{
-	color: @sapUiExtraLightText;
-}
-.sapUiTf::-webkit-input-placeholder{
+.sapUiTfPlace {
 	color: @sapUiExtraLightText;
 }
-.sapUiTf::-moz-placeholder{
+
+.sapUiTf::-webkit-input-placeholder {
 	color: @sapUiExtraLightText;
 }
-.sapUiTf:-ms-input-placeholder{
+
+.sapUiTf::-moz-placeholder {
 	color: @sapUiExtraLightText;
-}
+}

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

@@ -1,5 +1,10 @@
+/* ======================================== */
+/* CSS for control sap.ui.commons/TextView  */
+/* base theme                               */
+/* ======================================== */
+
 .sapUiTv {
-	font-family: @sapUiFontFamily;
+	font-family: var(--sapFontFamily);
 	font-size: @sapUiFontSize;
 	vertical-align: top;
 	line-height: @sapUiLineHeight;
@@ -12,46 +17,46 @@
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiTv {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 .sapUiTvH1 { /* be careful - used in other controls with title too */
 	font-size: @sapUiFontHeader1Size;
 	font-weight: bold;
 	line-height: 122%;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvH2 {
 	font-size: @sapUiFontHeader2Size;
 	font-weight: bold;
 	line-height: 122%;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvH3 {
 	font-size: @sapUiFontHeader3Size;
 	font-weight: bold;
 	line-height: 122%;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvH4 {
 	font-size: @sapUiFontHeader4Size;
 	font-weight: bold;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvH5 {
 	font-size: @sapUiFontHeader5Size;
 	font-weight: bold;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvH6 {
 	font-size: @sapUiFontHeader6Size;
 	font-weight: bold;
-	color: @sapUiTextTitle;
+	color: var(--sapTitleColor);
 }
 
 .sapUiTvItalic {
@@ -73,52 +78,53 @@
 /* disabled */
 .sapUiTvDsbl {
 	cursor: default;
-	-moz-user-select: none;
-	color: @sapUiContentDisabledTextColor;
+	-webkit-user-select: none;
+	user-select: none;
+	color: var(--sapContent_DisabledTextColor);
 	outline: none;
 }
 
 .sapUiInverted-CTX .sapUiTv.sapUiTvDsbl {
-	color: @sapUiContentDisabledTextColor;
+	color: var(--sapContent_DisabledTextColor);
 }
 
 /* success state */
 .sapUiTvSucc {
-	background-color: @sapUiFieldSuccessBackground;
+	background-color: var(--sapField_SuccessBackground);
 }
 
 .sapUiInverted-CTX .sapUiTvSucc {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiTvSucc {
-	color: @sapUiFieldSuccessBackground;
+	color: var(--sapField_SuccessBackground);
 }
 
 /* invalid state */
 .sapUiTvErr {
-	color: @sapUiFieldInvalidColor;
-	border-color: @sapUiFieldInvalidColor;
-	background-color: @sapUiFieldInvalidBackground;
+	color: var(--sapField_InvalidColor);
+	border-color: var(--sapField_InvalidColor);
+	background-color: var(--sapField_InvalidBackground);
 }
 
 .sapUiInverted-CTX .sapUiTvErr {
-	color: @sapUiFieldInvalidColor;
+	color: var(--sapField_InvalidColor);
 }
 
 /* warning state */
 .sapUiTvWarn {
-	background-color: @sapUiFieldWarningBackground;
+	background-color: var(--sapField_WarningBackground);
 }
 
 .sapUiInverted-CTX .sapUiTvWarn {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiTvWarn {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 /* Designs */
@@ -143,7 +149,7 @@
 	position: absolute;
 	left: 0;
 	top: 0;
-	background-color: @sapBackgroundColor;
+	background-color: var(--sapBackgroundColor);
 }
 
 .sapUiTvWrap{

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

@@ -1,6 +1,7 @@
-/* =================================================== */
-/* CSS for control sap.ui.commons/ToggleButton.control */
-/* =================================================== */
+/* ============================================ */
+/* CSS for control sap.ui.commons/ToggleButton  */
+/* base theme                                   */
+/* ============================================ */
 
 .sapUiBtnS.sapUiBtnNorm.sapUiBtnStd.sapUiToggleBtn.sapUiToggleBtnPressed {
 	color: @sapUiTextSelection;

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

@@ -1,3 +1,8 @@
+/* ======================================= */
+/* CSS for control sap.ui.commons/Toolbar  */
+/* base theme                              */
+/* ======================================= */
+
 /**
  * All Toolbar items are arranged in a flow layout. Once there are too many items to display, some flow into the second row
  * which is not visible.
@@ -10,7 +15,7 @@
 	margin: 0;
 	overflow: hidden;
 	position: relative;
-	white-space: normal; // make sure parents don't break the toolbar logic for overflowing to the second line
+	white-space: normal; /* make sure parents don't break the toolbar logic for overflowing to the second line */
 }
 
 .sapUiTb.sapUiTbStandalone {
@@ -31,12 +36,12 @@
 .sapUiTbCont {
 	height: 22px;
 	line-height: 22px;
-	overflow: hidden;   /* hide the items flowing into the second row */
+	overflow: hidden; /* hide the items flowing into the second row */
 	position: relative; /* required for IE7 to make overflow:hidden work! */
-	padding: 4px 0px 0px 10px;
+	padding: 4px 0 0 10px;
 }
 
-.sapUiTbContLeft.sapUiTbCont{
+.sapUiTbContLeft.sapUiTbCont {
 	float: left;
 	width: 100%;
 	box-sizing: border-box;
@@ -57,7 +62,8 @@
 }
 
 /* regular padding between Toolbar items */
-.sapUiTbInner > * , .sapUiTbInnerRight > * {
+.sapUiTbInner > * ,
+.sapUiTbInnerRight > * {
 	margin-right: 2px;
 	margin-bottom: 20px; /* make sure the second row is out of sight */
 }
@@ -65,23 +71,23 @@
 .sapUiTbInnerRight {
 	text-align: right;
 	position: absolute;
-	right: 0px;
-	padding: 2px 0px 0px 10px;
+	right: 0;
+	padding: 2px 0 0 10px;
 	height: 22px;
 	white-space: nowrap;
 }
 
 /* ToolBar Overflow Button ("chevron arrows") */
 .sapUiTbOB {
-	background-image: url(img/toolbar/overflow.png);
+	background-image: url('img/toolbar/overflow.png');
 	background-position: center center;
 	background-repeat: no-repeat;
-	display: none;  /* will be modified by Toolbar.js for displaying/hiding on resize */
+	display: none; /* will be modified by Toolbar.js for displaying/hiding on resize */
 	width: 14px;
 	height: 20px;
 	position: absolute;
 	right: -14px; /* position the overflow button right outside of its container */
-	top: 0px;
+	top: 0;
 	cursor: pointer;
 	margin-right: 0; /* remove that standard Toolbar item margin */
 }
@@ -119,14 +125,14 @@
 	margin: 2px;
 }
 
-/* disabled buttons are focuses in Toolbar by ItemNavigation -> so make visible using simple outline*/
+/* disabled buttons are focuses in Toolbar by ItemNavigation -> so make visible using simple outline */
 .sapUiTbInner > .sapUiBtnDsbl:focus,
-.sapUiTbInnerRight > .sapUiBtnDsbl:focus{
+.sapUiTbInnerRight > .sapUiBtnDsbl:focus {
 	outline: 1px dotted @sapUiBaseBorder;
 }
 
 /* Toolbar inside of Form as Form- and Container- header */
 .sapUiGridTitle > th > .sapUiTb,
-.sapUiFormToolbar > .sapUiTb{
+.sapUiFormToolbar > .sapUiTb {
 	border-bottom: 2px solid @sapUiMediumBorder;
-}
+}

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

@@ -1,10 +1,10 @@
-/* ============================================= */
-/* CSS for control sap.ui.commons/Tree.control   */
-/* Base Theme                                    */
-/* ============================================= */
+/* ==================================== */
+/* CSS for control sap.ui.commons/Tree  */
+/* base theme                           */
+/* ==================================== */
 
 .sapUiTree {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
 /* if the Tree is used within another control that
@@ -15,7 +15,7 @@ invert its text to white as well */
 }
 
 .sapUiTreeFixedHeight {
-	position:relative;
+	position: relative;
 }
 
 .sapUiTree .sapUiBtn.sapUiBtnS {
@@ -23,10 +23,9 @@ invert its text to white as well */
 	vertical-align: middle;
 }
 
-
 .sapUiTreeList {
 	list-style-position: inside;
-	margin: 0px;
+	margin: 0;
 	padding-left: 10px;
 	padding-right: 2px;
 }
@@ -38,27 +37,27 @@ invert its text to white as well */
 }
 
 .sapUiTreeHeader {
-	border-bottom:none;
-	height:26px;
-	overflow-y:hidden;
+	border-bottom: none;
+	height: 26px;
+	overflow-y: hidden;
 	text-align: right;
-	width:100%;
+	width: 100%;
 }
 
 .sapUiTreeFixedHeight .sapUiTreeHeader {
 	width: auto;
-	position:absolute;
-	top: 0px;
-	left: 0px;
-	right: 0px;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
 }
 
 html[dir=rtl] .sapUiTreeTbCont {
-	text-align:left;
+	text-align: left;
 }
 
 html[dir=rtl] .sapUiTreeTitle {
-	text-align:right;
+	text-align: right;
 }
 
 .sapUiTreeTitle {
@@ -66,12 +65,12 @@ html[dir=rtl] .sapUiTreeTitle {
 	font-weight: bold;
 	float: left;
 	left: 10px;
-	overflow:hidden;
+	overflow: hidden;
 	position: relative;
 	top: 5px;
-	white-space:nowrap;
+	white-space: nowrap;
 	width: 50%;
-	text-overflow:ellipsis;
+	text-overflow: ellipsis;
 	text-align: left;
 }
 
@@ -81,11 +80,11 @@ html[dir=rtl] .sapUiTreeTitle {
 }
 
 .sapUiTreeTbCont .sapUiTbInner {
-	margin-right: 0px;
+	margin-right: 0;
 }
 
 .sapUiTreeCont {
-	border:1px solid @sapUiMediumBorder;
+	border: 1px solid @sapUiMediumBorder;
 	overflow: auto;
 	background-color: @sapUiExtraLightBG;
 	width: 100%;
@@ -94,16 +93,16 @@ html[dir=rtl] .sapUiTreeTitle {
 
 .sapUiTreeTransparent .sapUiTreeCont {
 	background-color: transparent;
-	border:none;
-	top: 0px;
+	border: none;
+	top: 0;
 }
 
 .sapUiTreeFixedHeight .sapUiTreeCont {
 	width: auto;
-	position:absolute;
-	left: 0px;
-	right: 0px;
-	bottom: 0px;
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
 }
 
 .sapUiTreeContNoScroll {
@@ -128,7 +127,8 @@ html[dir=rtl] .sapUiTreeTitle {
 	margin-bottom: 3px;
 	border: 1px solid transparent;
 	border-radius: 1px;
-	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 .sapUiTreeContScroll .sapUiTreeNode {
@@ -145,7 +145,7 @@ html[dir=rtl] .sapUiTreeTitle {
 .sapUiTreeNodeContent {
 	cursor: default;
 	display: inline-block;
-	vertical-align:middle;
+	vertical-align: middle;
 	position: relative;
 	top: -2px;
 	width: 100%;
@@ -171,7 +171,7 @@ html[dir=rtl] .sapUiTreeTitle {
 }
 
 .sapUiTreeChildrenNodes {
-	display:block;
+	display: block;
 	padding-left: 16px;
 }
 
@@ -179,19 +179,19 @@ html[dir=rtl] .sapUiTreeTitle {
 	clear: left;
 }
 
-.sapUiTreeContScroll .sapUiTreeChildrenNodes:before,
-.sapUiTreeContScroll .sapUiTreeChildrenNodes:after,
-.sapUiTreeContScroll .sapUiTreeList:before,
-.sapUiTreeContScroll .sapUiTreeList:after {
-    content: " ";
-    display: table;
+.sapUiTreeContScroll .sapUiTreeChildrenNodes::before,
+.sapUiTreeContScroll .sapUiTreeChildrenNodes::after,
+.sapUiTreeContScroll .sapUiTreeList::before,
+.sapUiTreeContScroll .sapUiTreeList::after {
+	content: ' ';
+	display: table;
 }
 
-.sapUiTreeContScroll .sapUiTreeChildrenNodes:after,
-.sapUiTreeContScroll .sapUiTreeList:after {
-    clear: left;
+.sapUiTreeContScroll .sapUiTreeChildrenNodes::after,
+.sapUiTreeContScroll .sapUiTreeList::after {
+	clear: left;
 }
 
 .sapUiTreeHiddenChildrenNodes {
 	display: none;
-}
+}

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

@@ -1,6 +1,7 @@
-/* ======================================================= */
-/* CSS for control sap.ui.commons.TriStateCheckBox.control */
-/* ======================================================= */
+/* ================================================ */
+/* CSS for control sap.ui.commons/TriStateCheckBox  */
+/* base theme                                       */
+/* ================================================ */
 
 .sapUiTriCb {
 	line-height: @sapUiLineHeight;
@@ -17,13 +18,12 @@
 
 /* Do not invert for table */
 .sapUiInverted-CTX .sapUiTable .sapUiTriCb {
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
-
 .sapUiTriCbInner {
-	height:11px;
-	width:11px;
+	height: 11px;
+	width: 11px;
 	display: inline-block;
 	vertical-align: text-bottom;
 	background-image: none;
@@ -35,7 +35,7 @@
 
 .sapUiTriCbInner.sapUiTriCbCheck,
 .sapUiTriCbInner.sapUiTriCbMix {
-	background-image: url(img/TriStateCheckBox.png);
+	background-image: url('img/TriStateCheckBox.png');
 }
 
 .sapUiTriCbInner.sapUiTriCbMix {
@@ -67,7 +67,7 @@
 }
 
 .sapUiTriCb:hover > .sapUiTriCbInner {
-	border: 2px solid @sapUiHighlight;
+	border: 2px solid var(--sapHighlightColor);
 }
 
 .sapUiTriCb:hover > .sapUiTriCbRo {
@@ -75,32 +75,31 @@
 }
 
 .sapUiTriCbErr {
-	background-color: @sapUiFieldInvalidBackground;
-	border: 2px solid @sapUiFieldInvalidColor;
+	background-color: var(--sapField_InvalidBackground);
+	border: 2px solid var(--sapField_InvalidColor);
 }
 
 .sapUiTriCbWarn {
-	background-color: @sapUiFieldWarningBackground;
-	border: 2px solid @sapUiFieldWarningColor;
+	background-color: var(--sapField_WarningBackground);
+	border: 2px solid var(--sapField_WarningColor);
 }
 
 .sapUiTriCb:hover > .sapUiTriCbWarn.sapUiTriCbRo {
-	border: 2px solid @sapUiFieldWarningColor;
+	border: 2px solid var(--sapField_WarningColor);
 }
 
 .sapUiTriCb:hover > .sapUiTriCbErr.sapUiTriCbRo {
-	border: 2px solid @sapUiFieldInvalidColor;
+	border: 2px solid var(--sapField_InvalidColor);
 }
 
 .sapUiTriCbDis, .sapUiTriCb:hover .sapUiTriCbDis {
 	opacity: 0.5;
-	filter: Alpha(Opacity=50);
 	border: 2px solid @sapUiMediumBorder;
 }
 
 .sapUiTriCbRo,
 .sapUiTriCb:hover > .sapUiTriCbRo {
-	background-color: @sapUiFieldReadOnlyBackground;
+	background-color: var(--sapField_ReadOnly_Background);
 }
 
 .sapUiTriCbLbl {