qilin-components/form/input/index.js

Components used by Qilin editor and Qilin plugins

"use strict";

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styledIs = _interopRequireDefault(require("styled-is"));

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

const Input = _styledComponents.default.input`
  &::placeholder {
    opacity: 0.75;
  }

  display: flex;
  align-items: center;
  justify-content: center;

  width: 90%;

  outline: none;
  cursor: pointer;

  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: ${props => props.theme.border};

  background-color: ${props => props.theme.background};
  color: ${props => props.theme.foreground};

  line-height: 1.5;
  font-size: 0.85rem;
  font-weight: 400;

  padding: 0.5rem;
  margin: 0.5rem 0;

  &:focus {
    border-color: ${props => props.theme.caret};
    box-shadow: 0 0 0 1px ${props => props.theme.caret};
  }

  ${(0, _styledIs.default)("large")`
    font-size: 1rem;
    padding: 0.85rem;
  `};

  ${(0, _styledIs.default)("small")`
    font-size: .65rem;
    padding: 0.35rem;
  `};

  ${(0, _styledIs.default)("inline")`
    display: inline-flex;
    width: auto;
  `};

  -webkit-app-region: no-drag;
  appearance: textfield;
`;
var _default = Input;
exports.default = _default;