diff --git a/contents/_includes/patterns/input-addon.njk b/contents/_includes/patterns/input-addon.njk new file mode 100644 index 0000000..5723232 --- /dev/null +++ b/contents/_includes/patterns/input-addon.njk @@ -0,0 +1,9 @@ +
+
{% circle "md" %}
+ +
+ +
+ +
{% circle "md" %}
+
diff --git a/contents/index.njk b/contents/index.njk index 49e627b..5f4b27f 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -91,6 +91,7 @@ eleventyExcludeFromCollections: true {% pattern "Chip" %}{% include "patterns/chip.njk" %}{% endpattern %} {% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %} {% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %} + {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %} diff --git a/contents/input-addon.md b/contents/input-addon.md new file mode 100644 index 0000000..4296be2 --- /dev/null +++ b/contents/input-addon.md @@ -0,0 +1,81 @@ +--- +layout: layouts/post.njk +title: Input addon +description: Create an input add-on with CSS flexbox +keywords: css flexbox, css input add-on +--- + +## HTML + +```html + +
+ +
+ ... +
+ + + +
+ + +
+ + + + +
+ ... +
+
+ + +
+ +
+ ... +
+ + + + + +
+ ... +
+
+``` + +## CSS + +```css +.input-addon { + border: 1px solid #d1d5db; + border-radius: 0.25rem; + display: flex; +} + +.input-addon__input { + border: none; + + /* Take the remaining width */ + flex: 1; +} + +.input-addon__addon { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; +} + +.input-addon__addon--prepended { + border-right: 1px solid #d1d5db; +} +.input-addon__addon--appended { + border-left: 1px solid #d1d5db; +} +``` + +{% demo %}{% include "patterns/input-addon.njk" %}{% enddemo %} diff --git a/pages/input-addon/index.tsx b/pages/input-addon/index.tsx deleted file mode 100644 index ce4e0dc..0000000 --- a/pages/input-addon/index.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- -
- ... -
- - - -
- - -
- - - - -
- ... -
-
- - -
- -
- ... -
- - - - - -
- ... -
-
-`} - css={` - .container { - display: flex; - - /* Take full size */ - width: 100%; - } - - .container__input { - /* Take the remaining width */ - flex: 1; - } - - .container__addon { - /* Center the content */ - align-items: center; - display: flex; - justify-content: center; - } - `} - > -
-
-
-
- -
- -
-
- -
- -
-
-
-
- -
- -
- -
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/input-addon/Cover.tsx b/patterns/input-addon/Cover.tsx deleted file mode 100644 index d8caa9c..0000000 --- a/patterns/input-addon/Cover.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index e93b93a..5af2e66 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -41,6 +41,7 @@ @import './patterns/folder-structure'; @import './patterns/full-background'; @import './patterns/initial-avatar'; +@import './patterns/input-addon'; @import './patterns/inverted-corners'; @import './patterns/keyboard-shortcut'; @import './patterns/layered-card'; diff --git a/styles/patterns/_input-addon.scss b/styles/patterns/_input-addon.scss new file mode 100644 index 0000000..0483922 --- /dev/null +++ b/styles/patterns/_input-addon.scss @@ -0,0 +1,36 @@ +.input-addon { + border: 1px solid #d1d5db; + border-radius: 0.25rem; + display: flex; + + /* Demo */ + margin-bottom: 0.5rem; +} + +.input-addon__input { + border: none; + /* Take the remaining width */ + flex: 1; + + /* Demo */ + padding: 0.25rem; + margin: 0 0.25rem; + width: 5rem; +} + +.input-addon__addon { + /* Center the content */ + align-items: center; + display: flex; + justify-content: center; + + /* Demo */ + padding: 0.25rem; +} + +.input-addon__addon--prepended { + border-right: 1px solid #d1d5db; +} +.input-addon__addon--appended { + border-left: 1px solid #d1d5db; +} \ No newline at end of file diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss index fa4f3c0..82bbf1f 100644 --- a/styles/placeholders/_circle.scss +++ b/styles/placeholders/_circle.scss @@ -8,7 +8,7 @@ --circle-size: 0.5rem; } .circle--md { - --circle-size: 2rem; + --circle-size: 1.5rem; } .circle--lg { --circle-size: 4rem;