diff --git a/contents/_includes/patterns/status-light.njk b/contents/_includes/patterns/status-light.njk new file mode 100644 index 0000000..3209042 --- /dev/null +++ b/contents/_includes/patterns/status-light.njk @@ -0,0 +1,6 @@ +
+
+
+ {% rectangle "hor", "sm", 100 %} +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index af53ba7..4b585f7 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -253,6 +253,12 @@ eleventyExcludeFromCollections: true
Statistic
+
+ +
{% include "patterns/status-light.njk" %}
+
Status light
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/status-light.md b/contents/status-light.md new file mode 100644 index 0000000..261aaeb --- /dev/null +++ b/contents/status-light.md @@ -0,0 +1,54 @@ +--- +layout: layouts/post.njk +title: Status light +description: Create a status light with CSS flexbox +keywords: css flexbox, css status light +--- + +## HTML + +```html +
+ +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.status-light { + /* Center the content */ + align-items: center; + display: flex; +} + +.status-light__status { + /* Background color */ + background-color: #16a34a; + + /* Rounded border */ + border-radius: 9999px; + + /* Size */ + height: 0.5rem; + width: 0.5rem; + + /* Spacing */ + margin-right: 0.5rem; +} + +.status-light__content { + /* Take available width */ + flex: 1; +} +``` + +{% demo %} +{% include "patterns/status-light.njk" %} +{% enddemo %} diff --git a/pages/status-light/index.tsx b/pages/status-light/index.tsx index 297485e..f700fc9 100644 --- a/pages/status-light/index.tsx +++ b/pages/status-light/index.tsx @@ -11,49 +11,17 @@ const Details: React.FC<{}> = () => { return ( - + - + - -
- -
- ... -
-
`} css={` - .container { - /* Center the content */ - align-items: center; - display: flex; - } - - .container__status { - /* Background color */ - background-color: rgb(66, 153, 225); - - /* Rounded border */ - border-radius: 9999px; - - /* Size */ - height: 8px; - width: 8px; - - /* Spacing */ - margin-right: 8px; - } - - .container__content { - /* Take available width */ - flex: 1; - } + `} >
= () => { - return ( - -
-
-
- -
- -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index a3aefd6..a8655d2 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -51,6 +51,7 @@ @import './patterns/stacked-cards'; @import './patterns/stamp-border'; @import './patterns/statistic'; +@import './patterns/status-light'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_status-light.scss b/styles/patterns/_status-light.scss new file mode 100644 index 0000000..2820678 --- /dev/null +++ b/styles/patterns/_status-light.scss @@ -0,0 +1,28 @@ +.status-light { + /* Center the content */ + align-items: center; + display: flex; + + /* Demo */ + width: 8rem; +} + +.status-light__status { + /* Background color */ + background-color: #16a34a; + + /* Rounded border */ + border-radius: 9999px; + + /* Size */ + height: 0.5rem; + width: 0.5rem; + + /* Spacing */ + margin-right: 0.5rem; +} + +.status-light__content { + /* Take available width */ + flex: 1; +} \ No newline at end of file