@openui5/sap.ui.commons 1.145.0 → 1.146.0

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/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;
-}
+}