From 2baa8f36c27d6b038beb6759de35698bfa03a041 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 16:31:18 +0700 Subject: [PATCH] feat: Dot leader --- contents/_includes/patterns/dot-leader.njk | 7 + contents/dot-leader.md | 47 ++++++ contents/index.njk | 6 + pages/dot-leader/index.tsx | 181 --------------------- patterns/dot-leader/Cover.tsx | 69 -------- styles/blocks/_pattern.scss | 1 + styles/index.scss | 1 + styles/patterns/_dot-leader.scss | 19 +++ 8 files changed, 81 insertions(+), 250 deletions(-) create mode 100644 contents/_includes/patterns/dot-leader.njk create mode 100644 contents/dot-leader.md delete mode 100644 pages/dot-leader/index.tsx delete mode 100644 patterns/dot-leader/Cover.tsx create mode 100644 styles/patterns/_dot-leader.scss diff --git a/contents/_includes/patterns/dot-leader.njk b/contents/_includes/patterns/dot-leader.njk new file mode 100644 index 0000000..45412e4 --- /dev/null +++ b/contents/_includes/patterns/dot-leader.njk @@ -0,0 +1,7 @@ +{% for i in range(0, 3) %} +
+ {% rectangle %} +
+ {% circle %} +
+{% endfor %} \ No newline at end of file diff --git a/contents/dot-leader.md b/contents/dot-leader.md new file mode 100644 index 0000000..d50fd0f --- /dev/null +++ b/contents/dot-leader.md @@ -0,0 +1,47 @@ +--- +layout: layouts/post.njk +title: Dot leader +description: Create dot leaders with CSS flexbox +keywords: css dot leader, css flexbox +--- + +## HTML + +```html +
+ +
...
+ + +
+ + +
...
+
+``` + +## CSS + +```css +.dot-leader { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.dot-leader__dots { + /* Bottom border */ + border-bottom: 1px dotted rgba(0, 0, 0, 0.3); + + /* Take remaining width */ + flex: 1; + + /* Spacing */ + margin: 0 0.25rem; +} +``` + +{% demo %} +{% include "patterns/dot-leader.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index a021dc9..4eee67a 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -103,6 +103,12 @@ eleventyExcludeFromCollections: true
Docked at corner
+
+ +
{% include "patterns/dot-leader.njk" %}
+
Dot leader
+ +
diff --git a/pages/dot-leader/index.tsx b/pages/dot-leader/index.tsx deleted file mode 100644 index 3ca9b7b..0000000 --- a/pages/dot-leader/index.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Heading, Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
...
- - -
- - -
...
- -`} - css={` - .container { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - } - - .container__dots { - /* Bottom border */ - border-bottom: 1px dotted rgba(0, 0, 0, 0.3); - - /* Take remaining width */ - flex: 1; - - /* Spacing */ - margin: 0px 4px; - } - `} - > -
-
-
-
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
-
- - - - -
- Use cases - -
-
-
-
Chapter 1
-
-
5
-
-
-
Chapter 2
-
-
40
-
-
-
-
-
Egg
-
-
3$
-
-
-
Coffee
-
-
5$
-
-
-
-
- - - - ); -}; - -export default Details; diff --git a/patterns/dot-leader/Cover.tsx b/patterns/dot-leader/Cover.tsx deleted file mode 100644 index 84a808e..0000000 --- a/patterns/dot-leader/Cover.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss index fa7e7e4..dad4f58 100644 --- a/styles/blocks/_pattern.scss +++ b/styles/blocks/_pattern.scss @@ -16,6 +16,7 @@ /* Center the content */ align-items: center; display: flex; + flex-direction: column; justify-content: center; height: 8rem; diff --git a/styles/index.scss b/styles/index.scss index 26d733c..8fed585 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -26,6 +26,7 @@ @import './patterns/curved-background'; @import './patterns/diagonal-section'; @import './patterns/docked-at-corner'; +@import './patterns/dot-leader'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_dot-leader.scss b/styles/patterns/_dot-leader.scss new file mode 100644 index 0000000..937c506 --- /dev/null +++ b/styles/patterns/_dot-leader.scss @@ -0,0 +1,19 @@ +.dot-leader { + width: 100%; + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + margin: 0.25rem 0; +} + +.dot-leader__dots { + /* Bottom border */ + border-bottom: 1px dotted rgba(0, 0, 0, 0.3); + + /* Take remaining width */ + flex: 1; + + /* Spacing */ + margin: 0 0.25rem; +} \ No newline at end of file