@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
387 lines (374 loc) • 15.3 kB
HTML
<html>
<head>
<title>Kit Digital / Universidad San Sebastían</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/theme.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body class>
<div class="">
<section class="mb-64">
<!-- component markup here -->
<section
class="w-100 my-128 flex justify-content-center align-items-center"
style="max-width: 100vw; overflow-x: hidden"
>
<section>
<h4>Button activated Modals</h4>
<h6 class="mt-24">(left aligned - default)</h6>
<div class="flex gap-12">
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-0">
Modal info
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-1">
Modal warning
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-2">
Modal error
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-3">
Modal success
</button>
</div>
<h6 class="mt-24">(centered - variant)</h6>
<div class="flex gap-12">
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-4">
Modal info
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-5">
Modal warning
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-6">
Modal error
</button>
<button class="uss-btn uss-btn--secondary" data-uss-modal-target="modal-7">
Modal success
</button>
</div>
<h4 class="mt-32">called by window.componentModalInstances modals</h4>
<h6 class="mt-24">(left aligned - default)</h6>
<div class="flex gap-24">
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-0'].openModal()"
>
Modal info
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-1'].openModal()"
>
Modal warning
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-2'].openModal()"
>
Modal error
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-3'].openModal()"
>
Modal success
</button>
</div>
<h6 class="mt-24">(centered - variant)</h6>
<div class="flex gap-24">
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-4'].openModal()"
>
Modal info
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-5'].openModal()"
>
Modal warning
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-6'].openModal()"
>
Modal error
</button>
<button
class="uss-btn uss-btn--tertiary"
onclick="window.componentModalInstances['modal-7'].openModal()"
>
Modal success
</button>
</div>
</section>
<section>
<!-- align left modals -->
<dialog class="uss-modal" data-uss-modal-id="modal-0">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--info">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #1</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal" data-uss-modal-id="modal-1">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--warning">
<i class="uss-icon ri-alert-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #2</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal" data-uss-modal-id="modal-2">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--error">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #3</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal" data-uss-modal-id="modal-3">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--success">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #4</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-6 col-sm-3 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
</section>
<section>
<!-- centered modals -->
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-4">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--info">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #5</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-5">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--warning">
<i class="uss-icon ri-alert-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #6</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-6">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--error">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #7</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
<dialog class="uss-modal uss-modal--centered" data-uss-modal-id="modal-7">
<div class="uss-modal__body">
<div class="uss-modal__icon uss-modal__icon--success">
<i class="uss-icon ri-information-line"></i>
</div>
<div class="w-100 uss-modal__body-content">
<h4>Consectetur adipiscing #8</h4>
<p>
Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent
elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam
dignissim diam quis
</p>
</div>
</div>
<div class="uss-modal__footer">
<a
href="#"
class="uss-btn uss-btn--secondary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
>
Volver
</a>
<a
href="#"
class="uss-btn uss-btn--primary col-12 col-sm-6 justify-content-center"
data-uss-modal-close-on-click
onclick="alert('prueba')"
>
Accion
</a>
</div>
</dialog>
</section>
</section>
<!-- component markup here -->
</section>
</div>
<script src="/js/main.js" type="module"></script>
</body>
</html>