mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
155 lines
3.2 KiB
TypeScript
155 lines
3.2 KiB
TypeScript
import { makeStyles, tokens } from "@fluentui/react-components";
|
|
|
|
export const useStyles_GroupView = makeStyles({
|
|
root:
|
|
{
|
|
display: "flex",
|
|
flexFlow: "column",
|
|
alignSelf: "normal",
|
|
|
|
padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
|
|
paddingBottom: tokens.spacingVerticalNone,
|
|
borderRadius: tokens.borderRadiusLarge,
|
|
|
|
"&:hover .GroupView-toolbar, &:focus-within .GroupView-toolbar":
|
|
{
|
|
visibility: "visible"
|
|
},
|
|
|
|
"&:hover":
|
|
{
|
|
backgroundColor: tokens.colorNeutralBackground1Hover
|
|
}
|
|
},
|
|
header:
|
|
{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
gap: tokens.spacingHorizontalM,
|
|
|
|
borderBottom: `${tokens.strokeWidthThick} solid var(--border)`,
|
|
borderBottomLeftRadius: tokens.borderRadiusLarge
|
|
},
|
|
verticalHeader:
|
|
{
|
|
borderBottomLeftRadius: tokens.borderRadiusNone
|
|
},
|
|
title:
|
|
{
|
|
display: "grid",
|
|
gridAutoFlow: "column",
|
|
alignItems: "center",
|
|
minHeight: "12px",
|
|
minWidth: "24px",
|
|
gap: tokens.spacingHorizontalXS,
|
|
width: "max-content",
|
|
maxWidth: "160px",
|
|
|
|
padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS}`,
|
|
paddingBottom: tokens.spacingVerticalXS,
|
|
marginBottom: "-2px",
|
|
|
|
border: `${tokens.strokeWidthThick} solid var(--border)`,
|
|
borderRadius: `${tokens.borderRadiusLarge} ${tokens.borderRadiusLarge} ${tokens.borderRadiusNone} ${tokens.borderRadiusLarge}`,
|
|
borderBottom: "none",
|
|
backgroundColor: "var(--border)",
|
|
color: "var(--text)"
|
|
},
|
|
verticalTitle:
|
|
{
|
|
borderBottomLeftRadius: tokens.borderRadiusNone
|
|
},
|
|
pinned:
|
|
{
|
|
backgroundColor: "transparent"
|
|
},
|
|
toolbar:
|
|
{
|
|
display: "flex",
|
|
gap: tokens.spacingHorizontalS,
|
|
visibility: "hidden"
|
|
},
|
|
showToolbar:
|
|
{
|
|
visibility: "visible"
|
|
},
|
|
openAllLink:
|
|
{
|
|
whiteSpace: "nowrap"
|
|
},
|
|
empty:
|
|
{
|
|
display: "flex",
|
|
flexFlow: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: tokens.colorNeutralForeground3,
|
|
minWidth: "160px",
|
|
height: "120px",
|
|
marginBottom: tokens.spacingVerticalSNudge
|
|
},
|
|
verticalEmpty:
|
|
{
|
|
height: "auto",
|
|
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`
|
|
},
|
|
list:
|
|
{
|
|
display: "flex",
|
|
columnGap: tokens.spacingHorizontalS,
|
|
rowGap: tokens.spacingHorizontalSNudge,
|
|
height: "100%",
|
|
position: "relative"
|
|
},
|
|
verticalList:
|
|
{
|
|
flexFlow: "column"
|
|
},
|
|
verticalListCollapsed:
|
|
{
|
|
maxHeight: "136px",
|
|
overflow: "clip"
|
|
},
|
|
horizontalListCollapsed:
|
|
{
|
|
maxWidth: "400px",
|
|
overflow: "clip"
|
|
},
|
|
listContainer:
|
|
{
|
|
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalXS}`,
|
|
paddingBottom: tokens.spacingVerticalNone,
|
|
height: "100%"
|
|
},
|
|
verticalListContainer:
|
|
{
|
|
borderLeft: `${tokens.strokeWidthThick} solid var(--border)`,
|
|
padding: tokens.spacingVerticalSNudge,
|
|
marginBottom: tokens.spacingVerticalSNudge,
|
|
borderTopLeftRadius: tokens.borderRadiusNone,
|
|
borderBottomLeftRadius: tokens.borderRadiusNone,
|
|
borderTop: "none"
|
|
},
|
|
pinnedColor:
|
|
{
|
|
"--border": tokens.colorNeutralStrokeAccessible,
|
|
"--text": tokens.colorNeutralForeground1
|
|
},
|
|
dragOverlay:
|
|
{
|
|
backgroundColor: tokens.colorNeutralBackground1Hover,
|
|
transform: "scale(1.05)",
|
|
cursor: "grabbing !important",
|
|
boxShadow: `${tokens.shadow16} !important`,
|
|
"& > div":
|
|
{
|
|
pointerEvents: "none"
|
|
}
|
|
},
|
|
dragging:
|
|
{
|
|
visibility: "hidden"
|
|
}
|
|
});
|