JavaScript react/styles/functions preset Beispiele

Beispiel #1

Datei: index.js Projekt: broskoski/ervell

import styled, { css } from 'styled-components';
import { lineHeight } from 'styled-system';

import { preset } from 'react/styles/functions';

import inputMixin from 'react/components/UI/Inputs/mixin';

export const mixin = css`
  ${inputMixin}
  ${preset(lineHeight, { lineHeight: 1 })}
  resize: ${props => props.resize};
`;

const Textarea = styled.textarea`
  ${mixin}
`;

Textarea.defaultProps = {
  resize: 'vertical',
};

export default Textarea;

Beispiel #2

Datei: index.js Projekt: broskoski/ervell

    transition-delay: ${ANIMATION_DELAY}ms;
  `};

  ${({ disabled }) =>
    disabled &&
    `
    pointer-events: none!important;
  `};
`;

const FadingBlockWrapper = styled.div`
  opacity: 0;
  pointer-events: none;
  transition: opacity ${ANIMATION_PERIOD}ms ease-in-out;
  ${space}
  ${preset(space, { my: 4 })}

  ${({ hasText }) =>
    hasText &&
    `
    opacity: 1;
    pointer-events: all;
    transition-delay: ${ANIMATION_DELAY}ms;
  `};
`;

class CreateChannel extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

Beispiel #3

Datei: index.js Projekt: broskoski/ervell

  fontSize,
  lineHeight,
  textAlign,
  width,
  minWidth,
  maxWidth,
  themeGet,
  alignItems,
  justifyContent,
} from 'styled-system';

import { preset } from 'react/styles/functions';
import { antialiased, neutralMarginsY, hyphenate, breakWord, overflowEllipsis } from 'react/styles/mixins';

export const baseMixin = css`
  ${preset(fontFamily, { font: 'sans' })}
  ${preset(fontSize, { f: 4 })}
  ${preset(lineHeight, { lineHeight: 1 })}
  ${preset(textColor, { color: 'gray.base' })}
  ${antialiased}
`;

export const mixin = css`
  box-sizing: border-box;
  ${baseMixin}
  ${display}
  ${width}
  ${minWidth}
  ${maxWidth}
  ${space}
  ${fontWeight}

Beispiel #4

Datei: index.js Projekt: broskoski/ervell

import { propType } from 'graphql-anywhere';
import styled from 'styled-components';
import { textColor, fontFamily } from 'styled-system';

import Avatar from 'react/components/UI/Avatar';

import { preset } from 'react/styles/functions';
import { antialiased } from 'react/styles/mixins';

import userAvatarFragment from 'react/components/UserAvatar/fragments/userAvatar';

const Initials = styled.div`
  font-size: ${x => x.size / 3}px;
  color: ${x => x.theme.colors.gray.medium};
  text-transform: uppercase;
  ${preset(fontFamily, { font: 'sans' })}
  ${preset(textColor, { color: 'gray.base' })}
  ${antialiased}
`;

const Image = styled.img`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
`;

export default class UserAvatar extends Component {

Beispiel #5

Datei: index.js Projekt: broskoski/ervell

import constants from 'react/styles/constants';

import { preset } from 'react/styles/functions';

import { fractional } from 'react/styles/mixins';

const Container = styled.span`
  position: relative;
  display: inline-block;
  margin-left: ${x => x.theme.space[4]};
  background-color: ${x => x.theme.colors.gray.light};
  border-radius: ${constants.radii.subtle};
  width: 1.33em;
  line-height: 1;
  ${preset(space, { ml: 3 })}
  ${fractional}

  // Right-facing Caret
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-top: 0.25em solid transparent;
    border-right: 0;
    border-bottom: 0.25em solid transparent;