From 7d7a34f7e09bfb4cd1f8486c1587bba383282ec7 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 10:15:00 +0700 Subject: [PATCH] feat: Add arrow buttons --- .eleventy.js | 9 + contents/_includes/covers/arrow-buttons.njk | 14 ++ contents/accordion.md | 8 +- contents/arrow-buttons.md | 91 +++++++ contents/index.njk | 8 +- pages/arrow-buttons/index.tsx | 256 -------------------- patterns/arrow-buttons/Cover.tsx | 73 ------ styles/blocks/_card.scss | 8 +- styles/blocks/_example.scss | 66 +++++ styles/covers/_arrow-buttons.scss | 66 +++++ styles/index.scss | 2 + 11 files changed, 266 insertions(+), 335 deletions(-) create mode 100644 contents/_includes/covers/arrow-buttons.njk create mode 100644 contents/arrow-buttons.md delete mode 100644 pages/arrow-buttons/index.tsx delete mode 100644 patterns/arrow-buttons/Cover.tsx create mode 100644 styles/blocks/_example.scss create mode 100644 styles/covers/_arrow-buttons.scss diff --git a/.eleventy.js b/.eleventy.js index 90b9e65..30b968e 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -17,6 +17,15 @@ module.exports = function(eleventyConfig) { // Shortcodes + eleventyConfig.addPairedShortcode('demo', function(content) { + return `
+
+ Demo +
+
${content}
+
`; + }); + eleventyConfig.addShortcode('circle', function() { return `
`; }); diff --git a/contents/_includes/covers/arrow-buttons.njk b/contents/_includes/covers/arrow-buttons.njk new file mode 100644 index 0000000..a0082c8 --- /dev/null +++ b/contents/_includes/covers/arrow-buttons.njk @@ -0,0 +1,14 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/contents/accordion.md b/contents/accordion.md index 0d1848b..d8743c3 100644 --- a/contents/accordion.md +++ b/contents/accordion.md @@ -5,8 +5,6 @@ description: Create an accordion with CSS flexbox keywords: css accordion, css flexbox --- -{% include "covers/accordion.njk" %} - ## HTML ```html @@ -84,4 +82,8 @@ keywords: css accordion, css flexbox .accordion__item--expanded .accordion__content { display: block; } -``` \ No newline at end of file +``` + +{% demo %} +{% include "covers/accordion.njk" %} +{% enddemo %} diff --git a/contents/arrow-buttons.md b/contents/arrow-buttons.md new file mode 100644 index 0000000..22bccef --- /dev/null +++ b/contents/arrow-buttons.md @@ -0,0 +1,91 @@ +--- +layout: layouts/post.njk +title: Arrow buttons +description: Create arrow buttons with CSS +keywords: css arrow buttons +--- + +## HTML + +```html + + + + + + + + + + + +``` + +## CSS + +```css +.arrow-button { + /* Transparent background */ + background-color: transparent; + + /* Size */ + height: 12px; + width: 12px; +} + +.arrow-button--t { + /* Edges */ + border-left: 1px solid rgba(0, 0, 0, 0.3); + border-top: 1px solid rgba(0, 0, 0, 0.3); + transform: translateY(25%) rotate(45deg); +} + +.arrow-button--r { + /* Edges */ + border-right: 1px solid rgba(0, 0, 0, 0.3); + border-top: 1px solid rgba(0, 0, 0, 0.3); + transform: translateX(-25%) rotate(45deg); +} + +.arrow-button--b { + /* Edges */ + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-right: 1px solid rgba(0, 0, 0, 0.3); + transform: translateY(-25%) rotate(45deg); +} + +.arrow-button--l { + /* Edges */ + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-left: 1px solid rgba(0, 0, 0, 0.3); + transform: translateX(25%) rotate(45deg); +} +``` + +{% demo %} +{% include "covers/arrow-buttons.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 02153d9..2efbe28 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -15,10 +15,16 @@ eleventyExcludeFromCollections: true
- {% include "covers/accordion.njk" %} +
{% include "covers/accordion.njk" %}
Accordion
+
+ +
{% include "covers/arrow-buttons.njk" %}
+
Arrow buttons
+ +
diff --git a/pages/arrow-buttons/index.tsx b/pages/arrow-buttons/index.tsx deleted file mode 100644 index 6117f8e..0000000 --- a/pages/arrow-buttons/index.tsx +++ /dev/null @@ -1,256 +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 { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - - /* Spacing */ - padding: 8px; - } - - .button__arrow { - /* Transparent background */ - background-color: transparent; - - /* Size */ - height: 12px; - width: 12px; - } - - .button__arrow--up { - /* Edges */ - border-left: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); - transform: translateY(25%) rotate(45deg); - } - - .button__arrow--right { - /* Edges */ - border-right: 1px solid rgba(0, 0, 0, 0.3); - border-top: 1px solid rgba(0, 0, 0, 0.3); - transform: translateX(-25%) rotate(45deg); - } - - .button__arrow--down { - /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-right: 1px solid rgba(0, 0, 0, 0.3); - transform: translateY(-25%) rotate(45deg); - } - - .button__arrow--left { - /* Edges */ - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - border-left: 1px solid rgba(0, 0, 0, 0.3); - transform: translateX(25%) rotate(45deg); - } - `} - > -
-
-
- -
-
- -
-
- -
-
- -
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/arrow-buttons/Cover.tsx b/patterns/arrow-buttons/Cover.tsx deleted file mode 100644 index c8720d9..0000000 --- a/patterns/arrow-buttons/Cover.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/blocks/_card.scss b/styles/blocks/_card.scss index a1470e5..f9bbd28 100644 --- a/styles/blocks/_card.scss +++ b/styles/blocks/_card.scss @@ -2,10 +2,9 @@ background-color: #fff; border-radius: 0.5rem; box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1); - padding: 0.5rem 1rem; + padding: 0.5rem; text-align: center; } - .card__link { color: #6366f1; font-size: 1.25rem; @@ -13,3 +12,8 @@ text-align: center; text-decoration: none; } +.card__cover { + height: 8rem; + width: 100%; + margin-bottom: 0.5rem; +} diff --git a/styles/blocks/_example.scss b/styles/blocks/_example.scss new file mode 100644 index 0000000..61e0d71 --- /dev/null +++ b/styles/blocks/_example.scss @@ -0,0 +1,66 @@ +.example { + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); + margin: 2rem 0; + position: relative; +} +.example--border { + border: 1px solid #d1d5db; +} +.example__ribbon { + height: 8rem; + width: 8rem; + overflow: hidden; + position: absolute; + z-index: 1; + + &::before, + &::after { + border: 0.25rem solid #4338ca; + content: ''; + position: absolute; + z-index: -1; + } +} +.example__title { + background-color: #818cf8; + color: #fff; + position: absolute; + padding: 0.5rem 0; + text-transform: uppercase; + text-align: center; + // It is a result of height * Math.sqrt(2) + width: 181px; +} +.example__ribbon--tr { + top: -0.5rem; + right: -0.5rem; + + &::before, + &::after { + border-top-color: transparent; + border-right-color: transparent; + } + &::after { + bottom: 0; + right: 0; + } + &::before { + top: 0; + left: 0; + } + .example__title { + transform: translate(-13px, 30px) rotate(45deg); + } +} +.example__content { + padding: 1rem; +} +.example__content--small { + height: 20rem; +} +.example__content--medium { + height: 30rem; +} +.example__content--large { + height: 40rem; +} \ No newline at end of file diff --git a/styles/covers/_arrow-buttons.scss b/styles/covers/_arrow-buttons.scss new file mode 100644 index 0000000..34e0f57 --- /dev/null +++ b/styles/covers/_arrow-buttons.scss @@ -0,0 +1,66 @@ +.arrow-buttons { + position: relative; + height: 100%; + width: 100%; +} +.arrow-button { + /* Transparent background */ + background-color: transparent; + + /* Size */ + height: 12px; + width: 12px; +} + +.arrow-button--t { + /* Edges */ + border-left: 1px solid rgba(0, 0, 0, 0.3); + border-top: 1px solid rgba(0, 0, 0, 0.3); + transform: translateY(25%) rotate(45deg); +} + +.arrow-button--r { + /* Edges */ + border-right: 1px solid rgba(0, 0, 0, 0.3); + border-top: 1px solid rgba(0, 0, 0, 0.3); + transform: translateX(-25%) rotate(45deg); +} + +.arrow-button--b { + /* Edges */ + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-right: 1px solid rgba(0, 0, 0, 0.3); + transform: translateY(-25%) rotate(45deg); +} + +.arrow-button--l { + /* Edges */ + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + border-left: 1px solid rgba(0, 0, 0, 0.3); + transform: translateX(25%) rotate(45deg); +} + +/* Demo */ +.arrow-buttons__corner { + position: absolute; +} +.arrow-buttons__corner--t { + left: 50%; + top: 0; + transform: translate(-50%, 0%); +} +.arrow-buttons__corner--r { + right: 0; + top: 50%; + transform: translate(0%, -50%); +} +.arrow-buttons__corner--b { + bottom: 0; + left: 50%; + transform: translate(-50%, 0%); +} +.arrow-buttons__corner--l { + left: 0; + top: 50%; + transform: translate(0%, -50%); +} \ No newline at end of file diff --git a/styles/index.scss b/styles/index.scss index d1bb302..fb4e894 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -2,6 +2,7 @@ @import './blocks/card'; @import './blocks/category'; +@import './blocks/example'; @import './blocks/hero'; @import './blocks/follow'; @import './blocks/footer'; @@ -11,6 +12,7 @@ // Cover @import './covers/accordion'; +@import './covers/arrow-buttons'; // Placeholders @import './placeholders/circle';