diff --git a/contents/_includes/patterns/close-button.njk b/contents/_includes/patterns/close-button.njk new file mode 100644 index 0000000..edc2dd3 --- /dev/null +++ b/contents/_includes/patterns/close-button.njk @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/contents/close-button.md b/contents/close-button.md new file mode 100644 index 0000000..ff93cd1 --- /dev/null +++ b/contents/close-button.md @@ -0,0 +1,73 @@ +--- +layout: layouts/post.njk +title: Close button +description: Create a close button with CSS flexbox +keywords: css close button, css flexbox +--- + +## HTML + +```html + +``` + +## CSS + +```css +.close-button { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 3rem; + width: 3rem; + + /* Used to position the inner */ + position: relative; +} + +.close-button__line { + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.close-button__line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.close-button__line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +} +``` + +{% demo %} +{% include "patterns/close-button.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 353cee5..05d74cb 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -49,6 +49,12 @@ eleventyExcludeFromCollections: true
Centering
+
+ +
{% include "patterns/close-button.njk" %}
+
Close button
+ +
diff --git a/pages/close-button/index.tsx b/pages/close-button/index.tsx deleted file mode 100644 index 2a2224f..0000000 --- a/pages/close-button/index.tsx +++ /dev/null @@ -1,131 +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 BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- -
- -`} - css={` - .button { - /* Reset */ - background-color: transparent; - border-color: transparent; - - /* Cursor */ - cursor: pointer; - - /* Size */ - height: 32px; - width: 32px; - - /* Used to position the inner */ - position: relative; - } - - .button__line { - /* Background color */ - background-color: rgba(0, 0, 0, 0.3); - - /* Position */ - position: absolute; - - /* Size */ - height: 1px; - width: 100%; - } - - .button__line--first { - /* Position */ - left: 0px; - top: 50%; - transform: translate(0%, -50%) rotate(45deg); - - /* Size */ - height: 1px; - width: 100%; - } - - .button__line--second { - /* Position */ - left: 50%; - top: 0px; - transform: translate(-50%, 0%) rotate(45deg); - - /* Size */ - height: 100%; - width: 1px; - } - `} - > -
- -
- - - - - - ); -}; - -export default Details; diff --git a/patterns/close-button/Cover.tsx b/patterns/close-button/Cover.tsx deleted file mode 100644 index 43c148a..0000000 --- a/patterns/close-button/Cover.tsx +++ /dev/null @@ -1,56 +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 b5274e9..23f7a15 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -17,6 +17,7 @@ @import './patterns/avatar-list'; @import './patterns/badge'; @import './patterns/centering'; +@import './patterns/close-button'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_close-button.scss b/styles/patterns/_close-button.scss new file mode 100644 index 0000000..2b5f19a --- /dev/null +++ b/styles/patterns/_close-button.scss @@ -0,0 +1,49 @@ +.close-button { + /* Reset */ + background-color: transparent; + border-color: transparent; + + /* Cursor */ + cursor: pointer; + + /* Size */ + height: 3rem; + width: 3rem; + + /* Used to position the inner */ + position: relative; +} + +.close-button__line { + /* Background color */ + background-color: rgba(0, 0, 0, 0.3); + + /* Position */ + position: absolute; + + /* Size */ + height: 1px; + width: 100%; +} + +.close-button__line--first { + /* Position */ + left: 0px; + top: 50%; + transform: translate(0%, -50%) rotate(45deg); + + /* Size */ + height: 1px; + width: 100%; +} + +.close-button__line--second { + /* Position */ + left: 50%; + top: 0px; + transform: translate(-50%, 0%) rotate(45deg); + + /* Size */ + height: 100%; + width: 1px; +}