@openui5/themelib_sap_belize 1.124.2 → 1.126.0

package/src/sap/ui/table/themes/sap_belize_base/RowHighlight.less

@@ -0,0 +1,80 @@
+/* ================================== */
+/* CSS for sap.ui.table/RowHighlight  */
+/* Base theme                         */
+/* ================================== */
+
+@_sap_ui_table_RowHighlight_SuccessColor: @sapUiSuccessBorder;
+@_sap_ui_table_RowHighlight_ErrorColor: @sapUiErrorBorder;
+@_sap_ui_table_RowHighlight_WarningColor: @sapUiWarningBorder;
+@_sap_ui_table_RowHighlight_InformationColor: @sapUiInformationBorder;
+@_sap_ui_table_RowHighlight_Indication01Color: @sapUiIndication1;
+@_sap_ui_table_RowHighlight_Indication02Color: @sapUiIndication2;
+@_sap_ui_table_RowHighlight_Indication03Color: @sapUiIndication3;
+@_sap_ui_table_RowHighlight_Indication04Color: @sapUiIndication4;
+@_sap_ui_table_RowHighlight_Indication05Color: @sapUiIndication5;
+@_sap_ui_table_RowHighlight_Indication06Color: @sapUiIndication6;
+@_sap_ui_table_RowHighlight_Indication07Color: @sapUiIndication7;
+@_sap_ui_table_RowHighlight_Indication08Color: @sapUiIndication8;
+
+.sapUiTableRowHighlight {
+	height: 100%;
+	width: @_sap_ui_table_RowHighlightIndicatorWidth;
+	border-right: @_sap_ui_table_RowHighlightBorderRightWidth solid @sapUiListBackground;
+
+	&.sapUiTableRowHighlightNone {
+		border-right-color: transparent;
+	}
+
+	.sapUiTableGroupHeaderRow &,
+	.sapUiTableSummaryRow & {
+		display: none;
+	}
+
+	&.sapUiTableRowHighlightSuccess {
+		background-color: @_sap_ui_table_RowHighlight_SuccessColor;
+	}
+
+	&.sapUiTableRowHighlightError {
+		background-color: @_sap_ui_table_RowHighlight_ErrorColor;
+	}
+
+	&.sapUiTableRowHighlightWarning {
+		background-color: @_sap_ui_table_RowHighlight_WarningColor;
+	}
+
+	&.sapUiTableRowHighlightInformation {
+		background-color: @_sap_ui_table_RowHighlight_InformationColor;
+	}
+
+	&.sapUiTableRowHighlightIndication01 {
+		background-color: @_sap_ui_table_RowHighlight_Indication01Color;
+	}
+
+	&.sapUiTableRowHighlightIndication02 {
+		background-color: @_sap_ui_table_RowHighlight_Indication02Color;
+	}
+
+	&.sapUiTableRowHighlightIndication03 {
+		background-color: @_sap_ui_table_RowHighlight_Indication03Color;
+	}
+
+	&.sapUiTableRowHighlightIndication04 {
+		background-color: @_sap_ui_table_RowHighlight_Indication04Color;
+	}
+
+	&.sapUiTableRowHighlightIndication05 {
+		background-color: @_sap_ui_table_RowHighlight_Indication05Color;
+	}
+
+	&.sapUiTableRowHighlightIndication06 {
+		background-color: @_sap_ui_table_RowHighlight_Indication06Color;
+	}
+
+	&.sapUiTableRowHighlightIndication07 {
+		background-color: @_sap_ui_table_RowHighlight_Indication07Color;
+	}
+
+	&.sapUiTableRowHighlightIndication08 {
+		background-color: @_sap_ui_table_RowHighlight_Indication08Color;
+	}
+}

package/src/sap/ui/table/themes/sap_belize_base/RowSelection.less

