calcite-react/Alert/Alert-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledAlertClose = exports.StyledAlertIcon = exports.StyledAlertMessage = exports.StyledAlertTitle = exports.StyledAlertContent = exports.StyledAlert = void 0;

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

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

var _color = require("../utils/color");

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 StyledAlertIcon = _styledComponents.default.div.withConfig({
  displayName: "StyledAlertIcon",
  componentId: "sc-8vnym9-0"
})(["display:flex;align-items:center;justify-content:center;padding-left:", ";html[dir='rtl'] &{padding-left:0;padding-right:", ";}"], function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
});

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

var StyledAlert = _styledComponents.default.div.withConfig({
  displayName: "StyledAlert",
  componentId: "sc-8vnym9-1"
})(["display:flex;align-items:stretch;color:", ";background-color:", ";position:relative;z-index:100;max-width:40em;border-left:3px solid ", ";box-shadow:", ";border-radius:", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}", " svg{fill:", ";}", ";", ";", ";", ";", ";"], function (props) {
  return props.theme.palette.black;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.boxShadow;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.palette.blue;
}, StyledAlertIcon, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return (0, _color.linkColor)(props.theme.palette.offBlack, props.theme.palette.black);
}, function (props) {
  return props.red && (0, _styledComponents.css)(["border-left-color:", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}", " svg{fill:", ";}"], function (props) {
    return props.theme.palette.red;
  }, function (props) {
    return props.theme.palette.red;
  }, StyledAlertIcon, function (props) {
    return props.theme.palette.red;
  });
}, function (props) {
  return props.yellow && (0, _styledComponents.css)(["border-left-color:", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}", " svg{fill:", ";}"], function (props) {
    return props.theme.palette.yellow;
  }, function (props) {
    return props.theme.palette.yellow;
  }, StyledAlertIcon, function (props) {
    return props.theme.palette.yellow;
  });
}, function (props) {
  return props.green && (0, _styledComponents.css)(["border-left-color:", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}", " svg{fill:", ";}"], function (props) {
    return props.theme.palette.green;
  }, function (props) {
    return props.theme.palette.green;
  }, StyledAlertIcon, function (props) {
    return props.theme.palette.green;
  });
}, function (props) {
  return props.full && (0, _styledComponents.css)(["max-width:none;"]);
});

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

var StyledAlertContent = _styledComponents.default.div.withConfig({
  displayName: "StyledAlertContent",
  componentId: "sc-8vnym9-2"
})(["display:flex;flex-direction:column;flex:1 0 0px;padding:", " ", ";html[dir='rtl'] &{padding-right:", ";padding-left:0;}"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
}, function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
});

exports.StyledAlertContent = StyledAlertContent;
StyledAlertContent.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledAlertTitle = (0, _styledComponents.default)(_Elements.CalciteH6).withConfig({
  displayName: "StyledAlertTitle",
  componentId: "sc-8vnym9-3"
})(["", ";font-weight:600;margin:0;"], (0, _helpers.fontSize)(-1));
exports.StyledAlertTitle = StyledAlertTitle;
StyledAlertTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledAlertMessage = (0, _styledComponents.default)(_Elements.CalciteP).withConfig({
  displayName: "StyledAlertMessage",
  componentId: "sc-8vnym9-4"
})(["", ";margin:0;"], (0, _helpers.fontSize)(-1));
exports.StyledAlertMessage = StyledAlertMessage;
StyledAlertMessage.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledAlertClose = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledAlertClose",
  componentId: "sc-8vnym9-5"
})(["display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-left:-", ";padding:", ";", ";line-height:0;&:hover{color:", ";background:", ";svg{fill:", ";}}svg{fill:", ";}"], function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
}, (0, _helpers.fontSize)(-1), function (props) {
  return props.theme.palette.black;
}, function (props) {
  return props.theme.palette.offWhite;
}, function (props) {
  return props.theme.palette.black;
}, function (props) {
  return props.theme.palette.offBlack;
});
exports.StyledAlertClose = StyledAlertClose;
StyledAlertClose.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};