@helpscout/hsds-react/components/Message/Message.Media.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.MediaUI = exports.ImageUI = void 0;

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

var _Image = _interopRequireDefault(require("../Image"));

var _breakpoints = require("../../styles/mixins/breakpoints.css");

var _noteStyles = require("../../styles/mixins/noteStyles.css");

var _color = require("../../styles/utilities/color");

var _classNames = require("../../utilities/classNames");

var _Message = _interopRequireDefault(require("./Message.Chat"));

var bem = (0, _classNames.BEM)('.c-MessageMedia');
var mediaImageStyles = "\n  max-width: 100%;\n  min-width: 100%;\n  object-fit: cover;\n";
var ImageUI = (0, _styledComponents.default)(_Image.default).withConfig({
  displayName: "MessageMediacss__ImageUI",
  componentId: "sc-46ol35-0"
})(["", ";"], mediaImageStyles);
exports.ImageUI = ImageUI;
var MediaUI = (0, _styledComponents.default)(_Message.default).withConfig({
  displayName: "MessageMediacss__MediaUI",
  componentId: "sc-46ol35-1"
})(["", "{padding:8px;}", "{", ";max-height:250px;opacity:1;transition:opacity 200ms linear;}", "{background-color:white;border:none;box-shadow:0px 1px 3px 0px rgba(0,0,0,0.1),0px 0px 0px 1px rgba(193,203,212,0.7) inset,0px -1px 0px 0px ", " inset;color:", ";display:inline-block;max-width:300px;padding:3px;.c-MessageCaption__text{color:currentColor;}&.is-note{", ";background-color:", ";color:", ";}&.is-from{text-align:left;}&.is-to{text-align:right;}}", "{padding-bottom:0;", "{cursor:pointer;}}", "{margin-right:4px;position:relative;top:1px;}&__modal.c-Modal{", ";}&__modal{", "{img{border-radius:0px;}}", "{", ";}", "{padding:10px;}}&__modalCard{overflow:hidden;}&.is-error{", "{box-shadow:0 0 0 1px ", " inset;color:", ";", "{opacity:0.5;}}}", "{color:currentColor;font-size:inherit;text-decoration:underline;}"], bem.element('caption'), bem.element('mediaImage'), mediaImageStyles, bem.element('bubble') + '.c-MessageBubble', (0, _color.getColor)('grey.600'), (0, _color.getColor)('charcoal.200'), (0, _noteStyles.noteBoxShadow)(), (0, _color.getColor)('yellow.200'), (0, _color.getColor)('yellow.800'), bem.element('mediaContainer'), bem.element('media'), bem.element('loadingSpinner'), (0, _breakpoints.breakpoint)('md', "\n      padding: 20px;\n    "), bem.element('media'), bem.element('mediaImage'), mediaImageStyles, bem.element('caption'), bem.element('bubble') + '.c-MessageBubble', (0, _color.getColor)('red.400'), (0, _color.getColor)('red.500'), bem.element('mediaImage'), bem.element('tryAgainAction'));
exports.MediaUI = MediaUI;