From 12d1b6cb37ddfd6acb3827396e0225aacc121cbc Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Wed, 21 Sep 2022 10:19:37 +0700 Subject: [PATCH] feat: Slider --- contents/_includes/patterns/slider.njk | 5 ++ contents/index.njk | 1 + contents/slider.md | 65 ++++++++++++++++ pages/slider/index.tsx | 104 ------------------------- patterns/slider/Cover.tsx | 41 ---------- styles/index.scss | 1 + styles/patterns/_slider.scss | 39 ++++++++++ 7 files changed, 111 insertions(+), 145 deletions(-) create mode 100644 contents/_includes/patterns/slider.njk create mode 100644 contents/slider.md delete mode 100644 pages/slider/index.tsx delete mode 100644 patterns/slider/Cover.tsx create mode 100644 styles/patterns/_slider.scss diff --git a/contents/_includes/patterns/slider.njk b/contents/_includes/patterns/slider.njk new file mode 100644 index 0000000..953f200 --- /dev/null +++ b/contents/_includes/patterns/slider.njk @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 8755472..2b25926 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -95,6 +95,7 @@ eleventyExcludeFromCollections: true {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %} {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %} {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %} + {% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %} diff --git a/contents/slider.md b/contents/slider.md new file mode 100644 index 0000000..4a2fc53 --- /dev/null +++ b/contents/slider.md @@ -0,0 +1,65 @@ +--- +layout: layouts/post.njk +title: Slider +description: Create a slider with CSS flexbox +keywords: css flexbox, css slider +--- + +## HTML + +```html +
+ + +
+ + +
+ + +
+
+``` + +## CSS + +```css +.slider { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Size */ + height: 2rem; +} + +.slider__left { + height: 2px; + + /* Colors */ + background-color: #d1d5db; +} + +.slider__circle { + /* Size */ + height: 2rem; + width: 2rem; + + /* Rounded border */ + border-radius: 9999px; + + /* Colors */ + background-color: #3b82f6; +} + +.slider__right { + /* Take the remaining width */ + flex: 1; + height: 2px; + + /* Colors */ + background-color: #d1d5db; +} +``` + +{% demo %}{% include "patterns/slider.njk" %}{% enddemo %} diff --git a/pages/slider/index.tsx b/pages/slider/index.tsx deleted file mode 100644 index 9ad28be..0000000 --- a/pages/slider/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 Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - -
- - -
- - -
- -`} - css={` - .container { - /* Content is centered horizontally */ - align-items: center; - display: flex; - - /* Size */ - height: 32px; - } - - .container__left { - height: 2px; - - /* Colors */ - background-color: #d1d5db; - } - - .container__circle { - /* Size */ - height: 32px; - width: 32px; - - /* Rounded border */ - border-radius: 9999px; - - /* Colors */ - background-color: #d1d5db; - } - - .container__right { - /* Take the remaining width */ - flex: 1; - height: 2px; - - /* Colors */ - background-color: #d1d5db; - } - `} - > -
-
-
- -
- -
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/slider/Cover.tsx b/patterns/slider/Cover.tsx deleted file mode 100644 index 38e9c8d..0000000 --- a/patterns/slider/Cover.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
- -
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index fd97dd9..c4ab600 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -64,6 +64,7 @@ @import './patterns/ribbon'; @import './patterns/search-box'; @import './patterns/separator'; +@import './patterns/slider'; @import './patterns/stacked-cards'; @import './patterns/stamp-border'; @import './patterns/statistic'; diff --git a/styles/patterns/_slider.scss b/styles/patterns/_slider.scss new file mode 100644 index 0000000..f10fdc4 --- /dev/null +++ b/styles/patterns/_slider.scss @@ -0,0 +1,39 @@ +.slider { + /* Content is centered horizontally */ + align-items: center; + display: flex; + + /* Size */ + height: 2rem; + + /* Demo */ + width: 100%; +} + +.slider__left { + height: 2px; + + /* Colors */ + background-color: #d1d5db; +} + +.slider__circle { + /* Size */ + height: 2rem; + width: 2rem; + + /* Rounded border */ + border-radius: 9999px; + + /* Colors */ + background-color: #3b82f6; +} + +.slider__right { + /* Take the remaining width */ + flex: 1; + height: 2px; + + /* Colors */ + background-color: #d1d5db; +} \ No newline at end of file