ultra-design/lib/input/input-style.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var react = require('@emotion/react');
var fade = require('../utils/fade.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);

var _templateObject, _templateObject2;
var inputStyles = function inputStyles(props) {
  var theme = props.theme;
  var _theme$style = theme.style,
      primaryColor = _theme$style.primaryColor,
      radius = _theme$style.radius;
  var _theme$theme$mode = theme[theme.mode],
      borderColor = _theme$theme$mode.borderColor,
      backgroundColor = _theme$theme$mode.backgroundColor,
      textColor = _theme$theme$mode.textColor,
      disabledBgColor = _theme$theme$mode.disabledBgColor,
      disabledTextColor = _theme$theme$mode.disabledTextColor;
  return react.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n    margin: 0;\n    list-style: none;\n    position: relative;\n    display: inline-flex;\n    width: inherit;\n    padding: 7px 11px;\n    color: ", ";\n    background-color: ", ";\n    background-image: none;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    transition: all 0.3s;\n    &.ultra-input--focused {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n    &.ultra-input--disabled {\n      cursor: not-allowed;\n      background-color: ", ";\n      color: ", ";\n      box-shadow: none;\n      input {\n        flex: 1;\n        cursor: not-allowed;\n        color: ", ";\n      }\n    }\n    &:not(&.ultra-input--disabled):hover {\n      border-color: ", ";\n    }\n    input {\n      width: 100%;\n      padding: 0;\n      border: none;\n      outline: none;\n      background-color: transparent;\n      color: ", ";\n    }\n\n    .ultra-icon {\n      display: inline-flex;\n    }\n\n    .ultra-input__icon {\n      display: flex;\n      align-items: center;\n    }\n\n    .ultra-input__clear {\n      display: flex;\n      align-items: center;\n      cursor: pointer;\n    }\n  "])), textColor, backgroundColor, borderColor, radius, primaryColor, fade.fade(primaryColor, 0.2), disabledBgColor, disabledTextColor, disabledTextColor, primaryColor, textColor);
};
var inputWithLabelStyles = function inputWithLabelStyles(props) {
  var theme = props.theme;
  var textColor = theme[theme.mode].textColor;
  return react.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    flex: 1;\n    font-size: 14px;\n    display: flex;\n    color: ", ";\n\n    .ultra-input__label {\n      width: initial;\n      white-space: nowrap;\n      display: flex;\n      align-items: center;\n      margin-right: 10px;\n    }\n  "])), textColor);
};

exports.inputStyles = inputStyles;
exports.inputWithLabelStyles = inputWithLabelStyles;