diff --git a/contents/_includes/patterns/search-box.njk b/contents/_includes/patterns/search-box.njk new file mode 100644 index 0000000..6eb7f91 --- /dev/null +++ b/contents/_includes/patterns/search-box.njk @@ -0,0 +1,4 @@ +
+ + {% circle "md" %} +
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index b33c0ae..8755472 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -94,6 +94,7 @@ eleventyExcludeFromCollections: true {% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %} {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %} {% pattern "Rating" %}{% include "patterns/rating.njk" %}{% endpattern %} + {% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %} diff --git a/contents/search-box.md b/contents/search-box.md new file mode 100644 index 0000000..30c28f7 --- /dev/null +++ b/contents/search-box.md @@ -0,0 +1,40 @@ +--- +layout: layouts/post.njk +title: Search box +description: Create a search box with CSS flexbox +keywords: css flexbox, css search box +--- + +## HTML + +```html +
+ + + + + ... +
+``` + +## CSS + +```css +.search-box { + display: flex; + + /* If you want to place the icon before the text input */ + flex-direction: row-reverse; + + /* Border */ + border: 1px solid #d1d5db; +} + +.search-box__input { + border-color: transparent; + /* Take available width */ + flex: 1; +} +``` + +{% demo %}{% include "patterns/search-box.njk" %}{% enddemo %} diff --git a/pages/search-box/index.tsx b/pages/search-box/index.tsx deleted file mode 100644 index 2146ae1..0000000 --- a/pages/search-box/index.tsx +++ /dev/null @@ -1,107 +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 Circle from '../../placeholders/Circle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - - - - - ... - -`} - css={` - .container { - display: flex; - - /* If you want to place the icon before the text input */ - flex-direction: row-reverse; - - /* Border */ - border: 1px solid #d1d5db; - } - - .container__input { - border-color: transparent; - /* Take available width */ - flex: 1; - } - `} - > -
-
-
- -
- -
-
- -
- -
- -
-
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/search-box/Cover.tsx b/patterns/search-box/Cover.tsx deleted file mode 100644 index 815a1ba..0000000 --- a/patterns/search-box/Cover.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- -
-
- - ); -}; - -export default Cover; diff --git a/placeholders/Block.tsx b/placeholders/Block.tsx deleted file mode 100644 index 3c9542e..0000000 --- a/placeholders/Block.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -import { random } from '../utils/random'; - -interface BlockProps { - backgroundColor?: string; - blockHeight?: number; - justify?: string; - numberOfBlocks?: number; -} - -const Block: React.FC = ({ - backgroundColor = '#d1d5db', - blockHeight = 4, - justify = 'start', - numberOfBlocks = 1, -}) => { - return ( -
- {Array(numberOfBlocks) - .fill(0) - .map((_, i) => { - const s = random(1, 5); - return ( -
-
-
- ); - })} -
- ); -}; - -export default Block; diff --git a/placeholders/Frame.tsx b/placeholders/Frame.tsx deleted file mode 100644 index ccc9274..0000000 --- a/placeholders/Frame.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; - -const Frame: React.FC<{}> = ({ children }) => { - return ( -
- {children} -
- ); -}; - -export default Frame; diff --git a/styles/index.scss b/styles/index.scss index 5ca529a..fd97dd9 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -62,6 +62,7 @@ @import './patterns/rating'; @import './patterns/resizable-element'; @import './patterns/ribbon'; +@import './patterns/search-box'; @import './patterns/separator'; @import './patterns/stacked-cards'; @import './patterns/stamp-border'; diff --git a/styles/patterns/_search-box.scss b/styles/patterns/_search-box.scss new file mode 100644 index 0000000..be22855 --- /dev/null +++ b/styles/patterns/_search-box.scss @@ -0,0 +1,23 @@ +.search-box { + border: 1px solid #d1d5db; + border-radius: 0.25rem; + + display: flex; + align-items: center; + + /* Demo */ + padding: 0.25rem; +} + +.search-box__input { + border-color: transparent; + + /* Take available width */ + flex: 1; + + height: 2rem; + margin-right: 0.25rem; + + /* Demo */ + width: 6rem; +} \ No newline at end of file