JavaScript react-emotion div Examples

Example #1

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';

export const Tab = emotion.div({});

Example #2

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';

import FontAwesomeIcon from '@fortawesome/react-fontawesome';

export const CollapseIcon = emotion(FontAwesomeIcon)({
  color: 'white'
});

export const CollapsibleSection = emotion.div({
  userSelect: 'none',
  cursor: 'default'
});

Example #3

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';
import { colors } from 'styles/colors';

export const Header = emotion.div({
  ...flex.horizontal,
  ...flex.centerHorizontalV,
  ...flex.spaceBetween,
  width: '100%',
  minHeight: 50,
  backgroundColor: colors.purple5,
  padding: 15,
  color: 'white'
});

Example #4

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';

export const File = emotion.div({});

Example #5

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';
import { colors } from 'styles/colors';

export const Footer = emotion.div({
  ...flex.horizontal,
  ...flex.centerHorizontalV,
  height: 25,
  backgroundColor: colors.purple5,
  padding: 15,
  fontSize: 14,
  color: 'white'
});

Example #6

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';
import { noSelect, whiteish } from 'styles/mixins';

export const MiniTabs = emotion.div(
  {
    ...flex.horizontal,
    overflowX: 'auto',
    color: 'white'
  },
  ({ small }) => ({
    ...(small && {
      minHeight: 25,
      height: 25,
      fontSize: 12
    }),
    ...(!small && {
      minHeight: 35
    })
  })
);

const borderColor = whiteish(0.3);
const borderStyle = `1px solid ${borderColor}`;
const borderRadius = 4;

export const Tab = emotion.div(
  {
    ...flex.vertical,
    ...flex.centerVertical,
    ...noSelect,

Example #7

File: BlogIndexLayout.js Project: huchenme/huchenme.github.io

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'react-emotion'

import { presets, colors } from '../utils'
import { Layout } from '.'

const StyledSite = styled.div({
  [presets.Tablet]: {
    background: colors.ui.whisper
  }
})

const BlogIndexLayout = ({ children }) => (
  <StyledSite>
    <Layout>{children}</Layout>
  </StyledSite>
)

BlogIndexLayout.propTypes = {
  children: PropTypes.node
}

export default BlogIndexLayout

Example #8

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';

export const CliGenerator = emotion.div({
  flex: 1,
  ...flex.vertical,
  padding: '25px 25px'
});

export const Title = emotion.div({
  fontSize: 20,
  fontWeight: 600,
  marginBottom: 20
});

export const Subtitle = emotion.div({
  fontSize: 16,
  fontWeight: 300,
  marginBottom: 20
});

export const Form = emotion.div({
  ...flex.vertical
});

Example #9

File: app.js Project: trevorblades/fishsticss

import Tooltip from '@material-ui/core/Tooltip';
import Twemoji from 'react-twemoji';
import TwitterLogo from 'react-icons/lib/fa/twitter';
import Typography from '@material-ui/core/Typography';
import outdent from 'outdent/lib';
import select from 'select';
import styled from 'react-emotion';
import theme from '@trevorblades/mui-theme';
import transformCss from 'transform-css';
import withProps from 'recompose/withProps';
import {atomOneDark} from 'react-syntax-highlighter/styles/hljs';
import {hot} from 'react-hot-loader';

const Container = styled.div({
  display: 'flex',
  flexDirection: 'column',
  height: '100%'
});

const Heading = styled(Typography)({
  marginRight: 'auto',
  img: {
    marginRight: theme.spacing.unit * 1.5
  }
});

const MenuItem = withProps({
  color: 'inherit',
  component: 'a',
  target: 'blank',
  rel: 'noopener noreferrer'

Example #10

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';

export const Settings = emotion.div({
  color: 'rgba(0,0,0,0.5)'
});

export const Content = emotion.div({
  padding: 15
});

export const Title = emotion.div({
  fontWeight: 'bold',
  marginBottom: 15,
  color: 'white',
  fontSize: 20
});

export const Option = {
  Wrap: emotion.div({
    marginBottom: 30
  }),
  Title: emotion.div({
    marginBottom: 5,
    color: 'white',
    fontSize: 15
  }),
  Description: emotion.div({
    color: 'white',
    fontSize: 12
  })
};

Example #11

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';

export const Terminal = emotion.div({
  ...flex.vertical,
  flex: 1,
  backgroundColor: '#1d1d1d',
  color: 'white',
  position: 'relative',
  transition: 'all 200ms linear',
  transform: 'translate(0)',
  ...flex.vertical,
  whiteSpace: 'pre',
  padding: 10,
  lineHeight: '17px',
  fontSize: 13,
  fontWeight: 300
});

Example #12

File: styles.js Project: dfelczak/JSUI

      display: 'none'
    }),
    ...(horizontal && {
      marginRight: 15,
      flex: 1,
      width: 300,
      ...debug()
    })
  })
);

export const ProjectList = emotion.div(
  {
    ...flex.horizontal,
    ...flex.wrap
  },
  ({ horizontal }) => ({
    ...(horizontal && {
      ...flex.vertical,
      alignItems: 'flex-start',
      flex: 1,
      height: '100%',
      maxHeight: '100%',
      overflowY: 'auto',
      flexWrap: 'initial',
      width: '100%'
    })
  })
);

Example #13

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import flex from 'styles/flex';

export const Checkbox = emotion(FontAwesomeIcon)({
  cursor: 'pointer'
});

export const CheckMultipleList = emotion.div({});

