jobiqo-cl/lib/src/components/02-atoms/01-forms/01-button/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 polished_es = require('../../../../../node_modules/polished/dist/polished.es.js');
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$2 = require('../../../../../node_modules/@styled-system/color/dist/index.esm.js');
var index_esm = require('../../../../../node_modules/styled-system/dist/index.esm.js');

const Button = styled__default.button `
	position: relative;
	font-size: ${props => props.theme.button.fontSize};
	text-transform: ${props => props.theme.button.textTransform};
	letter-spacing: ${props => props.theme.button.letterSpacing};
	padding: ${props => props.theme.button.padding};
	height: ${props => props.theme.button.height};
	border-radius: ${props => props.theme.button.borderRadius};
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;

	${props => (props.iconed ? `padding: ${props.theme.button.paddingIconed};` : ``)}

	${props => props.fab
    ? `
	border-radius:50%;
	width: ${props.theme.button.height};`
    : ``}

	${props => props.buttonStyle && props.raised
    ? `
          color: ${props.theme.button.color[props.buttonStyle]};
          background: ${props.theme.button.backgroundColor[props.buttonStyle]};
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: ${props.theme.button.borderColor[props.buttonStyle]};
          &:focus,
          &:active {
            background: ${polished_es.darken(0.1, props.theme.button.backgroundColor[props.buttonStyle])};
          }`
    : ``};

	${props => props.buttonStyle && !props.raised
    ? `
          color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          background: transparent;
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: transparent;
          &:focus,
          &:active {
            background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
            outline: none;
            border-color: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          }
          `
    : ``};

	${props => props.buttonStyle && props.bordered
    ? `
          color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          border-width: ${props.theme.button.borderWidth};
          border-style: ${props.theme.button.borderStyle};
          border-color: ${props.theme.button.backgroundColor[props.buttonStyle]};
          &:focus,
          &:active {
            background: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
            outline: none;
            border-color: ${props.theme.button.soft.backgroundColor[props.buttonStyle]};
          }
          `
    : ``};

	${props => (!props.buttonStyle && props.color ? [index_esm$2.color, index_esm.borderStyle, index_esm.borderWidth, index_esm.borderRadius, index_esm.borderColor] : ``)};

	svg:last-child:not(:only-child) {
		margin-left: 1rem;
	}

	svg:first-child:not(:only-child) {
		margin-right: 1rem;
	}

	${props => (props.block ? 'width: 100%;' : '')}

	&:disabled {
		opacity: ${props => props.theme.button.hoverOpacity};
	}
`;

exports.Button = Button;