@openui5/sap.m/src/sap/m/themes/base/WizardProgressNavigator.less

OpenUI5 UI Library sap.m

/* ============================================== */
/* CSS for control sap.m/WizardProgressNavigator  */
/* Base theme                                     */
/* ============================================== */

@_sap_m_WizardProgressNavigator_NavHeight: 4rem;
@_sap_m_WizardProgressNavigator_ListHeight: 2rem;
@_sap_m_WizardProgressNavigator_StepWidth: 2rem;
@_sap_m_WizardProgressNavigator_StepPadding: 0.5rem;
@_sap_m_WizardProgressNavigator_SmallSeparator: 0.25rem;
@_sap_m_WizardProgressNavigator_StepUnderlineHeight: 0.125rem;
@_sap_m_WizardProgressNavigator_StepOverlapOnPhone: 1.75rem;

.sapMWizardProgressNav {
	box-sizing: border-box;
	height: @_sap_m_WizardProgressNavigator_NavHeight;
	padding: 1rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background: @sapUiObjectHeaderBackground;
	font-size: @sapMFontMediumSize;
	box-shadow: @sapUiShadowHeader;
}

.sapMWizardProgressNavList,
.sapMWizardProgressNavListVarying {
	display: table;
	table-layout: fixed;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: @_sap_m_WizardProgressNavigator_ListHeight;
}

.sapMWizardProgressNavStep {
	display: table-cell;
	position: relative;
	padding: 0 @_sap_m_WizardProgressNavigator_StepPadding;
}

// the separator connecting every two steps
.sapMWizardProgressNavStep::after {
	content: "";
	display: block;
	position: absolute;
	top: @_sap_m_WizardProgressNavigator_ListHeight / 2;
	left: @_sap_m_WizardProgressNavigator_StepWidth + (2 * @_sap_m_WizardProgressNavigator_StepPadding);
	right: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

// we do not have a separator at the end for known number of steps
.sapMWizardProgressNavList .sapMWizardProgressNavStep:last-child::after {
	display: none;
}

// we have a dashed separator at the end when the number of steps can change
.sapMWizardProgressNavListVarying .sapMWizardProgressNavStep:last-child::after {
	display: block;
	border-bottom-style: dashed;
}

// the currently selected step
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {

	// the current step is underlined as to have a visual cue
	.sapMWizardProgressNavAnchor::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: @_sap_m_WizardProgressNavigator_StepUnderlineHeight;

		// negative values are needed for the right positioning - (2rem - 4rem) / 2 = -1
		// bottom:0 positions it at the bottom of the list but we want it at the bottom of the nav
		bottom: (@_sap_m_WizardProgressNavigator_ListHeight - @_sap_m_WizardProgressNavigator_NavHeight) / 2 - @_sap_m_WizardProgressNavigator_StepUnderlineHeight;
	}

	// anchors in all steps after the current one are right aligned so that they dont overflow to the right
	& ~ .sapMWizardProgressNavStep > .sapMWizardProgressNavAnchor {
		right: 0;
	}
}

// the step up to which progress has been reached
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {

	// anchors in all steps after the active one have the default cursor and no focus
	& ~ .sapMWizardProgressNavStep > .sapMWizardProgressNavAnchor {
		cursor: default;
		display: inline;

		&:focus {
			outline: none;
		}
	}
}

// all steps that are grouped
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
	width: @_sap_m_WizardProgressNavigator_StepWidth - @_sap_m_WizardProgressNavigator_StepOverlapOnPhone;
	padding: 0;

	.sapMWizardProgressNavAnchor {
		position: absolute;
		top: 0;
	}

	.sapMWizardProgressNavAnchorTitleContainer {
		display: none;
	}
}

// when there are no titles and the number of steps is know the last step should align to the end
.sapMWizardProgressNavList.sapMWizardProgressNavListNoTitles .sapMWizardProgressNavStep:last-child {
	width: @_sap_m_WizardProgressNavigator_StepWidth;
}

