1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-02-01 05:16:10 +01:00
slate/examples/components.js
Ian Storm Taylor 257b28aa84
Improve and refactor examples (#1930)
This just refactors the examples to make the styled defined inline with each example, to make it easier to follow for folks. And in the process fixes a few issues that people brought up.

Fixes https://github.com/ianstormtaylor/slate/issues/1920
Fixes https://github.com/ianstormtaylor/slate/issues/1925
2018-07-01 15:13:29 -06:00

36 lines
710 B
JavaScript

import React from 'react'
import styled from 'react-emotion'
export const Button = styled('span')`
cursor: pointer;
color: ${props =>
props.reversed
? props.active ? 'white' : '#aaa'
: props.active ? 'black' : '#ccc'};
`
export const Icon = styled(({ className, ...rest }) => {
return <span className={`material-icons ${className}`} {...rest} />
})`
font-size: 18px;
vertical-align: text-bottom;
`
export const Menu = styled('div')`
& > * {
display: inline-block;
}
& > * + * {
margin-left: 15px;
}
`
export const Toolbar = styled(Menu)`
position: relative;
padding: 1px 18px 17px;
margin: 0 -20px;
border-bottom: 2px solid #eee;
margin-bottom: 20px;
`