@filerobot/approvals/lib/components/Approval/Approval.styled.js

Asset approvals package for Filerobot

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
import styled, { css } from 'styled-components';
import { PC, FV } from '@filerobot/common';
var Description = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n"])));
var DescStatus = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.palette[PC.TextPrimary];
});
var DescDate = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n"])), function (_ref2) {
  var font = _ref2.theme.typography.font;
  return font[FV.TextMedium];
}, function (_ref3) {
  var paletteColorKey = _ref3.paletteColorKey,
    theme = _ref3.theme;
  return theme.palette[paletteColorKey || PC.TextSecondary];
});
var Message = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  color: ", ";\n  overflow-wrap: break-word;\n\n  ", "\n"])), function (_ref4) {
  var font = _ref4.theme.typography.font,
    isModalViewMode = _ref4.isModalViewMode;
  return isModalViewMode ? font[FV.TextMedium] : font[FV.TextLarge];
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette[PC.TextPrimary];
}, function (_ref6) {
  var isModalViewMode = _ref6.isModalViewMode;
  return isModalViewMode && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    max-width: 350px;\n  "])));
});
var Approvers = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 5px;\n"])));
var ApproversSectionContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 9px;\n  align-items: center;\n\n  ", "\n"])), function (_ref7) {
  var disabled = _ref7.disabled;
  return disabled && 'opacity: 0.5;';
});
var ApproversSectionArrow = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: end;\n  width: 62px;\n  color: ", ";\n\n  svg {\n    transform: translate(2px, 0.5px);\n  }\n\n  :before {\n    position: absolute;\n    content: '';\n    top: 50%;\n    right: 0;\n    transform: translate(0px, -20%);\n    height: 1px;\n    width: 100%;\n    background-color: ", ";\n  }\n"])), function (_ref8) {
  var palette = _ref8.theme.palette;
  return palette[PC.BorderPrimaryStateless];
}, function (_ref9) {
  var palette = _ref9.theme.palette;
  return palette[PC.BorderPrimaryStateless];
});
var AvatarStatus = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: -5px;\n  right: -4px;\n  width: 20px;\n  height: 20px;\n  background: ", ";\n  border-radius: 50%;\n  padding: 3px;\n"])), function (_ref10) {
  var palette = _ref10.theme.palette;
  return palette[PC.BackgroundStateless];
});
var Container = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  border-radius: 4px;\n  gap: 16px;\n\n  &:last-child {\n    margin-bottom: ", ";\n  }\n\n  ", "\n"])), function (_ref11) {
  var _ref11$marginBottom = _ref11.marginBottom,
    marginBottom = _ref11$marginBottom === void 0 ? 0 : _ref11$marginBottom;
  return "".concat(marginBottom, "px");
}, function (_ref12) {
  var isModalViewMode = _ref12.isModalViewMode;
  return !isModalViewMode && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n\n    :hover {\n      background: ", ";\n\n      ", " {\n        background: ", ";\n      }\n    }\n  "])), function (_ref13) {
    var theme = _ref13.theme;
    return theme.palette[PC.BordersItem];
  }, function (_ref14) {
    var theme = _ref14.theme;
    return theme.palette[PC.BackgroundHover];
  }, AvatarStatus, function (_ref15) {
    var theme = _ref15.theme;
    return theme.palette[PC.BackgroundHover];
  });
});
var Actions = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  // .SfxButton-Label { Should be done on SFX/UI side\n  //   ", ";\n  // }\n"])), function (_ref16) {
  var font = _ref16.theme.typography.font;
  return font[FV.ButtonMdEmphasis];
});
var Styled = {
  Container: Container,
  Description: Description,
  DescStatus: DescStatus,
  DescDate: DescDate,
  Message: Message,
  Approvers: Approvers,
  ApproversSectionContainer: ApproversSectionContainer,
  ApproversSectionArrow: ApproversSectionArrow,
  AvatarStatus: AvatarStatus,
  Actions: Actions
};
export default Styled;