Configurator Modal: Default

No notes defined.

<div class="sds-modal modal fade -hasHeaderStepper -bodySecondary06" id="" aria-hidden="true" tabindex="-1">
    <div class="sds-modal__dialog modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="sds-modal__content modal-content">

            <div class="sds-modal__header modal-header">

                <div class="sds-modal__title modal-title">Veuillez choisir une frame</div>
                <div class="sds-modal__headerStepper">
                    <nav class="sds-mobileStepper -secondary">
                        <ul class="sds-mobileStepper__inner list-unstyled">

                            <li class="sds-mobileStepper__item">
                                <div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
                                    <div class="progress-bar sds-progress__bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-current="true"></div>

                                </div>
                            </li>

                            <li class="sds-mobileStepper__item">
                                <div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
                                    <div class="progress-bar sds-progress__bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

                                </div>
                            </li>

                        </ul>
                    </nav>
                </div>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">

                    <span class="sds-icon sds-icon-close"></span>

                </button>

            </div>

            <div class="sds-modal__body modal-body">

                <div class="row row-sm row-cols-2 align-items-stretch-immediate">
                    <div class="col">
                        <div style="
				background-color: #ffffff;
				padding: 16px;
				border: 2px solid #b2c1cf;
				border-radius: 16px;
				">
                            <div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
                            <div class="sds-stackXs" style="margin-top: 32px">
                                <div>Print</div>
                                <div style="color: #4d6e90">Lorem iosum dolor</div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div style="
				background-color: #ffffff;
				padding: 16px;
				border: 2px solid #b2c1cf;
				border-radius: 16px;
				">
                            <div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
                            <div class="sds-stackXs" style="margin-top: 32px">
                                <div>Digital</div>
                                <div style="color: #4d6e90">Lorem iosum dolor</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
 
{% extends "@snet-modal-base-frame" %}
{% block header %}
	<div class="{{ namespace }}modal__title modal-title">{{ title }}</div>
	<div class="{{ namespace }}modal__headerStepper">
		{% render "@msp-stepper",stepperOptions,true %}
	</div>
{% endblock %}
{% block body %}
	<div class="row row-sm row-cols-2 align-items-stretch-immediate">
		<div class="col">
			<div style="
				background-color: {{ colorTokens.color.gray["0"].value }};
				padding: {{ spacerTokens.spacer.unit["16"].value }};
				border: {{ spacerTokens.spacer.unit["2"].value }} solid {{ colorTokens.color.brand.secondary["30"].value }};
				border-radius: {{ radiusTokens.radius["16"].value }};
				">
				<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: {{ colorTokens.color.brand.secondary["10"].value }};"></div>
				<div class="{{ namespace }}stackXs" style="margin-top: {{ spacerTokens.spacer.unit["32"].value }}">
					<div>Print</div>
					<div style="color: {{ colorTokens.color.brand.secondary["60"].value }}">Lorem iosum dolor</div>
				</div>
			</div>
		</div>
		<div class="col">
			<div style="
				background-color: {{ colorTokens.color.gray["0"].value }};
				padding: {{ spacerTokens.spacer.unit["16"].value }};
				border: {{ spacerTokens.spacer.unit["2"].value }} solid {{ colorTokens.color.brand.secondary["30"].value }};
				border-radius: {{ radiusTokens.radius["16"].value }};
				">
				<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: {{ colorTokens.color.brand.secondary["10"].value }};"></div>
				<div class="{{ namespace }}stackXs" style="margin-top: {{ spacerTokens.spacer.unit["32"].value }}">
					<div>Digital</div>
					<div style="color: {{ colorTokens.color.brand.secondary["60"].value }}">Lorem iosum dolor</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}