@sapui5/sap.suite.ui.commons 1.145.1 → 1.147.0

package/src/sap/suite/ui/commons/themes/base/ImageEditor.less

@@ -1,3 +1,8 @@
+/* ================================================= */
+/* CSS for control sap.suite.ui.commons/ImageEditor  */
+/* Base theme                                        */
+/* ================================================= */
+
 .sapSuiteUiCommonsImageEditor {
 	width: 100%;
 	min-height: 100%;
@@ -6,7 +11,6 @@
 	position: relative;
 	overflow: auto;
 	display: flex;
-	min-width: 1px; // fix for IE
 }
 
 .sapSuiteUiCommonsImageEditorNoData {
@@ -18,14 +22,14 @@
 }
 
 .sapSuiteUiCommonsImageEditorNoDataText {
-	font-size: @sapMFontLargeSize;
+	font-size: var(--sapFontLargeSize);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .sapSuiteUiCommonsImageEditorNoData:focus{
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
@@ -38,7 +42,7 @@
 }
 
 .sapSuiteUiCommonsImageEditorCanvasInnerContainer:focus{
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }
 
@@ -56,6 +60,7 @@
 }
 
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorEmpty {
+
 	.sapSuiteUiCommonsImageEditorCanvasInnerContainer {
 		display: none;
 	}
@@ -75,6 +80,7 @@
 	pointer-events: none;
 
 	.sapSuiteUiCommonsImageEditorHandlerContainer {
+
 		&.sapSuiteUiCommonsImageEditorTop {
 			top: -0.125rem;
 		}
@@ -93,8 +99,8 @@
 	}
 }
 