@@ -0,0 +1,146 @@
+/* ================================== */
+/* CSS for sap.ui.table/RowSelection  */
+/* Base theme                         */
+/* ================================== */
+
+@_sap_ui_table_RowSelection_CheckBoxSize: 1rem;
+@_sap_ui_table_RowSelection_CheckBoxSizeCozy: 1.375rem;
+@_sap_ui_table_RowSelection_CheckBoxBorderWidth: 0.125rem;
+@_sap_ui_table_RowSelection_CheckBoxBorderRadius: 0;
+@_sap_ui_table_RowSelection_CheckBoxBorderRadiusCozy: 0.125rem;
+@_sap_ui_table_RowSelection_CheckBoxBorderColor: @sapUiFieldBorderColor;
+@_sap_ui_table_RowSelection_CheckBoxBorderColorHovered: @sapUiFieldHoverBorderColor;
+@_sap_ui_table_RowSelection_CheckBoxIconSize: 0.625rem;
+@_sap_ui_table_RowSelection_CheckBoxIconSizeCozy: 1rem;
+@_sap_ui_table_RowSelection_CheckBoxIconColor: @sapUiSelected;
+
+.sapUiTableSelectAllCheckBox,
+.sapUiTableRowSelectionCell {
+	&::after {
+		content: '';
+		position: absolute;
+		border: @_sap_ui_table_RowSelection_CheckBoxBorderWidth solid @_sap_ui_table_RowSelection_CheckBoxBorderColor;
+		background-color: @sapUiFieldBackground;
+		font-family: "SAP-icons";
+		text-align: center;
+		color: @_sap_ui_table_RowSelection_CheckBoxIconColor;
+		box-sizing: border-box;
+		margin: auto;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		width: @_sap_ui_table_RowSelection_CheckBoxSize;
+		height: @_sap_ui_table_RowSelection_CheckBoxSize;
+		font-size: @_sap_ui_table_RowSelection_CheckBoxIconSize;
+		border-radius: @_sap_ui_table_RowSelection_CheckBoxBorderRadius;
+
+		.sapUiSizeCozy & {
+			width: @_sap_ui_table_RowSelection_CheckBoxSizeCozy;
+			height: @_sap_ui_table_RowSelection_CheckBoxSizeCozy;
+			font-size: @_sap_ui_table_RowSelection_CheckBoxIconSizeCozy;
+			border-radius: @_sap_ui_table_RowSelection_CheckBoxBorderRadiusCozy;
+		}
+	}
+}
+
+.sapUiTableSelectAllCheckBox {
+	display: none;
+	height: 100%;
+	width: 100%;
+
+	.sapUiTableSelModeMultiToggle .sapUiTableRowSelectionHeaderCell.sapUiTableSelAllVisible & {
+		display: block;
+	}
+
+	&::after {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		/* Select All Checkbox should always be at the bottom */
+		top: auto;
+		bottom: calc(~"(" @_sap_ui_table_ColumnHeaderHeight ~"-" @_sap_ui_table_RowSelection_CheckBoxSize ~") / 2");
+
+		.sapUiSizeCozy & {
+			/* Select All Checkbox should always be at the bottom */
+			bottom: calc(~"(" @_sap_ui_table_ColumnHeaderHeightCozy ~"-" @_sap_ui_table_RowSelection_CheckBoxSizeCozy ~") / 2");
+		}
+
+		.sapUiTableRowSelectionHeaderCell:not(.sapUiTableSelAll) & {
+			content: '\e05b';
+		}
+
+		.sapUiTableRowHighlights & {
+			left: @_sap_ui_table_RowHighlightWidth;
+		}
+	}
+	&:hover::after {
+		border-color: @_sap_ui_table_RowSelection_CheckBoxBorderColorHovered;
+	}
+}
+
+.sapUiTableRowSelectionCell::after {
+	display: none;
+
+	.sapUiTableSelModeMultiToggle.sapUiTableRowSelectors & {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.sapUiTableGroupHeaderRow > &,
+	.sapUiTableRowHidden > &,
+	.sapUiTableSummaryRow > & {
+		.sapUiTableSelModeMultiToggle & {
+			display: none;
+		}
+	}
+
+	.sapUiSizeCozy & {
+		width: @_sap_ui_table_RowSelection_CheckBoxSizeCozy;
+		height: @_sap_ui_table_RowSelection_CheckBoxSizeCozy;
+		font-size: @_sap_ui_table_RowSelection_CheckBoxIconSizeCozy;
+	}
+
+	.sapUiTableRowHighlights & {
+		left: @_sap_ui_table_RowHighlightWidth;
+	}
+
+	.sapUiTableRowSel & {
+		.sapUiTableSelModeMultiToggle & {
+			content: '\e05b';
+		}
+	}
+
+	.sapUiTableRowHvr & {
+		border-color: @_sap_ui_table_RowSelection_CheckBoxBorderColorHovered;
+	}
+}
+
+.sapUiTableSelectClear {
+	width: 100%;
+	height: 100%;
+
+	&::before {
+		display: block !important; /* otherwise will be overwritten by icon css rules in RTL */
+		position: absolute;
+		width: 100%;
+		vertical-align: baseline;
+		font-size: @_sap_ui_table_RowSelection_CheckBoxIconSizeCozy;
+		line-height: @_sap_ui_table_RowSelection_CheckBoxSizeCozy;
+		bottom: calc(~"(" @_sap_ui_table_ColumnHeaderHeight ~"-" @_sap_ui_table_RowSelection_CheckBoxSizeCozy ~") / 2");
+
+		.sapUiSizeCozy & {
+			bottom: calc(~"(" @_sap_ui_table_ColumnHeaderHeightCozy ~"-" @_sap_ui_table_RowSelection_CheckBoxSizeCozy ~") / 2");
+		}
+	}
+
+	&:active {
+		// The active state background color and text color should not be applied if column reordering is in progress.
+		.sapUiTable:not(.sapUiTableDragDrop) & {
+			background-color: @sapUiListActiveBackground;
+			color: @sapUiListActiveTextColor;
+		}
+	}
+}

package/src/sap/ui/table/themes/sap_belize_base/Scrolling.less

@@ -0,0 +1,343 @@
+/* =============================== */
+/* CSS for sap.ui.table/Scrolling  */
+/* Base theme                      */
+/* =============================== */
+
+/*
+ * BEHAVIOR CLASSES:
+ * -----------------
+ * sapUiTableVScr   - display vertical scrollbar
+ * sapUiTableHScr   - display horizontal scrollbar
+ */
+@_sap_ui_table_Scrolling_ScrollbarSize: 16px;
+@_sap_ui_table_Scrolling_ScrollbarSizeMobile: 8px;
+
+@_sap_ui_table_Scrolling_HScrollbarHeight: @_sap_ui_table_Scrolling_ScrollbarSize;
+@_sap_ui_table_Scrolling_HScrollbarHeightMobile: @_sap_ui_table_Scrolling_ScrollbarSizeMobile;
+
+@_sap_ui_table_Scrolling_VScrollbarWidth: calc(@_sap_ui_table_Scrolling_ScrollbarSize ~"+" @_sap_ui_table_BaseBorderWidth);
+@_sap_ui_table_Scrolling_VScrollbarWidthMobile: calc(@_sap_ui_table_Scrolling_ScrollbarSizeMobile ~"+" @_sap_ui_table_BaseBorderWidth);
+
+@_sap_ui_table_Scrolling_ScrollbarBackground: @sapUiListHeaderBackground;
+
+// Can be used in other themes to add styles for which there are no style definitions in the base theme and therefore no theme parameters.
+._sap_ui_table_Scrolling_NativeScrollbarCommon() {}
+._sap_ui_table_Scrolling_NativeScrollbarDesktop() {}
+._sap_ui_table_Scrolling_NativeScrollbarMobile() {}
+
+.sapUiTableVSbContainer {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: @_sap_ui_table_Scrolling_VScrollbarWidth;
+	box-sizing: border-box;
+	border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	background-color: @_sap_ui_table_Scrolling_ScrollbarBackground;
+	z-index: 4; /* Ensure that the resize/reorder bars do not become visible/active when hovering the scrollbar. */
+
+	&.sapUiTableVSbExternal {
+		position: relative;
+	}
+}
+
+.sapUiTableVSb {
+	width: 100%;
+	position: absolute;
+	overflow-x: hidden;
+	overflow-y: scroll;
+	-webkit-overflow-scrolling: auto;
+	background-color: @sapUiListBackground;
+}
+
+.sapUiTableVSbHeader {
+	width: @_sap_ui_table_Scrolling_VScrollbarWidth;
+	box-sizing: border-box;
+	height: 100%;
+	position: absolute;
+	right: 0;
+	top: 0;
+	background-color: @sapUiListHeaderBackground;
+	border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	display: none;
+
+	.sapUiTableVScr & {
+		display: block;
+	}
+}
+
+.sapUiTableVSbContent {
+	width: 1px;
+}
+
+.sapUiTableVScr {
+	.sapUiTableHSb, .sapUiTableCtrlScr, .sapUiTableColHdrScr, .sapUiTableRowActionScr, .sapUiTableRowWithAction {
+		margin-right: @_sap_ui_table_Scrolling_VScrollbarWidth;
+	}
+}
+
+._sapUiTableVScrWithActionsInnerMixin(@variant:"Width") {
+	@RowActionWidth: "_sap_ui_table_RowActionColumn@{variant}";
+	.sapUiTableHSb, .sapUiTableCtrlScr, .sapUiTableColHdrScr {
+		margin-right: calc(@_sap_ui_table_Scrolling_VScrollbarWidth ~"+" @@RowActionWidth);
+	}
+
+	.sapUiTableRowActionHeaderCell {
+		margin-right: @_sap_ui_table_Scrolling_VScrollbarWidth;
+	}
+
+	html.sap-tablet:not(.sap-desktop) &,
+	html.sap-phone & {
+		.sapUiTableHSb, .sapUiTableCtrlScr, .sapUiTableColHdrScr {
+			margin-right: calc(@_sap_ui_table_Scrolling_VScrollbarWidthMobile ~"+" @@RowActionWidth);
+		}
+
+		.sapUiTableRowActionHeaderCell {
+			margin-right: @_sap_ui_table_Scrolling_VScrollbarWidthMobile;
+		}
+	}
+}
+
+._sapUiTableNoVScrWithActionsInnerMixin(@variant:"Width") {
+	@RowActionWidth: "_sap_ui_table_RowActionColumn@{variant}";
+	.sapUiTableHSb, .sapUiTableCtrlScr, .sapUiTableColHdrScr {
+		margin-right: calc(@@RowActionWidth);
+	}
+
+	.sapUiTableRowActionHeaderCell {
+		margin-right: 0px;
+	}
+}
+
+.sapUiTableVScr {
+	.sapUiTableHSb, .sapUiTableCtrlScr, .sapUiTableColHdrScr, .sapUiTableRowActionScr, .sapUiTableRowWithAction {
+		margin-right: @_sap_ui_table_Scrolling_VScrollbarWidth;
+
+		html.sap-tablet:not(.sap-desktop) &,
+		html.sap-phone & {
+			margin-right: @_sap_ui_table_Scrolling_VScrollbarWidthMobile;
+		}
+	}
+}
+
+.sapUiTableVScr.sapUiTableRAct {
+	._sapUiTableVScrWithActionsInnerMixin();
+}
+
+.sapUiSizeCozy.sapUiTableVScr.sapUiTableRAct,
+.sapUiSizeCozy .sapUiTableVScr.sapUiTableRAct {
+	._sapUiTableVScrWithActionsInnerMixin("WidthCozy");
+}
+
+.sapUiSizeCondensed.sapUiTableVScr.sapUiTableRAct,
+.sapUiSizeCondensed .sapUiTableVScr.sapUiTableRAct {
+	._sapUiTableVScrWithActionsInnerMixin("WidthCondensed");
+}
+
+.sapUiTableVScr.sapUiTableRActS {
+	._sapUiTableVScrWithActionsInnerMixin("SmallWidth");
+}
+
+.sapUiSizeCozy.sapUiTableVScr.sapUiTableRActS,
+.sapUiSizeCozy .sapUiTableVScr.sapUiTableRActS {
+	._sapUiTableVScrWithActionsInnerMixin("SmallWidthCozy");
+}
+
+.sapUiSizeCondensed.sapUiTableVScr.sapUiTableRActS,
+.sapUiSizeCondensed .sapUiTableVScr.sapUiTableRActS {
+	._sapUiTableVScrWithActionsInnerMixin("SmallWidthCondensed");
+}
+
+.sapUiTableRAct:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin();
+}
+
+.sapUiSizeCozy.sapUiTableRAct:not(.sapUiTableVScr),
+.sapUiSizeCozy .sapUiTableRAct:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin("WidthCozy");
+}
+
+.sapUiSizeCondensed.sapUiTableRAct:not(.sapUiTableVScr),
+.sapUiSizeCondensed .sapUiTableRAct:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin("WidthCondensed");
+}
+
+.sapUiTableRActS:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin("SmallWidth");
+}
+
+.sapUiSizeCozy.sapUiTableRActS:not(.sapUiTableVScr),
+.sapUiSizeCozy .sapUiTableRActS:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin("SmallWidthCozy");
+}
+
+.sapUiSizeCondensed.sapUiTableRActS:not(.sapUiTableVScr),
+.sapUiSizeCondensed .sapUiTableRActS:not(.sapUiTableVScr) {
+	._sapUiTableNoVScrWithActionsInnerMixin("SmallWidthCondensed");
+}
+
+/* Hide last border right of column header and cell when no vertical scroll is available */
+.sapUiTable:not(.sapUiTableVScr) {
+	.sapUiTableColHdrScr .sapUiTableHeaderCell:last-child,
+	.sapUiTableCtrlScroll .sapUiTableTr > td:last-child {
+		border-right: none;
+	}
+}
+
+.sapUiTableHSb,
+.sapUiTableHSbBg {
+	display: none;
+	height: @_sap_ui_table_Scrolling_HScrollbarHeight;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+.sapUiTableHSb {
+	position: relative;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: auto;
+	border-right: @_sap_ui_table_BaseBorderWidth solid transparent; /* Simulates the right border of the table cells in the content area */
+	background-color: @sapUiListBackground;
+}
+
+.sapUiTableHSbBg {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: @_sap_ui_table_Scrolling_ScrollbarBackground;
+}
+
+.sapUiTableHSbExternal {
+	height: @_sap_ui_table_Scrolling_HScrollbarHeight;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: auto;
+	background-color: @sapUiListBackground;
+}
+
+.sapUiTableHSbContent {
+	height: 1px;
+}
+
+.sapUiTableHScr {
+
+	.sapUiTableHSb, .sapUiTableHSbBg {
+		display: block;
+	}
+
+	.sapUiTableFtr {
+		border-top: @_sap_ui_table_BaseBorderWidth solid @sapUiListHeaderBorderColor;
+	}
+
+	.sapUiTableColReorderIndicator, .sapUiTableColRsz {
+		bottom: @_sap_ui_table_Scrolling_HScrollbarHeight;
+	}
+
+}
+
+.sapUiTableVSb,
+.sapUiTableHSb,
+.sapUiTableHSbExternal {
+	&::-webkit-scrollbar-thumb {
+		background-color: @sapUiScrollBarFaceColor;
+	}
+
+	&::-webkit-scrollbar {
+		background-color: @sapUiScrollBarTrackColor;
+	}
+
+	._sap_ui_table_Scrolling_NativeScrollbarCommon();
+}
+
+html.sap-desktop {
+	.sapUiTableVSb,
+	.sapUiTableHSb,
+	.sapUiTableHSbExternal {
+		._sap_ui_table_Scrolling_NativeScrollbarDesktop();
+	}
+
+	.sapUiTableVSb {
+		&::-webkit-scrollbar:vertical {
+			width: @_sap_ui_table_Scrolling_ScrollbarSize;
+		}
+
+		&::-webkit-scrollbar-thumb:vertical {
+			border-left: 0.125rem solid @sapUiScrollBarTrackColor;
+			border-right: 0.125rem solid @sapUiScrollBarTrackColor;
+		}
+	}
+
+	.sapUiTableHSb,
+	.sapUiTableHSbExternal {
+		&::-webkit-scrollbar:horizontal {
+			height: @_sap_ui_table_Scrolling_ScrollbarSize;
+		}
+
+		&::-webkit-scrollbar-thumb:horizontal {
+			border-top: 0.125rem solid @sapUiScrollBarTrackColor;
+			border-bottom: 0.125rem solid @sapUiScrollBarTrackColor;
+		}
+	}
+}
+
+html.sap-tablet:not(.sap-desktop),
+html.sap-phone {
+	.sapUiTableVSb,
+	.sapUiTableHSb,
+	.sapUiTableHSbExternal {
+		-webkit-appearance: none;
+		._sap_ui_table_Scrolling_NativeScrollbarMobile();
+	}
+
+	.sapUiTableVSb {
+		&::-webkit-scrollbar:vertical {
+			width: @_sap_ui_table_Scrolling_ScrollbarSizeMobile;
+		}
+
+		&::-webkit-scrollbar-thumb:vertical {
+			width: 0.25rem;
+			min-height: 0.25rem;
+			border-left: 0.125rem solid @sapUiScrollBarBorderColor;
+			border-right: 0.125rem solid @sapUiScrollBarBorderColor;
+		}
+	}
+
+	.sapUiTableHSb,
+	.sapUiTableHSbExternal {
+		&::-webkit-scrollbar:horizontal {
+			height: @_sap_ui_table_Scrolling_ScrollbarSizeMobile;
+		}
+
+		&::-webkit-scrollbar-thumb:horizontal {
+			height: 0.25rem;
+			min-width: 0.25rem;
+			border-top: 0.125rem solid @sapUiScrollBarBorderColor;
+			border-bottom: 0.125rem solid @sapUiScrollBarBorderColor;
+		}
+	}
+
+	.sapUiTableVSbContainer,
+	.sapUiTableVSbHeader {
+		width: @_sap_ui_table_Scrolling_VScrollbarWidthMobile;
+	}
+
+	.sapUiTableHSb,
+	.sapUiTableHSbBg,
+	.sapUiTableHSbExternal {
+		height: @_sap_ui_table_Scrolling_HScrollbarHeightMobile;
+	}
+
+	.sapUiTableVScr {
+		.sapUiTableCtrlScr, .sapUiTableColHdrScr, .sapUiTableHSb, .sapUiTableRowActionScr, .sapUiTableRowWithAction {
+			margin-right: @_sap_ui_table_Scrolling_VScrollbarWidthMobile;
+		}
+	}
+
+	.sapUiTableHScr {
+		.sapUiTableColReorderIndicator, .sapUiTableColRsz, .sapUiTableRowActionScr, .sapUiTableRowWithAction {
+			bottom: @_sap_ui_table_Scrolling_HScrollbarHeightMobile;
+		}
+	}
+}

package/src/sap/ui/table/themes/sap_belize_base/ScrollingIOS.less

@@ -0,0 +1,18 @@
+/* ================================== */
+/* CSS for sap.ui.table/ScrollingIOS  */
+/* Base theme                         */
+/* ================================== */
+
+.sapUiTableVSbIOS {
+	position: absolute;
+	width: 100%;
+	z-index: 5;
+
+	.sapUiTableVSbIOSThumb {
+		position: relative;
+		background-color: #949494;
+		border-radius: 0.25rem;
+		left: @_sap_ui_table_BaseBorderWidth;
+		width: calc(100% ~"-" calc(2 * @_sap_ui_table_BaseBorderWidth));
+	}
+}