@openui5/themelib_sap_belize 1.124.1 → 1.125.0

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

@@ -0,0 +1,441 @@
+/* ========================== */
+/* CSS for sap.ui.table/Cell  */
+/* Base theme                 */
+/* ========================== */
+
+@_sap_ui_table_Cell_FocusOutlineOffset: -@sapUiContentFocusWidth;
+@_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome: calc(-@sapUiContentFocusWidth ~"- 0.0625rem");
+@_sap_ui_table_Cell_Padding: 0 0.5rem;
+@_sap_ui_table_Cell_TouchMenuIconSize: 1.375rem;
+@_sap_ui_table_Cell_ColumnIconSize: 0.75rem;
+@_sap_ui_table_Cell_BorderColorSelected: @sapUiListBorderColor;
+@_sap_ui_table_Cell_BorderColorFixedSelected: @sapUiListTableFixedBorder;
+@_sap_ui_table_Cell_ShadowColorFixed: transparent;
+@_sap_ui_table_Cell_BorderBottomFocus: @sapUiListTableFixedBorder;
+@_sap_ui_table_Cell_DummyBorderColor: @sapUiListVerticalBorderColor;
+
+/*
+ * Focus outline
+ */
+.sapUiTableCell:focus {
+	outline: none;
+
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		outline-offset: @_sap_ui_table_Cell_FocusOutlineOffset;
+
+		.sapUiTableZoomout & {
+			outline-offset: @_sap_ui_table_Cell_FocusOutlineOffsetInZoomedChrome;
+		}
+	}
+}
+
+/*
+ * Hover
+ */
+.sapUiTableHeaderCell:not(.sapUiTableRowActionHeaderCell) {
+	&:hover {
+		background-color: @sapUiListHoverBackground;
+	}
+}
+
+/*
+ * Borders
+ */
+.sapUiTableCell {
+	position: relative;
+	box-sizing: border-box;
+	border-right: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	border-bottom: @_sap_ui_table_BaseBorderWidth solid @sapUiListBorderColor;
+
+	.sapUiTableRowIndented > &.sapUiTableRowSelectionCell {
+		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	}
+
+	// Adds a border on top that might be required due to indentation of the row above.
+	.sapUiTableGroupMode &.sapUiTableRowSelectionCell {
+		box-shadow: 0 -@_sap_ui_table_BaseBorderWidth @sapUiListBorderColor;
+	}
+
+	// Last data column border
+	&.sapUiTableCellLast {
+		// The table and row action column have a border, so the last data column doesn't need one.
+		// See: sapUiTableCellDummy, sapUiTableCtrlScr
+		border-right-color: transparent;
+	}
+
+	// Row action column border
+	&.sapUiTableRowActionHeaderCell,
+	&.sapUiTableRowActionCell {
+		border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+
+		.sapUiTableHScr & {
+			border-left-color: @sapUiListTableFixedBorder;
+			border-right-color: transparent;
+		}
+	}
+	&.sapUiTableRowActionCell {
+		.sapUiTableRowNavIndicator & {
+			border-right: none;
+			border-left: none;
+			background-color: transparent;
+		}
+	}
+
+	// Fixed data column border
+	&.sapUiTableCellLastFixed {
+		border-right-color: @sapUiListTableFixedBorder;
+	}
+
+	// Header rows borders
+	&.sapUiTableHeaderCell {
+		// Column header rows don't have bottom borders. The header area as a whole has a bottom border.
+		// See: sapUiTableColHdrCnt
+		border-bottom: none;
+	}
+
+	// Fixed rows borders
+	.sapUiTableRowLastFixedTop > &,
+	.sapUiTableRowLastScrollable > & {
+		border-bottom-color: @sapUiListTableFixedBorder;
+
+		.sapUiTableRowSel& {
+			border-bottom-color: @_sap_ui_table_Cell_BorderColorFixedSelected;
+		}
+
+		&:focus {
+			border-bottom-color: @_sap_ui_table_Cell_BorderBottomFocus;
+		}
+	}
+
+	.sapUiTableRowFirstScrollable > &,
+	.sapUiTableRowFirstFixedBottom > & {
+		box-shadow: 0 @_sap_ui_table_BaseBorderWidth @_sap_ui_table_Cell_ShadowColorFixed inset;
+	}
+
+	// Last row border
+	.sapUiTableLastRow > & {
+		// The table has a border, so the last row doesn't need one.
+		border-bottom-color: transparent;
+	}
+
+	> .sapUiTableCellInner {
+		box-sizing: border-box;
+
+		&.sapUiTableFirstColumnCell {
+			padding-left: 1rem;
+		}
+	}
+
+	.sapUiTableRowSel > & {
+		border-bottom-color: @_sap_ui_table_Cell_BorderColorSelected;
+	}
+
+	.sapUiTableSummaryRow > & {
+		border-left-color: transparent;
+		border-right-color: transparent;
+	}
+}
+
+.sapUiTableRowSelectionHeaderCell { // Contains highlight and SelectAll selector.
+	display: none;
+	vertical-align: bottom;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: @_sap_ui_table_RowSelectorWidth;
+	min-height: @_sap_ui_table_ColumnHeaderHeight;
+
+	.sapUiSizeCozy & {
+		min-height: @_sap_ui_table_ColumnHeaderHeightCozy;
+	}
+
+	.sapUiTableRowSelectors &,
+	.sapUiTableRowHighlights & {
+		display: inline-block;
+	}
+
+	// Only selectors visible.
+	.sapUiTableRowSelectors:not(.sapUiTableRowHighlights) & {
+		width: @_sap_ui_table_RowSelectorWidth;
+
+		.sapUiSizeCondensed & {
+			width: @_sap_ui_table_RowSelectorWidthCondensed;
+		}
+
+		.sapUiSizeCozy & {
+			width: @_sap_ui_table_RowSelectorWidthCozy;
+		}
+	}
+
+	// Only highlights visible.
+	.sapUiTableRowHighlights:not(.sapUiTableRowSelectors) & {
+		width: @_sap_ui_table_RowHighlightWidth;
+	}
+
+	// Both selectors and highlights visible.
+	.sapUiTableRowHighlights.sapUiTableRowSelectors & {
+		width: calc(@_sap_ui_table_RowSelectorWidth ~"+" @_sap_ui_table_RowHighlightWidth);
+
+		.sapUiSizeCondensed & {
+			width: calc(@_sap_ui_table_RowSelectorWidthCondensed ~"+" @_sap_ui_table_RowHighlightWidth);
+		}
+
+		.sapUiSizeCozy & {
+			width: calc(@_sap_ui_table_RowSelectorWidthCozy ~"+" @_sap_ui_table_RowHighlightWidth);
+		}
+	}
+
+	&.sapUiTableSelAllDisabled > * {
+		opacity: 0.3;
+		pointer-events: none;
+	}
+
+	&:not(.sapUiTableSelAllDisabled), &:not(.sapUiTableSelAllDisabled) .sapUiIcon {
+		cursor: pointer;
+	}
+}
+
+.sapUiTableHeaderDataCell {
+	padding: 7px 0;
+
+	&.sapUiTableHeaderCellActive {
+		cursor: pointer;
+		.sapMLabel, .sapMText, .sapUiIcon {
+			cursor: pointer;
+		}
+	}
+
+	&.sapUiTableHeaderCellActive: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;
+		}
+
+		& > .sapUiTableCellInner {
+			span,
+			label,
+			&.sapUiTableColSorted::after,
+			&.sapUiTableColFiltered::after {
+				color: @sapUiListActiveTextColor;
+			}
+		}
+	}
+
+	> .sapUiTableCellInner {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: normal;
+		padding: @_sap_ui_table_Cell_Padding;
+
+		&.sapUiTableFirstColumnCell {
+			padding-left: 1rem;
+		}
+
+		& > div:first-child {
+			display: flex;
+			flex: 1 1 auto;
+			overflow: hidden;
+
+			> * {
+				overflow: hidden;
+			}
+		}
+
+		&::after {
+			.sapUiTableColSorted&,
+			.sapUiTableColFiltered& {
+				content: "";
+				font-family: "SAP-Icons";
+				font-size: @_sap_ui_table_Cell_ColumnIconSize;
+				color: @sapUiContentNonInteractiveIconColor;
+				margin-left: 0.5rem;
+				flex: none;
+			}
+
+			.sapUiTableColSorted& {
+				content: "\e1fd";
+			}
+
+			.sapUiTableColSortedD& {
+				content: "\e1fc";
+			}
+
+			.sapUiTableColFiltered& {
+				content: "\e076";
+			}
+
+			.sapUiTableColFiltered.sapUiTableColSorted& {
+				content: "\e076\00a0\e1fd";
+			}
+
+			.sapUiTableColFiltered.sapUiTableColSortedD& {
+				content: "\e076\00a0\e1fc";
+			}
+		}
+	}
+
+	> .sapUiTableCellTouchMenu {
+		display: flex;
+		padding: @_sap_ui_table_Cell_Padding;
+
+		.sapUiTableColResizer {
+			margin-left: auto;
+		}
+
+		.sapUiTableColResizer,
+		.sapUiTableColDropDown {
+			font-family: "SAP-icons";
+			font-size: @_sap_ui_table_Cell_TouchMenuIconSize;
+			color: @sapUiContentIconColor;
+			cursor: default;
+
+			&:active {
+				color: @sapUiContentContrastTextColor;
+			}
+		}
+	}
+}
+
+.sapUiTableRowActionHeaderCell {
+	position: absolute;
+	right: 0;
+	top: 0;
+	height: 100%;
+	display: none;
+	z-index: 4; /* Ensure Action Area before Resize/Reorder bars */
+	width: @_sap_ui_table_RowActionColumnWidth;
+
+	.sapUiTableRAct &,
+	.sapUiTableRActS & {
+		display: block;
+	}
+
+	.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidth;
+	}
+
+	.sapUiSizeCozy & {
+		width: @_sap_ui_table_RowActionColumnWidthCozy;
+	}
+
+	.sapUiSizeCozy .sapUiTableRActS &,
+	.sapUiSizeCozy.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
+	}
+
+	.sapUiSizeCondensed & {
+		width: @_sap_ui_table_RowActionColumnWidthCondensed;
+	}
+
+	.sapUiSizeCondensed .sapUiTableRActS &,
+	.sapUiSizeCondensed.sapUiTableRActS & {
+		width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
+	}
+
+	> span {
+		display: none;
+	}
+}
+
+.sapUiTableDataCell {
+	padding: 0;
+	vertical-align: middle;
+
+	> .sapUiTableCellInner {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		padding: @_sap_ui_table_Cell_Padding;
+		white-space: nowrap;
+	}
+}
+
+.sapUiTableRowSelectionCell {
+	cursor: pointer;
+}
+
+.sapUiTableRowSelectionCell,
+.sapUiTableRowActionCell {
+	position: relative;
+}
+
+.sapUiTableRowActionCell {
+	display: flex;
+	align-items: center;
+	min-width: @_sap_ui_table_RowActionColumnWidth;
+
+	.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidth;
+	}
+
+	.sapUiSizeCozy & {
+		min-width: @_sap_ui_table_RowActionColumnWidthCozy;
+	}
+
+	.sapUiSizeCozy .sapUiTableRActS &,
+	.sapUiSizeCozy.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidthCozy;
+	}
+
+	.sapUiSizeCondensed & {
+		min-width: @_sap_ui_table_RowActionColumnWidthCondensed;
+	}
+
+	.sapUiSizeCondensed .sapUiTableRActS &,
+	.sapUiSizeCondensed.sapUiTableRActS & {
+		min-width: @_sap_ui_table_RowActionColumnSmallWidthCondensed;
+	}
+
+	.sapUiTableRowNavIndicator & {
+		min-width: @_sap_ui_table_NavIndicatorWidth;
+	}
+}
+
+.sapUiTableCellDummy {
+	border-left: @_sap_ui_table_BaseBorderWidth solid @_sap_ui_table_Cell_DummyBorderColor;
+	pointer-events: none;
+	.sapUiTableContentRow & {
+		background-color: @sapBackgroundColor !important;
+	}
+}
+
+.sapUiTableCellFlex {
+	> .sapUiTableCellInner {
+		display: flex;
+		align-items: center;
+
+		> * {
+			overflow: hidden;
+		}
+	}
+}
+
+.sapUiTableRowHidden > .sapUiTableCell > *,
+.sapUiTableCellHidden > * {
+	display: none;
+}
+
+/**
+ * If there is no element (selection/highlight/expand/collapse) at the left most of the table
+ * then the first cell must have 1rem left padding while regular cells have 0.5rem left padding
+ * this additional 0.5rem padding decreases the max content width of the column cells 0.5rem.
+ * The selector below is adding additional 0.5rem padding to the first th elements of the table.
+ * Since the box-sizing is content-box for table cells this will increase the DOM column width
+ * 0.5rem when compared to the width property of the column. Although this might not be desired
+ * it is now aligned with the resposive table behavior.
+ * Another alternative would be rendering a dummy 0.5rem width column. While this can solve the
+ * API and DOM column width difference, changing the table layout might be expensive.
+ */
+.sapUiTable:not(.sapUiTableRowSelectors,.sapUiTableRowHighlights) .sapUiTableFirstVisibleColumnTH {
+	padding-left: .25rem;
+	padding-right: .25rem;
+}

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

