How to use the styled-components/macro.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 cloudkeeper-io / cloudkeeper-ui / src / components / steps-indicator.component.tsx View on Github external
align-items: center;
  box-sizing: initial;
`
const Circle = styled.div<{ active: boolean }>`
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: ${(p) => (p.active ? p.theme.colors.active : p.theme.controls.color)};
  opacity: ${(p) => (p.active ? 0 : 1)};
  transform: translate(-50%,-50%);
  transition: all 0.4s ease-in-out 0s;
`
const Step = styled.div<{ active: boolean, cursor: string }>`
  position: relative;
  width: ${(p) => (p.active ? '24px' : '6px')};
  height: 6px;
  border-radius: 6px;
  padding: 10px 7px;
  transition: width 0.5s ease-in-out 0s;
  cursor: ${(p) => p.cursor};
`
const StepLine = styled.div<{ active: boolean }>`
  height: 6px;
  border-radius: 6px;
  background: ${(p) => p.color || p.theme.controls.activeGradient};
  box-shadow: ${(p) => `0px 6px 12px ${p.active && transparentize(0.6, p.color || p.theme.colors.active)}`};
  opacity: ${(p) => (p.active ? 1 : 0)};
  transition: all 0.5s ease-in-out 0s;
`
github glimberger / react-redux-sequencer / src / components / Sequencer / Track / TrackHeader / TrackHeader.js View on Github external
padding: ${({ gutter }) => gutter}px;
  border-radius: 3px;
  background-color: ${({ color }) => Color.get800(color)};
  color: ${({ color }) => Color.get100(color)};

  &:hover {
    background-color: ${({ color }) => Color.get600(color)};
    color: ${({ color }) => Color.get50(color)};
  }
`

const StyledControls = styled.div`
  display: flex;
`

const GainIndicator = styled.div`
  user-select: none;
  margin-left: 0.5rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  font-size: 13px;
`

const StyledLabelForm = styled.form`
  flex: 1;
  display: flex;
  justify-content: flex-start;

  & input {
github glimberger / react-redux-sequencer / src / components / Sequencer / AddTrack / AddTrackButton.js View on Github external
display: flex;
  justify-content: flex-start;
  align-items: center;
  width: ${({ width }) => width}px;
  height: ${({ height }) => height}px;
  background: ${({ color }) => Color.get800(color)};
  border-radius: 3px;
  color: ${({ color }) => Color.get500(color)};

  &:hover {
    background: ${({ color }) => Color.get700(color)};
    color: ${({ color }) => Color.get100(color)};
  }
`

const StyledButtonLabel = styled.div`
  margin-left: ${({ gutter }) => gutter}px;
  font-size: 16px;
`

function AddTrackButton({ color, onClick }: Props) {
  const { panelWidth, cellSize, gutter } = usePrefs()

  return (
    
      Add...
github glimberger / react-redux-sequencer / src / components / Sequencer / Track / TrackPanel / TrackSettings / GainController / GainController.js View on Github external
gain: $PropertyType,
  activeTrackID: $PropertyType
}

type DispatchProps = {
  changeTrackGain: (trackId: string, gain: number) => void
}

type Props = OwnProps & StateProps & DispatchProps

const StyledGainController = styled.div`
  height: ${({ size }) => size}px;
  padding: ${({ gutter }) => gutter}px;
`

const GainIndicator = styled.div`
  user-select: none;
  text-align: center;
  color: ${({ color }) => Color.get100(color)};
  font-size: 11px;
`

function GainController({
  color,
  size,
  gutter,
  gain,
  activeTrackID,
  changeTrackGain
}: Props) {
  if (!activeTrackID) return <div>
</div>
github bchiang7 / spotify-profile / client / src / components / Track.js View on Github external
font-size: 20px;
  `};
  ${media.phablet`
    text-align: center !important;
  `};
`;
const Album = styled.h3`
  color: ${colors.lightGrey};
  font-weight: 400;
  font-size: 16px;
`;
const AudioFeatures = styled.div`
  ${mixins.flexCenter};
  flex-direction: column;
`;
const Features = styled.div`
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  width: 100%;
  margin-bottom: 50px;
  text-align: center;
  border-top: 1px solid ${colors.grey};
  border-left: 1px solid ${colors.grey};
  ${media.thone`
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  `};
  ${media.phablet`
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  `};
`;
const Feature = styled.div`
  padding: 15px 10px;
github mmazzarolo / chrome-another-tab / src / components / BookmarkListFolder.tsx View on Github external
const Title = styled.p`
  color: ${(props: { theme: Theme }) => props.theme.folderColor};
  font-size: 19px;
  font-weight: 500;
  display: inline-block;
`;

const Content = styled.ul`
  display: grid;
  grid-gap: 12px 20px;
  grid-template-columns: repeat(auto-fit, 260px);
  grid-auto-rows: 54px;
  padding-left: 0;
`;

const Options = styled.div`
  margin-left: 6px;
`;
github HamishMW / portfolio-2018 / src / components / Header.js View on Github external
const HeaderNav = styled.nav`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 1 auto;
  max-width: 45px;
  position: relative;
  top: -10px;

  @media (max-width: ${media.mobile}), (max-height: ${media.mobile}) {
    display: none;
  }
`;

const HeaderNavList = styled.div`
  transform: rotate(-90deg) translate3d(-50%, 0, 0);
  display: flex;
  flex-direction: row-reverse;
`;

const HeaderNavLink = styled(NavLink)`
  padding: 20px;
  color: ${props => rgba(props.theme.colorText, 0.8)};
  text-decoration: none;
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease 0.1s;
  line-height: 1;

  &:hover,
  &:active,
github leonardodino / forex-web-app / src / components / Exchange / Inputs.tsx View on Github external
import Container from '../Container'
import CurrencySelector from './CurrencySelector'
import InputFormatter from './InputFormatter'

const Wrapper = styled.div`
  ${base}
  padding: 1.5rem 0;
  width: 100%;
`

const StyledContainer = styled(Container)`
  display: flex;
  justify-content: space-between;
`

const RelativeWrapper = styled.div`
  position: relative;
  flex: 1 1 auto;
  margin-left: 1rem;
`

const Input = styled.input`
  ${base}
  display: block;
  width: 100%;
  outline: none;
  appearance: none;
  caret-color: currentColor;
  padding: 0;
  text-align: right;
  border: 0px solid transparent;
  border-radius: ${borderRadius};