From f85faceb65d6d9e86cc8c0376712269b8359ab9c Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Mon, 8 Nov 2021 00:08:17 +0700 Subject: [PATCH] Docs: Add modal page --- docs/scss/components/_modal.scss | 34 ++++++ docs/scss/layout/_documentation.scss | 17 ++- docs/scss/pico.docs.scss | 1 + docs/src/_sidebar.html | 1 + docs/src/customization.html | 6 +- docs/src/index.html | 6 +- docs/src/modal.html | 166 +++++++++++++++++++++++++++ docs/src/themes.html | 4 +- docs/src/typography.html | 6 +- 9 files changed, 229 insertions(+), 12 deletions(-) create mode 100644 docs/scss/components/_modal.scss create mode 100644 docs/src/modal.html diff --git a/docs/scss/components/_modal.scss b/docs/scss/components/_modal.scss new file mode 100644 index 00000000..f39ce7c5 --- /dev/null +++ b/docs/scss/components/_modal.scss @@ -0,0 +1,34 @@ +/** + * Docs: Modal + */ + +dialog.example { + display: block; + z-index: inherit; + position: relative; + top: inherit; + right: inherit; + bottom: inherit; + left: inherit; + align-items: inherit; + justify-content: inherit; + width: inherit; + min-width: inherit; + height: inherit; + min-height: inherit; + padding: 0; + background-color:inherit; + + article { + max-width: inherit; + } + + &:not([open]), + &[open=false] { + display: none; + } +} + +.dialog-is-open body > button { + filter: blur(0.125rem); +} \ No newline at end of file diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss index 189822c7..34974616 100644 --- a/docs/scss/layout/_documentation.scss +++ b/docs/scss/layout/_documentation.scss @@ -4,8 +4,14 @@ // Docs: Themes #themes { - button i { - font-style: normal; + button.theme-switcher { + &:first-of-type { + --font-weight: bold; + } + + i { + font-style: normal; + } } } @@ -115,3 +121,10 @@ #forms div.grid { grid-row-gap: 0; } + +// Docs: Modal +#modal { + button { + --font-weight: bold; + } +} diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss index cb4c3729..d4c17f01 100644 --- a/docs/scss/pico.docs.scss +++ b/docs/scss/pico.docs.scss @@ -19,5 +19,6 @@ @import "content/code"; // Components +@import "components/modal"; @import "components/nav"; @import "components/theme-switcher"; diff --git a/docs/src/_sidebar.html b/docs/src/_sidebar.html index 0676a247..f3d0dc34 100644 --- a/docs/src/_sidebar.html +++ b/docs/src/_sidebar.html @@ -43,6 +43,7 @@ diff --git a/docs/src/customization.html b/docs/src/customization.html index ec7af884..33b8b7ed 100644 --- a/docs/src/customization.html +++ b/docs/src/customization.html @@ -23,7 +23,7 @@

Example: pick a color!

-

Custom theme

+

Custom theme

@@ -48,7 +48,7 @@

There are 2 ways to customize your version of Pico.css:

-

Overriding CSS variables

+

Overriding CSS variables

All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

/* Light scheme (Default) */
@@ -91,7 +91,7 @@

You can find all the CSS variables used in the default theme here: css/themes/default.css

-

Importing Pico SASS library

+

Importing Pico SASS library

We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

Compile the SASS file to CSS to get a custom version of Pico.

diff --git a/docs/src/index.html b/docs/src/index.html index 15ac6cdf..9f338886 100644 --- a/docs/src/index.html +++ b/docs/src/index.html @@ -21,13 +21,13 @@

Works without package manager or dependencies 🙂!

There are 3 ways to get started with pico.css:

-

Install manually

+

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

<link rel="stylesheet" href="css/pico.min.css">
-

Install from CDN

+

Install from CDN

Alternatively, you can use unpkg CDN to link pico.css

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
-

Install with NPM

+

Install with NPM

npm install @picocss/pico

Starter HTML template:

diff --git a/docs/src/modal.html b/docs/src/modal.html new file mode 100644 index 00000000..c6afd51b --- /dev/null +++ b/docs/src/modal.html @@ -0,0 +1,166 @@ + + + + ${require('./_head.html') + title="Modal" + description="A flexible container with graceful spacings across devices and viewports." + canonical="modal.html" + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active="modal-link"} + +
+ + + ${require('./_footer.html')} + +
+
+ + +
+ +

Confirm your action!

+

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

+ +
+ + + + + + + + diff --git a/docs/src/themes.html b/docs/src/themes.html index d60d3f6c..7fccd347 100644 --- a/docs/src/themes.html +++ b/docs/src/themes.html @@ -26,7 +26,7 @@

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

-

Light theme

+

Light theme

@@ -41,7 +41,7 @@
-

Dark theme

+

Dark theme

diff --git a/docs/src/typography.html b/docs/src/typography.html index 6d699488..f866f195 100644 --- a/docs/src/typography.html +++ b/docs/src/typography.html @@ -171,7 +171,8 @@

Blockquote:

- "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." + "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. + Nam at dui sit amet ipsum cursus ornare."
- Phasellus eget lacinia
@@ -179,7 +180,8 @@