@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;

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

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

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

	.sapMWizardStepActivated {
		display: block;
	}

	.sapMWizardLastActivatedStep {
		min-height: 100%;
	}

	.sapMWizardStepTitle::before {
		counter-increment: steps-counter;
		content: counter(steps-counter) ". ";
	}

	.sapMWizardNextButton {
		bottom: -3rem;
		opacity: 0;
	}

	.sapMWizardNextButtonVisible {
		bottom: 0rem;
		opacity: 1;
	}

	.sapMDialogSection {
		height: auto;
	}
}

html[data-sap-ui-animation='on'] .sapMWizardNextButton {
	transition: 0.4s linear;
}

html.sap-desktop .sapMWizard .sapMWizardNextButton,
html.sap-tablet .sapMWizard .sapMWizardNextButton {
	display: block;
}

html.sap-phone .sapMWizard {
	.sapMWizardNextButton {
		position: fixed;
		left: 50%;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
	}

	.sapMWizardNextButtonVisible {
		bottom: 3rem;
	}
}