@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
183 lines (178 loc) • 6.72 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/css/main.css" />
<title>Component: docs/components/navigation/stepper.html</title>
</head>
<body>
<header style="border-bottom: 1px solid var(--border)" class="p-20">
<div class="d-flex justify-content-between">
<a href="/" class="uss-btn uss-btn--tertiary">
<i class="uss-icon uss-icon--sm ri-home-line"></i>Volver al inicio</a
>
<div>
<button id="_uss-btn-toggle-container" class="uss-btn uss-btn--size-sm uss-btn--tertiary">
[ Toggle .container ]
</button>
</div>
</div>
<h3 class="p-0">docs/components/navigation/stepper.html</h3>
</header>
<div id="viewer" class="container my-40" style="border: 1px solid var(--border)">
<section class="w-100 my-12">
<section class="d-none d-lg-block">
<ul class="uss-stepper mb-40">
<li class="uss-stepper__step stepper__step-check">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Título step</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step stepper__step-check">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Título step</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step stepper__step-active">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Título step</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Título step</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Título step click</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Final</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
</ul>
<ul class="uss-stepper uss-stepper--condensed">
<li class="uss-stepper__step stepper__step-check">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Paso 1</div>
<div class="uss-stepper__description">Lorem ipsum dolor sit amet...</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step stepper__step-active">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">active</div>
<div class="uss-stepper__description">Opcional</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step stepper__step-error">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Error</div>
<div class="uss-stepper__description">Opcional</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step stepper__step-warning">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Advertencia</div>
<div class="uss-stepper__description">Descripción</div>
</div>
<div class="uss-stepper__line"></div>
</li>
<li class="uss-stepper__step">
<div class="uss-stepper__counter"></div>
<div class="uss-stepper_head">
<div class="uss-stepper__title">Final</div>
<div class="uss-stepper__description">Datos</div>
</div>
<div class="uss-stepper__line"></div>
</li>
</ul>
</section>
<section class="d-lg-none">
<div class="d-flex gap-16">
<div class="block">
<div class="uss-circle-progress" style="--progress: 20%">1/5</div>
</div>
<div class="block">
<h5 class="mb-4">Información básica</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="d-flex gap-16">
<div class="block">
<div class="uss-circle-progress" style="--progress: 60%">3/5</div>
</div>
<div class="block">
<h5 class="mb-4">Datos de contacto</h5>
<p>Lorem ipsum dolor consectetur</p>
</div>
</div>
<div class="d-flex gap-16">
<div class="block">
<div class="uss-circle-progress" style="--progress: 100%">5/5</div>
</div>
<div class="block">
<h5 class="mb-4">Final</h5>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<hr class="uss-divider" />
<div class="my-40">
<p>CONTENIDO</p>
</div>
<hr class="uss-divider" />
<div class="flex flex-row justify-content-between gap-16 mb-16">
<a href="#" class="uss-btn uss-btn--secondary btn--inline">
<i class="uss-icon ri-arrow-left-circle-line"></i>
Volver
</a>
<a href="#" class="uss-btn uss-btn--primary btn--inline">
Siguiente
<i class="uss-icon ri-arrow-right-circle-line"></i>
</a>
</div>
</section>
</section>
</div>
</body>
<script type="module" src="/js/main.js"></script>
<script>
const button = document.getElementById('_uss-btn-toggle-container');
button.addEventListener('click', () => {
const viewer = document.getElementById('viewer');
viewer.classList.toggle('container');
});
</script>
</html>