How to use the olymp.styled function in olymp
To help you get started, we’ve selected a few olymp 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.
olymp / olymp / src / cms-next / cloudinary / thumbs.js View on Github 
import React, { Component, PropTypes } from 'react';
import { Icon, Button as AntButton, Tooltip } from 'antd';
import { styled } from 'olymp';
import Image from './image';
const ThumbContainer = styled(({ theme }) => ({
margin: '1rem',
display: 'flex',
flexFlow: 'row wrap',
justifyContent: 'space-around',
alignContent: 'space-around',
alignItems: 'baseline',
}), 'div', p => p);
const Thumb = styled(({ theme, isActive }) => ({
margin: '.25rem 0',
outline: isActive ? `2px solid ${theme.color}` : 'none',
// transform: isActive ? 'scale(1.1)' : 'none',
zIndex: isActive ? 2 : 1,
cursor: 'pointer',
position: 'relative',
/* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), 'div', ({ isActive, ...p }) => p);
const Button = styled(({ theme }) => ({
margin: '.25rem 0',const Thumb = styled(({ theme, isActive }) => ({
margin: '.25rem 0',
outline: isActive ? `2px solid ${theme.color}` : 'none',
// transform: isActive ? 'scale(1.1)' : 'none',
zIndex: isActive ? 2 : 1,
cursor: 'pointer',
position: 'relative',
/* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), 'div', ({ isActive, ...p }) => p);
const Button = styled(({ theme }) => ({
margin: '.25rem 0',
zIndex: 1,
/*boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), AntButton, p => p);
const Label = styled(({ theme }) => ({
// opacity: .75,
position: "absolute",
top: '50%',
left: '50%',
transform: "translate(-50%, -50%)",import React from 'react';
import { styled, Link } from 'olymp';
import { Icon } from 'antd';
import Image from '../../cms/cloudinary/image';
const Content = styled(({ active, disabled, theme }) => ({
display: 'flex',
alignItems: 'center',
padding: '5px 6px',
width: '100%',
minHeight: 51,
color: disabled ? theme.dark3 : theme.dark1,
// background: active ? 'linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.083))' : 'linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.033))',
background: active && 'rgba(0, 0, 0, 0.03)',
lineHeight: '20px',
borderBottom: '1px solid rgb(233, 233, 233)',
cursor: disabled ? 'not-allowed' : 'pointer',
'> img': {
marginRight: 8,
width: 37,
height: 37,
borderRadius: 500,import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';
const deserialize = (value) => {
console.log('DESERIALIZE', value);
return Raw.deserialize(value, { terse: true });
};
const serialize = (state) => {
console.log('SERIALIZE', state);
return Raw.serialize(state, { terse: true });
};
const Highlighted = styled(() => ({
fontWeight: 'bold',
}), 'span', p => p);
const addMarks = (startChar, closeChar, markType, characters, string) => {
const mark = Mark.create({ type: markType });
let start = -startChar.length;
while (true) {
start = string.indexOf(startChar, start + startChar.length);
if (start === -1) break;
const end = string.indexOf(closeChar, start + startChar.length) + startChar.length;
const size = end === 0 ? characters.size : end;
for (let i = start; i < size; i + 1) {
let char = characters.get(i);
let { marks } = char;
marks = marks.add(mark);
char = char.set('marks', marks);import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';
const deserialize = (value) => {
console.log('DESERIALIZE', value);
return Raw.deserialize(value, { terse: true });
};
const serialize = (state) => {
console.log('SERIALIZE', state);
return Raw.serialize(state, { terse: true });
};
const Highlighted = styled(
() => ({
fontWeight: 'bold',
}),
'span',
p => p
);
const addMarks = (startChar, closeChar, markType, characters, string) => {
const mark = Mark.create({ type: markType });
let start = -startChar.length;
while (true) {
start = string.indexOf(startChar, start + startChar.length);
if (start === -1) { break; }
const end =
string.indexOf(closeChar, start + startChar.length) + startChar.length;
const size = end === 0 ? characters.size : end;const blockTypes = Object.keys(types).reduce((result, key) => {
if (!types[key].label) {
result[key] = types[key];
} else {
let { component, styles, editable, ...rest } = types[key];
if (styles && typeof styles === 'object') component = styled(() => styles, component, p => p);
if (styles && typeof styles === 'function') component = styled(styles, component, p => p);
result[key] = useBlockBase({ isVoid: !editable, isAtomic: true })(component);
result[key].slate = { ...result[key].slate, key, ...rest };
}
return result;
}, { });
return WrappedComponent => class UseBlockTypes extends Component {const blockTypes = Object.keys(types).reduce((result, key) => {
if (!types[key].label) {
result[key] = types[key];
} else {
let { component, styles, editable, ...rest } = types[key];
if (styles && typeof styles === 'object') component = styled(() => styles, component, p => p);
if (styles && typeof styles === 'function') component = styled(styles, component, p => p);
result[key] = useBlockBase({ isVoid: !editable, isAtomic: true })(component);
result[key].slate = { ...result[key].slate, key, ...rest };
}
return result;
}, { });
return WrappedComponent => class UseBlockTypes extends Component {import Footer from './footer';
import MenuController from './header';
import Logo from './logo';
import sortBy from 'lodash/sortBy';
import { Link, NavLink, styled } from 'olymp';
export const Header = styled(
({ sticky }) => ({
backgroundColor: 'white',
boxShadow: sticky && '0 3px 11px 0 rgba(0,0,0,.06)',
}),
'nav',
p => p
);
export const Container = styled(
({}) => ({
display: 'flex',
position: 'relative',
minHeight: '100vh',
flexDirection: 'column',
'> :not(:first-child):not(:last-child)': {
flex: 1,
},
}),
({ className, children, innerRef }) =>
<div>,
p => p
);
export default class Layout extends Component {
static defaultProps = {</div>import React, { Component } from 'react';
import Footer from './footer';
import MenuController from './header';
import Logo from './logo';
import sortBy from 'lodash/sortBy';
import { Link, NavLink, styled } from 'olymp';
export const Header = styled(({ sticky }) => ({
backgroundColor: 'white',
boxShadow: sticky && '0 3px 11px 0 rgba(0,0,0,.06)',
}), 'nav', p => p);
export const Container = styled(({ }) => ({
display: 'flex',
position: 'relative',
minHeight: '100vh',
flexDirection: 'column',
'> :not(:first-child):not(:last-child)': {
flex: 1,
},
}), ({ className, children, innerRef }) => (
<div>
), p => p);
export default class Layout extends Component {
static defaultProps = {
pages: [],
}
render() {</div>import React, { Component } from 'react';
import Footer from './footer';
import MenuController from './header';
import Logo from './logo';
import sortBy from 'lodash/sortBy';
import { Link, NavLink, styled } from 'olymp';
export const Header = styled(
({ sticky }) => ({
backgroundColor: 'white',
boxShadow: sticky && '0 3px 11px 0 rgba(0,0,0,.06)',
}),
'nav',
p => p
);
export const Container = styled(
({}) => ({
display: 'flex',
position: 'relative',
minHeight: '100vh',
flexDirection: 'column',
'> :not(:first-child):not(:last-child)': {
flex: 1,
