jobiqo-cl/lib/src/components/04-organisms/02-actions/02-box-selectable/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);
var index$2 = require('../../../02-atoms/07-box/index.js');

const WrappButton = styled__default.button `
  &:hover,
  &:focus,
  &:active {
    outline: none;
  }
`;
const SelectableBox = styled__default(index$2.default) `
  position: relative;
  cursor: pointer;
  padding: ${props => props.theme.boxSelectable.padding};
  border-radius: ${props => props.theme.boxSelectable.borderRadius};
  opacity: ${props => props.selected
    ? props.theme.boxSelectable.active.opacity
    : props.theme.boxSelectable.opacity};
  box-shadow: ${props => props.selected
    ? `${props.theme.colors[props.color]} ${props.theme.boxSelectable.active.boxShadowVal}`
    : 'none'};
  background: ${props => props.selected
    ? props.theme.boxSelectable.active.background
    : props.theme.boxSelectable.background};
  border-width: ${props => props.theme.boxSelectable.borderWidth};
  border-style: ${props => props.theme.boxSelectable.borderStyle};
  border-color: ${props => props.theme.boxSelectable.borderColor};
  color: ${props => props.selected ? props.theme.colors[props.color] : 'inherit'};
  font-weight: ${props => props.selected ? props.theme.boxSelectable.active.fontWeight : 'inherit'};
`;
const MiddleIcon = styled__default.span `
  svg {
    height: 3rem;
    width: auto;
    fill: ${props => props.theme.colors[props.color]};
    stroke: ${props => props.theme.colors[props.color]};
  }
`;
const CheckCircle = styled__default.div `
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 2px solid #dedede;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: ${props => props.selected ? props.theme.colors[props.color] : 'inherit'};
  border-color: ${props => props.selected ? props.theme.colors[props.color] : 'inherit'};
  box-shadow: ${props => props.selected
    ? `${props.theme.colors[props.color]} ${props.theme.boxSelectable.active.boxShadowVal}`
    : 'none'};

  svg {
    fill: ${props => props.selected ? props.theme.boxSelectable.active.iconColor : 'inherit'};
  }
`;
const StyledCheckIcon = styled__default.span `
  svg {
    height: 1rem;
    width: auto;
  }
`;

exports.CheckCircle = CheckCircle;
exports.MiddleIcon = MiddleIcon;
exports.SelectableBox = SelectableBox;
exports.StyledCheckIcon = StyledCheckIcon;
exports.WrappButton = WrappButton;