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

feat: Keyboard shortcut

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 20:49:37 +07:00
parent 5f63d2af67
commit e90743cb28
7 changed files with 55 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
contents/_includes/patterns/keyboard-shortcut.njk Normal file
View File

@@ -0,0 +1 @@
<kbd class="keyboard-shortcut">⌘ + C</kbd>

6
contents/index.njk
View File

@@ -169,6 +169,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Inverted corners</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/keyboard-shortcut/">
<div class="pattern__cover">{% include "patterns/keyboard-shortcut.njk" %}</div>
<div class="pattern__title">Keyboard shortcut</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/triangle-buttons/">
<div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>

35
contents/keyboard-shortcut.md Normal file
View File

@@ -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
<kbd class="keyboard-shortcut">...</kbd>
```
## 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 %}

122
pages/keyboard-shortcut/index.tsx
View File

@@ -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<ItemProps> = ({ action, keys }) => {
return (
<div
style={{
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
margin: 0,
padding: '4px 0',
}}
>
<div>{action}</div>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
{keys}
</kbd>
</div>
);
};
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.KeyboardShortcut}>
<Head>
<meta name="description" content="Create a keyboard shortcut with CSS" />
<meta name="og:description" content="Create a keyboard shortcut with CSS" />
<meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
<meta name="keywords" content="kbd tag, keyboard shortcut" />
</Head>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We use the native <code>kbd</code> tag to display the keyboard shortcut.
</div>
<BrowserFrame
html={`
<kbd class="container">
...
</kbd>
`}
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;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
⌘ + C
</kbd>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<section>
<Heading level={2}>Use cases</Heading>
<div style={{ padding: '32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
We can use this pattern with the{' '}
<Link href="/property-list">
<a>property list</a>
</Link>{' '}
pattern to create shortkey preferences as following:
</div>
<div style={{ width: '250px' }}>
<Item action="Cut" keys="⌘ + X" />
<Item action="Copy" keys="⌘ + C" />
<Item action="Paste" keys="⌘ + V" />
</div>
</div>
</section>
</PatternLayout>
);
};
export default Details;

34
patterns/keyboard-shortcut/Cover.tsx
View File

@@ -1,34 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<kbd
style={{
backgroundColor: 'rgba(0, 0, 0, 0.1)',
borderRadius: '4px',
boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
color: 'rgba(0, 0, 0, 0.7)',
padding: '8px',
}}
>
⌘ + C
</kbd>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

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

12
styles/patterns/_keyboard-shortcut.scss Normal file
View File

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