react-chrono
Version:
A Modern Timeline component for React
201 lines • 6.35 kB
TypeScript
export declare const hideOnMobile: string;
export declare const hideOnTabletAndBelow: string;
export declare const toolbarWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
size: {
sm: {
minHeight: "48px";
padding: `var(--${string})`;
};
md: {
minHeight: `var(--${string})`;
padding: `var(--${string})`;
};
lg: {
minHeight: "72px";
padding: `var(--${string})`;
};
};
layout: {
horizontal: string;
vertical: (string | {
'@media': {
'screen and (max-width: 767px)': {
flexDirection: "row";
flexWrap: "wrap";
alignItems: "center";
justifyContent: "space-between";
gap: `var(--${string})`;
};
};
})[];
};
responsive: {
true: {
'@media': {
'screen and (min-width: 768px) and (max-width: 1023px)': {
padding: `var(--${string})`;
justifyContent: "center";
};
'screen and (max-width: 767px)': {
padding: `var(--${string}) var(--${string})`;
minHeight: "48px";
flexDirection: "row";
flexWrap: "nowrap";
alignItems: "center";
justifyContent: "space-between";
gap: `var(--${string})`;
overflow: "hidden";
};
};
};
false: {};
};
sticky: {
true: {
position: "sticky";
top: number;
zIndex: `var(--${string})`;
backdropFilter: "blur(16px)";
WebkitBackdropFilter: "blur(16px)";
background: `var(--${string})f0`;
borderBottom: `1px solid var(--${string})20`;
boxShadow: "0 2px 8px -2px rgba(0, 0, 0, 0.1)";
};
false: {};
};
}>;
export declare const toolbarListItem: string;
export declare const contentWrapper: string;
export declare const iconWrapper: string;
export declare const toolbarSection: import('@vanilla-extract/recipes').RuntimeFn<{
type: {
navigation: {
flexWrap: "nowrap";
gap: `var(--${string})`;
};
search: {
flex: "1 1 var(--timeline-search-width, 300px)";
maxWidth: "var(--timeline-search-max-width, 600px)";
justifyContent: "center";
minWidth: "var(--timeline-search-min-width, 200px)";
};
actions: {
flexWrap: "wrap";
justifyContent: "flex-end";
gap: `var(--${string})`;
};
};
responsive: {
true: {
'@media': {
'screen and (max-width: 767px)': {
width: "100%";
justifyContent: "center";
};
};
};
false: {};
};
visible: {
true: {
visibility: "visible";
opacity: number;
};
false: {
visibility: "hidden";
opacity: number;
width: number;
overflow: "hidden";
};
};
}>;
export declare const searchWrapper: string;
export declare const searchInput: string;
export declare const searchInfo: string;
export declare const searchControls: string;
export declare const searchButton: string;
export declare const searchButtonIcon: string;
export declare const toolbarIconButton: import('@vanilla-extract/recipes').RuntimeFn<{
state: {
default: {};
active: {
backgroundColor: `var(--${string})15`;
borderColor: `var(--${string})70`;
color: `var(--${string})`;
boxShadow: `0 0 0 2px var(--${string})25, 0 2px 8px -2px var(--${string})20`;
fontWeight: `var(--${string})`;
selectors: {
'&:hover:not(:disabled)': {
backgroundColor: `var(--${string})`;
borderColor: `var(--${string})`;
color: "#ffffff";
transform: "translateY(-1px)";
boxShadow: `0 0 0 2px var(--${string})40, 0 4px 12px -2px var(--${string})30`;
};
};
};
minimized: {
backgroundColor: `var(--${string})12`;
borderColor: `var(--${string})50`;
color: `var(--${string})`;
opacity: number;
selectors: {
'&:hover:not(:disabled)': {
opacity: number;
backgroundColor: `var(--${string})`;
borderColor: `var(--${string})`;
color: "#ffffff";
transform: "translateY(-1px)";
};
};
};
};
size: {
sm: {
width: "24px";
height: "24px";
fontSize: `var(--${string})`;
};
md: {
width: `var(--${string})`;
height: `var(--${string})`;
fontSize: `var(--${string})`;
};
lg: {
width: "32px";
height: "32px";
fontSize: `var(--${string})`;
};
};
interactive: {
true: string;
false: {
cursor: "default";
selectors: {
'&:hover': {
transform: "none";
};
};
};
};
}>;
export declare const extraControls: string;
export declare const extraControlChild: string;
export type ToolbarWrapperVariants = Parameters<typeof toolbarWrapper>[0];
export type ToolbarSectionVariants = Parameters<typeof toolbarSection>[0];
export type ToolbarIconButtonVariants = Parameters<typeof toolbarIconButton>[0];
export declare const navigationGroup: string;
export declare const actionGroup: string;
export declare const searchGroup: string;
export declare const toolbarPatterns: {
basic: string;
compact: string;
fixed: (string | {
position: string;
top: number;
left: number;
right: number;
zIndex: `var(--${string})`;
})[];
};
//# sourceMappingURL=toolbar.css.d.ts.map