-// resize box shadow
-.sapSuiteUiCommonsImageEditorTransformHandlers:before {
+/* resize box shadow */
+.sapSuiteUiCommonsImageEditorTransformHandlers::before {
 	content: '';
 	display: block;
 	position: absolute;
@@ -106,6 +112,7 @@
 }
 
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeResize {
+
 	.sapSuiteUiCommonsImageEditorTransformHandlers {
 		display: block;
 	}
@@ -148,8 +155,9 @@
 	}
 
 	&.sapSuiteUiCommonsImageEditorCropInnerRectangleSmall {
+
 		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
-			font-size: @sapFontLargeSize;
+			font-size: var(--sapFontLargeSize);
 			width: 1.5rem;
 			height: 1.5rem;
 		}
@@ -160,6 +168,7 @@
 	}
 
 	&.sapSuiteUiCommonsImageEditorCropInnerRectangleVerySmall {
+
 		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
 			font-size: 0.625rem;
 			width: 1rem;
@@ -179,6 +188,7 @@
 		}
 
 		.sapSuiteUiCommonsImageEditorHandlerContainer {
+
 			&.sapSuiteUiCommonsImageEditorRight, &.sapSuiteUiCommonsImageEditorLeft {
 				max-width: 0.5rem;
 			}
@@ -190,6 +200,7 @@
 	}
 
 	&.sapSuiteUiCommonsImageEditorCropInnerRectangleExtraSmall {
+
 		.sapSuiteUiCommonsImageEditorDragHandlerContainer {
 			display: none;
 		}
@@ -211,11 +222,13 @@
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropRectangle,
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropEllipse,
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropCustomShape {
+
 	.sapSuiteUiCommonsImageEditorCropOverlayContainer {
 		display: block;
 	}
 
 	.sapSuiteUiCommonsImageEditorHandlerContainer {
+
 		&.sapSuiteUiCommonsImageEditorTop {
 			top: -0.0625rem;
 		}
@@ -237,6 +250,7 @@
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropRectangle,
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropEllipse,
 .sapSuiteUiCommonsImageEditor.sapSuiteUiCommonsImageEditorModeCropCustomShape.sapSuiteUiCommonsImageEditorModeCropCustomShapeLoaded {
+
 	.sapSuiteUiCommonsImageEditorCropInnerRectangle {
 		display: block;
 	}
@@ -247,18 +261,21 @@
 }
 
 .sapSuiteUiCommonsImageEditorModeCropRectangle {
+
 	.sapSuiteUiCommonsImageEditorCropItemRectangle {
 		display: block;
 	}
 }
 
 .sapSuiteUiCommonsImageEditorModeCropEllipse {
+
 	.sapSuiteUiCommonsImageEditorCropItemEllipse {
 		display: block;
 	}
 }
 
 .sapSuiteUiCommonsImageEditorModeCropCustomShape {
+
 	.sapSuiteUiCommonsImageEditorCropItemCustomShape {
 		display: block;
 	}
@@ -272,7 +289,7 @@
 	width: 8rem;
 	height: 8rem;
 	font-size: 3rem;
-	color: @sapUiContentContrastIconColor;
+	color: var(--sapContent_ContrastIconColor);
 	text-shadow: 0 0.1875rem 5px rgba(0, 0, 0, 0.5);
 	pointer-events: auto;
 	cursor: move;
@@ -350,7 +367,7 @@
 	transform: translateX(-50%);
 }
 
-html[dir=rtl] .sapSuiteUiCommonsImageEditorCenter {
+html[dir='rtl'] .sapSuiteUiCommonsImageEditorCenter {
 	transform: translateX(50%);
 }
 
@@ -366,6 +383,7 @@ html[dir=rtl] .sapSuiteUiCommonsImageEditorCenter {
 }
 
 .sapSuiteUiCommonsImageEditor {
+
 	.ui-resizable-nw {
 		cursor: nw-resize;
 	}
@@ -397,4 +415,4 @@ html[dir=rtl] .sapSuiteUiCommonsImageEditorCenter {
 	.ui-resizable-e {
 		cursor: e-resize;
 	}
-}
+}

package/src/sap/suite/ui/commons/themes/base/ImageEditorContainer.less

@@ -1,3 +1,8 @@
+/* ========================================================== */
+/* CSS for control sap.suite.ui.commons/ImageEditorContainer  */
+/* Base theme                                                 */
+/* ========================================================== */
+
 .sapSuiteUiCommonsImageEditorContainer {
 	width: 100%;
 	height: 100%;
@@ -6,7 +11,7 @@
 	flex-direction: column;
 
 	&:focus{
-		outline: 1px dotted @sapUiContentFocusColor;
+		outline: 1px dotted var(--sapContent_FocusColor);
 		outline-offset: 1px;
 	}
 }
@@ -27,13 +32,13 @@
 .sapSuiteUiCommonsImageEditorContainerContent {
 	display: flex;
 	flex: 1 1 auto;
-	min-height: 1px; // fix for problems with height propagation to min-height property
+	min-height: 1px; /* fix for problems with height propagation to min-height property */
 }
 
 .sapSuiteUiCommonsImageEditorContainerPanel {
 	flex: 0 0 16.25rem;
 	overflow: auto;
-	background-color: @sapUiPageFooterBackground;
+	background-color: var(--sapPageFooter_Background);
 
 	.sapSuiteUiCommonsImageEditorContainerPanelArea {
 		padding: 0.5rem 0.75rem 0.5rem 0.75rem;
@@ -41,6 +46,7 @@
 }
 
 .sapUiMedia-Std-Phone {
+
 	.sapSuiteUiCommonsImageEditorContainerContent {
 		flex-direction: column;
 	}
@@ -54,7 +60,7 @@
 	}
 
 	.sapSuiteUiCommonsImageEditorContainerPanel {
-		order:1;
+		order: 1;
 		flex: 0 0 auto;
 	}
 
@@ -94,26 +100,27 @@
 }
 
 .sapSuiteUiCommonsImageEditorContainerFilterIcons {
-	font-family: "SAP-icons";
+	font-family: var(--sapContent_IconFontFamily);
 
 	.sapMITBText {
-		font-size: @sapMFontLargeSize;
+		font-size: var(--sapFontLargeSize);
 	}
 }
 
-// grid list 
+/* grid list */
 .sapSuiteUiCommonsImageEditorContainerGridList > ul {
 	display: flex;
 	flex-wrap: wrap;
 }
 
-// change z-index to show whole outline when the items are in focus
+/* change z-index to show whole outline when the items are in focus */
 .sapSuiteUiCommonsImageEditorContainerGridList .sapMLIBFocusable:focus {
 	z-index: 1;
 }
 
 .sapSuiteUiCommonsImageEditorContainerTabBar {
-	// override default padding of the icon tab bar
+
+	/* override default padding of the icon tab bar */
 	.sapMITBContent {
 		padding: 0;
 		border-bottom: 0;
@@ -135,7 +142,7 @@
 	justify-content: center;
 	height: 6.25rem;
 	padding: 0.5rem;
-	box-shadow: 0 0 0 1px @sapUiListBorderColor;
+	box-shadow: 0 0 0 1px var(--sapList_BorderColor);
 }
 
 .sapSuiteUiCommonsImageEditorContainerGridItemIcon {
@@ -144,17 +151,17 @@
 
 .sapSuiteUiCommonsImageEditorContainerGridItemHeaderContent {
 	width: 100%;
-	height: 3.125rem; // absolute height, because 100% causes problems in some browsers
-	fill: @sapUiButtonBackground;
-	stroke: @sapUiButtonBorderColor;
-	stroke-width: 1.001; // decimal number to force rendering even with crispEdges turned on
+	height: 3.125rem; /* absolute height, because 100% causes problems in some browsers */
+	fill: var(--sapButton_Background);
+	stroke: var(--sapButton_BorderColor);
+	stroke-width: 1.001; /* decimal number to force rendering even with crispEdges turned on */
 
 	&.sapSuiteUiCommonsImageEditorContainerGridItemHeaderFilterContent {
 		height: 3.625rem;
 	}
 
 	rect {
-		vector-effect: non-scaling-stroke; // prevents stroke from scaling because of the viewBox, doesn't work in IE but should look closely enough
+		vector-effect: non-scaling-stroke; /* prevents stroke from scaling because of the viewBox */
 		shape-rendering: crispEdges;
 	}
 
@@ -164,15 +171,15 @@
 }
 
 .sapSuiteUiCommonsImageEditorContainerGridItemLabel {
-	font-family: @sapUiFontFamily;
-	font-size: @sapMFontSmallSize;
-	color: @sapUiBaseText;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 	margin-top: 0.75rem;
 }
 
 &.sapSuiteUiCommonsImageEditorContainerGridItemSelected {
-	background-color: @sapUiListSelectionBackgroundColor;
-	box-shadow: 0 0 0 1px @sapUiListSelectionBackgroundColor;
+	background-color: var(--sapList_SelectionBackgroundColor);
+	box-shadow: 0 0 0 1px var(--sapList_SelectionBackgroundColor);
 }
 
 .sapSuiteUiCommonsImageEditorContainerWrapper {
@@ -181,6 +188,6 @@
 	min-height: 100%;
 	padding: 1rem;
 	min-width: 1px;
-	background-color: @sapUiContentForegroundColor;
+	background-color: var(--sapContent_ForegroundColor);
 	box-sizing: border-box;
-}
+}

package/src/sap/suite/ui/commons/themes/base/InfoTile.less

@@ -1,6 +1,11 @@
+/* ============================================== */
+/* CSS for control sap.suite.ui.commons/InfoTile  */
+/* Base theme                                     */
+/* ============================================== */
+
 .sapSuiteInfoTile {
 	background-color: #FFFFFF;
-	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
 	font-family: Arial, Helvetica, sans-serif;
 	display: inline-block;
 	box-sizing: border-box;
@@ -9,7 +14,7 @@
 	cursor: pointer;
 }
 
-html[dir=rtl] .sapSuiteInfoTile {
+html[dir='rtl'] .sapSuiteInfoTile {
 	text-align: right;
 }
 
@@ -63,7 +68,7 @@ html[dir=rtl] .sapSuiteInfoTile {
 }
 
 .sapUiMedia-Std-Phone .sapSuiteInfoTileTitleTxt.Auto > .sapMText,
-.sapSuiteInfoTileTitleTxt.S > .sapMText  {
+.sapSuiteInfoTileTitleTxt.S > .sapMText {
 	font-size: 14px;
 	line-height: 18px;
 	margin-bottom: 2px;
@@ -166,7 +171,8 @@ html[dir=rtl] .sapSuiteInfoTile {
 .sapSuiteInfoTile .sapUiLocalBusyIndicator {
 	background-color: transparent;
 }
+
 .sapSuiteInfoTileLoading {
 	width:40px;
 	height: 8px
-}
+}

package/src/sap/suite/ui/commons/themes/base/InfoTileSize.less

@@ -1,8 +1,9 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/InfoTileSize.control */
-/* ============================================= */
+/* ================================================== */
+/* CSS for control sap.suite.ui.commons/InfoTileSize  */
+/* Base theme                                         */
+/* ================================================== */
 
 .sapSuiteUiCommonsInfoTileSize{
 	color: @sapUiTextColor;
 	border: 1px solid blue;
-}
+}

package/src/sap/suite/ui/commons/themes/base/KpiTile.less

@@ -1,6 +1,7 @@
-/* ==================================================== */
-/* CSS for control sap.suite.ui.commons/KpiTile.control */
-/* ==================================================== */
+/* ============================================= */
+/* CSS for control sap.suite.ui.commons/KpiTile  */
+/* Base theme                                    */
+/* ============================================= */
 
 .sapSuiteKTile {
 	min-width: 148px;
@@ -14,12 +15,12 @@
 	text-align: left;
 }
 
-html[dir=rtl] .sapSuiteKTile {
+html[dir='rtl'] .sapSuiteKTile {
 	text-align: right;
 }
 
 .sap-phone .sapSuiteKTile:nth-of-type(1) > .sapSuiteKTileBorder {
-	display:none;
+	display: none;
 }
 
 .sapSuiteKTileValue {
@@ -50,7 +51,7 @@ html[dir=rtl] .sapSuiteKTile {
 
 .sapSuiteKTileDesc{
 	font-size: 0.75rem;
-	color: @sapUiContentLabelColor;
+	color: var(--sapContent_LabelColor);
 	position: absolute;
 	bottom: 4px;
 	white-space: nowrap;
@@ -64,10 +65,8 @@ html[dir=rtl] .sapSuiteKTile {
 .sapSuiteKTileBorder {
 	height: 48px;
 	width: 1px;
-	background-color: @sapUiFieldBorderColor;
-	bottom: 0px;
+	background-color: var(--sapField_BorderColor);
+	bottom: 0;
 	position: absolute;
 	left: -1px;
-
-}
-
+}

package/src/sap/suite/ui/commons/themes/base/LaunchTile.less

@@ -1,16 +1,17 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/LaunchTile.control */
-/* ============================================= */
+/* ================================================ */
+/* CSS for control sap.suite.ui.commons/LaunchTile  */
+/* Base theme                                       */
+/* ================================================ */
 
-.sapSuiteUiCommonsLaunchTile{
+.sapSuiteUiCommonsLaunchTile {
 	height: 100%;
 	width: 100%;
 	background-color: #FFFFFF;
-	box-shadow: 0px 0px 5px #ccc;
+	box-shadow: 0 0 5px #ccc;
 }
 
-.sapSuiteUiCommonsLaunchTileTitle{
-	padding: 15px 15px 0px 15px;
+.sapSuiteUiCommonsLaunchTileTitle {
+	padding: 15px 15px 0 15px;
 	font-size: 20px;
 	line-height: 22px;
 	height: 44px;
@@ -23,4 +24,4 @@
 .sapSuiteUiCommonsLaunchTileIcon {
 	text-align: center;
 	margin-top: 15px;
-}
+}

package/src/sap/suite/ui/commons/themes/base/LinkActionSheet.less

@@ -1,67 +1,38 @@
-/* ============================================= */
-/* CSS for control sap.suite.ui.commons/LinkActionSheet.control */
-/* ============================================= */
+/* ===================================================== */
+/* CSS for control sap.suite.ui.commons/LinkActionSheet  */
+/* Base theme                                            */
+/* ===================================================== */
+
+.sapUILinkActionSheet > {
 
-.sapUILinkActionSheet> {
 	.sapUILinkActionSheetLink,
 	.sapUILinkActionSheetLink:visited,
 	.sapUILinkActionSheetLink:active {
 		display: block;
 		border-top: 0.0625rem solid rgba(229, 229, 229, 0.2);
 		height: 3rem;
-		color: @sapUiLink;
+		color: var(--sapLinkColor);
 		box-sizing: border-box;
-		-moz-box-sizing: border-box;
 		text-align: left;
 		text-decoration: none;
 		padding: 1rem 1rem 0 1rem;
-		font-family: @sapUiFontFamily;
+		font-family: var(--sapFontFamily);
 		font-size: 0.875rem;
 		outline: none;
 	}
 }
 
-.sapMActionSheetMixedButtons.sapUILinkActionSheet>.sapUILinkActionSheetLink {
+.sapMActionSheetMixedButtons.sapUILinkActionSheet > .sapUILinkActionSheetLink {
 	padding-left: 3rem;
 }
 
-.sapUILinkActionSheet>.sapUILinkActionSheetLink:active {
-	color: @sapUiButtonActiveTextColor;
-	background-color: @sapUiButtonActiveBackground;
-}
-
-html[data-sap-ui-browser^="ie"] {
-	.sapUILinkActionSheet > .sapUILinkActionSheetLink {
-		padding-left:1rem;
-	}
-
-	.sapUILinkActionSheetButton {
-		text-align: left;
-	}
-
+.sapUILinkActionSheet > .sapUILinkActionSheetLink:active {
+	color: var(--sapButton_Active_TextColor);
+	background-color: var(--sapButton_Active_Background);
 }
 
 .sap-desktop .sapUILinkActionSheetLink:focus {
 	outline: 1px dotted;
-	outline-color: @sapUiContentFocusColor;
+	outline-color: var(--sapContent_FocusColor);
 	outline-offset: -1px;
-}
-
-/* IE ignores outline-offset. Use an overlay. */
-.sap-desktop[data-sap-ui-browser^="ie"] {
-	.sapUILinkActionSheetLink:focus {
-		outline: none;
-		position: relative;
-	}
-
-	.sapUILinkActionSheetLink:focus:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 1px dotted @sapUiContentFocusColor;
-	}
-}
+}