qilin-components/form/button/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 Button = _styledComponents.default.button`
  display: flex;
  align-items: center;
  justify-content: center;

  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};

  font-size: 0.85rem;
  font-weight: 500;

  padding: 0.25rem 0.75rem;
  margin: 0.5rem;

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

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

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

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