@multiplay/ui/dist/molecules/button/_styles.js

UI kit for Unity and Multiplay applications

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonWrapper = undefined;

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _lodash = require('lodash');

var _themes = require('../../helpers/themes');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var getColour = function getColour(_ref) {
  var props = _ref.props,
      property = _ref.property;

  var themes = (0, _themes.buttonThemes)(props.theme);
  return (0, _lodash.get)(themes, props.skin + '.' + property);
};

// HELPERS
var ButtonWrapper = exports.ButtonWrapper = _styledComponents2.default.button.withConfig({
  displayName: '_styles__ButtonWrapper',
  componentId: 'pg4tr-0'
})(['display:flex;background-color:', ';border:1px solid ', ';color:', ';transition:all 0.3s linear;position:relative;justify-content:', ';box-shadow:', ';align-items:center;cursor:pointer;text-decoration:none;path{transition:fill 0.3s linear;fill:', ' !important;}&:disabled{background-color:', ' !important;border:1px solid ', ';color:', ';opacity:0.6;pointer-events:auto;cursor:not-allowed;path{fill:', ' !important;}}&:focus{outline:none}&:hover:not([disabled]){border:1px solid  ', ';background:', ';}&.active,&:hover:not([disabled]){color:', ';path{fill:', ' !important;}}', ''], function (props) {
  return getColour({ property: 'background', props: props });
}, function (props) {
  return getColour({ property: 'border', props: props });
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'background', props: props }) : getColour({ property: 'color', props: props });
}, function (_ref2) {
  var align = _ref2.align;
  return align;
}, function (_ref3) {
  var shadow = _ref3.shadow;
  return shadow;
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'background', props: props }) : getColour({ property: 'color', props: props });
}, function (props) {
  return getColour({ property: 'background', props: props });
}, function (props) {
  return getColour({ property: 'border', props: props });
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'background', props: props }) : getColour({ property: 'color', props: props });
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'background', props: props }) : getColour({ property: 'color', props: props });
}, function (props) {
  return getColour({ property: 'borderHov', props: props });
}, function (props) {
  return getColour({ property: 'backgroundHov', props: props });
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'backgroundHov', props: props }) : getColour({ property: 'colorHov', props: props });
}, function (props) {
  return props.loading === 'true' ? getColour({ property: 'backgroundHov', props: props }) : getColour({ property: 'colorHov', props: props });
}, function (_ref4) {
  var size = _ref4.size;

  var style = 'height: 50px; font-size: 16px; padding: 0 20px;';
  if (size === 'medium') {
    style = 'height: 45px; font-size: 15px; padding: 0 15px;';
  } else if (size === 'small') {
    style = 'height: 40px; font-size: 14px; padding: 0 10px;';
  }
  return style;
});