@multiplay/ui/dist/forms/inputField/_styles.js

UI kit for Unity and Multiplay applications

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FieldIcon = exports.ErrorMessage = exports.Helper = exports.Label = exports.Input = exports.InputWrapperOutlined = exports.InputWrapper = exports.Wrapper = undefined;

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _colours = require('../../helpers/colours');

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

var Wrapper = exports.Wrapper = _styledComponents2.default.div.withConfig({
  displayName: '_styles__Wrapper',
  componentId: 'sc-178v2d0-0'
})(['width:100%;padding:', ';'], function (_ref) {
  var outlined = _ref.outlined;
  return outlined ? '8px 0 0' : '18px 0 0';
});

// HELPERS
var InputWrapper = exports.InputWrapper = _styledComponents2.default.div.withConfig({
  displayName: '_styles__InputWrapper',
  componentId: 'sc-178v2d0-1'
})(['display:flex;align-items:center;position:relative;border-bottom:', ';&:hover{border-bottom:', ';}&:after{left:0;right:0;bottom:-1px;content:\'\';position:absolute;transition:transform 200ms cubic-bezier(0.0,0,0.2,1) 0ms;border-bottom:2px solid ', ';pointer-events:none;', '}'], function (_ref2) {
  var skin = _ref2.skin,
      disabled = _ref2.disabled;

  if (disabled) return '1px  dotted ' + (skin === 'light' ? (0, _colours.lightenColour)(_colours.colours.stone, 0.15) : _colours.colours.darkGrey);
  return '1px solid ' + _colours.colours.stone;
}, function (_ref3) {
  var disabled = _ref3.disabled,
      theme = _ref3.theme;
  return !disabled ? '1px solid ' + theme.font : '';
}, function (_ref4) {
  var theme = _ref4.theme,
      error = _ref4.error;
  return !error ? theme.secondary : theme.error;
}, function (_ref5) {
  var active = _ref5.active,
      error = _ref5.error,
      disabled = _ref5.disabled,
      theme = _ref5.theme;

  if (active && !disabled) {
    return 'transform: scaleX(1);';
  }
  if (error && !disabled) {
    return '\n        border-bottom: 1px solid ' + theme.error + ';\n        transform: scaleX(1);\n      ';
  }
  return 'transform: scaleX(0);';
});

var InputWrapperOutlined = exports.InputWrapperOutlined = _styledComponents2.default.div.withConfig({
  displayName: '_styles__InputWrapperOutlined',
  componentId: 'sc-178v2d0-2'
})(['display:flex;position:relative;align-items:center;height:50px;&:before{transition:border 200ms cubic-bezier(0.0,0,0.2,1) 0ms;border-radius:4px;display:flex;content:\'\';position:absolute;left:0;top:0;width:100%;height:100%;border:', ';}', ''], function (_ref6) {
  var disabled = _ref6.disabled,
      error = _ref6.error,
      active = _ref6.active,
      theme = _ref6.theme;

  if (disabled) {
    return '1px  dotted ' + (0, _colours.lightenColour)(_colours.colours.stone, 0.15);
  }
  if (active) {
    return '2px solid ' + (!error ? theme.secondary : theme.error) + ' !important';
  }
  if (error) {
    return '1px solid ' + theme.error;
  }
  return '1px solid ' + _colours.colours.stone;
}, function (_ref7) {
  var disabled = _ref7.disabled,
      theme = _ref7.theme;

  if (!disabled) {
    return '\n        &:hover {\n          &:before {\n            border: 1px solid ' + theme.font + ';\n          }\n        }\n      ';
  }
  return 'cursor: not-allowed';
});

var Input = exports.Input = _styledComponents2.default.input.withConfig({
  displayName: '_styles__Input',
  componentId: 'sc-178v2d0-3'
})(['height:', ';border-radius:0px;color:', ';background:none;border:none;width:100%;font-size:18px;position:relative;display:flex;', ';&:focus,&:active{outline:none;}&[disabled]{cursor:not-allowed;color:', ';}'], function (_ref8) {
  var outlined = _ref8.outlined;
  return outlined ? '100%' : '34px';
}, function (_ref9) {
  var theme = _ref9.theme,
      skin = _ref9.skin;
  return skin === 'light' ? theme.font : '#fff';
}, function (_ref10) {
  var outlined = _ref10.outlined,
      hasIcon = _ref10.hasIcon;

  if (outlined && hasIcon) {
    return 'padding: 0 15px 0 44px';
  }
  if (outlined) return 'padding: 0 15px';
  if (hasIcon) return 'padding: 0 0 0 29px';
  return '';
}, function (_ref11) {
  var skin = _ref11.skin;
  return skin === 'light' ? _colours.colours.darkGrey : _colours.colours.stone;
});

