From 42acde73bba51ec40976c73f647f93a00b0733cb Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 13:53:16 +0700 Subject: [PATCH] feat: Add cookie banner pattern --- contents/_includes/patterns/cookie-banner.njk | 5 + contents/cookie-banner.md | 46 ++++++++++ contents/index.njk | 6 ++ pages/cookie-banner/index.tsx | 92 ------------------- patterns/cookie-banner/Cover.tsx | 53 ----------- styles/index.scss | 1 + styles/patterns/_cookie-banner.scss | 17 ++++ 7 files changed, 75 insertions(+), 145 deletions(-) create mode 100644 contents/_includes/patterns/cookie-banner.njk create mode 100644 contents/cookie-banner.md delete mode 100644 pages/cookie-banner/index.tsx delete mode 100644 patterns/cookie-banner/Cover.tsx create mode 100644 styles/patterns/_cookie-banner.scss diff --git a/contents/_includes/patterns/cookie-banner.njk b/contents/_includes/patterns/cookie-banner.njk new file mode 100644 index 0000000..ef2dc00 --- /dev/null +++ b/contents/_includes/patterns/cookie-banner.njk @@ -0,0 +1,5 @@ +
+
+ {% lines "hor", 5 %} +
+
\ No newline at end of file diff --git a/contents/cookie-banner.md b/contents/cookie-banner.md new file mode 100644 index 0000000..6d43347 --- /dev/null +++ b/contents/cookie-banner.md @@ -0,0 +1,46 @@ +--- +layout: layouts/post.njk +title: Cookie banner +description: Create a cookie banner with CSS flexbox +keywords: css cookie banner, css flexbox +--- + +## HTML + +```html +
+ +
+ ... +
+ + + ... +
+``` + +## CSS + +```css +.cookie-banner { + /* Banner is displayed at the bottom */ + bottom: 0; + left: 0; + position: fixed; + width: 100%; + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.cookie-banner__content { + /* Take available width */ + flex: 1; +} +``` + +{% demo %} +{% include "patterns/cookie-banner.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 678a2fe..42dea6d 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -73,6 +73,12 @@ eleventyExcludeFromCollections: true
Concave corners
+
+ +
{% include "patterns/cookie-banner.njk" %}
+
Cookie banner
+ +
diff --git a/pages/cookie-banner/index.tsx b/pages/cookie-banner/index.tsx deleted file mode 100644 index f49a4da..0000000 --- a/pages/cookie-banner/index.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - - - - ); -}; - -export default Details; diff --git a/patterns/cookie-banner/Cover.tsx b/patterns/cookie-banner/Cover.tsx deleted file mode 100644 index 3f5180a..0000000 --- a/patterns/cookie-banner/Cover.tsx +++ /dev/null @@ -1,53 +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 dd0a04f..36acacf 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -21,6 +21,7 @@ @import './patterns/close-button'; @import './patterns/color-swatch'; @import './patterns/concave-corners'; +@import './patterns/cookie-banner'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_cookie-banner.scss b/styles/patterns/_cookie-banner.scss new file mode 100644 index 0000000..f7bbea7 --- /dev/null +++ b/styles/patterns/_cookie-banner.scss @@ -0,0 +1,17 @@ +.cookie-banner { + border: 1px solid rgba(0,0,0,.3); + border-radius: 0.25rem; + + height: 100%; + width: 100%; + + align-items: end; + display: flex; +} + +.cookie-banner__content { + border-top: 1px solid rgba(0,0,0,.3); + /* Take available width */ + flex: 1; + padding: 0 0.5rem; +} \ No newline at end of file