Skip to content

Commit

Permalink
fix: fixed the template
Browse files Browse the repository at this point in the history
  • Loading branch information
Alexandrshy committed Jul 5, 2020
1 parent 0fc3dc1 commit 4805211
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 29 deletions.
56 changes: 28 additions & 28 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,35 @@
<button class="modal__button" data-keukenhof-open="#modal">
Open modal
</button>
<div id="modal" class="modal">
<div class="modal__overlay">
<div class="modal__container" role="dialog">
<div class="modal__wrapper">
<button
class="modal__button modal__button--close"
data-keukenhof-close
<div id="modal" class="modal" role="dialog">
<div class="modal__overlay" data-keukenhof-close>
</div>
<div class="modal__container">
<div class="modal__wrapper">
<button
class="modal__button modal__button--close"
data-keukenhof-close
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
role="presentation"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
role="presentation"
>
<path
d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
/>
</svg>
</button>
<main class="modal__main">
<h2 class="modal__title">Title</h2>
<p class="modal__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
exercitationem perspiciatis odit dolores soluta minima eveniet
quasi ex nostrum quibusdam deleniti facere molestias harum velit
consequuntur ipsam, id commodi dolor?
</p>
<a href="#" class="modal__link">More information</a>
</main>
</div>
<path
d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
/>
</svg>
</button>
<main class="modal__main">
<h2 class="modal__title">Title</h2>
<p class="modal__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
exercitationem perspiciatis odit dolores soluta minima eveniet
quasi ex nostrum quibusdam deleniti facere molestias harum velit
consequuntur ipsam, id commodi dolor?
</p>
<a href="#" class="modal__link">More information</a>
</main>
</div>
</div>
</div>
Expand Down
11 changes: 10 additions & 1 deletion example/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,20 @@ img {
}

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
justify-content: center;
align-items: center;
min-width: 100vw;
min-height: 100vh;
}

.modal.isOpen {
display: block;
display: flex;
}

.modal.isOpening {
Expand Down

0 comments on commit 4805211

Please sign in to comment.