var Label = exports.Label = _styledComponents2.default.label.withConfig({
  displayName: '_styles__Label',
  componentId: 'sc-178v2d0-4'
})(['font-size:18px;top:0;left:0;padding:', ';background:', ';position:absolute;transition:color 200ms cubic-bezier(0.0,0,0.2,1) 0ms,transform 200ms cubic-bezier(0.0,0,0.2,1) 0ms;color:', ';', ' color:', ';'], function (_ref12) {
  var outlined = _ref12.outlined;
  return outlined ? '0 3px' : 0;
}, function (_ref13) {
  var outlined = _ref13.outlined;
  return outlined ? '#fff' : 'none';
}, _colours.colours.stone, function (_ref14) {
  var active = _ref14.active,
      hasValue = _ref14.hasValue,
      outlined = _ref14.outlined,
      hasIcon = _ref14.hasIcon;

  if (active || hasValue) {
    return '\n        transform: translate(' + (outlined ? '14px, -9px' : '0, -17px') + ') scale(0.8);\n        transform-origin: top left;\n      ';
  }
  if (hasIcon) {
    return 'transform: translate(' + (outlined ? '43px, 13px' : '29px, 6px') + ') scale(1);';
  }
  return 'transform: translate(' + (outlined ? '14px, 13px' : '0, 6px') + ') scale(1);';
}, function (_ref15) {
  var theme = _ref15.theme,
      skin = _ref15.skin,
      active = _ref15.active,
      error = _ref15.error,
      disabled = _ref15.disabled;

  if (disabled) return skin === 'light' ? (0, _colours.lightenColour)(_colours.colours.stone, 0.15) : _colours.colours.darkGrey;
  if (error) return theme.error;
  if (active) return theme.secondary;
  return _colours.colours.stone;
});

var Helper = exports.Helper = _styledComponents2.default.span.withConfig({
  displayName: '_styles__Helper',
  componentId: 'sc-178v2d0-5'
})(['width:100%;margin:', ';display:block;font-size:14px;color:', ';'], function (_ref16) {
  var outlined = _ref16.outlined;
  return outlined ? '8px 0 0 17px' : '8px 0 0';
}, function (_ref17) {
  var disabled = _ref17.disabled,
      skin = _ref17.skin;

  if (!disabled) {
    return _colours.colours.stone;
  }
  return skin === 'light' ? (0, _colours.lightenColour)(_colours.colours.stone, 0.15) : _colours.colours.darkGrey;
});

var ErrorMessage = exports.ErrorMessage = _styledComponents2.default.span.withConfig({
  displayName: '_styles__ErrorMessage',
  componentId: 'sc-178v2d0-6'
})(['width:100%;margin:', ';display:block;font-size:14px;color:', ';'], function (_ref18) {
  var outlined = _ref18.outlined;
  return outlined ? '8px 0 0 17px' : '8px 0 0';
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.error;
});

var FieldIcon = exports.FieldIcon = _styledComponents2.default.div.withConfig({
  displayName: '_styles__FieldIcon',
  componentId: 'sc-178v2d0-7'
})(['position:absolute;left:', ';top:', ';path{fill:', ' !important;}'], function (_ref20) {
  var outlined = _ref20.outlined;
  return outlined ? '14px' : 0;
}, function (_ref21) {
  var outlined = _ref21.outlined;
  return outlined ? '13px' : '6px';
}, function (_ref22) {
  var skin = _ref22.skin,
      disabled = _ref22.disabled;

  if (disabled) {
    return skin === 'light' ? (0, _colours.lightenColour)(_colours.colours.stone, 0.15) : _colours.colours.darkGrey;
  }
  return _colours.colours.stone;
});