// override the previous rule when more than one step is grouped because we want the last step to be
// shrunk and show below the previous step with [data-sap-ui-wpn-step-open="false"]
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] + .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
	width: @_sap_m_WizardProgressNavigator_StepWidth - @_sap_m_WizardProgressNavigator_StepOverlapOnPhone;
}

// select the first grouped step on the right and style it so that it does not collapse
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="true"] + .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] {
	width: @_sap_m_WizardProgressNavigator_StepWidth;
	padding-left: @_sap_m_WizardProgressNavigator_StepPadding;
}

// select the last grouped step on the left and style it so that it does not collapse
// add the needed padding to the right so that the separator between the steps is visible
// the second selector is needed for a corner case
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev="true"],
.sapMWizardProgressNavStep[data-sap-ui-wpn-step-open="false"] +  .sapMWizardProgressNavStep[data-sap-ui-wpn-step-open-prev="true"] {
	width: @_sap_m_WizardProgressNavigator_StepWidth;
	padding-right: @_sap_m_WizardProgressNavigator_StepPadding + @_sap_m_WizardProgressNavigator_SmallSeparator;

	&::after {
		left: @_sap_m_WizardProgressNavigator_StepWidth + @_sap_m_WizardProgressNavigator_StepPadding;
	}
}

.sapMWizardProgressNavAnchor {
	display: inline-block;
	position: relative;
	z-index: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.sapMWizardProgressNavAnchorCircle {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
	width: @_sap_m_WizardProgressNavigator_StepWidth;
	height: @_sap_m_WizardProgressNavigator_ListHeight;
	line-height: @_sap_m_WizardProgressNavigator_ListHeight;
	border-width: 1px;
	border-style: solid;
	border-radius: 50%;
	color: @sapUiBaseText;
	background: @sapUiObjectHeaderBackground;
	border-color: @sapUiObjectHeaderBorderColor;
	font-size: @sapMFontMediumSize;
	.sapUiIcon {
		font-size: @sapMFontLargeSize;
	}
}

.sapMSplitContainerDetail .sapMWizardProgressNav {
	padding: 0.875rem 1rem;
}

html.sap-phone .sapMWizardProgressNav {
	padding: 0.875rem 0.5rem;
}

.sapMWizardProgressNavStep:hover .sapMWizardProgressNavAnchorCircle {
	background: @sapUiHighlight;
}

.sapMWizardProgressNavAnchorIcon {
	font-size: @sapMFontLargeSize;
}

.sapMWizardProgressNavStep::after {
	border-bottom-color: @sapUiObjectHeaderBorderColor;
}

.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {
	& .sapMWizardProgressNavAnchor::after {
		background: @sapUiSelected;
		height: 0.25rem;
	}

	& .sapMWizardProgressNavAnchorCircle {
		background: @sapUiSelected;
		color: @sapUiContentContrastIconColor;
	}
}


.sapMWizardProgressNavAnchorTitleContainer {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding: 0 @_sap_m_WizardProgressNavigator_StepPadding;
	max-height: @_sap_m_WizardProgressNavigator_ListHeight;
	overflow: hidden;
	max-width: ~"calc(100% - 3rem)";
	background: @sapUiObjectHeaderBackground;
}

.sapMWizardProgressNavAnchorTitle {
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	max-height: @_sap_m_WizardProgressNavigator_ListHeight;
	line-height: @_sap_m_WizardProgressNavigator_ListHeight  / 2;
	font-size: @sapMFontMediumSize;
	color: @sapUiGroupTitleTextColor;
	vertical-align: middle;
}

.sapMWizardProgressNavAnchorTitleOptional {
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 100%;
}

.sapMWizardProgressNavAnchorLabelOptional {
	display: table-row;
	font-size: @sapMFontSmallSize;
	color: @sapUiContentLabelColor;
	overflow: hidden;
}