react-timelane 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -5
- package/dist/components/Timelane/Timelane.d.ts +8 -1
- package/dist/components/TimelaneAllocation/TimelaneAllocation.d.ts +6 -2
- package/dist/components/TimelaneAside/TimelaneAside.d.ts +13 -0
- package/dist/components/TimelaneBackground/TimelaneBackground.d.ts +7 -0
- package/dist/components/TimelaneBody/TimelaneBody.d.ts +14 -1
- package/dist/components/TimelaneHeader/TimelaneHeader.d.ts +7 -0
- package/dist/components/TimelaneLane/TimelaneLane.d.ts +6 -0
- package/dist/components/TimelaneLayout/TimelaneLayout.d.ts +16 -7
- package/dist/components/TimelaneSettingsProvider/TimelaneSettingsProvider.d.ts +5 -3
- package/dist/react-timelane.css +1 -1
- package/dist/react-timelane.js +321 -322
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,6 @@ A React/TypeScript library to build timelines / horizontally scrollable calendar
|
|
|
4
4
|
|
|
5
5
|
<img width="1145" alt="image" src="https://github.com/user-attachments/assets/a051f665-37ac-4292-9b85-7e1baa1bb84f" />
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
## Features
|
|
9
8
|
|
|
10
9
|
react-timelane has a particular focus on usability and comes with many neat features:
|
|
@@ -14,9 +13,9 @@ react-timelane has a particular focus on usability and comes with many neat feat
|
|
|
14
13
|
- jump (scroll) to point in time, lane or item
|
|
15
14
|
- item selection via mouse range
|
|
16
15
|
|
|
17
|
-
##
|
|
16
|
+
## Documentation
|
|
18
17
|
|
|
19
|
-
https://dhansmair.github.io/react-timelane
|
|
18
|
+
Docs and various demos are provided via Storybook: https://dhansmair.github.io/react-timelane
|
|
20
19
|
|
|
21
20
|
## Installation
|
|
22
21
|
|
|
@@ -35,7 +34,7 @@ import {
|
|
|
35
34
|
type AvailableSpace,
|
|
36
35
|
type Lane,
|
|
37
36
|
type Item,
|
|
38
|
-
type ItemId
|
|
37
|
+
type ItemId,
|
|
39
38
|
} from "react-timelane";
|
|
40
39
|
import type Allocation from "../models/Allocation";
|
|
41
40
|
import type Resource from "../models/Resource";
|
|
@@ -43,7 +42,6 @@ import AllocationComponent from "./AllocationComponent";
|
|
|
43
42
|
|
|
44
43
|
import { Timelane as TL } from "react-timelane";
|
|
45
44
|
|
|
46
|
-
|
|
47
45
|
interface MyTimelaneProps {
|
|
48
46
|
resources: Resource[];
|
|
49
47
|
allocations: Allocation[];
|
|
@@ -25,7 +25,14 @@ export interface TimelaneProps {
|
|
|
25
25
|
enableItemDragging?: boolean;
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* The component `<Timelane>` serves as the main container for
|
|
29
|
+
* `<TimelaneHeader>`, `<TimelaneAside>`, `<TimelaneBody>`, and so on.
|
|
30
|
+
*
|
|
31
|
+
* Child components can also be used via `Timelane.[name]`, e.g.,
|
|
32
|
+
* `Timelane.Header` is an alias for `TimelaneHeader`.
|
|
33
|
+
*
|
|
34
|
+
* This component also serves as a context provider. All properties
|
|
35
|
+
* (start, end, ...) will be accessible and used by child components.
|
|
29
36
|
*/
|
|
30
37
|
export declare function Timelane({ start, end, pixelsPerDay, pixelsPerLane, showMonths, showWeeks, showDays, allowOverlaps, enableItemResizing, enableItemDragging, children, }: PropsWithChildren<TimelaneProps>): import("react/jsx-runtime").JSX.Element;
|
|
31
38
|
export declare namespace Timelane {
|
|
@@ -3,8 +3,12 @@ export interface TimelaneAllocationProps {
|
|
|
3
3
|
name: string;
|
|
4
4
|
description: string;
|
|
5
5
|
isSelected?: boolean;
|
|
6
|
-
isDragged?: boolean;
|
|
7
6
|
onClick?: (e: MouseEvent) => void;
|
|
8
7
|
onContextMenu?: (e: MouseEvent) => void;
|
|
9
8
|
}
|
|
10
|
-
|
|
9
|
+
/**
|
|
10
|
+
* `TimelaneAllocation` is a reference implementation to demonstrate how an item could be rendered.
|
|
11
|
+
*
|
|
12
|
+
* In the examples, it is passed to the `renderItem()` method of the `<TimelaneLane />` component.
|
|
13
|
+
*/
|
|
14
|
+
export declare function TimelaneAllocation({ name, description, isSelected, onClick, onContextMenu, }: TimelaneAllocationProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,11 +2,24 @@ import { MouseEvent, ReactElement } from 'react';
|
|
|
2
2
|
import { Lane } from '../../types';
|
|
3
3
|
export interface TimelaneAsideProps {
|
|
4
4
|
lanes: Lane[];
|
|
5
|
+
/**
|
|
6
|
+
* deprecated
|
|
7
|
+
*/
|
|
5
8
|
focusedLane?: Lane | null;
|
|
9
|
+
/**
|
|
10
|
+
* deprecated
|
|
11
|
+
*/
|
|
6
12
|
setFocusedLane?: (lane: Lane | null) => void;
|
|
7
13
|
onLaneHeaderClick?: (lane: Lane, e: MouseEvent) => void;
|
|
8
14
|
onLaneHeaderDoubleClick?: (lane: Lane, e: MouseEvent) => void;
|
|
9
15
|
onLaneHeaderContextMenu?: (lane: Lane, e: MouseEvent) => void;
|
|
10
16
|
renderLaneHeader?: (lane: Lane) => ReactElement;
|
|
11
17
|
}
|
|
18
|
+
/**
|
|
19
|
+
* `<TimelaneAside>` renders lane headers. The lane header height is determined
|
|
20
|
+
* by the setting `pixelsPerLane`. The lane header content can be customized using
|
|
21
|
+
* the property `renderLaneHeader()`.
|
|
22
|
+
*
|
|
23
|
+
* It must be a child component of `<Timelane>`.
|
|
24
|
+
*/
|
|
12
25
|
export declare function TimelaneAside({ lanes, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
export interface TimelaneBackgroundProps {
|
|
2
2
|
focusedDay?: Date | null;
|
|
3
3
|
}
|
|
4
|
+
/**
|
|
5
|
+
* `<TimelaneBackground />` renders the vertical separators for weeks (gray) and days (lightgray).
|
|
6
|
+
*
|
|
7
|
+
* It must be a child component of `<Timelane>`.
|
|
8
|
+
*
|
|
9
|
+
* The dates `start` and `end` are retrieved from the TimelaneContext, provided by e.g. the parent `<Timelane>` component.
|
|
10
|
+
*/
|
|
4
11
|
export declare function TimelaneBackground({ focusedDay }: TimelaneBackgroundProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { ItemId } from '../../types';
|
|
2
3
|
export interface TimelaneBodyProps {
|
|
3
|
-
|
|
4
|
+
/**
|
|
5
|
+
* callback that provides an array of item IDs of selected items.
|
|
6
|
+
*/
|
|
7
|
+
onSelect?: (selection: ItemId[]) => void;
|
|
4
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* `<TimelaneBody>` is a container for `<TimelaneLane>` components.
|
|
11
|
+
*
|
|
12
|
+
* It must be a child component of `<Timelane>`.
|
|
13
|
+
*
|
|
14
|
+
* It also provides the <b>item selection layer</b>, i.e. it will render a dashed
|
|
15
|
+
* rectangle to visualize the selection range and provides the `onSelect()`
|
|
16
|
+
* callback.
|
|
17
|
+
*/
|
|
5
18
|
export declare function TimelaneBody({ onSelect, children, }: PropsWithChildren<TimelaneBodyProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -20,4 +20,11 @@ export interface TimelaneHeaderProps {
|
|
|
20
20
|
e: MouseEvent;
|
|
21
21
|
}) => void;
|
|
22
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* The component `<TimelaneHeader>` renders labels for months, weeks and days.
|
|
25
|
+
*
|
|
26
|
+
* It must be a child component of `<Timelane>`.
|
|
27
|
+
* Properties such as `start`, `end`, `pixelsPerDay` are retrieved from the
|
|
28
|
+
* TimelaneContext, provided e.g. by the parent `<Timelane>` component.
|
|
29
|
+
*/
|
|
23
30
|
export declare function TimelaneHeader({ focusedDay, setFocusedDay, renderMonthHeader, renderWeekHeader, renderDayHeader, onMonthClick, onDayClick, onWeekClick, }: TimelaneHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,4 +12,10 @@ export interface TimelaneLaneProps<T> {
|
|
|
12
12
|
renderItem?: (item: Item<T>, isDragged: boolean) => ReactElement;
|
|
13
13
|
onResizeStart?: (data: T) => void;
|
|
14
14
|
}
|
|
15
|
+
/**
|
|
16
|
+
* `<TimelaneLane>` (or `<Timelane.Lane>`) is a container for items. It takes care of
|
|
17
|
+
* rendering items, drop previews, and overlap indicators. It is also the drop target for DnD functionality.
|
|
18
|
+
*
|
|
19
|
+
* It must be a child component of `<TimelaneBody>`.
|
|
20
|
+
*/
|
|
15
21
|
export declare function TimelaneLane<T>({ lane, items, focused, onItemUpdate, onMouseUp, onClick, onDoubleClick, onContextMenu, renderItem, onResizeStart, }: TimelaneLaneProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* The component `<TimelaneLayout>` is internally used to structure the timelane layout.
|
|
4
|
+
* It provides regions for header, aside, body, footer and corner and ensures the
|
|
5
|
+
* elements are sticky on their respective positions.
|
|
6
|
+
* Child components should be used as `<TimelaneLayout.Header>`, `<TimelaneLayout.Aside>` and so on.
|
|
7
|
+
*
|
|
8
|
+
* The layout is mainly intended for internal use can still be be used to create
|
|
9
|
+
* custom sticky components that integrate with react-timelane.
|
|
10
|
+
*/
|
|
11
|
+
export declare function TimelaneLayout({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
3
12
|
export declare namespace TimelaneLayout {
|
|
4
13
|
var Header: typeof TimelaneLayoutHeader;
|
|
5
14
|
var Body: typeof TimelaneLayoutBody;
|
|
@@ -8,16 +17,16 @@ export declare namespace TimelaneLayout {
|
|
|
8
17
|
var Aside: typeof TimelaneLayoutAside;
|
|
9
18
|
var Corner: typeof TimelaneLayoutCorner;
|
|
10
19
|
}
|
|
11
|
-
declare function TimelaneLayoutHeader({ children }: PropsWithChildren
|
|
12
|
-
declare function TimelaneLayoutBackground({ children }: PropsWithChildren
|
|
13
|
-
declare function TimelaneLayoutBody({ children }: PropsWithChildren
|
|
14
|
-
declare function TimelaneLayoutFooter({ children }: PropsWithChildren
|
|
20
|
+
export declare function TimelaneLayoutHeader({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function TimelaneLayoutBackground({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function TimelaneLayoutBody({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function TimelaneLayoutFooter({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
15
24
|
interface TimelaneLayoutAsideProps {
|
|
16
25
|
side?: "left" | "right";
|
|
17
26
|
}
|
|
18
|
-
declare function TimelaneLayoutAside({ side, children, }: PropsWithChildren<TimelaneLayoutAsideProps>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function TimelaneLayoutAside({ side, children, }: PropsWithChildren<TimelaneLayoutAsideProps>): import("react/jsx-runtime").JSX.Element;
|
|
19
28
|
interface TimelaneLayoutCornerProps {
|
|
20
29
|
corner?: "top left" | "top right" | "bottom left" | "bottom right";
|
|
21
30
|
}
|
|
22
|
-
declare function TimelaneLayoutCorner({ corner, children, }: PropsWithChildren<TimelaneLayoutCornerProps>): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare function TimelaneLayoutCorner({ corner, children, }: PropsWithChildren<TimelaneLayoutCornerProps>): import("react/jsx-runtime").JSX.Element;
|
|
23
32
|
export {};
|
|
@@ -4,8 +4,10 @@ export interface TimelaneSettingsProviderProps {
|
|
|
4
4
|
settings: TimelaneSettings;
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* `<TimelaneSettingsProvider>` can be wrapped around a `<Timelane>` to provide
|
|
8
|
+
* the settings context. Settings will be overwritten by any prop set on `<Timelane>` itself.
|
|
9
|
+
*
|
|
10
|
+
* It is needed when you want to use the `useScroll` hook outside of a Timelane component,
|
|
11
|
+
* since `useScroll` requires access to the settings `start`, `end`, and `pixelsPerDay`.
|
|
10
12
|
*/
|
|
11
13
|
export declare function TimelaneSettingsProvider({ settings: _settings, children, }: PropsWithChildren<TimelaneSettingsProviderProps>): import("react/jsx-runtime").JSX.Element;
|
package/dist/react-timelane.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.timelane-layout .timelane-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timelane-layout .timelane-layout-inner .timelane-layout-header,.timelane-layout .timelane-layout-inner .timelane-layout-footer,.timelane-layout .timelane-layout-inner .timelane-layout-aside,.timelane-layout .timelane-layout-inner .timelane-layout-corner{background:#fff}.timelane-layout .timelane-layout-inner .timelane-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101
|
|
1
|
+
.timelane-layout{position:relative;width:100%;height:100%;overflow:auto}.timelane-layout .timelane-layout-inner{position:relative;width:fit-content;height:fit-content;display:grid;grid-template-areas:"corner-tl header corner-tr" "aside-l body aside-r" "corner-bl footer corner-br"}.timelane-layout .timelane-layout-inner .timelane-layout-header,.timelane-layout .timelane-layout-inner .timelane-layout-footer,.timelane-layout .timelane-layout-inner .timelane-layout-aside,.timelane-layout .timelane-layout-inner .timelane-layout-corner{background:#fff}.timelane-layout .timelane-layout-inner .timelane-layout-header{grid-area:header;position:sticky;position:-webkit-sticky;top:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-body{grid-area:body;z-index:100}.timelane-layout .timelane-layout-inner .timelane-layout-background{grid-area:body;z-index:-1}.timelane-layout .timelane-layout-inner .timelane-layout-footer{grid-area:footer;position:sticky;position:-webkit-sticky;bottom:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside{grid-area:aside-l;justify-self:stretch;position:sticky;position:-webkit-sticky;left:0;z-index:101}.timelane-layout .timelane-layout-inner .timelane-layout-aside.timelane-layout-aside-right{grid-area:aside-r;right:0;left:initial}.timelane-layout .timelane-layout-inner .timelane-layout-corner{position:sticky;position:-webkit-sticky;z-index:102}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-left{grid-area:corner-tl;top:0;left:0;border-bottom:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-top-right{grid-area:corner-tr;top:0;right:0;border-bottom:1px solid lightgray;border-left:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-left{grid-area:corner-bl;bottom:0;left:0;border-top:1px solid lightgray;border-right:1px solid lightgray}.timelane-layout .timelane-layout-inner .timelane-layout-corner.timelane-layout-corner-bottom-right{grid-area:corner-br;bottom:0;right:0;border-top:1px solid lightgray;border-left:1px solid lightgray}*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%;border:1px solid var(--timelane-border-color-normal)}.timelane .timelane-header{width:fit-content;top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff;border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal)}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-lane{border-color:var(--timelane-border-color-normal)!important;border-top:1px solid gray;border-bottom:1px solid gray;margin-top:-1px;overflow:hidden}.timelane .timelane-body .timelane-lane:last-child{margin-bottom:-1px}.timelane .timelane-body .timelane-lane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle{background:#bed7dc;border-radius:5px;top:4px!important;bottom:4px!important;height:auto!important;width:6px!important;z-index:2;background:transparent!important;transition:.2s}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation{background:#92a8d1;border-radius:2px;border:2px solid transparent;height:calc(100% - 1px);overflow:hidden;cursor:pointer;padding:0 4px;margin-left:1px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timelane-allocation}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timelane-allocation (max-height: 30px){.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-lane.timelane-row-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside{border-right:1px solid var(--timelane-border-color-normal);width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border:1px solid var(--timelane-border-color-normal);border-right:none;border-left:none;margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timelane .timelane-aside .timelane-aside-lane-header.timelane-aside-lane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-lane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu.timelane-aside-resource-menu-open{opacity:1}.timelane .timelane-background{position:relative;width:100%;height:100%}.timelane .timelane-background .timelane-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label{border-right:1px solid var(--timelane-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-sunday{border-right:1px solid var(--timelane-border-color-normal)}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-background .timelane-background-inner .timelane-background-focused-day-position{position:absolute;height:100%;background:var(--timelane-focused-color);z-index:-101}.timelane-header-tooltip,.timelane-header-day-tooltip{font-size:2em}
|