@activecollab/components/dist/cjs/components/Sheet/Styles.js

ActiveCollab Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledSheetWrapperPaper = exports.StyledSheetWrapper = exports.StyledSheetIcons = exports.StyledSheetControlsTop = exports.StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterIn = exports.StyledSheetControlsBottom = exports.StyledListSeparator = exports.StyledIconsWrapperSmall = exports.StyledHeader = exports.StyledCssTransition = exports.StyledAnimatedSpan = void 0;
var _reactTransitionGroup = require("react-transition-group");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _BoxSizingStyle = require("../BoxSizingStyle");
var _FontStyle = require("../FontStyle");
var _List = require("../List");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var StyledSheetIcons = exports.StyledSheetIcons = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledSheetIcons",
  componentId: "sc-144eyxd-0"
})(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}@media (max-width:640px){display:none;}"]);
StyledSheetIcons.displayName = "StyledSheetIcons";
var StyledSheetWrapper = exports.StyledSheetWrapper = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledSheetWrapper",
  componentId: "sc-144eyxd-1"
})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle, function (props) {
  return props.$mode === "stretch" ? (0, _styledComponents.css)(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : (0, _styledComponents.css)(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
}, function (props) {
  return props.$mode === "stretch" && (0, _styledComponents.css)(["@media (max-width:640px){width:100%;height:100%;}"]);
}, function (props) {
  return props.$position === "center" && (0, _styledComponents.css)(["", ""], {
    "marginLeft": "auto",
    "marginRight": "auto"
  });
}, function (props) {
  return props.$position === "left" && (0, _styledComponents.css)(["", ""], {
    "marginLeft": "0.5rem",
    "marginRight": "auto"
  });
}, function (props) {
  return props.$position === "right" && (0, _styledComponents.css)(["", ""], {
    "marginLeft": "auto",
    "marginRight": "0.5rem"
  });
}, function (props) {
  return props.$mode === "stretch" && props.$position !== "left" && (0, _styledComponents.css)(["", "{span{right:48px;}}"], StyledSheetIcons);
}, function (props) {
  return props.$mode === "stretch" && props.$position === "left" && (0, _styledComponents.css)(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons);
});
StyledSheetWrapper.displayName = "StyledSheetWrapper";
var StyledSheetWrapperPaper = exports.StyledSheetWrapperPaper = _styledComponents.default.div.attrs(function (props) {
  return {
    className: props.paperClass
  };
}).withConfig({
  displayName: "Styles__StyledSheetWrapperPaper",
  componentId: "sc-144eyxd-2"
})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
  "flex": "1 1 auto"
});
StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";
var StyledSheetControlsTop = exports.StyledSheetControlsTop = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
var StyledSheetControlsBottom = exports.StyledSheetControlsBottom = (0, _styledComponents.keyframes)(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
var StyledSheetControlsCenterIn = exports.StyledSheetControlsCenterIn = (0, _styledComponents.keyframes)(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
var StyledSheetControlsCenterOut = exports.StyledSheetControlsCenterOut = (0, _styledComponents.keyframes)(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
var StyledAnimatedSpan = exports.StyledAnimatedSpan = _styledComponents.default.span.withConfig({
  displayName: "Styles__StyledAnimatedSpan",
  componentId: "sc-144eyxd-3"
})(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], function (props) {
  return props.$state === "entering" && (0, _styledComponents.css)(["opacity:1;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
}, function (props) {
  return props.$state === "entered" && (0, _styledComponents.css)(["opacity:1;"]);
}, function (props) {
  return props.$disabled && (0, _styledComponents.css)(["pointer-events:none;svg{opacity:0.5;}"]);
}, function (props) {
  return props.$state === "exiting" && (0, _styledComponents.css)(["opacity:0;", ""], props.$mode === "stretch" ? (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : (0, _styledComponents.css)(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
}, function (props) {
  return props.$state === "exited" && (0, _styledComponents.css)(["opacity:0;"]);
});
StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
var StyledCssTransition = exports.StyledCssTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
  displayName: "Styles__StyledCssTransition",
  componentId: "sc-144eyxd-4"
})(["", " ", " ", " ", ""], function (props) {
  return props.$direction === "top" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(-100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
  return props.$direction === "bottom" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateY(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateY(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateY(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateY(100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
  return props.$direction === "left" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(-100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(-100%);transition:opacity 200ms,transform 200ms;}"]);
}, function (props) {
  return props.$direction === "right" && (0, _styledComponents.css)(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
});
StyledCssTransition.displayName = "StyledCssTransition";
var StyledListSeparator = exports.StyledListSeparator = (0, _styledComponents.default)(_List.ListSeparator).withConfig({
  displayName: "Styles__StyledListSeparator",
  componentId: "sc-144eyxd-5"
})(["margin:0;"]);
StyledListSeparator.displayName = "StyledListSeparator";
var StyledIconsWrapperSmall = exports.StyledIconsWrapperSmall = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledIconsWrapperSmall",
  componentId: "sc-144eyxd-6"
})(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
var StyledHeader = exports.StyledHeader = _styledComponents.default.div.withConfig({
  displayName: "Styles__StyledHeader",
  componentId: "sc-144eyxd-7"
})(["@media (min-width:640px){display:none;}"]);
StyledHeader.displayName = "StyledHeader";
//# sourceMappingURL=Styles.js.map