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

ActiveCollab Components

import { CSSTransition } from "react-transition-group";
import styled, { css, keyframes } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
import { ListSeparator } from "../List";
export const StyledSheetIcons = styled.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";
export const StyledSheetWrapper = styled.div.withConfig({
  displayName: "Styles__StyledSheetWrapper",
  componentId: "sc-144eyxd-1"
})(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, props => props.$mode === "stretch" ? 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) : 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), props => props.$mode === "stretch" && css(["@media (max-width:640px){width:100%;height:100%;}"]), props => props.$position === "center" && css(["", ""], {
  "marginLeft": "auto",
  "marginRight": "auto"
}), props => props.$position === "left" && css(["", ""], {
  "marginLeft": "0.5rem",
  "marginRight": "auto"
}), props => props.$position === "right" && css(["", ""], {
  "marginLeft": "auto",
  "marginRight": "0.5rem"
}), props => props.$mode === "stretch" && props.$position !== "left" && css(["", "{span{right:48px;}}"], StyledSheetIcons), props => props.$mode === "stretch" && props.$position === "left" && css(["flex-direction:row-reverse;", "{span{right:-8px;}}"], StyledSheetIcons));
StyledSheetWrapper.displayName = "StyledSheetWrapper";
export const StyledSheetWrapperPaper = styled.div.attrs(props => ({
  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";
export const StyledSheetControlsTop = keyframes(["0%{opacity:0;transform:translateY(-200px);}100%{opacity:1;transform:translateY(0);}"]);
export const StyledSheetControlsBottom = keyframes(["0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-200px);}"]);
export const StyledSheetControlsCenterIn = keyframes(["0%{transform:translateY(-150px);opacity:0;}100%{transform:translateY(0);opacity:1;}"]);
export const StyledSheetControlsCenterOut = keyframes(["0%{transform:translateY(0);opacity:1;}100%{transform:translateY(-150px);opacity:0;}"]);
export const StyledAnimatedSpan = styled.span.withConfig({
  displayName: "Styles__StyledAnimatedSpan",
  componentId: "sc-144eyxd-3"
})(["&:hover svg{fill:var(--color-primary);}", " ", " ", " ", " ", ""], props => props.$state === "entering" && css(["opacity:1;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, props.$durationIn + "s", props.$durationIn + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, props.$maxDurationIn + "s")), props => props.$state === "entered" && css(["opacity:1;"]), props => props.$disabled && css(["pointer-events:none;svg{opacity:0.5;}"]), props => props.$state === "exiting" && css(["opacity:0;", ""], props.$mode === "stretch" ? css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, props.$durationOut + "s", props.$durationOut + "s") : css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, props.$maxDurationOut + "s")), props => props.$state === "exited" && css(["opacity:0;"]));
StyledAnimatedSpan.displayName = "StyledAnimatedSpan";
export const StyledCssTransition = styled(CSSTransition).withConfig({
  displayName: "Styles__StyledCssTransition",
  componentId: "sc-144eyxd-4"
})(["", " ", " ", " ", ""], props => props.$direction === "top" && 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;}"]), props => props.$direction === "bottom" && 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;}"]), props => props.$direction === "left" && 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;}"]), props => props.$direction === "right" && 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";
export const StyledListSeparator = styled(ListSeparator).withConfig({
  displayName: "Styles__StyledListSeparator",
  componentId: "sc-144eyxd-5"
})(["margin:0;"]);
StyledListSeparator.displayName = "StyledListSeparator";
export const StyledIconsWrapperSmall = styled.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";
export const StyledHeader = styled.div.withConfig({
  displayName: "Styles__StyledHeader",
  componentId: "sc-144eyxd-7"
})(["@media (min-width:640px){display:none;}"]);
StyledHeader.displayName = "StyledHeader";
//# sourceMappingURL=Styles.js.map