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

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject6() {var data = _taggedTemplateLiteral(["\n  ", "\n"]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n  width: 100%;\n  max-width: 115px;\n  height: 21px;\n  border-radius: 11px;\n  background-color: ", ";\n  margin: 0 auto;\n"]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n  transition: padding 0.5s ease-in-out;\n  padding: ", ";\n"]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 36px;\n  max-height: ", ";\n  overflow: ", ";\n\n  background: ", ";\n\n  position: relative;\n\n  .theme-card__header-icon-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    position: absolute;\n\n    left: calc(50% - 21px);\n    bottom: -21px;\n\n    width: 42px;\n    height: 42px;\n\n    border: solid 1px ", ";\n    border-radius: 50%;\n\n    overflow: hidden;\n\n    background-color: #e4e9f2;\n  }\n\n  transition: max-height 0.5s ease-in-out;\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n          width: 128px;\n          height: 105px;\n\n          border-radius: 4px;\n          border: solid 1px #e4e9f2;\n\n          overflow: hidden;\n        "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  max-width: 128px;\n\n  ", "\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Icon } from "./..";
import styled, { css } from "styled-components";
var ThemeCardWrapper = styled.div(_templateObject(),


function (_ref) {var isShort = _ref.isShort;
  return !isShort ?
  css(_templateObject2()) :








  "";
});

var ThemeCardHeader = styled.div(_templateObject3(),


function (_ref2) {var isShort = _ref2.isShort;return isShort ? 0 : "36px";},
function (_ref3) {var isShort = _ref3.isShort;return isShort ? "hidden" : "visible";},

function (_ref4) {var color = _ref4.color;return color ? color : "black";},
















function (_ref5) {var color = _ref5.color;return color ? color : "black";});









var ThemeCardBodyWrapper = styled.div(_templateObject4(),

function (_ref6) {var isShort = _ref6.isShort;return isShort ? 0 : "30px 15px 15px 15px";});

var ThemeCardBody = styled.div(_templateObject5(),




function (_ref7) {var color = _ref7.color;return color ? color : "black";});


var ThemeCardComponent = function ThemeCardComponent(props) {var
    isShort = props.isShort,primaryColor = props.primaryColor,primaryBtnColor = props.primaryBtnColor;
  return /*#__PURE__*/React.createElement(ThemeCardWrapper, { isShort: isShort, className: "theme-card__wrapper ".concat(isShort ? "theme-card__wrapper_short" : "") }, /*#__PURE__*/
  React.createElement(ThemeCardHeader, { color: primaryColor, isShort: isShort, className: "theme-card__header" }, /*#__PURE__*/
  React.createElement("div", { className: "theme-card__header-icon-wrapper" }, /*#__PURE__*/
  React.createElement(Icon, { group: "filled", fill: "white", name: "image-landscape", width: 19, viewBox: "0 0 19 19" }))), /*#__PURE__*/
  React.createElement(ThemeCardBodyWrapper, { isShort: isShort, className: "theme-card__body-wrapper" }, /*#__PURE__*/
  React.createElement(ThemeCardBody, { color: primaryBtnColor, className: "theme-card__body" })));
};
export default styled(function (props) {
  return /*#__PURE__*/React.createElement(ThemeCardComponent, _extends({}, props));
})(_templateObject6(),
function (_ref8) {var customStyle = _ref8.customStyle;return customStyle ? customStyle() : "";});

//# sourceMappingURL=index.js.map