@openui5/sap.ui.rta 1.101.0 → 1.102.2

package/src/sap/ui/rta/themes/base/AddIFrame.less

@@ -1,19 +1,28 @@
 /******************************************************************
 	Style of the RTA Add IFrame Dialog  - base Theme
 *******************************************************************/
-@sap_ui_rta_AddIFrame_DelimiterLineColor: darken(@sapPageFooter_Background, 15); //#d9d9d9
-@sap_ui_rta_AddIFrame_BorderColor: @sapUiFieldBorderColor; //#89919a;
+@_sap_ui_rta_AddIFrame_Title: @sapUiTextTitle; //#000
+@_sap_ui_rta_AddIFrame_DelimiterLineColor: @sapUiInfobarActiveBackground; //#d9d9d9
+@_sap_ui_rta_AddIFrame_BorderColor: @sapUiNeutralBorder; //#fff;
+@_sap_ui_rta_AddIFrame_PreviewBG: @sapUiListTableGroupHeaderBackground; //#f2f2f2
 
 .sapUiRtaMode {
-
 	.sapUiRtaAddIFrameDialog {
-
 		.sapMBarPH.sapMBarContainer {
-			justify-content: center;
+			justify-content: center
 		}
 
-		.sapUiRtaAddIFrameDialogVlWrapper {
+		&.sapMDialog > header.sapMDialogTitle {
+			&:focus::after {
+				content: none;
+			}
 
+			.sapMTitle {
+				color: @_sap_ui_rta_AddIFrame_Title;
+			}
+		}
+
+		.sapUiRtaAddIFrameDialogVlWrapper {
 			.sapUiRtaAddIFrameDialogSizeTitle {
 				margin-top: 1rem;
 				padding-left: 1rem;
@@ -30,13 +39,15 @@
 			.sapUiRtaAddIFrameDialogPercentGrid {
 				padding: 0.25rem 0 0 0;
 				margin: 0 1rem;
-				border-bottom: 1px solid @sap_ui_rta_AddIFrame_DelimiterLineColor;
+				border-bottom: 0.0625rem solid @_sap_ui_rta_AddIFrame_DelimiterLineColor; //1px
 
 				> div {
 					margin-bottom: 0.25rem;
 				}
+
 				.sapUiRtaAddIFrameDialogPercentText {
 					float: right;
+
 					&.sapUiRtaAddIFrameDialogPercentText-invisible {
 						visibility: hidden;
 					}
@@ -48,20 +59,22 @@
 				margin-top: 1rem;
 
 				> div {
-					height: 100%;
 					margin-bottom: 0.5rem;
 				}
+
 				.sapUiRtaAddIFrameDialogParameters {
-					height: 100%;
 					.sapMScrollCont {
-						border: 1px solid @sap_ui_rta_AddIFrame_BorderColor;
+						border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
 					}
 				}
+
 				.sapUiRtaAddIFrameDialogEditUrl {
-					height: 100%;
 					.sapMTextArea {
-						height: 100%;
 						margin-bottom: 0;
+
+						.sapMTextAreaInner {
+							border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
+						}
 					}
 				}
 			}
@@ -71,27 +84,24 @@
 			}
 
 			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
-
 				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
-					margin: 0!important;
+					margin: 0 !important;
 
-					> header > button {
-						padding-left: 0;
-					}
 					.sapMPanelContent {
 						padding: 0.5rem 1rem 0.5rem 1rem;
-						border-bottom: none;
 					}
+
 					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
-						height: 2rem!important;
-						margin-left: 2.125rem;
+						height: 2rem !important;
 						padding-right: 0;
+						margin-left: 2.75rem;
 
 						.sapUiRtaAddIFrameDialogPreviewLinkTitle {
 							font-size: 0.875rem;
 						}
+
 						.sapUiRtaAddIFrameDialogPreviewButton {
-							margin: 0!important;
+							margin: 0 !important;
 						}
 					}
 				}
@@ -100,21 +110,19 @@
 			.sapUiRtaAddIFrameDialogPreviewGrid {
 				padding: 0;
 				margin: 0 1rem;
-				background: #f2f2f2;
-				border: 1px solid #e5e5e5;
+				background: @_sap_ui_rta_AddIFrame_PreviewBG;
+				border: 0.0625rem solid @_sap_ui_rta_AddIFrame_BorderColor; //1px
 
 				> div {
-					height: 9.75rem;
 					margin-bottom: 0;
+					height: 9.75rem;
 				}
-				.sapUiRtaAddIFrameDialogNoPreviewLabel  {
+
+				.sapUiRtaAddIFrameDialogNoPreviewLabel {
 					margin-top: 4rem;
 				}
 			}
 		}
-		.sapMDialogSection {
-			padding-bottom: 0.75rem;
-		}
 	}
 }
 
@@ -124,7 +132,7 @@
 			.sapUiRtaAddIFrameDialogPreviewLinkGrid {
 				.sapUiRtaAddIFrameDialogPreviewLinkPanel {
 					.sapUiRtaAddIFrameDialogPreviewLinkToolbar {
-						height: 2.625rem!important;
+						height: 2.625rem !important;
 
 						.sapUiRtaAddIFrameDialogPreviewLinkTitle {
 							margin-left: 0.25rem;

package/src/sap/ui/rta/themes/base/ChangeVisualization.less

@@ -1,10 +1,12 @@
 /******************************************************************
 	Style of the RTA Change Visualization - base theme
 *******************************************************************/
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight: @sapUiChartPaletteSequentialHue1Light1;
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1;
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2;
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: @sapUiGroupTitleBackground;
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight: @sapUiChartPaletteSequentialHue1Light1; //#4880cb
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1; //#1b57a7
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2; //#0e4186
+@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: @sapUiGroupTitleBackground; //#fff
+@_sap_ui_rta_ChangeVisualization_OverlayBoxShadow: @sapUiUx3ToolPopupShadow; //0px 6px 12px 0px fade(black, 30);
+@_sap_ui_rta_ChangeVisualization_OverlayOutline: @sapUiSelected; //#8fb5ff
 
 .sapUiRtaChangeIndicator {
 	height: 0.8rem;
@@ -15,81 +17,82 @@
 	margin-left: 0.25rem;
 	transition: width 0.3s, height 0.3s, box-shadow 0.3s;
 	cursor: pointer;
-}
 
-.sapUiRtaChangeIndicator:focus {
-	outline: 0;
-}
+	&.sapUiRtaChangeIndicatorColorLight {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight;
+		opacity: 0.6;
+	}
 
-.sapUiRtaChangeIndicatorColorLight {
-	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight;
-	opacity: 0.6;
-}
+	&.sapUiRtaChangeIndicatorColorMedium {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium;
+		opacity: 0.75;
+	}
 
-.sapUiRtaChangeIndicatorColorMedium {
-	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium;
-	opacity: 0.75;
-}
+	&.sapUiRtaChangeIndicatorColorDark {
+		background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+		opacity: 0.75;
+	}
 
-.sapUiRtaChangeIndicatorColorDark {
-	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
-	opacity: 0.75;
-}
+	&.sapUiRtaChangeIndicatorVerticallyCentered {
+		top: 50%;
+		transform: translateY(-50%);
+		margin-top: 0;
+	}
 
-.sapUiRtaChangeIndicatorVerticallyCentered {
-	top: 50%;
-	transform: translateY(-50%);
-	margin-top: 0;
+	&.sapUiRtaHover {
+		height: 0.9rem;
+		width: 0.9rem;
+		box-shadow: 0 0 0.25rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+	}
 }
 
-.sapUiRtaHover {
-	height: 0.9rem;
-	width: 0.9rem;
-	box-shadow: 0 0 0.25rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
-}
+.sapUiDtOverlay {
 
-.sapUiRtaChangeIndicatorDependent {
-	height: 100%;
-	width: auto;
-	display: block;
-	position: absolute;
-	box-shadow: inset 0 0 0 3px @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_Overlay_BoxShadow;
-	background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
-	animation: fadeOut linear 1.5s;
-	animation-fill-mode: forwards;
+	&.sapUiRtaChangeIndicatorHovered {
+		cursor: pointer !important;
 
-	@keyframes fadeOut {
-		66% {
-			box-shadow: inset 0 0 0 3px @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_Overlay_BoxShadow;
-			background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
+		&:after {
+			content: " ";
+			transition: box-shadow .25s;
+			box-shadow: @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+			outline: 0.0625rem solid @_sap_ui_rta_ChangeVisualization_OverlayOutline !important; //1px
+			outline-offset: -0.0625rem; //1px
 		}
+	}
 
-		100% {
-			box-shadow: none;
-			background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 0%);
+	&.sapUiRtaChangeIndicatorDependent {
+		position: absolute;
+		box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+		background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
+		animation: fadeOut linear 1.5s;
+		animation-fill-mode: forwards;
+		@keyframes fadeOut {
+			66% {
+				box-shadow: inset 0 0 0 0.1875rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, @_sap_ui_rta_ChangeVisualization_OverlayBoxShadow;
+				background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 25%);
+			}
+			100% {
+				box-shadow: none;
+				background-color: fade(@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark, 0%);
+			}
 		}
 	}
 }
 
-.sapUiRtaChangeIndicatorHovered {
-	cursor: pointer !important;
-
-	&:after {
-		content: " ";
-		border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder !important; //1px
-		transition: box-shadow .25s;
-		box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
-		outline: 0.0625rem solid @_sap_ui_rta_Overlay_Border !important; //1px
-		outline-offset: -0.0625rem; //1px
+.sapUiRtaMode {
+	.sapMPopover {
+		.sapUiRtaChangesList {
+			// Visualize Changes: gray out items with no changes
+			li.sapMLIBTypeInactive {
+				opacity: 0.5;
+			}
+		}
 	}
 }
 
-.sapUiRtaMode {
-	.sapUiRtaChangesList {
-
-		// Visualize Changes: gray out items with no changes
-		li.sapMLIBTypeInactive {
-			opacity: 0.5;
-		}
+//do not show focus border in the popover
+.sapUiRtaChangeVisualizationPopover {
+	.sapMLIBFocusable:focus {
+		outline: none;
 	}
 }

package/src/sap/ui/rta/themes/base/ContextMenu.less

@@ -0,0 +1,25 @@
+/******************************************************************
+	Style of the RTA Contextmenu - base Theme
+*******************************************************************/
+@_sap_ui_rta_ContextMenu_Border_LightColor: @sapUiInvertedElement; //#fff
+@_sap_ui_rta_ContextMenu_Border_DarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_ContextMenu_BoxShadow_LightColor: @sapUiLightShadowTint; // #fff
+
+@_sap_ui_rta_ContextMenu_BoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 30),
+0.125rem 0.375rem 1rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_DarkColor, 60),
+0 0 0 0.0625rem fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20),
+0 0.0625rem 0 0 fade(@_sap_ui_rta_ContextMenu_BoxShadow_LightColor, 20); //10px 20px 6px 6px 1px 1px
+
+.sapUiRtaMode {
+	.sapUiDtContextMenu {
+		&.sapMMenu {
+			border: 0.125rem solid @_sap_ui_rta_ContextMenu_Border_LightColor; //2px
+			border-image: repeating-linear-gradient(-45deg, @_sap_ui_rta_ContextMenu_Border_DarkColor,
+			@_sap_ui_rta_ContextMenu_Border_DarkColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_Border_LightColor 0.25rem,
+			@_sap_ui_rta_ContextMenu_Border_LightColor 0.375rem) 4;
+			box-shadow: @_sap_ui_rta_ContextMenu_BoxShadow;
+		}
+	}
+}

package/src/sap/ui/rta/themes/base/Dialogs.less

@@ -0,0 +1,79 @@
+/******************************************************************
+	Style of the RTA Dialogs - base Theme
+*******************************************************************/
+@_sap_ui_rta_Dialogs_BorderLightColor: @sapUiShellBackground; //#fff
+@_sap_ui_rta_Dialogs_BorderDarkColor: darken(desaturate(@sapUiChart1, 48%), 14%); //#435060
+@_sap_ui_rta_Dialogs_BoxShadowDarkColor: @sapUiDarkShadowTint; // #000
+@_sap_ui_rta_Dialogs_BoxShadowLightColor: @sapUiLightShadowTint; // #fff
+
+@_sap_ui_rta_Dialogs_BorderBoxShadow: 0.375rem 0.625rem 2rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0.125rem 0.375rem 1rem fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 60),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20),
+0 0.0625rem 0 0 fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20);
+
+@_sap_ui_rta_Dialogs_ArrowBoxShadow: 0.375rem -0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
+
+@_sap_ui_rta_Dialogs_ArrowUpBoxShadow: -0.375rem 0.375rem 0.75rem 0 fade(@_sap_ui_rta_Dialogs_BoxShadowDarkColor, 30),
+0 0 0 0.0625rem fade(@_sap_ui_rta_Dialogs_BoxShadowLightColor, 20); //6px 6px 12px 1px
+
+@_sap_ui_rta_Dialogs_BorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.3125rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.625rem) 4;
+
+@_sap_ui_rta_Dialogs_PopoverBorderImage: repeating-linear-gradient(-45deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.25rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.25rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.375rem) 4;
+
+@_sap_ui_rta_Dialogs_ArrowBorderImage: repeating-linear-gradient(-50deg, @_sap_ui_rta_Dialogs_BorderDarkColor,
+@_sap_ui_rta_Dialogs_BorderDarkColor 0.1875rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.1875rem,
+@_sap_ui_rta_Dialogs_BorderLightColor 0.3125rem) 4;
+
+
+.sapMDialog.sapUiRTABorder {
+	border: 0.1875rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //3px
+	border-image: @_sap_ui_rta_Dialogs_BorderImage;
+
+	& > .sapMDialogTitle:focus::after {
+		content: none;
+	}
+}
+
+.sapUiRtaPopover {
+
+	&.sapMPopover, .sapMPopover {
+		border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+		border-image: @_sap_ui_rta_Dialogs_PopoverBorderImage;
+		box-shadow: @_sap_ui_rta_Dialogs_BorderBoxShadow;
+
+		.sapMTableRowCustomFocus:focus > :not(.sapMListTblDummyCell:last-child)::before {
+			content: none;
+		}
+	}
+
+	&.sapMPopoverArr, .sapMPopoverArr {
+		width: 2rem; //32px
+		height: 2rem; //32px
+		bottom: -2rem; //32px
+		&:after {
+			box-shadow: @_sap_ui_rta_Dialogs_ArrowBoxShadow;
+			border: 0.125rem solid @_sap_ui_rta_Dialogs_BorderLightColor; //2px
+			border-image: @_sap_ui_rta_Dialogs_ArrowBorderImage;
+			width: 1rem; //16px
+			height: 0.8125rem; //13px
+			margin: -0.65rem 0 0 0.35rem; //10px 6px
+		}
+
+		&.sapMPopoverArrUp {
+			height: 0.8125rem; //13px
+			top: -0.8125rem; //13px
+			&:after {
+				box-shadow: @_sap_ui_rta_Dialogs_ArrowUpBoxShadow;
+				margin: 0.35rem 0 0 0.35rem; //6px 6px
+			}
+		}
+	}
+}

package/src/sap/ui/rta/themes/base/FieldRepository.less

@@ -1,95 +1,48 @@
 /******************************************************************
 	Style of the RTA Add Fields Dialog  - base Theme
 *******************************************************************/
-@sap_ui_rta_FieldRepository_ButtonHover: @sapUiBlackBG;	//#000000
-@sap_ui_rta_FieldRepository_ListSelect: darken(@sapList_Active_TextColor, 10%); //#e6e6e6
-@sap_ui_rta_FieldRepository_ListHoverBG: @sapUiListSelectionHoverBackground; //#dde8f1
-@sap_ui_rta_FieldRepository_ListHoverText: @sapList_TextColor; //#333333
-@sap_ui_rta_FieldRepository_BC_Container_Border: @sapUiGroupTitleBorderColor; //#000000
-
-.sap-desktop.sapUiBLyBackOverride {
-	overflow: auto !important;
-}
+@_sap_ui_rta_FieldRepository_Title: @sapUiTextTitle; //#000
+@_sap_ui_rta_FieldRepository_BtnFocusOtline: @sapUiButtonHoverBorderColor; //#000
+@_sap_ui_rta_FieldRepository_BC_Container_Border: @sapUiGroupContentBorderColor; //#000
 
 .sapUIRtaFieldRepositoryDialog {
 
 	&.sapMDialog > header.sapMDialogTitle .sapMTitle {
-		color: @sap_ui_rta_FieldRepository_ButtonHover;
-	}
-
-	.sapMDialogTitle {
-		font-size: 16px;
-		font-weight: normal;
+		color: @_sap_ui_rta_FieldRepository_Title;
 	}
 
 	.sapMBtn {
-		> .sapMBtnInner {
-			/* Sort Button */
-			border: none;
-		}
 		&:focus {
 			> .sapMBtnInner {
-				outline: 0.0625rem dotted @sap_ui_rta_FieldRepository_ButtonHover; //1px
-			}
-		}
-	}
-
-	.sapMList {
-		.sapMListUl {
-			.sapMCLI {
-				padding-left: 0.625rem; //10px
+				outline: 0.0625rem dotted @_sap_ui_rta_FieldRepository_BtnFocusOtline; //1px
+				border: 0.0625rem solid transparent;
 			}
 		}
 	}
 
 	.sapUIRtaListItem {
-		font-size: 0;
-
-		> .sapMLIBSelectM {
-			width: 2rem; //32px
-			margin-right: 0.3125rem; //5px
-		}
+		line-height: 1rem;
 	}
 
 	.sapUIRtaBusinessContextContainer {
 		width: 100%;
 		margin-top: 0.25rem; //4px
-		padding-bottom: 0.25rem; //4px
-		border-bottom: 0.0625rem solid @sap_ui_rta_FieldRepository_BC_Container_Border; //1px
+		padding-bottom: 0.5rem; //8px
+		border-bottom: 0.0625rem solid @_sap_ui_rta_FieldRepository_BC_Container_Border; //1px
 
 		> div:not(:first-child) {
 			padding-left: 2.125rem; //34px
 			padding-right: 0.625rem; //10px
 		}
 
-		> div {
-			padding-left: 0.625rem; //10px
+		> div:first-child {
+			font-weight: bold;
+			padding: 0.25rem 0 0.25rem 0.625rem;
 		}
-	}
-
-	.sapUIRtaCCDialogScrollContainer {
-		height: 400px !important;
-		width: 100% !important;
-	}
-
-	.sapMCb:not(.sapMCbBgDis):not(.sapMCbHasLabel):focus {
-		> .sapMCbBg {
-			outline: none;
-		}
-	}
 
-	.sapMLIBHoverable {
-		&.sapMLIBSelected:hover {
-			background: @sap_ui_rta_FieldRepository_ListHoverBG;
-			color: @sap_ui_rta_FieldRepository_ListHoverText;
-		}
 	}
 
-	.sapMLIB.sapMLIBSelected {
-		border-color: transparent;
+	.sapUIRtaCCDialogScrollContainer {
+		height: 25rem !important;
 	}
-}
-
-.sapUiRtaMode .sapUIRtaFieldRepositoryDialog .sapMBtn:hover>.sapMBtnHoverable {
-	outline: 0.0625rem solid @sap_ui_rta_FieldRepository_ButtonHover //1px
 }