How to use olymp-fela - 10 common examples

To help you get started, we’ve selected a few olymp-fela 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.

github olymp / olymp / packages / collection / views / detail.tsx View on Github external
} else if (field.type.name === 'Image') {
      // if image => own group
      result[label || upperFirst(field.name)] = [field];
    } else {
      // Group
      const group = field['@'].detail ? field['@'].detail.arg0 : 'Allgemein';

      if (!result[group]) {
        result[group] = [];
      }
      result[group].push(field);
    }
    return result;
  }, {});

const Flex = createComponent(
  ({ theme }) => ({
    paddingTop: theme.space3,
    paddingX: theme.space3,
    hasFlex: {
      display: 'flex',
      flexDirection: 'column',
    },
    '> ul': {
      zIndex: 1,
    },
    '> form': {
      overflow: 'auto',
    },
  }),
  'div',
  []
github olymp / olymp / packages / athena-gz / blocks / magazin.tsx View on Github external
({ theme }) => ({
    paddingY: theme.space3,
    borderBottom: border(theme, theme.dark4),
    onHover: {
      // backgroundColor: theme.dark5,
    },
    ':last-of-type': {
      marginBottom: theme.space3,
    },
  }),
  'li',
github olymp / olymp / packages / cms-gz / blocks / magazin.es6 View on Github external
({ theme }) => ({
    paddingY: theme.space3,
    borderBottom: border(theme, theme.dark4),
    onHover: {
      // backgroundColor: theme.dark5,
    },
    ':last-of-type': {
      marginBottom: theme.space3,
    },
  }),
  'li',
github olymp / olymp / external / ui / modal.es6 View on Github external
padding: theme.space1,
            '> .ant-btn': {
              flex: '1 1 auto',
              margin: theme.space1
            }
          }
        }
      }
    }
  }),
  Modal,
  p => Object.keys(p)
);

// Copyright
component.Copyright = createComponent(
  ({ theme }) => ({
    position: 'fixed',
    bottom: 10,
    textAlign: 'center',
    right: 0,
    left: 0,
    '> a': {
      color: 'white',
      opacity: 0.3,
      onHover: {
        opacity: 1
      }
    }
  }),
  'div'
);
github olymp / olymp / packages / cms-gz / blocks / article.es6 View on Github external
width: 'container',
    size: 'small',
    children: [
      {
        width: '100%',
        height: 50,
      },
      {
        width: '100%',
        height: 800,
      },
    ],
  },
];
const Label = Blocks.ImageBlockLabel.component;
const Container = createComponent(
  ContainerBlock.styles,
  ContainerBlock.component,
  p => Object.keys(p),
);
const Inner = withEdit('article')(p =&gt; <div>);

const Peak = createComponent(
  props =&gt; ({
    ...ImageStyles(props),
    marginBottom: props.theme.space3,
  }),
  ({ className, header, subheader, value, title }) =&gt; (
    <div>
      </div></div>
github olymp / olymp / packages / athena-gz / blocks / news-detail / block.tsx View on Github external
children: [
      {
        width: '100%',
        height: 50,
      },
      {
        width: '100%',
        height: 800,
      },
    ],
  },
];

const Header = HeaderBlock.component;

const Container = createComponent(
  ({ theme }) =&gt; ({
    ...ContainerBlock.styles({ theme }),
    paddingTop: theme.space3,
  }),
  ContainerBlock.component,
  p =&gt; Object.keys(p)
);

const Slate = withBlockTypes(props =&gt; );

const Content = createComponent(
  ({ theme }) =&gt; ({
    paddingLeft: theme.space3,
  }),
  p =&gt; ,
  p =&gt; Object.keys(p)
github olymp / olymp / packages / athena-gz / blocks / article / block.tsx View on Github external
size: 'small',
    children: [
      {
        width: '100%',
        height: 50,
      },
      {
        width: '100%',
        height: 800,
      },
    ],
  },
];
const Label = Blocks.ImageBlockLabel.component;
const Header = HeaderBlock.component;
const Container = createComponent(
  ContainerBlock.styles,
  ContainerBlock.component,
  p =&gt; Object.keys(p)
);
const Slate = withBlockTypes(props =&gt; );

const Peak = createComponent(
  props =&gt; ({
    ...ImageStyles(props),
    marginBottom: props.theme.space3,
  }),
  ({ className, header, subheader, value, title }) =&gt;
    <div>
      </div>
github olymp / olymp / packages / athena-gz / blocks / org / block.tsx View on Github external
},
          {
            height: 400,
          },
        ],
      },
      {
        medium: 7,
        height: 800,
      },
    ],
  },
];
const Label = Blocks.ImageBlockLabel.component;
const Header = HeaderBlock.component;
const Container = createComponent(
  ContainerBlock.styles,
  ContainerBlock.component,
  p =&gt; Object.keys(p)
);
const Slate = withBlockTypes(props =&gt; );

const Content = createComponent(
  ({ theme }) =&gt; ({
    width: '100%',
    paddingX: theme.space5,
    '&amp; img': {
      borderRadius: theme.borderRadius,
    },
    ifSmallDown: {
      paddingX: theme.space3,
    },
github olymp / olymp / external / fela / menu / divider.es6 View on Github external
({ theme }) => ({
    width: '100%',
    border: 'none',
    borderTop: border(theme, theme.dark4),
  }),
  'hr',
github olymp / olymp / packages / ui / list / filter.es6 View on Github external
({ theme }) =&gt; ({
    padding: theme.space2,
    borderBottom: border(theme, theme.dark5),
    backgroundColor: theme.dark5,
  }),
  p =&gt; ,

olymp-fela

MIT
Latest version published 7 years ago

Package Health Score

43 / 100
Full package analysis

Popular olymp-fela functions

Similar packages