@openui5/themelib_sap_horizon 1.101.0 → 1.103.0

package/src/sap/ui/dt/themes/sap_horizon/Overlay.less

@@ -0,0 +1,44 @@
+/******************************************************************
+	Style of the DT Overlays - Horizon Theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_SelectionColor: @sapUiSelected; //	#0070f2
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.5rem
+@_sap_ui_dt_Overlay_BoxShadow: @sapUiUx3ToolPopupShadow; // 0 6px 12px 0 rgba(85,107,130,0.3)
+@_sap_ui_dt_Overlay_ActiveBG: fade(@sapUiNeutralElement, 10%); // rgba(120, 143, 166, 0.1)
+@_sap_ui_dt_Overlay_CuttedBorder: @sapUiNeutralBorder; //#788fa6
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiListSelectionBackgroundColor; //#ebf8ff
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+		transition: box-shadow 0.25s;
+		box-shadow: @_sap_ui_dt_Overlay_BoxShadow;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon/library.source.less

@@ -6,4 +6,7 @@
 
 @import "../base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon/base.less";
-@import "../../../../../sap/ui/core/themes/sap_horizon/global.less";
+@import "../../../../../sap/ui/core/themes/sap_horizon/global.less";
+
+@import "ContextMenu.less";
+@import "Overlay.less";

package/src/sap/ui/dt/themes/sap_horizon_dark/ContextMenu.less

@@ -0,0 +1,64 @@
+/******************************************************************
+	Style of the DT Contextmenu - Horizon Dark Theme
+*******************************************************************/
+@_sap_ui_dt_ContextMenu_HoverBGColor: @sapUiButtonBackground; //#2e3b47
+@_sap_ui_dt_ContextMenu_OpenMenuBGColor: fade(@sapUiButtonBackground, 60); //rgba(46, 59, 71, 0.6)
+@_sap_ui_dt_ContextMenu_Focus_BorderColor: @sapUiSelected; //#4db1ff
+@_sap_ui_dt_ContextMenu_Border_Radius: @sapUiFieldBorderCornerRadius; // 0.25rem
+
+.sapUiDtContextMenu {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+			border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+
+			&:focus {
+				outline-offset: -0.125rem;
+			}
+		}
+	}
+}
+
+.sapUiDtContextMenu.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen,
+.sapUiDtContextMenu.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
+	border-bottom: 0.0625rem solid transparent; //1px
+	background-color: @_sap_ui_dt_ContextMenu_OpenMenuBGColor
+}
+
+.sapUiDtContextMiniMenu.sapUiMnu {
+	&:not(.sapUiSubmenu) {
+		.sapUiMnuLst {
+			.sapUiMnuItm {
+				&:focus {
+					.sapUiIcon {
+						border: 0.0625rem solid @_sap_ui_dt_ContextMenu_Focus_BorderColor;
+						border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+					}
+				}
+
+				&.sapUiMnuItmSubMnuOpen {
+					background-color: transparent;
+
+					&.sapUiMnuItmHov {
+						background-color: transparent;
+					}
+
+					.sapUiIcon {
+						background-color: @_sap_ui_dt_ContextMenu_OpenMenuBGColor;
+						border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+					}
+				}
+
+				.sapUiMnuItmSbMnu {
+					right: -0.5rem;
+					padding-right: 0;
+				}
+
+				&:focus {
+					.sapUiIcon {
+						border: 0.0625rem solid @_sap_ui_dt_ContextMenu_Focus_BorderColor;
+					}
+				}
+			}
+		}
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_dark/Overlay.less

@@ -0,0 +1,45 @@
+/******************************************************************
+	Style of the DT Overlays - Horizon Dark Theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_SelectionColor: @sapUiSelected; //	#0070f2
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.5rem
+@_sap_ui_dt_Overlay_ActiveBG: fade(@sapUiNeutralElement, 10%); // rgba(120, 143, 166, 0.1)
+@_sap_ui_dt_Overlay_BoxShadow: @sapUiUx3ToolPopupShadow;
+@_sap_ui_dt_Overlay_CuttedBorder: @sapUiNeutralBorder; //#a9b4be
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiListSelectionBackgroundColor; //#1d2d3e
+
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+		transition: box-shadow 0.25s;
+		box-shadow: @_sap_ui_dt_Overlay_BoxShadow;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_dark/library.source.less

@@ -6,4 +6,7 @@
 
 @import "../base/library.source.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon_dark/base.less";
-@import "../../../../../sap/ui/core/themes/sap_horizon_dark/global.less";
+@import "../../../../../sap/ui/core/themes/sap_horizon_dark/global.less";
+
+@import "ContextMenu.less";
+@import "Overlay.less";

package/src/sap/ui/dt/themes/sap_horizon_hcb/ContextMenu.less

@@ -1,6 +1,57 @@
-/* ====================================== */
-/* CSS for control sap.ui.dt/ContextMenu  */
-/* Horizon High Contrast Black theme      */
-/* ====================================== */
+/******************************************************************
+	Style of the DT Contextmenu - Horizon High Contrast Black theme
+*******************************************************************/
+@_sap_ui_dt_ContextMenu_Border_Radius: @sapUiButtonBorderCornerRadius; // .375rem
+@_sap_ui_dt_ContextMenu_OpenSubMenuBG: @sapUiSelected; //#0f5c93
+@_sap_ui_dt_ContextMenu_OpenSubMenuBorder: @sapUiNeutralBG; //000
 
-@_sap_ui_dt_ContextMenu_BorderColor: @sapUiWhite; //#ffffff
+.sapUiDtContextMenu {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&.sapUiMnuItmDsbl {
+				opacity: 1;
+			}
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				border-bottom: 0.0625rem solid @_sap_ui_dt_ContextMenu_OpenSubMenuBorder !important; //1px
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+
+				&.sapUiMnuItmHov {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				}
+			}
+		}
+	}
+}
+
+.sapUiDtContextMiniMenu:not(.sapUiSubmenu) {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&.sapUiMnuItmHov {
+				.sapUiIcon {
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBorder;
+
+				.sapUiIcon {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+		}
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcb/Overlay.less

@@ -1,9 +1,42 @@
-/* ================================== */
-/* CSS for control sap.ui.dt/Overlay  */
-/* Horizon High Contrast Black theme  */
-/* ================================== */
-
-@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiWhite, 80%); //rgba(255, 255, 255, 0.8)
-@_sap_ui_dt_Overlay_TargetZoneColor: @sapHC_EnhancedForeground; //#03b803
-@_sap_ui_dt_Overlay_SelectionColor: @sapUiWhite; //#ffffff
-@_sap_ui_dt_Overlay_CuttedColor: @sapHC_ReducedBackground; //#585858
+/******************************************************************
+	Style of the DT Overlays - Horizon High Contrast Black theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiNeutralBorder, 80%); //rgba(255, 255, 255, 0.8)
+@_sap_ui_dt_Overlay_TargetZoneColor: @sapUiContentHelpColor; //#03b803
+@_sap_ui_dt_Overlay_SelectionColor: @sapUiNeutralElement; //#ffffff
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiFieldReadOnlyBackground; //#585858
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiWarningBorder; // #ffab1d
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.375rem
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/ContextMenu.less

@@ -1,6 +1,53 @@
-/* ============================================= */
-/* CSS for control sap.ui.core/ContextMenu  */
-/* Horizon High Contrast White theme             */
-/* ============================================= */
+/*********************************************************************
+	Style of the DT Contextmenu - Horizon High Contrast White theme
+**********************************************************************/
+@_sap_ui_dt_ContextMenu_Border_Radius: @sapUiButtonBorderCornerRadius; // .375rem
+@_sap_ui_dt_ContextMenu_OpenSubMenuBG: @sapUiSelected; //#0f5c93
+@_sap_ui_dt_ContextMenu_OpenSubMenuBorder: @sapUiNeutralBG; //000
 
-@_sap_ui_dt_ContextMenu_BorderColor: @sapUiBlackBG; //#000000
+.sapUiDtContextMenu {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				border-bottom: 0.0625rem solid @_sap_ui_dt_ContextMenu_OpenSubMenuBorder !important; //1px
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+
+				&.sapUiMnuItmHov {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+				}
+			}
+		}
+	}
+}
+
+.sapUiDtContextMiniMenu:not(.sapUiSubmenu) {
+	.sapUiMnuLst {
+		.sapUiMnuItm {
+
+			&.sapUiMnuItmHov {
+				.sapUiIcon {
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&.sapUiMnuItmSubMnuOpen {
+				background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBorder;
+
+				.sapUiIcon {
+					background-color: @_sap_ui_dt_ContextMenu_OpenSubMenuBG;
+					border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+				}
+			}
+
+			&:focus {
+				border-radius: @_sap_ui_dt_ContextMenu_Border_Radius;
+			}
+		}
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/Overlay.less

@@ -0,0 +1,40 @@
+/******************************************************************
+	Style of the DT Overlays - Horizon High Contrast White theme
+*******************************************************************/
+@_sap_ui_dt_Overlay_FocusColor: fade(@sapUiNeutralBorder, 80%); //rgba(0, 0, 0, 0.8)
+@_sap_ui_dt_Overlay_CuttedColor: @sapUiFieldReadOnlyBackground; //#b3b3b3
+@_sap_ui_dt_Overlay_HighlightColor: @sapUiListHighlightColor; // #ec8b46
+@_sap_ui_dt_Overlay_BorderRadius: @sapUiButtonBorderCornerRadius; // 0.375rem
+
+.sapUiDtOverlayFocusable {
+	&:focus {
+		&:before {
+			border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+			outline: 0.0625rem dotted @_sap_ui_dt_Overlay_FocusColor;
+			border: none;
+			outline-offset: -0.125rem;
+		}
+	}
+}
+
+.sapUiDtOverlaySelected {
+	box-shadow: none !important;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayTargetZone {
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}
+
+.sapUiDtOverlayCutted {
+	opacity: 0.7;
+
+	&:after {
+		border-radius: @_sap_ui_dt_Overlay_BorderRadius;
+	}
+}

package/src/sap/ui/dt/themes/sap_horizon_hcw/library.source.less

@@ -8,4 +8,5 @@
 @import "../../../../../sap/ui/core/themes/sap_horizon_hcw/base.less";
 @import "../../../../../sap/ui/core/themes/sap_horizon_hcw/global.less";
 
-@import "ContextMenu.less";
+@import "ContextMenu.less";
+@import "Overlay.less";