diff --git a/contents/_includes/patterns/floating-label.njk b/contents/_includes/patterns/floating-label.njk new file mode 100644 index 0000000..3b2ade7 --- /dev/null +++ b/contents/_includes/patterns/floating-label.njk @@ -0,0 +1,4 @@ +
+ + +
\ No newline at end of file diff --git a/contents/floating-label.md b/contents/floating-label.md new file mode 100644 index 0000000..139e160 --- /dev/null +++ b/contents/floating-label.md @@ -0,0 +1,61 @@ +--- +layout: layouts/post.njk +title: Floating label +description: Create a floating label with CSS +keywords: css floating label, placeholder shown +--- + +## HTML + +```html +
+ + + + + +
+``` + +## CSS + +```css +.floating-label { + border: 1px solid #d1d5db; + border-radius: 0.25rem; + position: relative; +} + +.floating-label__input { + border: none; + padding: 0.5rem; + height: 100%; +} + +/* +Show the label at desired position when the +placeholder of input isn't shown +*/ +.floating-label__input:not(:placeholder-shown) + .floating-label__label { + background: #fff; + transform: translate(0, -200%); + opacity: 1; +} + +.floating-label__label { + /* Position the label */ + left: 1rem; + position: absolute; + top: 100%; + + /* Hide it by default */ + opacity: 0; + transition: all 200ms; + + padding: 0 0.5rem; +} +``` + +Type something in the input to see how the label is shown up. + +{% demo %}{% include "patterns/floating-label.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index f951bf8..4d0e200 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 "Floating label" %}{% include "patterns/floating-label.njk" %}{% endpattern %} {% 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 %} diff --git a/pages/floating-label/index.tsx b/pages/floating-label/index.tsx deleted file mode 100644 index 6c186a3..0000000 --- a/pages/floating-label/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import { Pattern } from '../../constants/Pattern'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - -
- Type something in the input to see how the label is shown up. -
- - - - - - - -`} - css={` - .container { - position: relative; - } - - /* -Show the label at desired position when the -placeholder of input isn't shown -*/ - .container__input:not(:placeholder-shown) + .container__label { - background: #fff; - transform: translate(0, -50%); - opacity: 1; - } - - .container__label { - /* Position the label */ - left: 8px; - position: absolute; - top: 0; - - /* Hide it by default */ - opacity: 0; - transition: all 200ms; - } - `} - > -
-
- - -
-
- - - ); -}; - -export default Details; diff --git a/patterns/floating-label/Cover.tsx b/patterns/floating-label/Cover.tsx deleted file mode 100644 index d8d7272..0000000 --- a/patterns/floating-label/Cover.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 47b1ff4..9c884c3 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -38,6 +38,7 @@ @import './patterns/feature-list'; @import './patterns/fixed-at-corner'; @import './patterns/fixed-at-side'; +@import './patterns/floating-label'; @import './patterns/folder-structure'; @import './patterns/full-background'; @import './patterns/initial-avatar'; diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss new file mode 100644 index 0000000..11c499c --- /dev/null +++ b/styles/patterns/_floating-label.scss @@ -0,0 +1,38 @@ +.floating-label { + border: 1px solid #d1d5db; + border-radius: 0.25rem; + position: relative; + + /* Demo */ + padding: 0px 1px; + height: 2.5rem; +} + +.floating-label__input { + border: none; + padding: 0.5rem; + height: 100%; +} + +/* +Show the label at desired position when the +placeholder of input isn't shown +*/ +.floating-label__input:not(:placeholder-shown) + .floating-label__label { + background: #fff; + transform: translate(0, -200%); + opacity: 1; +} + +.floating-label__label { + /* Position the label */ + left: 1rem; + position: absolute; + top: 100%; + + /* Hide it by default */ + opacity: 0; + transition: all 200ms; + + padding: 0 0.5rem; +} \ No newline at end of file