ui-neu/dist/components/buttons/Button.js

Neu UI, a responsive React component library.

import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\nbackground: red;\ncolor: white;\npadding: 0.375rem 0.75rem;\nbackground-color: rgba(204, 218, 226, 0.349);\nbox-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.2),\n  -8px -8px 16px 0 rgba(255, 255, 255, 0.5);\nfont-size: ", ";\npadding: 0.375rem 0.75rem;\nborder-radius: 0.75rem;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nborder: none;\noutline: none;\ncolor: rgb(139, 139, 139);\nline-height: 1.5;\n\n&:active {\n  box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n  inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n}\n\n&:hover {\n  color: rgba(139, 139, 139, 0.788);\n  cursor: pointer;\n}\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from "react";
// styled components is a tool that enables you to write your css in js, check docs
import styled from "styled-components"; // using the styled object

var StyledButton = styled.button(_templateObject(), function (props) {
  return props.size === "small" ? "1rem" : "1.5rem";
});
export var Button = function Button(_ref) {
  var size = _ref.size,
      children = _ref.children;
  return /*#__PURE__*/React.createElement(StyledButton, {
    size: size
  }, children);
};
Button.defaultProps = {
  children: null,
  size: "small"
};