@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
45 lines (32 loc) • 2.68 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n ", "\n "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", "\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import Fab from "@material-ui/core/Fab";
import DownIcon from "@material-ui/icons/KeyboardArrowDown";
import styled, { css } from "styled-components";
export default styled(function (_ref) {var icon = _ref.icon,customStyle = _ref.customStyle,expanded = _ref.expanded,rest = _objectWithoutProperties(_ref, ["icon", "customStyle", "expanded"]);return /*#__PURE__*/React.createElement(Fab, _extends({}, rest), icon || /*#__PURE__*/React.createElement(DownIcon, { className: "fab-icon" }));})(_templateObject(),
function (_ref2) {var size = _ref2.size;return !size || size === "small" || size === "tiny" ? "font-size: 12px" : "";},
function (_ref3) {var size = _ref3.size;return size === "tiny" ? "padding: 0.24em 0.68em !important" : "";},
function (_ref4) {var size = _ref4.size;return size === "small" ?
"width:32px; height: 32px; min-width: 32px; min-height: 32px;padding: 0 !important;" :
"";},
function (props) {return props.size === "medium" ? "font-size: 14px" : "";},
function (props) {
var customStyle = props.customStyle || "";var
palette = props.palette;
var themePalette = props.theme.palette[palette];
customStyle = customStyle.concat("\n .fab-icon {\n transition: transform .25s linear;\n transform: ".concat(
props.expanded ? "rotate(180deg)" : "rotate(0)", ";\n }\n "));
if (palette) {
customStyle = customStyle.concat("\n padding: 0.48em 1.32em;\n background-color: ".concat(
themePalette.main, ";\n border: 1px solid ").concat(
themePalette.border || themePalette.main, ";\n color: ").concat(
themePalette.contrastText, ";\n box-shadow: none;\n\n transition: ").concat(
props.theme.transitions.create([
"background-color",
"box-shadow"]), ";\n &:hover {\n background-color: ").concat(
props.theme.palette.colors.basic[500], ";\n @media (hover:none): { background-color: ").concat(
themePalette.main, " }\n }"));
}
return css(_templateObject2(),
customStyle);
});
//# sourceMappingURL=index.js.map