calcite-react/Card/Card-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledCardTitle = exports.StyledCardImageCaption = exports.StyledCardImage = exports.StyledCardImageWrap = exports.StyledCardContent = exports.StyledCard = void 0;

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

var _Elements = require("../Elements");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledCard = _styledComponents.default.div.withConfig({
  displayName: "StyledCard",
  componentId: "sc-1mtjaok-0"
})(["display:flex;flex-direction:column;position:relative;background:", ";box-shadow:0 0 0 1px ", ",", ";border-radius:", ";", ";", ";", ";"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.transparentOffWhite;
}, function (props) {
  return props.theme.boxShadow;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.wide && (0, _styledComponents.css)(["flex-direction:row;"]);
}, function (props) {
  return props.bar && (0, _styledComponents.css)(["border-top:3px solid ", ";"], props.theme.palette[props.bar] || props.theme.palette.blue);
}, function (props) {
  return props.shaped && (0, _styledComponents.css)(["box-shadow:none;background:transparent;"]);
});

exports.StyledCard = StyledCard;
StyledCard.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledCardContent = _styledComponents.default.div.withConfig({
  displayName: "StyledCardContent",
  componentId: "sc-1mtjaok-1"
})(["padding:1rem;display:flex;flex-direction:column;flex:1 1 auto;word-wrap:break-word;", ";", ";"], function (props) {
  return props.wide && (0, _styledComponents.css)(["display:block;flex:1 1 75%;"]);
}, function (props) {
  return props.shaped && (0, _styledComponents.css)(["border:1px solid ", ";box-shadow:", ";padding-top:4rem;border-radius:", ";"], function (props) {
    return props.theme.palette.transparentOffWhite;
  }, function (props) {
    return props.theme.boxShadow;
  }, function (props) {
    return props.theme.borderRadius;
  });
});

exports.StyledCardContent = StyledCardContent;
StyledCardContent.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledCardImageWrap = (0, _styledComponents.default)(_Elements.CalciteFigure).withConfig({
  displayName: "StyledCardImageWrap",
  componentId: "sc-1mtjaok-2"
})(["width:100%;position:relative;margin-bottom:0;flex:0 0 auto;", ";", ";"], function (props) {
  return props.shaped && (0, _styledComponents.css)(["margin-bottom:-3rem;padding:0 1.25rem;box-sizing:border-box;"]);
}, function (props) {
  return props.wide && (0, _styledComponents.css)(["position:relative;top:0;left:0;bottom:0;width:25%;overflow:hidden;margin-bottom:0;"]);
});
exports.StyledCardImageWrap = StyledCardImageWrap;
StyledCardImageWrap.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledCardImage = _styledComponents.default.img.withConfig({
  displayName: "StyledCardImage",
  componentId: "sc-1mtjaok-3"
})(["width:100%;display:block;", ";"], function (props) {
  return props.wide && (0, _styledComponents.css)(["width:auto;min-width:100%;max-width:none;height:100%;margin:0;display:block;position:absolute;"]);
});

exports.StyledCardImage = StyledCardImage;
StyledCardImage.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledCardImageCaption = _styledComponents.default.figcaption.withConfig({
  displayName: "StyledCardImageCaption",
  componentId: "sc-1mtjaok-4"
})(["background:", ";color:", ";font-style:normal;margin:0;width:100%;box-sizing:border-box;position:absolute;bottom:0;", ";padding:0.35rem 1.25rem 0.35rem 1.25rem;"], function (props) {
  return props.theme.palette.opaqueWhite;
}, function (props) {
  return props.theme.palette.offBlack;
}, (0, _helpers.fontSize)(-2));

exports.StyledCardImageCaption = StyledCardImageCaption;
StyledCardImageCaption.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledCardTitle = (0, _styledComponents.default)(_Elements.CalciteH4).withConfig({
  displayName: "StyledCardTitle",
  componentId: "sc-1mtjaok-5"
})(["margin-bottom:0.775rem;"]);
exports.StyledCardTitle = StyledCardTitle;
StyledCardTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};