orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
117 lines • 4.88 kB
JavaScript
import styled from "styled-components";
import { themeGet } from "@styled-system/theme-get";
const panelWidth = "300px";
export const ComponentContainer = styled.div.withConfig({
displayName: "FloatingPanelsstyles__ComponentContainer",
componentId: "sc-1by914f-0"
})(["z-index:", ";position:absolute;display:flex;flex-direction:column;align-items:", ";gap:8px;max-height:", ";", " ", ""], _ref => {
let {
zIndex
} = _ref;
return zIndex;
}, _ref2 => {
let {
alignPanels
} = _ref2;
switch (alignPanels) {
case "left":
return "flex-start;";
case "center":
return "center;";
case "right":
default:
return "flex-end;";
}
}, _ref3 => {
let {
containerHeight
} = _ref3;
return containerHeight;
}, _ref4 => {
let {
position
} = _ref4;
return Object.entries(position).filter(_ref5 => {
let [, value] = _ref5;
return value !== undefined;
}).map(_ref6 => {
let [key, value] = _ref6;
return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
}).join("\n");
}, _ref7 => {
let {
centered
} = _ref7;
return centered ? `
margin-left: 50%;
transform: translateX(-50%);
right: auto;
` : "";
});
export const PanelContainer = styled.div.withConfig({
displayName: "FloatingPanelsstyles__PanelContainer",
componentId: "sc-1by914f-1"
})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref8 => {
let {
containerHeight
} = _ref8;
return containerHeight;
});
export const PanelWrapper = styled.div.withConfig({
displayName: "FloatingPanelsstyles__PanelWrapper",
componentId: "sc-1by914f-2"
})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _ref9 => {
let {
isExpanded
} = _ref9;
return isExpanded ? "block" : "none";
}, panelWidth, themeGet("colors.greyLighter"));
export const PanelHeader = styled.button.withConfig({
displayName: "FloatingPanelsstyles__PanelHeader",
componentId: "sc-1by914f-3"
})(["font-family:", ";color:", ";margin-left:-1px;margin-top:-37px;border-radius:8px 8px 0 0;appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:8px;height:37px;position:absolute;width:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), panelWidth, themeGet("colors.greyLighter"));
export const HeaderContent = styled.div.withConfig({
displayName: "FloatingPanelsstyles__HeaderContent",
componentId: "sc-1by914f-4"
})(["display:flex;align-items:center;gap:12px;"]);
export const Title = styled.span.withConfig({
displayName: "FloatingPanelsstyles__Title",
componentId: "sc-1by914f-5"
})(["font-size:14px;font-weight:500;"]);
export const PanelBar = styled.div.withConfig({
displayName: "FloatingPanelsstyles__PanelBar",
componentId: "sc-1by914f-6"
})(["display:flex;background:white;border:1px solid ", ";border-radius:", ";padding:2px;gap:2px;height:fit-content;box-shadow:0 0 1px 2px rgba(255,255,255,1);"], themeGet("colors.greyLighter"), themeGet("radii.2"));
export const PanelBarDivider = styled.div.withConfig({
displayName: "FloatingPanelsstyles__PanelBarDivider",
componentId: "sc-1by914f-7"
})(["flex-grow:1;border-right:1px solid ", ";cursor:pointer;display:flex;margin:4px 2px;"], themeGet("colors.greyLighter"));
export const IconButton = styled.button.withConfig({
displayName: "FloatingPanelsstyles__IconButton",
componentId: "sc-1by914f-8"
})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref10 => {
let {
isExpanded,
forceHighlight
} = _ref10;
return isExpanded || forceHighlight ? themeGet("colors.primaryLightest") : themeGet("colors.white");
}, themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"));
export const PanelContent = styled.div.withConfig({
displayName: "FloatingPanelsstyles__PanelContent",
componentId: "sc-1by914f-9"
})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref11 => {
let {
isExpanded
} = _ref11;
return isExpanded ? "block" : "none";
}, _ref12 => {
let {
isExpanded
} = _ref12;
return isExpanded ? "100%" : "0";
}, _ref13 => {
let {
isExpanded
} = _ref13;
return isExpanded ? "1" : "0";
});