diff --git a/contents/_includes/patterns/voting.njk b/contents/_includes/patterns/voting.njk new file mode 100644 index 0000000..fd538d0 --- /dev/null +++ b/contents/_includes/patterns/voting.njk @@ -0,0 +1,9 @@ +
+ +
999
+ +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index a805377..2fdda7d 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -169,6 +169,12 @@ eleventyExcludeFromCollections: true
Watermark
+
+ +
{% include "patterns/voting.njk" %}
+
Voting
+ +
diff --git a/contents/voting.md b/contents/voting.md new file mode 100644 index 0000000..aa2ee65 --- /dev/null +++ b/contents/voting.md @@ -0,0 +1,90 @@ +--- +layout: layouts/post.njk +title: Voting +description: Create a voting control with CSS flexbox +keywords: css flexbox, css triangle buttons, css voting control +--- + +## HTML + +```html +
+ + + + +
...
+ + + +
+``` + +## CSS + +```css +.voting { + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0.25rem; + display: flex; + flex-direction: column; + height: 8rem; +} + +.voting__button { + /* Reset */ + background: none; + border: none; + cursor: pointer; + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Size */ + height: 1rem; + + /* Position the triangle */ + position: relative; +} + +.voting__triangle { + border-style: solid; + + /* Size */ + height: 0; + width: 0; +} + +.voting__triangle--up { + border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-width: 0 0.5rem 0.5rem; +} + +.voting__triangle--down { + border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-width: 0.5rem 0.5rem 0px; +} + +.voting__number { + /* Take the available height */ + flex: 1; + + /* Center the number */ + align-items: center; + display: flex; + justify-content: center; + + /* Spacing */ + padding: 0.25rem; +} +``` + +{% demo %} +{% include "patterns/voting.njk" %} +{% enddemo %} diff --git a/pages/voting/index.tsx b/pages/voting/index.tsx deleted file mode 100644 index bf8aef3..0000000 --- a/pages/voting/index.tsx +++ /dev/null @@ -1,182 +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<{}> = () => { - const [value, setValue] = React.useState(900); - const decrease = () => setValue(value - 1); - const increase = () => setValue(value + 1); - - return ( - - - - - - - - - - - - -
- ... -
- - - - -`} - css={` - .voting { - border: 1px solid rgba(0, 0, 0, 0.3); - border-radius: 0.25rem; - display: flex; - flex-direction: column; - height: 8rem; - } - - .voting__button { - /* Reset */ - background: none; - border: none; - cursor: pointer; - - /* Size */ - height: 1rem; - - /* Position the triangle */ - position: relative; - } - - .voting__triangle { - border-style: solid; - - /* Size */ - height: 0; - width: 0; - } - - .voting__triangle--up { - border-color: transparent transparent rgba(0, 0, 0, 0.3); - border-width: 0 0.5rem 0.5rem; - } - - .voting__triangle--down { - border-color: rgba(0, 0, 0, 0.3) transparent transparent; - border-width: 0.5rem 0.5rem 0px; - } - - .voting__number { - /* Take the available height */ - flex: 1; - - /* Center the number */ - align-items: center; - display: flex; - justify-content: center; - - /* Spacing */ - padding: 0.25rem; - } - `} - > -
-
- -
- {value} -
- -
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/voting/Cover.tsx b/patterns/voting/Cover.tsx deleted file mode 100644 index f98ac56..0000000 --- a/patterns/voting/Cover.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
-
- 99 -
-
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index e4a9ad1..74a9eb8 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -36,6 +36,7 @@ @import './patterns/fixed-at-side'; @import './patterns/full-background'; @import './patterns/initial-avatar'; +@import './patterns/voting'; @import './patterns/watermark'; // Placeholders diff --git a/styles/patterns/_voting.scss b/styles/patterns/_voting.scss new file mode 100644 index 0000000..9bc3598 --- /dev/null +++ b/styles/patterns/_voting.scss @@ -0,0 +1,56 @@ +.voting { + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0.25rem; + display: flex; + flex-direction: column; + height: 8rem; +} + +.voting__button { + /* Reset */ + background: none; + border: none; + cursor: pointer; + + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Size */ + height: 1rem; + + /* Position the triangle */ + position: relative; +} + +.voting__triangle { + border-style: solid; + + /* Size */ + height: 0; + width: 0; +} + +.voting__triangle--up { + border-color: transparent transparent rgba(0, 0, 0, 0.3); + border-width: 0 0.5rem 0.5rem; +} + +.voting__triangle--down { + border-color: rgba(0, 0, 0, 0.3) transparent transparent; + border-width: 0.5rem 0.5rem 0px; +} + +.voting__number { + /* Take the available height */ + flex: 1; + + /* Center the number */ + align-items: center; + display: flex; + justify-content: center; + + /* Spacing */ + padding: 0.25rem; +} \ No newline at end of file