How to use the styled-components.div function in styled-components

To help you get started, we’ve selected a few styled-components 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 jgcmarins / react-native-cryptocurrency / src / Thanks.js View on Github external
import React from 'react';
import styled from 'styled-components'
import { space, width, fontSize, color } from 'styled-system';

// Add styled-system functions to your component
const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`;

export const Root = styled.div([], {
  width: '50vw',
  height: '70vh',
});

const SpaceBetween = styled.div`
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

const ThanksText = styled.span`
  font-size: 50px;
  color: #ffffff;
`;
github telus / tds-community / packages / SideNavigation / SideNavigation.jsx View on Github external
top: '0px',
  width: 'inherit',
  clear: 'both',
}

const bottomPosition = {
  position: 'absolute',
  bottom: '0px',
}

const fixedOverflow = {
  overflowY: 'auto',
  bottom: '0px',
}

const NavContainer = styled.div(props => ({
  ...(props.variant === 'top' && topPosition),
  ...(props.variant === 'bottom' && bottomPosition),
  ...(props.variant === 'fixed' && fixedPosition),
  ...(props.variant === 'fixedOverflow' && {
    ...fixedPosition,
    ...fixedOverflow,
  }),
}))

const StyledUl = styled.ul({
  listStyle: 'none',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-around',
  margin: '0',
  borderTop: `1px solid ${colorGainsboro}`,
github scaleflex / filerobot-image-editor / dist / styledComponents / Toolbar.ui.js View on Github external
return props.theme.colors.dark.base;
});

var ToolWrapper = styled.div(_templateObject2, function (props) {
  return props.theme.colors.text.base;
}, function (props) {
  return props.tt || 'capitalize';
}, function (props) {
  return props.active ? props.theme.colors.primary.lighter : 'inherit';
}, function (props) {
  return props.theme.colors.text.light;
}, function (props) {
  return props.theme.colors.primary.lighter;
});

var ToolIcon = styled.div(_templateObject3, function (props) {
  return getIconStyles(props);
}, function (props) {
  return getIconByName(props.name);
});

var ToolLabel = styled.div(_templateObject4);

var EffectsWrapper = styled.div(_templateObject5);

var EffectWrapper = styled.div(_templateObject6, function (props) {
  return props.theme.textColor;
}, function (props) {
  return props.theme.colors.primary.lighter;
});

var EffectIcon = styled.div(_templateObject7, function (props) {
github EddyVinck / ConfTalks / client / components / TalkList / TalkListLayout.tsx View on Github external
import styled from "styled-components";

const TalkListLayout = styled.div({
  display: "flex",
  flexDirection: "column",
  alignItems: "flex-start",
  ".talk-list": {
    flex: "0 1 100%"
  },
  aside: {
    flex: "0 0 100%"
  },
  ".join-community": {
    display: "none"
  },
  "@media (min-width: 800px)": {
    flexDirection: "row",
    aside: {
      marginRight: "4rem",
github telus / tds-core / packages / ExpandCollapse / PanelWrapper / PanelWrapper.jsx View on Github external
const HeaderSubtextContainer = styled.div({ lineHeight: '1px' })

const TertiaryTextAlignmentContainer = styled.div({
  ...media.until('md').css({
    alignSelf: 'flex-end',
  }),
})

const ShowFromMd = styled.div({
  display: 'none',
  ...media.from('md').css({
    display: 'inline-block',
  }),
})

const ShowUntilMd = styled.div({
  display: 'inline-block',
  ...media.from('md').css({
    display: 'none',
  }),
})

class PanelWrapper extends React.Component {
  constructor(props) {
    super(props)

    this.contentWrapper = null
  }

  state = {
    open: this.props.open,
    hover: false,
github AndreasFaust / react-sled / dist / index.es.js View on Github external
height: '100%'
      }
    });
  }));
};

function _templateObject$3() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  pointer-events: none;\n"]);

  _templateObject$3 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledRail = styled.div(_templateObject$3());

var SledProgressRail = function SledProgressRail(_ref) {
  var style = _ref.style;
  return React.createElement(StyledRail, {
    className: "sled-progress-rail"
  });
};

function getX(viewCount, currentIndex) {
  var goPrevNext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  return 100 - 100 / viewCount * (currentIndex + goPrevNext);
}

var SledProgressTrack = function SledProgressTrack() {
  var _useStateContext = useStateContext(),
      _useStateContext2 = _slicedToArray(_useStateContext, 1),
github 8th713 / cockpit-for-pixiv / packages / core / components / Modal.tsx View on Github external
)

const Backdrop = styled.div(
  extend({
    position: 'sticky',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    bg: 'surface',
    opacity: themeGet('opacities.disabled')
  }),
  sx
)

const ScrollView = styled.div(
  extend({
    pointerEvents: 'none',
    position: 'absolute',
    top: 0,
    left: 0,
    overflow: 'auto',
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    height: '100%'
  })
)

if (__DEV__) {
  Dialog.displayName = 'Modal.Root'
  Backdrop.displayName = 'Modal.Backdrop'
github telus / tds-community / packages / Testimonial / Testimonial.jsx View on Github external
import React from 'react'
import PropTypes from 'prop-types'
import Box from '@tds/core-box'
import Paragraph from '@tds/core-paragraph'
import Heading from '@tds/core-heading'
import { safeRest } from '@tds/util-helpers'
import { componentWithName } from '@tds/util-prop-types'
import { media } from '@tds/core-responsive'
import styled from 'styled-components'

const StyledImageAndQuote = styled.div({
  display: 'flex',
  flexDirection: 'column',

  ...media.from('sm').css({
    flexDirection: 'row',
    alignItems: 'center',
  }),
})

const StyledImage = styled.div({
  fontSize: 0,
  marginBottom: '1rem',
  maxWidth: '60px',
  maxHeight: '60px',

  ...media.from('sm').css({
github 8th713 / cockpit-for-pixiv / packages / core / components / Box.tsx View on Github external
import styled from 'styled-components'
import { extend, sx, SxProps } from './utils'

export interface BoxProps extends SxProps {}

export const Box = styled.div(extend({}), sx)

export const Flex = styled.div(extend({ display: 'flex' }), sx)

export const Grid = styled.div(extend({ display: 'grid' }), sx)

if (__DEV__) {
  Box.displayName = 'Box'
  Flex.displayName = 'Flex'
  Grid.displayName = 'Grid'
}
github scaleflex / filerobot-image-editor / dist / styledComponents / Footer.ui.js View on Github external
return props.theme.colors.primary.light;
});

var PreviousBtn = styled.div(_templateObject2, function (props) {
  return getIconStyles(props);
}, getIconByName('previous'), function (props) {
  return getActionIconStyle(props);
});

var NextBtn = styled.div(_templateObject2, function (props) {
  return getIconStyles(props);
}, getIconByName('next'), function (props) {
  return getActionIconStyle(props);
});

var SwitcherWrapper = styled.div(_templateObject3);

var SwitcherInput = styled.input(_templateObject4);

var SwitcherLabel = styled.label(_templateObject5);

var SwitcherInner = styled.span(_templateObject6, function (props) {
  return props.checked ? '0' : '-100%';
});

var SwitcherSwitch = styled.span(_templateObject7, function (props) {
  return props.checked ? '#36464d' : '#36464d';
}, function (props) {
  return props.checked ? '0' : '37px';
});

var SwitcherBlock = styled.div(_templateObject8);