jobiqo-cl/lib/es/src/components/04-organisms/03-job/01-detail/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

const JobDetailWrapper = styled.div `
  align-items: flex-start;
  justify-content: center;
  max-width: ${props => (props.fullContainer ? '100%' : 'auto')};
  height: ${props => (props.fullContainer ? '100%' : 'auto')};
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding: 0;
`;
const DetailInfo = styled.div `
  position: relative;
  padding: ${props => props.theme.job.detail.info.padding};
  border-width: ${props => props.theme.job.detail.info.borderWidth};
  border-style: ${props => props.theme.job.detail.info.borderStyle};
  border-color: ${props => props.theme.job.detail.info.borderColor};
  ${props => props.theme.mediaQueries.small} {
    display: grid;
    grid-template-columns: auto minmax(50%, 1fr) 1fr;
  }
`;
const DetailDescription = styled.div `
  padding: ${props => props.theme.job.detail.description.padding};
`;
const JobLogo = styled.img `
  width: ${props => props.theme.job.detail.logo.maxWidth};
  height: auto;
  border-width: ${props => props.theme.job.detail.logo.borderWidth};
  border-style: ${props => props.theme.job.detail.logo.borderStyle};
  border-color: ${props => props.theme.job.detail.logo.borderColor};
  margin-right: 1rem;
`;
const CardTitleWrapper = styled.div `
  h1,
  h2,
  h3 {
    margin: 0%;
    font-size: ${props => props.theme.job.detail.info.title.mobile.fontSize};
    margin-bottom: 1rem;
    margin-top: 1rem;
    ${props => props.theme.mediaQueries.small} {
      margin-top: 0;
      font-size: ${props => props.theme.job.detail.info.title.fontSize};
    }
  }
`;
const CardTitle = styled.span `
  color: ${props => props.theme.job.detail.info.title.color};
  margin-top: 0;
  margin-bottom: 0;
`;
const JobInfo = styled.div `
  display: flex;
  flex-wrap: wrap;
`;
const JobInfoItem = styled.div `
  color: ${props => props.theme.job.detail.info.company.color};
  margin-right: 0.5rem;
`;
const CardOcccupations = styled.div `
  color: ${props => props.theme.job.detail.info.occupations.color};
  margin-top: ${props => props.theme.job.detail.info.occupations.marginTop};
`;
const JobIcon = styled.span `
  margin-right: 0.5rem;
`;
const EditWrapp = styled.div `
  position: absolute;
  top: 1rem;
  right: 1rem;
  ${props => props.theme.mediaQueries.small} {
    justify-self: flex-end;
  }

  a {
    color: ${props => props.theme.colors.gray4};
  }
`;
const LabelDescription = styled.h2 `
  font-size: ${props => props.theme.job.detail.description.label.fontSize};
  text-transform: ${props => props.theme.job.detail.description.label.textTransform};
`;
const JobActions = styled.div `
  grid-row-start: 1;
  grid-column-start: 3;
  grid-column-end: 4;
  margin-top: 1rem;

  & > div {
    display: flex;
    flex-wrap: wrap;
    ${props => props.theme.mediaQueries.small} {
      justify-content: flex-end;
    }
    align-items: center;
    a,
    button {
      margin-right: 0.5rem;
      margin-top: 0.5rem;
      ${props => props.theme.mediaQueries.smallRevert} {
        width: 100%;
      }
    }
  }
`;
const PictureWrapper = styled.div `
  align-items: top center;
`;
const Arrows = styled.div `
  max-width: ${props => props.theme.job.detail.maxWidth};
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
`;
const ShrinkedHeader = styled.div `
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  z-index: 10;
  top: ${props => props.theme.job.detail.shrinkedInfo.top};
  bottom: ${props => props.theme.job.detail.shrinkedInfo.bottom};
  left: ${props => props.theme.job.detail.shrinkedInfo.left};
  right: ${props => props.theme.job.detail.shrinkedInfo.right};
  background: ${props => props.theme.job.detail.shrinkedInfo.background};
  padding: ${props => props.theme.job.detail.shrinkedInfo.padding};
  box-shadow: ${props => props.theme.job.detail.shrinkedInfo.boxShadow};
  border-width: ${props => props.theme.job.detail.shrinkedInfo.borderWidth};
  border-style: ${props => props.theme.job.detail.shrinkedInfo.borderStyle};
  border-color: ${props => props.theme.job.detail.shrinkedInfo.borderColor};

  img {
    max-height: ${props => props.theme.job.detail.shrinkedInfo.imageMaxWidth};
    width: auto;
  }
`;
const ShrinkedHeaderActions = styled.div `
  & > div {
    display: flex;
    flex-wrap: wrap;

    button {
      margin-right: 0.5rem;
      span {
        display: none;
      }
      svg:first-child:not(:only-child) {
        margin: 0;
      }
    }
  }
`;
const ShrinkedCardTitle = styled.div `
  color: ${props => props.theme.job.detail.shrinkedInfo.title.color};
  font-size: ${props => props.theme.job.detail.shrinkedInfo.title.fontSize};
  margin-right: 1rem;
`;
const ShrinkedCardCompanyName = styled.div `
  color: ${props => props.theme.job.detail.shrinkedInfo.company.color};
  font-size: ${props => props.theme.job.detail.shrinkedInfo.company.fontSize};
`;
const FlexSpace = styled.div `
  flex: 1 auto;
`;

export { Arrows, CardOcccupations, CardTitle, CardTitleWrapper, DetailDescription, DetailInfo, EditWrapp, FlexSpace, JobActions, JobDetailWrapper, JobIcon, JobInfo, JobInfoItem, JobLogo, LabelDescription, PictureWrapper, ShrinkedCardCompanyName, ShrinkedCardTitle, ShrinkedHeader, ShrinkedHeaderActions };