mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00
Code Issues Releases Wiki Activity

feat: Add cookie banner pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 13:53:16 +07:00
parent 7a25937520
commit 42acde73bb
7 changed files with 75 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
contents/_includes/patterns/cookie-banner.njk Normal file
View File

@@ -0,0 +1,5 @@
<div class="cookie-banner">
<div class="cookie-banner__content">
{% lines "hor", 5 %}
</div>
</div>

46
contents/cookie-banner.md Normal file
View File

@@ -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
<div class="cookie-banner">
<!-- Tells visitors that the website uses cookie -->
<div class="cookie-banner__content">
...
</div>
<!-- Close button -->
...
</div>
```
## 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 %}

6
contents/index.njk
View File

@@ -73,6 +73,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Concave corners</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/cookie-banner/">
<div class="pattern__cover">{% include "patterns/cookie-banner.njk" %}</div>
<div class="pattern__title">Cookie banner</div>
</a>
</div>
</div>
</div>

92
pages/cookie-banner/index.tsx
View File

@@ -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 (
<PatternLayout pattern={Pattern.CookieBanner}>
<Head>
<meta name="description" content="Create a cookie banner with CSS flexbox" />
<meta name="og:description" content="Create a cookie banner with CSS flexbox" />
<meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
<meta name="keywords" content="css cookie banner, css flexbox" />
</Head>
<BrowserFrame
html={`
<div class="banner">
<!-- Tells visitors that the website uses cookie -->
<div class="banner__content">
...
</div>
<!-- Close button -->
...
</div>
`}
css={`
.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;
}
.banner__content {
/* Take available width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
position: 'relative',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
display: 'flex',
left: 0,
padding: '8px',
position: 'absolute',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '12px' }}>
<Block numberOfBlocks={5} />
</div>
<div style={{ width: '96px' }}>
<Rectangle height={32} />
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
</PatternLayout>
);
};
export default Details;

53
patterns/cookie-banner/Cover.tsx
View File

@@ -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 (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
position: 'relative',
}}
>
<div
style={{
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.05)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: 0,
display: 'flex',
left: 0,
padding: '4px',
position: 'absolute',
width: '100%',
}}
>
<div style={{ flex: 1, marginRight: '4px' }}>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '80%' }}>
<Line />
</div>
</div>
<div style={{ width: '32px' }}>
<Rectangle height={16} />
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -21,6 +21,7 @@
@import './patterns/close-button';
@import './patterns/color-swatch';
@import './patterns/concave-corners';
@import './patterns/cookie-banner';
// Placeholders
@import './placeholders/circle';

17
styles/patterns/_cookie-banner.scss Normal file
View File

@@ -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;
}