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

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);

const JobDetailWrapper = styled__default.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__default.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__default.div `
  padding: ${props => props.theme.job.detail.description.padding};
`;
const JobLogo = styled__default.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__default.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__default.span `
  color: ${props => props.theme.job.detail.info.title.color};
  margin-top: 0;
  margin-bottom: 0;
`;
const JobInfo = styled__default.div `
  display: flex;
  flex-wrap: wrap;
`;
const JobInfoItem = styled__default.div `
  color: ${props => props.theme.job.detail.info.company.color};
  margin-right: 0.5rem;
`;
const CardOcccupations = styled__default.div `
  color: ${props => props.theme.job.detail.info.occupations.color};
  margin-top: ${props => props.theme.job.detail.info.occupations.marginTop};
`;
const JobIcon = styled__default.span `
  margin-right: 0.5rem;
`;
const EditWrapp = styled__default.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__default.h2 `
  font-size: ${props => props.theme.job.detail.description.label.fontSize};
  text-transform: ${props => props.theme.job.detail.description.label.textTransform};
`;
const JobActions = styled__default.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__default.div `
  align-items: top center;
`;
const Arrows = styled__default.div `
  max-width: ${props => props.theme.job.detail.maxWidth};
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
`;
const ShrinkedHeader = styled__default.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__default.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__default.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__default.div `
  color: ${props => props.theme.job.detail.shrinkedInfo.company.color};
  font-size: ${props => props.theme.job.detail.shrinkedInfo.company.fontSize};
`;
const FlexSpace = styled__default.div `
  flex: 1 auto;
`;

exports.Arrows = Arrows;
exports.CardOcccupations = CardOcccupations;
exports.CardTitle = CardTitle;
exports.CardTitleWrapper = CardTitleWrapper;
exports.DetailDescription = DetailDescription;
exports.DetailInfo = DetailInfo;
exports.EditWrapp = EditWrapp;
exports.FlexSpace = FlexSpace;
exports.JobActions = JobActions;
exports.JobDetailWrapper = JobDetailWrapper;
exports.JobIcon = JobIcon;
exports.JobInfo = JobInfo;
exports.JobInfoItem = JobInfoItem;
exports.JobLogo = JobLogo;
exports.LabelDescription = LabelDescription;
exports.PictureWrapper = PictureWrapper;
exports.ShrinkedCardCompanyName = ShrinkedCardCompanyName;
exports.ShrinkedCardTitle = ShrinkedCardTitle;
exports.ShrinkedHeader = ShrinkedHeader;
exports.ShrinkedHeaderActions = ShrinkedHeaderActions;