@fluent-windows/core/Input/Input.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var PADDING_RIGHT = 34;

var wrapper = function wrapper(theme) {
  return function (props) {
    return _objectSpread({
      display: 'inline-block',
      position: 'relative',
      minWidth: 180,
      '& > span': _objectSpread({
        fontWeight: 600,
        position: 'absolute',
        left: 0,
        top: 0,
        cursor: 'text',
        transition: theme.transitions.inputLabel,
        transformOrigin: 'top left'
      }, theme.sizes.medium.inputLabel, {
        color: props.focus ? theme.colors.black["default"] : theme.colors.standard.dark2
      }, (props.focus || props._value) && theme.sizes.medium.inputLabelFocus),
      '& > div': {
        margin: '0 !important'
      }
    }, !props.disabled && {
      '&:hover': {
        '& input': {
          borderColor: theme.colors.standard.transparent1
        }
      }
    });
  };
};

var disabled = {
  cursor: 'not-allowed'
};

var root = function root(theme) {
  return function (props) {
    return _objectSpread({
      boxSizing: 'border-box',
      outline: 'none',
      font: 'inherit',
      width: '100%',
      borderRadius: 2,
      border: '2px solid',
      borderColor: 'transparent',
      transition: theme.transitions.input,
      backgroundColor: theme.colors.standard.light2,
      '&::placeholder': _objectSpread({
        transition: theme.transitions.input
      }, !props.disabled && {
        color: 'transparent'
      }),
      '&:active, &:focus': _objectSpread({
        borderColor: "".concat(props.error ? '' : theme.colors.black["default"], " ").concat(props.disabled ? '' : '!important'),
        backgroundColor: theme.colors.white["default"]
      }, !props.disabled && {
        '&::placeholder': {
          color: theme.colors.standard.dark2
        }
      }),
      '&:disabled': {
        color: theme.colors.standard.dark3,
        backgroundColor: theme.colors.standard["default"],
        borderColor: theme.colors.standard["default"],
        pointerEvents: 'none'
      }
    }, props.label ? theme.sizes.medium.inputWithLabel : theme.sizes.medium.input, {
      '&:not(:last-child)': {
        paddingRight: PADDING_RIGHT
      }
    });
  };
};

var error = function error(theme) {
  return {
    borderColor: "".concat(theme.colors.error["default"], " !important"),
    '&:hover': {
      borderColor: "".concat(theme.colors.error["default"], " !important")
    },
    '&:active, &:focus': {
      borderColor: "".concat(theme.colors.error["default"], " !important")
    }
  };
};

var extra = function extra(theme) {
  return {
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: theme.colors.standard.transparent3
  };
};

var clearedIcon = function clearedIcon(theme) {
  return _objectSpread({}, extra(theme), {
    right: 6
  });
};

var suffix = function suffix(theme) {
  return _objectSpread({}, extra(theme), {
    right: 6
  });
};

var ghost = function ghost(theme) {
  return {
    backgroundColor: "".concat(theme.colors.standard.transparent1, " !important"),
    borderColor: theme.colors.standard.transparent1,
    '&:hover': {
      borderColor: theme.colors.standard.transparent2
    },
    '&:active, &:focus': {
      borderColor: theme.colors.standard.transparent3
    }
  };
};

var styles = function styles(theme) {
  return {
    wrapper: wrapper(theme),
    disabled: disabled,
    root: root(theme),
    error: error(theme),
    clearedIcon: clearedIcon(theme),
    suffix: suffix(theme),
    ghost: ghost(theme)
  };
};

exports.styles = styles;