diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 06b3b37..e7816b1 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -264,7 +264,7 @@ body { } } - footer { + & > footer { margin: 4rem 0; } } diff --git a/docs/pages/components/button.md b/docs/pages/components/button.md index 6d1412c..174a72b 100644 --- a/docs/pages/components/button.md +++ b/docs/pages/components/button.md @@ -146,15 +146,15 @@ The beautiful Tabler Icons
diff --git a/docs/pages/components/modal.md b/docs/pages/components/modal.md new file mode 100644 index 0000000..ecf5175 --- /dev/null +++ b/docs/pages/components/modal.md @@ -0,0 +1,154 @@ +--- +title: 'Components: Modal - Sloth.css' +description: Dialog that needs to be solved +tags: overlay size fullscreen +--- + +## Modal + +A modal is a dialog appearing above the current page content the user needs to solve or abort before moving on. + +### Basic structure + +Use the `modal` class on a parent element containing an anchor element having the `overlay` class and a `
` element containing the actual dialog content. The section content can have up to 3 parts: `
`, `
` and `