diff --git a/contents/_includes/patterns/docked-at-corner.njk b/contents/_includes/patterns/docked-at-corner.njk new file mode 100644 index 0000000..49bc7ac --- /dev/null +++ b/contents/_includes/patterns/docked-at-corner.njk @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/contents/docked-at-corner.md b/contents/docked-at-corner.md new file mode 100644 index 0000000..a3b29be --- /dev/null +++ b/contents/docked-at-corner.md @@ -0,0 +1,38 @@ +--- +layout: layouts/post.njk +title: Docked at corner +description: Dock an element at corner with CSS +keywords: css docked, css flexbox +--- + +## HTML + +```html +
+ +
+
+``` + +## CSS + +```css +.docked-at-corner { + position: relative; +} +.docked-at-corner__docker { + position: absolute; + right: 0; + top: 0; + transform: translate(50%, -50%); + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} +``` + +{% demo %} +{% include "patterns/docked-at-corner.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index bcf1b24..a021dc9 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -97,6 +97,12 @@ eleventyExcludeFromCollections: true
Diagonal section
+
+ +
{% include "patterns/docked-at-corner.njk" %}
+
Docked at corner
+ +
diff --git a/pages/docked-at-corner/index.tsx b/pages/docked-at-corner/index.tsx deleted file mode 100644 index c7a7b45..0000000 --- a/pages/docked-at-corner/index.tsx +++ /dev/null @@ -1,161 +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 Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - -
- ... -
- - ... - -`} - css={` - .container { - position: relative; - } - - .container__docker { - position: absolute; - right: 0; - top: 0; - transform: translate(50%, -50%); - - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - } - `} - > -
-
- -
-
-
- - - - -
- Use cases - -
-
- Inbox -
- 5 -
-
-
- Modal -
- × -
-
-
-
- - - - ); -}; - -export default Details; diff --git a/patterns/docked-at-corner/Cover.tsx b/patterns/docked-at-corner/Cover.tsx deleted file mode 100644 index ae78e79..0000000 --- a/patterns/docked-at-corner/Cover.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index d6d0fb6..26d733c 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -25,6 +25,7 @@ @import './patterns/corner-ribbon'; @import './patterns/curved-background'; @import './patterns/diagonal-section'; +@import './patterns/docked-at-corner'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_docked-at-corner.scss b/styles/patterns/_docked-at-corner.scss new file mode 100644 index 0000000..233bbea --- /dev/null +++ b/styles/patterns/_docked-at-corner.scss @@ -0,0 +1,25 @@ +.docked-at-corner { + position: relative; + height: 4rem; + width: 80%; + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 0.25rem; +} +.docked-at-corner__docker { + background-color: #22c55e; + border-radius: 9999px; + + position: absolute; + right: 0; + top: 0; + transform: translate(50%, -50%); + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Size */ + height: 1rem; + width: 1rem; +} \ No newline at end of file