jobiqo-cl/lib/src/components/02-atoms/01-forms/02-checkbox/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 Checkbox = styled__default.input `
  opacity: 0;
  & + label::after {
    content: none;
  }
  &:checked + label::after {
    content: '';
  }
  &:checked + label::before {
    background: ${props => props.theme.checkbox.arrow.inversedBackground
    ? props.theme.colors[props.checkboxStyle]
    : props.theme.colors.white};
    border-color: ${props => props.theme.checkbox.arrow.inversedBackground
    ? props.theme.colors[props.checkboxStyle]
    : 'inherit'};
  }
  &:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
  }
`;
const CheckboxLabel = styled__default.label `
  position: relative;
  display: inline-block;
  padding-left: ${props => props.theme.checkbox.paddingLeft};
  line-height: ${props => props.theme.checkbox.lineHeight};
  left: -1rem;

  ${props => (props.error ? `color: ${props.theme.colors.danger};` : ``)}

  opacity: ${props => (props.disabled ? 0.5 : 1)};

  &::before,
  &::after {
    position: absolute;
    content: '';
    display: inline-block;
  }

  &::before {
    background: ${props => props.theme.checkbox.arrow.background};
    height: ${props => props.theme.checkbox.height};
    width: ${props => props.theme.checkbox.width};
    border-radius: ${props => props.theme.input.borderRadius};
    border-width: ${props => props.theme.input.borderWidth};
    border-style: ${props => props.theme.input.borderStyle};
    border-color: ${props => props.theme.input.borderColor};
    left: 0px;
    top: 0;
  }

  &::after {
    height: ${props => props.theme.checkbox.arrow.height};
    width: ${props => props.theme.checkbox.arrow.width};
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: ${props => props.theme.checkbox.arrow.inversedBackground
    ? props.theme.button.color[props.checkboxStyle]
    : props.theme.colors[props.checkboxStyle]};
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: ${props => props.theme.checkbox.arrow.inversedBackground
    ? props.theme.button.color[props.checkboxStyle]
    : props.theme.colors[props.checkboxStyle]};
    transform: rotate(-45deg);
    left: ${props => props.theme.checkbox.arrow.left};
    top: ${props => props.theme.checkbox.arrow.top};
  }
`;
const CheckboxRequiredMark = styled__default.span `
  margin-left: 0.5rem;
  color: ${props => props.theme.colors.danger};
`;
const CheckboxWrapper = styled__default.div `
  display: flex;
  height: auto;
`;

exports.Checkbox = Checkbox;
exports.CheckboxLabel = CheckboxLabel;
exports.CheckboxRequiredMark = CheckboxRequiredMark;
exports.CheckboxWrapper = CheckboxWrapper;