From cac3718ae6d97c680949a53e88a8f8dec5a10412 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 22:59:05 +0700 Subject: [PATCH] feat: Separator --- contents/_includes/patterns/separator.njk | 4 + contents/index.njk | 6 ++ contents/separator.md | 60 +++++++++++++ pages/separator/index.tsx | 104 ---------------------- patterns/separator/Cover.tsx | 43 --------- styles/index.scss | 1 + styles/patterns/_separator.scss | 34 +++++++ 7 files changed, 105 insertions(+), 147 deletions(-) create mode 100644 contents/_includes/patterns/separator.njk create mode 100644 contents/separator.md delete mode 100644 pages/separator/index.tsx delete mode 100644 patterns/separator/Cover.tsx create mode 100644 styles/patterns/_separator.scss diff --git a/contents/_includes/patterns/separator.njk b/contents/_includes/patterns/separator.njk new file mode 100644 index 0000000..58735d9 --- /dev/null +++ b/contents/_includes/patterns/separator.njk @@ -0,0 +1,4 @@ +
+
{% rectangle "hor", "sm", 100 %}
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index ed08217..78c37cc 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -229,6 +229,12 @@ eleventyExcludeFromCollections: true
Ribbon
+
+ +
{% include "patterns/separator.njk" %}
+
Separator
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/separator.md b/contents/separator.md new file mode 100644 index 0000000..299f199 --- /dev/null +++ b/contents/separator.md @@ -0,0 +1,60 @@ +--- +layout: layouts/post.njk +title: Separator +description: Create a separator with CSS flexbox +keywords: css divider, css flexbox, css separator +--- + +## HTML + +```html +
+ +
+ ... +
+ + +
+
+``` + +## CSS + +```css +.separator { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Used to set the position of text */ + position: relative; +} + +.separator__content { + /* We won't see the separator line */ + background: #fff; + + /* Displayed at the center of separator */ + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + + /* Spacing */ + padding: 0 0.25rem; + + /* Demo */ + width: 60%; +} + +.separator__separator { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + height: 1px; + width: 100%; +} +``` + +{% demo %} +{% include "patterns/separator.njk" %} +{% enddemo %} diff --git a/pages/separator/index.tsx b/pages/separator/index.tsx deleted file mode 100644 index d178dd2..0000000 --- a/pages/separator/index.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- ... -
- - -
-
-`} - css={` - .container { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Used to set the position of text */ - position: relative; - } - - .container__content { - /* We won't see the separator line */ - background: #fff; - - /* Displayed at the center of container */ - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } - - .container__separator { - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - height: 1px; - width: 100%; - } - `} - > -
-
-
-
- -
-
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/separator/Cover.tsx b/patterns/separator/Cover.tsx deleted file mode 100644 index 17786e1..0000000 --- a/patterns/separator/Cover.tsx +++ /dev/null @@ -1,43 +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 833f48b..b2190fa 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -47,6 +47,7 @@ @import './patterns/property-list'; @import './patterns/questions-and-answers'; @import './patterns/ribbon'; +@import './patterns/separator'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_separator.scss b/styles/patterns/_separator.scss new file mode 100644 index 0000000..9780abf --- /dev/null +++ b/styles/patterns/_separator.scss @@ -0,0 +1,34 @@ +.separator { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Used to set the position of text */ + position: relative; + + /* Demo */ + width: 100%; +} + +.separator__content { + /* We won't see the separator line */ + background: #fff; + + /* Displayed at the center of separator */ + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + + /* Spacing */ + padding: 0 0.25rem; + + /* Demo */ + width: 60%; +} + +.separator__separator { + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + height: 1px; + width: 100%; +} \ No newline at end of file