How to use the styled-components.figure 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 warsawjs / topics-manager / src / topic / components / Participants.js View on Github external
// eslint-disable-next-line no-console
                        console.log('Mouse leave - Index:', i, 'Event:', e);
                    }
                }}
            />
            
        
    );
};

Participants.propTypes = {
    topic: PropTypes.instanceOf(TopicModel).isRequired,
    likes: PropTypes.number,
};

const StyledParticipants = styled.figure`
    flex: 1;
`;

export default Participants;
github buttercup / buttercup-desktop / src / renderer / components / empty-view.js View on Github external
// Load illustrations
const requireTest = require.context(
  '../styles/img/illustrations',
  true,
  /\/\d+\.svg$/
);
console.log(requireTest.keys());
const illustrations = requireTest.keys().map(requireTest);

const Caption = styled.figcaption`
  color: var(--gray-dark);
  font-weight: 300;
`;

const Figure = styled.figure`
  text-align: center;
`;

const EmptyView = ({ caption, imageSrc, className }) => {
  return (
    
      <figure>
        {imageSrc &amp;&amp; <img src="{imageSrc}">}
        {caption}
      </figure>
    
  );
};

EmptyView.propTypes = {
  caption: PropTypes.string,
github rosoftdeveloper / appseed / jamstack / gatsbyjs-absurd / src / components / sections / Header.js View on Github external
)}
  /&gt;
);

const HeaderWrapper = styled.header`
  background-color: ${props =&gt; props.theme.color.primary};
  padding-top: 96px;

  @media (max-width: ${props =&gt; props.theme.screen.md}) {
    padding-top: 128px;
  }
`;

const Art = styled.figure`
  width: 100%;
  margin: 0;

  &gt; div {
    width: 120%;
    margin-bottom: -4.5%;

    @media (max-width: ${props =&gt; props.theme.screen.md}) {
      width: 100%;
    }
  }
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
github joshwcomeau / react-boston-2018 / src / components / Planet / PlanetMoon.js View on Github external
transform-style: preserve-3d;
  will-change: transform;
`;

const Moon = styled.div`
  position: absolute;
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform-style: preserve-3d;
`;

const Side = styled.figure`
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: white;
`;

const Top = styled(Side)`
  transform: rotateY(0deg) translateZ(${p => p.radius}px);
  background: ${props => props.color};
`;
const Bottom = styled(Side)`
  transform: rotateX(180deg) translateZ(${p => p.radius}px);
  background: ${props => props.color};
`;
github deskfiler / deskfiler / src / main-renderer / containers / Plugins / Plugin / styled / index.js View on Github external
align-items: center;
  background: white;
  font-size: 20px;
  padding: 16px 0;
  height: 100%;
  transition: .5s ease;
  position: relative;
  overflow: hidden;
`;

export const AppFigureWrapper = styled.div`
  width: 50vw;
  height: 190px;
`;

export const AppFigure = styled.figure`
  border-radius: 50%;
  padding: 3px;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
  background-color: #fff;
`;

export const AppIcon = styled.img`
  width: 50%;
  object-fit: scale-down;
  padding: 2px;
  flex: 0 0 75%;
`;
github warsawjs / topics-manager / src / topic / components / TopicDescription.js View on Github external
import React from 'react';
import PropTypes from 'prop-types';
import Colors from '../../styles/Colors';
import Text from '../../components/Text';
import styled from 'styled-components';

const TopicDescription = props =&gt; (
    
        
        
    
);

const StyledTopicDescription = styled.figure`
    flex: 2;
`;

TopicDescription.propTypes = {
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
};

export default TopicDescription;
github joincivil / Civil / packages / dapp / src / components / header / styledComponents.tsx View on Github external
`;

export const HandleContainer = styled.div`
  margin-right: 16px;

  ${mediaQueries.MOBILE_SMALL} {
    display: inline;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 75px;
    margin-right: 8px;
  }
`;

export const UserAvatarFigure = styled.figure`
  background-color: ${colors.accent.CIVIL_TEAL};
  border: 2px solid ${colors.basic.WHITE};
  border-radius: 50%;
  height: 36px;
  margin: 0 8px 0 0;
  width: 36px;
`;

export const UserAvatar = styled.img`
  border-radius: 50%;
  height: 36px;
  margin: 0 8px 0 0;
  width: 36px;
`;

export const Arrow = styled.div`
github n6g7 / redux-saga-firebase / example / src / components / molecules / Example.js View on Github external
import { Snippet } from '@atoms'

const StyledExample = styled.article`
  background: ${p => p.theme.colour.example};
  color: white;
  padding: ${p => 4 * p.theme.spacing}px 0 0;
`

const Title = styled.h2`
  font-size: 20px;
  font-weight: normal;
  margin: 0 0 ${p => 3 * p.theme.spacing}px;
`

const Snippets = styled.figure`
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  margin: ${p => 4 * p.theme.spacing}px 0 0;
`

const StyledSnippet = styled(Snippet)`
  flex-grow: 1;
  width: 30%;
`

class Example extends PureComponent {
  static propTypes = {
    children: PropTypes.node.isRequired,
    snippets: PropTypes.arrayOf(PropTypes.string).isRequired,
    title: PropTypes.string.isRequired,
github M0nica / React-Ladies / src / components / sections / Join.js View on Github external
&:last-child {
      margin-bottom: 24px;
    }

    ${props =>
      props.inverse &&
      `
        ${Art} {
          order: 2;
        }
    `};
  }
`;

const Art = styled.figure`
  margin: 0;
  max-width: 380px;
  width: 100%;
`;

export default Join;
github joincivil / Civil / packages / components / src / ListingDetailHeader / ListingDetailHeaderStyledComponents.tsx View on Github external
background: ${colors.primary.BLACK};
  display: flex;
  justify-content: center;
`;

export const StyledListingDetailHeader = styled.div`
  color: ${colors.basic.WHITE};
  font-family: ${fonts.SANS_SERIF};
  padding: 24px 0 62px;

  ${mediaQueries.MOBILE} {
    padding: 30px 20px 42px;
  }
`;

export const StyledNewsroomIcon = styled.figure`
  margin: 0 30px 0 0;
  min-width: 130px;
  padding-top: 50px;

  ${mediaQueries.MOBILE} {
    margin: 45px auto;
    padding: 0;
  }
`;

export const StyledNewsroomLogo = styled.span`
  img {
    height: 130px;
    min-width: 130px;
    min-height: 130px;
    object-fit: contain;