diff --git a/contents/_includes/patterns/notification.njk b/contents/_includes/patterns/notification.njk new file mode 100644 index 0000000..3426428 --- /dev/null +++ b/contents/_includes/patterns/notification.njk @@ -0,0 +1,7 @@ +
+
{% lines "hor", 5 %}
+ +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index b4a3f34..946fd9e 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true

Feedback

{% pattern "Modal" %}{% include "patterns/modal.njk" %}{% endpattern %} + {% pattern "Notification" %}{% include "patterns/notification.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/notification.md b/contents/notification.md new file mode 100644 index 0000000..0c03995 --- /dev/null +++ b/contents/notification.md @@ -0,0 +1,93 @@ +--- +layout: layouts/post.njk +title: Notification +description: Create a notification with CSS flexbox +keywords: css alert, css flexbox, css notification +--- + +## HTML + +```html +
+ +
+ ... +
+ + + +
+``` + +## CSS + +```css +.notification { + display: flex; +} +.notification__body { + flex: 1; + margin-right: 0.5rem; +} +``` + +The [close button](/close-button/) represents the button for closing the notification. + +```css +.notification__close { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 1rem; + width: 1rem; + + /* Used to position the inner */ + position: relative; +} + +.notification__close-line { + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.notification__close-line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.notification__close-line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +} +``` + +{% demo %} +{% include "patterns/notification.njk" %} +{% enddemo %} diff --git a/pages/notification/index.tsx b/pages/notification/index.tsx deleted file mode 100644 index 5d7a6e9..0000000 --- a/pages/notification/index.tsx +++ /dev/null @@ -1,88 +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'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- You can use the{' '} - - close button - {' '} - to represent the button for closing the notification. -
- - - ... - - - ... -
-`} - css={` - .notification { - display: flex; - justify-content: space-between; - } - `} - > -
-
-
- -
- -
-
- - - ); -}; - -export default Details; diff --git a/patterns/notification/Cover.tsx b/patterns/notification/Cover.tsx deleted file mode 100644 index f8ec777..0000000 --- a/patterns/notification/Cover.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
×
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index c5e6977..cd504b7 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -43,6 +43,7 @@ @import './patterns/lined-paper'; @import './patterns/media-object'; @import './patterns/modal'; +@import './patterns/notification'; @import './patterns/overlay-play-button'; @import './patterns/popover-arrow'; @import './patterns/presence-indicator'; diff --git a/styles/patterns/_notification.scss b/styles/patterns/_notification.scss new file mode 100644 index 0000000..08acbe4 --- /dev/null +++ b/styles/patterns/_notification.scss @@ -0,0 +1,63 @@ +.notification { + display: flex; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + padding: 0.25rem; + width: 8rem; +} +.notification__body { + flex: 1; + margin-right: 0.5rem; +} + +.notification__close { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 1rem; + width: 1rem; + + /* Used to position the inner */ + position: relative; +} + +.notification__close-line { + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.notification__close-line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.notification__close-line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +}