From f3f89374d19cd8d83d91d20f2749c1ccc691ce00 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Tue, 20 Sep 2022 18:52:05 +0700 Subject: [PATCH] feat: Modal --- contents/_includes/patterns/modal.njk | 5 + contents/index.njk | 1 + contents/modal.md | 59 ++++++++++++ pages/modal/index.tsx | 132 -------------------------- patterns/modal/Cover.tsx | 75 --------------- styles/index.scss | 1 + styles/patterns/_modal.scss | 38 ++++++++ 7 files changed, 104 insertions(+), 207 deletions(-) create mode 100644 contents/_includes/patterns/modal.njk create mode 100644 contents/modal.md delete mode 100644 pages/modal/index.tsx delete mode 100644 patterns/modal/Cover.tsx create mode 100644 styles/patterns/_modal.scss diff --git a/contents/_includes/patterns/modal.njk b/contents/_includes/patterns/modal.njk new file mode 100644 index 0000000..b9ac5c9 --- /dev/null +++ b/contents/_includes/patterns/modal.njk @@ -0,0 +1,5 @@ +
+
{% rectangle %}
+
{% lines "hor", 8 %}
+
{% rectangle "hor", "md" %}
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 4247086..b4a3f34 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -72,6 +72,7 @@ eleventyExcludeFromCollections: true

Feedback

+ {% pattern "Modal" %}{% include "patterns/modal.njk" %}{% endpattern %} {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %} {% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %} {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %} diff --git a/contents/modal.md b/contents/modal.md new file mode 100644 index 0000000..bedc992 --- /dev/null +++ b/contents/modal.md @@ -0,0 +1,59 @@ +--- +layout: layouts/post.njk +title: Modal +description: Create a modal with CSS flexbox +keywords: css dialog, css flexbox, css modal +--- + +## HTML + +```html +
+ +
+ + ... + + ... +
+ + + ... + + +
+ ... +
+
+``` + +## CSS + +```css +.modal { + /* Border */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; +} + +.modal__header { + display: flex; + justify-content: space-between; + + /* Border */ + border-bottom: 1px solid #d1d5db; +} + +.modal__footer { + display: flex; + /* Push the buttons to the right */ + justify-content: flex-end; + + /* Border */ + border-top: 1px solid #d1d5db; +} +``` + +{% demo %} +{% include "patterns/modal.njk" %} +{% enddemo %} diff --git a/pages/modal/index.tsx b/pages/modal/index.tsx deleted file mode 100644 index 80e4243..0000000 --- a/pages/modal/index.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- You can use the{' '} - - close button - {' '} - to represent the button for closing the modal. -
- - -
- - ... - - ... -
- - - ... - - -
- ... -
-
-`} - css={` - .modal { - /* Border */ - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 4px; - } - - .modal__header { - display: flex; - justify-content: space-between; - /* Border */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - } - - .modal__footer { - display: flex; - /* Push the buttons to the right */ - justify-content: flex-end; - /* Border */ - border-top: 1px solid rgba(0, 0, 0, 0.3); - } - `} - > -
-
-
-
- -
-
- -
-
-
-
- -
- -
-
-
- -
-
- -
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/modal/Cover.tsx b/patterns/modal/Cover.tsx deleted file mode 100644 index 762fd60..0000000 --- a/patterns/modal/Cover.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
-
×
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index b1efb68..c5e6977 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -42,6 +42,7 @@ @import './patterns/layered-card'; @import './patterns/lined-paper'; @import './patterns/media-object'; +@import './patterns/modal'; @import './patterns/overlay-play-button'; @import './patterns/popover-arrow'; @import './patterns/presence-indicator'; diff --git a/styles/patterns/_modal.scss b/styles/patterns/_modal.scss new file mode 100644 index 0000000..ec92d41 --- /dev/null +++ b/styles/patterns/_modal.scss @@ -0,0 +1,38 @@ +.modal { + /* Border */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + + display: flex; + flex-direction: column; + + /* Demo */ + height: 8rem; + width: 8rem; +} + +.modal__header { + display: flex; + justify-content: space-between; + + /* Border */ + border-bottom: 1px solid #d1d5db; + + padding: 0.25rem 0.5rem; +} + +.modal__body { + flex: 1; + overflow: auto; +} + +.modal__footer { + display: flex; + /* Push the buttons to the right */ + justify-content: flex-end; + + /* Border */ + border-top: 1px solid #d1d5db; + + padding: 0.25rem 0.5rem; +} \ No newline at end of file