JavaScript v2/styles/functions preset Examples

Example #1

File: index.js Project: arenahq/ervell

  pointer-events: none;
`

const TargetOverlay = styled.div`
  position: fixed;
  ${top}
  ${right}
  ${bottom}
  ${left}
  ${width}
  ${height}
`

const Wrapper = styled.div`
  box-sizing: border-box;
  ${preset(position, { position: 'absolute' })}
  ${top}
  ${right}
  ${bottom}
  ${left}
  ${width}
  ${height}
  pointer-events: all;
`

export default class Overlay extends PureComponent {
  static propTypes = {
    children: PropTypes.node.isRequired,
    onClose: PropTypes.func,
    targetEl: PropTypes.func.isRequired,
    anchorY: PropTypes.oneOf(['top', 'bottom']),

Example #2

File: index.js Project: arenahq/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 = {

Example #3

File: index.js Project: arenahq/ervell

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

import Avatar from 'v2/components/UI/Avatar'

import { preset } from 'v2/styles/functions'
import { antialiased } from 'v2/styles/mixins'

import userAvatarFragment from 'v2/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 {

Example #4

File: index.js Project: arenahq/ervell

  border-left: 1px solid ${x => x.theme.colors.gray.regular};
  border-right: 1px solid ${x => x.theme.colors.gray.regular};
  border-bottom: 1px solid ${x => x.theme.colors.gray.hint};
  color: ${x => x.theme.colors.gray.bold};
  background-color: ${x => x.theme.colors.gray.hint};
`

const Label = styled.div.attrs({ fontSize: 3 })`
  text-align: center;
  border: 1px solid transparent;
  border-top: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  font-weight: bold;

  ${preset(space, { pt: 5, pb: 6, px: 9 })};
  ${baseMixin};

  ${x => x.active && activeMixin};
`

export default class Tab extends Component {
  static propTypes = {
    label: PropTypes.string.isRequired,
    onTabClick: PropTypes.func.isRequired,
    active: PropTypes.bool,
  }

  static defaultProps = {
    active: false,
  }

Example #5

File: index.js Project: arenahq/ervell

    color: ${color};
    border-color: ${color === defaultColor ? defaultBorderColor : color};
  `
}

export const mixin = css`
  all: initial;
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-family: ${x => x.theme.fonts.sans};
  border-top: 1px solid;
  cursor: pointer;
  ${preset(space, { pt: 5, pb: 6, px: 5 })}
  ${preset(fontSize, { f: 4 })}
  ${buttonColor}
  ${antialiased}

  ${x => x.hover && hoverMixin}
  &:hover { ${hoverMixin} }

  ${x => x.active && activeMixin}
  &:active { ${activeMixin} }

  ${x => x.disabled && disabledMixin}
`

export const DividerButton = styled.button`
  ${mixin}