export const Name = emotion.div(
  {
    color: 'white',
    fontSize: 14,
    userSelect: 'none',
    cursor: 'default'
  },
  ({ onClick }) => ({
    ...(onClick && {
      cursor: 'pointer'
    })
  })
);

Example #14

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

import flex from 'styles/flex';

export const Branch = emotion.div({
  fontSize: 14,
  ...flex.horizontal,
  ...flex.centerHorizontalV
});

export const Icon = emotion(FontAwesomeIcon)({
  color: 'white',
  marginRight: '5px',
});

Example #15

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';

export const FileEntry = emotion.div({
  ...flex.horizontal,
  ...flex.centerHorizontalV,
  ...flex.spaceBetween,
  flex: 1
});

export const Name = emotion.div({});

export const Path = emotion.div({});

Example #16

File: Layout.js Project: huchenme/huchenme.github.io

import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import styled from 'react-emotion'

import { rhythm } from '../utils'
import { SiteLogo } from '.'

import '../prism-coy'

import '../assets/fonts/Webfonts/futurapt_book_macroman/stylesheet.css'
import '../assets/fonts/Webfonts/futurapt_bookitalic_macroman/stylesheet.css'
import '../assets/fonts/Webfonts/futurapt_demi_macroman/stylesheet.css'
import '../assets/fonts/Webfonts/futurapt_demiitalic_macroman/stylesheet.css'

const LogoWrapper = styled.div({
  paddingTop: rhythm(1.5),
  textAlign: 'center'
})

const Layout = ({ children }) => (
  <React.Fragment>
    <Helmet defaultTitle="Hu Chen">
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
      <link
        href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Serif:400,400i"
        rel="stylesheet"
      />
    </Helmet>
    <LogoWrapper>
      <SiteLogo to="/" />
    </LogoWrapper>

Example #17

File: index.js Project: minimallinux/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';
import { fixedHeight, whiteish } from 'styles/mixins';
import IconWithTip from 'components/IconWithTip';

import { Horizontal as $Horizontal, Vertical as $Vertical } from 'styles/flex-components';

export const Horizontal = $Horizontal;
export const Vertical = $Vertical;

export const DialogContent = emotion.div({
  padding: 15,
  ...flex.vertical,
  flex: 1
});

export const SmallButton = emotion.div({
  ...flex.horizontal,
  ...flex.centerHorizontalH,
  borderRadius: 3,
  padding: `4px 5px`,
  backgroundColor: whiteish(0.3),
  color: 'white',
  fontSize: 10,
  lineHeight: '10px',
  transition: '150ms linear all',
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: whiteish(0.4)
  }
});

Example #18

File: styles.js Project: minimallinux/JSUI

import emotion from 'react-emotion';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { getActionColors, fixedHeight, fixedSize, marginHorizontal } from 'styles/mixins';
import { PROCESS_STATUS } from 'config/enums';
import flex from 'styles/flex';

export const ProcessTab = emotion.div({
  ...flex.horizontal,
  ...flex.centerHorizontal,
  ...flex.spaceBetween,
  width: '100%',
  overflow: 'hidden',
  flex: 1,
  padding: '5px 10px',
  userSelect: 'none'
});

export const CloseIcon = emotion(FontAwesomeIcon)({
  position: 'relative',
  top: 0.5,
  ...fixedHeight(8),
  color: 'white'
});

export const Title = emotion.div({
  ...marginHorizontal(5),
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis'
});

Example #19

File: colors.js Project: huchenme/huchenme.github.io

import React from 'react'
import range from 'lodash/range'
import styled from 'react-emotion'
import { rhythm, options, colors } from '../utils'
import { Container } from '../components'

const Header = styled.h1({
  margin: 0,
  marginLeft: rhythm(1 / 4),
  marginBottom: rhythm(1)
})

const ColorBlock = styled.div(
  {
    height: 30,
    width: 30
  },
  props => ({ background: props.background })
)

const LetterBlock = styled.div({
  height: 30,
  width: 30,
  fontWeight: `bold`,
  fontFamily: options.headerFontFamily.join(`,`)
})

const Col = styled.div({
  float: `left`,
  marginRight: 3,
  textAlign: `center`

Example #20

File: Container.js Project: huchenme/huchenme.github.io

import React from 'react'
import styled from 'react-emotion'
import { presets, rhythm } from '../utils'

const StyledContainer = styled.div({
  maxWidth: rhythm(presets.maxWidth),
  margin: `0 auto`,
  padding: `${rhythm(1.5)} ${rhythm(0.8)}`,
  paddingBottom: rhythm(3.5),
  position: `relative`,
  [presets.Tablet]: {
    padding: `${rhythm(1.5)} ${rhythm(1)}`,
    paddingBottom: rhythm(1.5)
  }
})

const Container = ({ children, className, styles = {} }) => (
  <StyledContainer className={className} style={styles}>
    {children}
  </StyledContainer>
)

export default Container

Example #21

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import flex from 'styles/flex';

export const App = emotion.div({
  ...flex.vertical,
  flex: 1,
  width: '100vw',
  height: '100vh',
  maxHeight: '100vh',
  maxWidth: '100vw',
  overflowY: 'hidden',
  backgroundColor: '#343f55'
});

Example #22

File: styles.js Project: dfelczak/JSUI

import emotion from 'react-emotion';
import { UnControlled as CodeMirror } from 'react-codemirror2';

import flex from 'styles/flex';

export const Dialogs = emotion.div({});

export const Editor = emotion(CodeMirror)({
  ...flex.vertical,
  flex: 1,
  '& .CodeMirror': {
    flex: 1,
    fontSize: 15
  }
});