How to use the reactcss function in reactcss
To help you get started, we’ve selected a few reactcss examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Aedron / Page.qy / dist / components / Preview.js View on Github 
style() {return reactCSS({
default: {
container: {
width: this.props.miniNav ?
'calc(100% - 80px)' : 'calc(100% - 200px)',
height: '100%',
position: 'fixed',
top: '0',
left: this.props.miniNav ?
'80px' : '200px',
transition: 'all ease 850ms',
backgroundColor: 'white',
transform: `translateY(${this.props.show ? 0 : '100%'})`,
},
preview: {
width: '100%',
height: '100%',export const SidebarHeader = () => {
const styles = reactCSS({
'default': {
top: {
borderBottom: `1px solid ${ colors.black }`,
direction: 'row',
padding: 'medium',
color: 'gray',
spread: true,
},
settings: {
margin: '-4px 0',
},
},
})
return (export const SketchPresetColors = ({ colors, onClick = () => {}, onSwatchHover }) => {
const styles = reactCSS({
'default': {
colors: {
margin: '0 -10px',
padding: '10px 0 0 10px',
borderTop: '1px solid #eee',
display: 'flex',
flexWrap: 'wrap',
position: 'relative',
},
swatchWrap: {
width: '16px',
height: '16px',
margin: '0 10px 10px 0',
},
swatch: {
borderRadius: '3px',render() {
const styles = reactCSS({
default: {
navBar: {
height: 40,
paddingTop: 20,
paddingBottom: 0,
textAlign: "center"
},
button_home: {
float: "center",
color: "#4a4c52",
padding: 10
},
inputArea: {
height: 150
},
input: { style() {return(reactCSS({
default: {
app: {
width: '100%',
height: '100%',
overflow: 'hidden',
position: 'fixed',
top: 0,
backgroundColor: 'black',
},
background: {
width: '120%',
height: '120%',
overflow: 'hidden',
position: 'relative',
backgroundImage: `url('${this.state.backgroundImage}')`,
backgroundSize: 'cover', style() {return(reactCSS({
'default': {
container: {
width: this.props.miniNav ?
'calc(100% - 80px)' : 'calc(100% - 200px)',
height: '100%',
position: 'fixed',
top: '0',
left: this.props.miniNav ?
'80px' : '200px',
transition: 'all ease 850ms',
backgroundColor: 'white',
transform: `translateY(${this.props.show ? 0 : '100%'})`,
},
articleColumnContainer: {
width: '92%',
height: '100%',export const ChannelsList = ({ channels, currency, user, sendLightning,
onCloseChannel }) => {
const styles = reactCSS({
'default': {
channels: {
borderTop: '1px solid #eee',
},
channel: {
borderBottom: '1px solid #eee',
},
noChannels: {
borderBottom: '1px solid #eee',
padding: 'medium',
direction: 'row',
verticalAlign: 'center',
},
},
})handleCancel={ this.handleCancel }
{ ...this.props }
/>
:
}
)
}
}
export default ReactCSS(Composer)render() {
const styles = reactCSS({
'default': {
},
});
var markdownFiles = [];
for (var fileName in this.props.markdown) {
if (this.props.markdown.hasOwnProperty(fileName)) {
var file = this.props.markdown[fileName];
var args = markdown.getArgs(file);
var body = markdown.getBody(file);
markdownFiles.push(
<div style="{" id="{">
</div>