@@ -0,0 +1,83 @@
+/* ========================================= */
+/* CSS for control sap.ui.table/CreationRow  */
+/* Base theme                                */
+/* ========================================= */
+
+.sapUiTableCreationRow {
+	display: flex;
+	background-color: @sapUiListHeaderBackground;
+	border-bottom: @_sap_ui_table_BaseBorderWidth solid @sapUiListHeaderBorderColor;
+
+	> .sapUiTableCreationRowBeginSection {
+		flex: none;
+		position: relative;
+		border-right: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor;
+	}
+
+	> .sapUiTableCreationRowMiddleSection {
+		overflow: hidden;
+	}
+
+	> .sapUiTableCreationRowEndSection {
+		flex: none;
+		position: relative;
+		height: auto;
+		border-bottom: none;
+
+		.sapUiTableRActFlexible & {
+			width: 0 !important;
+		}
+
+		&.sapUiTableVSbBg {
+			border-left: @_sap_ui_table_BaseBorderWidth solid @sapUiListVerticalBorderColor !important;
+			box-sizing: content-box !important;
+		}
+	}
+
+	.sapUiTableCreationRowForm {
+		display: flex;
+
+		> .sapUiTableCtrlScr {
+			margin: 0 !important;
+			border-right: none !important;
+		}
+
+		table {
+			height: 100%;
+		}
+
+		.sapUiTableCell {
+			&:extend(.sapUiTableDataCell all); // We want the styles, but not the class. It is a "type class" that influences the tables behavior.
+
+			// The cells in the creation row should not have any borders except the ones that indicate fixed areas (e.g. fixed columns).
+			border-color: transparent;
+
+			// Fixed data column border
+			&.sapUiTableCellLastFixed {
+				border-right-color: @sapUiListTableFixedBorder;
+			}
+
+			// Row action column border
+			.sapUiTableHScr &.sapUiTableRowActionHeaderCell {
+				border-left-color: @sapUiListTableFixedBorder;
+			}
+
+			// The height is fixed to the default row height (or the application defined height, see TableRenderer) until variable row heights are
+			// generally supported.
+			> .sapUiTableCellInner {
+				max-height: @_sap_ui_table_BaseSize;
+
+				.sapUiSizeCozy & {
+					max-height: @_sap_ui_table_BaseSizeCozy;
+				}
+				.sapUiSizeCondensed & {
+					max-height: @_sap_ui_table_BaseSizeCondensed;
+				}
+			}
+		}
+
+		.sapUiTableCellDummy {
+			border-color: transparent;
+		}
+	}
+}