diff options
Diffstat (limited to '@linaria/examples/Preact/preact-example/src/components/header')
-rw-r--r-- | @linaria/examples/Preact/preact-example/src/components/header/index.js | 34 | ||||
-rw-r--r-- | @linaria/examples/Preact/preact-example/src/components/header/style.css | 38 |
2 files changed, 72 insertions, 0 deletions
diff --git a/@linaria/examples/Preact/preact-example/src/components/header/index.js b/@linaria/examples/Preact/preact-example/src/components/header/index.js new file mode 100644 index 0000000..88ae55d --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/index.js @@ -0,0 +1,34 @@ +import { h } from 'preact'; +import { Link } from 'preact-router/match'; +import style from './style.css'; + +import { css } from 'linaria'; +import { styled } from 'linaria/react'; + +const header = css` + color: aliceblue; + font-weight: 800; + display: inline-block; + margin-right: 10px; +`; + +const WithLinaria = styled.h1` + color: ${props => props.color}; + display: inline-block; +` + +const Header = () => ( + <header class={style.header}> + <h1 class={header}>Preact App</h1> + <WithLinaria color="aliceblue"> + with Linaria! + </WithLinaria> + <nav> + <Link activeClassName={style.active} href="/">Home</Link> + <Link activeClassName={style.active} href="/profile">Me</Link> + <Link activeClassName={style.active} href="/profile/john">John</Link> + </nav> + </header> +); + +export default Header; diff --git a/@linaria/examples/Preact/preact-example/src/components/header/style.css b/@linaria/examples/Preact/preact-example/src/components/header/style.css new file mode 100644 index 0000000..9d3db38 --- /dev/null +++ b/@linaria/examples/Preact/preact-example/src/components/header/style.css @@ -0,0 +1,38 @@ +.header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 56px; + padding: 0; + background: #673AB7; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); + z-index: 50; +} + +.header nav { + float: right; + font-size: 100%; +} + +.header nav a { + display: inline-block; + height: 56px; + line-height: 56px; + padding: 0 15px; + min-width: 50px; + text-align: center; + background: rgba(255,255,255,0); + text-decoration: none; + color: #FFF; + will-change: background-color; +} + +.header nav a:hover, +.header nav a:active { + background: rgba(0,0,0,0.2); +} + +.header nav a.active { + background: rgba(0,0,0,0.4); +} |