@helpscout/hsds-react/components/Attachment/Attachment.css.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AttachmentUI = exports.AttachmentElementUI = exports.ImageUI = exports.NameUI = exports.SizeUI = exports.RemoveButtonUI = void 0;

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

var _depth = require("../../styles/mixins/depth.css");

var _linkStyles = _interopRequireDefault(require("../../styles/mixins/linkStyles.css"));

var _focusRing = require("../../styles/mixins/focusRing.css");

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

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

var _Text = _interopRequireDefault(require("../Text"));

var _color2 = require("../../utilities/color");

var _IconButton = _interopRequireDefault(require("../IconButton"));

var config = {
  imageSize: '37px',
  imageMaxWidth: '80px'
};
var RemoveButtonUI = (0, _styledComponents.default)(_IconButton.default).withConfig({
  displayName: "Attachmentcss__RemoveButtonUI",
  componentId: "vnexvh-0"
})(["position:absolute;right:-12px;top:-12px;z-index:5;opacity:0;transform:scale(0);&.is-theme-grey.has-icon-only{--buttonHeight:24px;--focusRingOffset:-2px;--buttonBackgroundColorHover:white;--buttonColorHover:", ";--buttonBorderColorHover:", ";}transition:all 200ms linear;"], (0, _color.getColor)('pink.1000'), (0, _color.getColor)('pink.900'));
exports.RemoveButtonUI = RemoveButtonUI;
var SizeUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Attachmentcss__SizeUI",
  componentId: "vnexvh-1"
})(["color:", ";margin-left:5px;"], (0, _color.getColor)('charcoal.400'));
exports.SizeUI = SizeUI;
var NameUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Attachmentcss__NameUI",
  componentId: "vnexvh-2"
})([""]);
exports.NameUI = NameUI;
var ImageUI = (0, _styledComponents.default)(_Image.default).withConfig({
  displayName: "Attachmentcss__ImageUI",
  componentId: "vnexvh-3"
})(["border-radius:2px;height:", ";object-fit:cover;max-height:", ";max-width:", ";min-width:", ";width:auto;"], config.imageSize, config.imageSize, config.imageMaxWidth, config.imageSize);
exports.ImageUI = ImageUI;

var AttachmentElementUI = _styledComponents.default.a.withConfig({
  displayName: "Attachmentcss__AttachmentElementUI",
  componentId: "vnexvh-4"
})(["", ";", ";--focusRingRadius:15px;background-color:white;border:1px solid ", ";border-radius:var(--focusRingRadius);line-height:1;padding:4px 10px;text-decoration:none;display:inline-flex;align-items:center;font-family:var(--HSDSGlobalFontFamily);&:hover,&:focus-within{border-color:", ";text-decoration:none;", "{text-decoration:underline;}}&.is-error:after{content:'';border-radius:inherit;border:1px solid ", ";bottom:0px;left:0px;pointer-events:none;position:absolute;right:0px;top:0px;}&.is-error{color:", ";&:hover,&:active,&:focus{color:", ";}}&.is-action{", "{text-decoration:none;}}&.is-theme-preview{", ";--focusRingRadius:4px;border:none;border-radius:var(--focusRingRadius);display:inline-flex;font-weight:500;padding:0 17px;height:43px;align-items:center;white-space:nowrap;flex-direction:row;gap:4px;flex-wrap:nowrap;&:hover,&:focus-within{", "}&.has-image:not(.is-broken-image){padding:3px;}&.is-broken-image{box-shadow:0 0 0 1px ", ";background-color:", ";color:", ";padding-left:14px;&:hover{box-shadow:0 0 0 1px ", ";}> .c-Icon{color:", ";}}}"], (0, _linkStyles.default)(), _focusRing.focusRing, (0, _color.getColor)('grey.500'), (0, _color.getColor)('grey.600'), NameUI, (0, _color.getColor)('red.500'), (0, _color.getColor)('red.500'), (0, _color.getColor)('red.500'), NameUI, _depth.d400, _depth.d400Effect, (0, _color2.rgba)((0, _color.getColor)('grey.700'), 0.7), (0, _color.getColor)('grey.200'), (0, _color.getColor)('charcoal.400'), (0, _color2.rgba)((0, _color.getColor)('grey.700'), 0.7), (0, _color.getColor)('charcoal.200'));

exports.AttachmentElementUI = AttachmentElementUI;

var AttachmentUI = _styledComponents.default.div.withConfig({
  displayName: "Attachmentcss__AttachmentUI",
  componentId: "vnexvh-5"
})(["position:relative;flex:0 0 auto;display:inline-flex;transition:all 200ms linear;z-index:1;&:hover{z-index:3;}&:focus-within{z-index:2;}&:hover,&:focus-within{transform:translateY(-2px);", "{opacity:1;transform:scale(1);}}"], RemoveButtonUI);

exports.AttachmentUI = AttachmentUI;