diff --git a/contents/_includes/patterns/keyboard-shortcut.njk b/contents/_includes/patterns/keyboard-shortcut.njk new file mode 100644 index 0000000..ea257d5 --- /dev/null +++ b/contents/_includes/patterns/keyboard-shortcut.njk @@ -0,0 +1 @@ +⌘ + C \ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 014611e..b7b2acc 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -169,6 +169,12 @@ eleventyExcludeFromCollections: true
Inverted corners
+
+ +
{% include "patterns/keyboard-shortcut.njk" %}
+
Keyboard shortcut
+ +
{% include "patterns/triangle-buttons.njk" %}
diff --git a/contents/keyboard-shortcut.md b/contents/keyboard-shortcut.md new file mode 100644 index 0000000..37a9d07 --- /dev/null +++ b/contents/keyboard-shortcut.md @@ -0,0 +1,35 @@ +--- +layout: layouts/post.njk +title: Keyboard shortcut +description: Create a keyboard shortcut with CSS +keywords: kbd tag, keyboard shortcut +--- + +We use the native `kbd` tag to display the keyboard shortcut. + +## HTML + +```html +... +``` + +## CSS + +```css +.keyboard-shortcut { + /* Background and color */ + background-color: rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + color: rgba(0, 0, 0, 0.7); + + /* Bottom shadow */ + box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; + + /* Spacing */ + padding: 0.25rem 0.5rem; +} +``` + +{% demo %} +{% include "patterns/keyboard-shortcut.njk" %} +{% enddemo %} diff --git a/pages/keyboard-shortcut/index.tsx b/pages/keyboard-shortcut/index.tsx deleted file mode 100644 index c478027..0000000 --- a/pages/keyboard-shortcut/index.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Link from 'next/link'; -import { Heading, Spacer } from '@1milligram/design'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -interface ItemProps { - action: string; - keys: string; -} - -const Item: React.FC = ({ action, keys }) => { - return ( -
-
{action}
- - {keys} - -
- ); -}; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- We use the native kbd tag to display the keyboard shortcut. -
- - ... - -`} - css={` - .container { - /* Background and color */ - background-color: rgba(0, 0, 0, 0.1); - border-radius: 4px; - color: rgba(0, 0, 0, 0.7); - - /* Bottom shadow */ - box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; - - /* Spacing */ - padding: 8px; - } - `} - > -
- - ⌘ + C - -
- - - -
- Use cases - -
-
- We can use this pattern with the{' '} - - property list - {' '} - pattern to create shortkey preferences as following: -
-
- - - -
-
-
- - ); -}; - -export default Details; diff --git a/patterns/keyboard-shortcut/Cover.tsx b/patterns/keyboard-shortcut/Cover.tsx deleted file mode 100644 index 75479b8..0000000 --- a/patterns/keyboard-shortcut/Cover.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
- - ⌘ + C - -
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 83d2707..ebf7009 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -37,6 +37,7 @@ @import './patterns/full-background'; @import './patterns/initial-avatar'; @import './patterns/inverted-corners'; +@import './patterns/keyboard-shortcut'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_keyboard-shortcut.scss b/styles/patterns/_keyboard-shortcut.scss new file mode 100644 index 0000000..534cdc9 --- /dev/null +++ b/styles/patterns/_keyboard-shortcut.scss @@ -0,0 +1,12 @@ +.keyboard-shortcut { + /* Background and color */ + background-color: rgba(0, 0, 0, 0.1); + border-radius: 0.25rem; + color: rgba(0, 0, 0, 0.7); + + /* Bottom shadow */ + box-shadow: rgba(0, 0, 0, 0.3) 0px -4px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px; + + /* Spacing */ + padding: 0.25rem 0.5rem; +} \ No newline at end of file