@makeen.io/material-ui-kit/distr/atoms/Button/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject4() {var data = _taggedTemplateLiteral(["\n      padding: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      @media (hover: none) {\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      &:active {\n        background-color: ", ";\n      }\n\n      .icon {\n        height: ", ";\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding-right: ", ";\n        padding-left: ", ";\n      }\n\n      .icon > *:first-child {\n        font-size: ", ";\n        height: ", ";\n        width: ", ";\n      }\n\n      ", ";\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n          margin-left: 0;\n          margin-right: 0;\n        "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n          width: 100%;\n        "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  font-weight: bold;\n  letter-spacing: normal;\n  text-align: center;\n  text-transform: none;\n\n  ", "\n\n  ", "\n\n  .icon {\n    display: inherit;\n  }\n\n  ", ";\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import MuiButton from "@material-ui/core/Button";
import styled, { css } from "styled-components";
var getPadding = function getPadding(props, selectedSize) {var
  padding = selectedSize.padding;
  if (props.rightIcon) {
    padding = selectedSize.paddingWithRightIcon;
  }
  if (props.leftIcon) {
    padding = selectedSize.paddingWithLeftIcon;
  }
  if (props.square || props.oval) {
    padding = selectedSize.squarePadding;
  }
  return padding;
};
export default styled(function (_ref) {var children = _ref.children,size = _ref.size,palette = _ref.palette,buttonTheme = _ref.buttonTheme,customStyle = _ref.customStyle,oval = _ref.oval,square = _ref.square,theme = _ref.theme,transparent = _ref.transparent,leftIcon = _ref.leftIcon,rightIcon = _ref.rightIcon,fullWidth = _ref.fullWidth,rest = _objectWithoutProperties(_ref, ["children", "size", "palette", "buttonTheme", "customStyle", "oval", "square", "theme", "transparent", "leftIcon", "rightIcon", "fullWidth"]);
  return /*#__PURE__*/React.createElement(MuiButton, _extends({}, rest),
  leftIcon && /*#__PURE__*/React.createElement("span", { className: "icon left-icon" }, leftIcon),
  !square && !oval && children,
  rightIcon && !leftIcon && /*#__PURE__*/React.createElement("span", { className: "icon right-icon" }, rightIcon));
})(_templateObject(),





function (_ref2) {var fullWidth = _ref2.fullWidth;
  return fullWidth ?
  css(_templateObject2()) :


  "";
},

function (_ref3) {var removeSideMargin = _ref3.removeSideMargin;
  return removeSideMargin ?
  css(_templateObject3()) :



  "";
},





function (props) {
  var customStyle = props.customStyle && props.customStyle() || "";
  var selectedSizeName = props.size || "medium";
  var selectedSize = props.theme.sizes.button[selectedSizeName];
  var padding = getPadding(props, selectedSize);var
  palette = props.theme.palette;
  var buttonTheme = props.buttonTheme || "main";
  var paletteName = props.palette || "primary";
  var buttonColors = palette["".concat(buttonTheme, "ButtonColors")][paletteName] ||
  palette["".concat(buttonTheme, "ButtonColors")].primary;
  if (props.buttonTheme === "outline") {
    buttonColors = palette.outlineButtonColors;
    customStyle += "\n        box-shadow: 0 0 0 1px ".concat(
    buttonColors.boxShadowColor, ";\n\n        .icon {\n          color: ").concat(


    buttonColors.iconColor, ";\n        }\n      ");


  }
  if (props.disabled) {
    buttonColors = palette.disabledButtonColors;
    customStyle += "\n       .MuiButton-label {\n        opacity: ".concat(

    buttonColors.labelOpacity, ";\n       }\n      ");


  }
  if (props.square || props.oval) {
    customStyle += "\n        min-width: ".concat(
    selectedSize.squareWidth, ";\n\n        .icon {\n          padding-right: 0;\n          padding-left: 0;\n        }\n      ");






  }
  return css(_templateObject4(),
  padding,
  selectedSize.fontSize,
  selectedSize.lineHeight,
  buttonColors.color,
  props.transparent ?
  "transparent" :
  buttonColors.backgroundColor,
  props.oval ? "50%" : "4px",



  props.transparent ?
  "transparent" :
  buttonColors.backgroundColorOnHover,





  props.transparent ?
  "transparent" :
  buttonColors.backgroundColor,




  props.transparent ?
  "transparent" :
  buttonColors.backgroundColorOnPressed,



  selectedSize.iconLineHeight,



  props.leftIcon ? selectedSize.paddingFromIcon : 0,
  props.rightIcon ? selectedSize.paddingFromIcon : 0,



  selectedSize.iconFontSize,
  selectedSize.iconHeight,
  selectedSize.iconWidth,


  customStyle);

});

//# sourceMappingURL=index.js.map