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

OpenUI5 UI Library sap.m

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

@_sap_m_Wizard_NavHeight: 4rem;
@_sap_m_WizardStep_Animation_Duration: 0.4s;

.sapMWizard {
	height: 100%;
	position: relative;
	counter-reset: steps-counter;
	overflow: hidden;
	background-color: transparent;

	.sapMWizardStepContainer {
		position: relative;
		height: ~"calc(100% - 4rem)"; /* 4rem is the height of the Progress Navigator*/
		box-sizing: border-box;
		padding: 0 1rem 1rem 1rem;
	}

	.sapMWizardStep:first-child {
		margin-top: 1rem;
	}

	.sapMWizardStep {
		position: relative;
		padding-bottom: 2rem;
		display: none;
	}

	.sapMWizardStepActivated {
		display: block;
	}

	&.sapMWizardModeScroll .sapMWizardStepTitle::before {
		counter-increment: steps-counter;
		content: counter(steps-counter) '. ';
	}

	.sapMDialogSection {
		height: auto;
	}

	&.sapMWizardBgStandard .sapMWizardStepContainer {
		background-color: var(--sapBackgroundColor);
	}

	&.sapMWizardBgSolid .sapMWizardStepContainer {
		background-color: var(--sapBackgroundColor);
	}

	&.sapMWizardBgTransparent .sapMWizardStepContainer {
		background-color: transparent;
	}

	&.sapMWizardBgList .sapMWizardStepContainer {
		background-color: var(--sapGroup_ContentBackground);
	}
}

.sapMWizard:not(.sapMWizardModePage) .sapMWizardLastActivatedStep {
	min-height: ~"calc(100% - 1rem)"; /* 1rem is the margin from the top of the container*/
}

html.sap-desktop .sapMWizard .sapMWizardNextButton,
html.sap-tablet .sapMWizard .sapMWizardNextButton {
	& {
		display: block;
		opacity: 0;
		transform: translateY(3rem);
		transition: opacity @_sap_m_WizardStep_Animation_Duration ease, transform @_sap_m_WizardStep_Animation_Duration ease;
	}

	&.sapMWizardNextButtonAnimated {
		transform: translateY(0);
		opacity: 1;
	}
}

html .sapMWizard .sapMWizardNextButton.sapMWizardNextButtonHidden {
	display: none;
  }