From 3d2bc1f911133a3c432dc16e40089853c4fba432 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 8 Nov 2021 10:02:56 +0700 Subject: [PATCH] Docs: Modal --- docs/modal.html | 17 ++++++++++++++++- docs/src/modal.html | 27 ++++++++++++++++++++++++--- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/docs/modal.html b/docs/modal.html index ecf39f76..ea892b5b 100644 --- a/docs/modal.html +++ b/docs/modal.html @@ -64,9 +64,24 @@ </article> </dialog>

Pico does not include JavaScript code. You will need to implement your JS to interact with modals.

As a starting point, you can look at the JavaScript used in this documentation: js/modal.js.

To make a modal appear, add the open attribute to the <dialog> container.

<!-- Open modal-->
 <dialog open>
+  <article>
+  …
+  </article>
 </dialog>
 
 <!-- Modal closed -->
 <dialog>
+  <article>
+    …
+  </article>
 </dialog>
-

Utilities

Modals come with 3 utility classes.

<html class="modal-is-open"> blurs the background and blocks any scrolling and interactions below the modal.

<html class="modal-is-opening"> brings an opening animation.

<html class="modal-is-closing"> brings a closing animation.

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file +

Utilities

Modals come with 3 utility classes.

.modal-is-open blurs the background and blocks any scrolling and interactions below the modal.

<!doctype html>
+<html class="modal-is-open">
+  …
+</html>

.modal-is-opening brings an opening animation.

<!doctype html>
+<html class="modal-is-open modal-is-opening">
+  …
+</html>

.modal-is-closing brings a closing animation.

<!doctype html>
+<html class="modal-is-open modal-is-closing">
+  …
+</html>

Confirm your action!

Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.

 \ No newline at end of file diff --git a/docs/src/modal.html b/docs/src/modal.html index f56c1e67..8afd1f07 100644 --- a/docs/src/modal.html +++ b/docs/src/modal.html @@ -146,10 +146,16 @@ 
<!-- Open modal-->
 <dialog open>
+  <article>
+  …
+  </article>
 </dialog>
 
 <!-- Modal closed -->
 <dialog>
+  <article>
+    …
+  </article>
 </dialog>
@@ -157,11 +163,26 @@

Modals come with 3 utility classes.

-

<html class="modal-is-open"> blurs the background and blocks any scrolling and interactions below the modal.

+

.modal-is-open blurs the background and blocks any scrolling and interactions below the modal.

-

<html class="modal-is-opening"> brings an opening animation.

+
<!doctype html>
+<html class="modal-is-open">
+  …
+</html>
-

<html class="modal-is-closing"> brings a closing animation.

+

.modal-is-opening brings an opening animation.

+ +
<!doctype html>
+<html class="modal-is-open modal-is-opening">
+  …
+</html>
+ +

.modal-is-closing brings a closing animation.

+ +
<!doctype html>
+<html class="modal-is-open modal-is-closing">
+  …
+</html>