@bryntum/scheduler-thin-trial 7.2.2 → 7.2.4

package/scheduler.css

@@ -99,6 +99,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-column-lines-zindex: 2;
+  --b-column-lines-major-z-index: 1;
   --b-column-lines-tick-style: solid;
   --b-column-lines-major-style: solid;
   --b-column-lines-tick-color: var(--b-neutral-95);
@@ -122,7 +123,7 @@ div.b-resource-info {
   border-inline-start-style: var(--b-column-lines-tick-style);
 }
 .b-column-line-major {
-  z-index: 1;
+  z-index: var(--b-column-lines-major-z-index);
   border-color: var(--b-column-lines-major-color);
   border-inline-start-style: var(--b-column-lines-major-style);
 }
@@ -145,6 +146,8 @@ div.b-resource-info {
 /* lib/Scheduler/feature/Dependencies.css */
 :root,
 :host {
+  --b-dependency-remove-icon-z-index: 1000;
+  --b-dependency-terminals-visible-z-index: 2;
   --b-dependency-zindex: 5;
   --b-dependency-stroke-width: 1;
   --b-dependency-hover-stroke-width: 2;
@@ -260,9 +263,9 @@ div.b-resource-info {
   translate: -50% -50%;
   pointer-events: all;
   cursor: pointer;
-  z-index: 1000;
   animation: b-anim-show-dependency-remove-icon .2s ease-in-out 1;
   font-size: 1.1em;
+  z-index: var(--b-dependency-remove-icon-z-index);
   color: var(--b-dependency-selected-color);
 }
 .b-sch-dependency-remove-icon:before {
@@ -279,7 +282,7 @@ div.b-resource-info {
   animation: b-anim-hide-dependency-remove-icon .15s linear 1;
 }
 :is(.b-sch-event, .b-gantt-task).b-sch-terminals-visible {
-  z-index: 2;
+  z-index: var(--b-dependency-terminals-visible-z-index);
 }
 @keyframes b-anim-show-dependency-remove-icon {
   0% {
@@ -327,6 +330,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/EventDragSelect.css */
 :root,
 :host {
+  --b-event-drag-select-z-index: 100;
   --b-event-drag-select-border-width: 1px;
   --b-event-drag-select-border-style: dashed;
   --b-event-drag-select-border-radius: var(--b-widget-border-radius);
@@ -338,7 +342,7 @@ div.b-resource-info {
   top: 0;
   transform-origin: 0 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--b-event-drag-select-z-index);
   border: var(--b-event-drag-select-border-width) var(--b-event-drag-select-border-style) var(--b-event-drag-select-border-color);
   border-radius: var(--b-event-drag-select-border-radius);
 }
@@ -377,9 +381,10 @@ div.b-resource-info {
 :root,
 :host {
   --b-event-non-working-time-opacity: 0.7;
+  --b-event-non-working-time-z-index: 0;
 }
 .b-timeline-base .b-sch-event-wrap .b-sch-non-working-time {
-  z-index: 0;
+  z-index: var(--b-event-non-working-time-z-index);
   --b-time-range-opacity: var(--b-event-non-working-time-opacity);
 }
 .b-dragging-event .b-sch-event-wrap.b-dragging .b-sch-non-working-time {
@@ -417,6 +422,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/Labels.css */
 :root,
 :host {
+  --b-event-label-z-index: 1;
   --b-event-label-font-size: .9em;
   --b-event-label-font-weight: var(--b-sch-event-font-weight);
   --b-event-label-gap: 0.5em;
@@ -427,11 +433,11 @@ div.b-resource-info {
 :is(.b-sch-event-wrap, .b-gantt-task-wrap) .b-sch-label {
   text-align: center;
   white-space: nowrap;
-  z-index: 1;
   min-width: 1em;
   pointer-events: all;
   user-select: none;
   -webkit-user-select: none;
+  z-index: var(--b-event-label-z-index);
   background: var(--b-event-label-background);
   color: var(--b-event-label-color);
   font-size: var(--b-event-label-font-size);
@@ -485,6 +491,8 @@ div.b-resource-info {
 /* lib/Scheduler/feature/ResourceColumnReorder.css */
 :root,
 :host {
+  --b-resource-column-reorder-drop-indicator-z-index: 2000;
+  --b-resource-column-reorder-proxy-z-index: 10000;
   --b-resource-column-reorder-indicator-size: 2px;
   --b-resource-column-reorder-indicator-color: var(--b-secondary);
   --b-resource-column-reorder-indicator-invalid-color: var(--b-color-red);
@@ -500,7 +508,7 @@ div.b-resource-info {
   display: block;
   top: 0;
   height: 100%;
-  z-index: 2000;
+  z-index: var(--b-resource-column-reorder-drop-indicator-z-index);
   inset-inline-start: calc(var(--b-resource-column-reorder-indicator-size) / -2);
   width: var(--b-resource-column-reorder-indicator-size);
   background-color: var(--b-resource-column-reorder-indicator-color);
@@ -513,8 +521,8 @@ div.b-resource-info {
 }
 .b-resource-column-reorder-proxy {
   position: absolute;
-  z-index: 10000;
   pointer-events: none;
+  z-index: var(--b-resource-column-reorder-proxy-z-index);
   box-shadow: var(--b-resource-column-reorder-box-shadow);
   opacity: var(--b-resource-column-reorder-proxy-opacity);
 }
@@ -535,17 +543,18 @@ div.b-resource-info {
   --b-active-tick-cell-focused-outline-color: var(--b-grid-cell-focused-outline-color);
   --b-active-tick-cell-focused-outline-offset: -2px;
   --b-active-tick-cell-focused-outline-width: var(--b-grid-cell-focused-outline-width);
+  --b-schedule-context-tick-z-index: 7;
 }
 .b-schedule-selected-tick {
   position: absolute;
   justify-content: center;
   overflow: hidden;
-  z-index: 7;
+  z-index: var(--b-schedule-context-tick-z-index);
 }
 .b-schedule-selected-tick.b-widget,
 .b-schedule-selected-tick .b-contains-widget {
-  z-index: 7;
   box-shadow: none;
+  z-index: var(--b-schedule-context-tick-z-index);
 }
 .b-schedule-selected-tick:not(.b-widget, .b-contains-widget) {
   pointer-events: none;
@@ -617,13 +626,17 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/SimpleEventEdit.css */
+:root,
+:host {
+  --b-simple-event-edit-z-index: 100;
+}
 .b-simple-event-editor {
   --b-simple-event-edit-editor-background: var(--b-primary-100);
 }
 .b-simple-event-editor {
   border-radius: inherit;
-  z-index: 15;
   --b-widget-floating-box-shadow: none;
+  z-index: var(--b-simple-event-edit-z-index);
 }
 .b-simple-event-editor.b-target-has-border .b-field {
   --b-text-field-border-width: 0;
@@ -860,6 +873,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-time-selection-opacity: 0.2;
+  --b-time-selection-z-index: 10;
 }
 .b-sch-time-axis-column .b-selected-time-span,
 .b-vertical-time-axis-column .b-selected-time-span {
@@ -898,7 +912,7 @@ div.b-resource-info {
 }
 :is(.b-grid-header, .b-timeline-sub-grid, .b-vertical-time-axis-column) .b-selected-time-span {
   transition: none;
-  z-index: 10;
+  z-index: var(--b-time-selection-z-index);
 }
 .b-timeline-sub-grid .b-selected-time-span {
   --b-time-range-background: var(--b-time-selection-background, var(--b-primary-85));
@@ -1049,6 +1063,7 @@ div.b-resource-info {
   --b-dependency-terminal-size: 14px;
   --b-dependency-terminal-offset: -4px;
   --b-dependency-terminal-z-index: calc(var(--b-event-resize-handle-zindex) + 1);
+  --b-dependency-connector-z-index: 10;
   --b-dependency-terminal-border-width: 1px;
   --b-dependency-terminal-border-style: solid;
   --b-dependency-terminal-border-color: inherit;
@@ -1088,10 +1103,10 @@ div.b-resource-info {
   border-width: var(--b-dependency-terminal-border-width);
   height: var(--b-dependency-terminal-size);
   width: var(--b-dependency-terminal-size);
-  z-index: var(--b-dependency-terminal-z-index);
   --bi-terminal-start-end-offset: 80%;
+  z-index: var(--b-dependency-terminal-z-index);
 }
-@media (pointer : coarse) {
+@media (pointer: coarse) {
   .b-sch-terminal {
     --bi-terminal-start-end-offset: 115%;
   }
@@ -1163,9 +1178,9 @@ div.b-resource-info {
   position: absolute;
   contain: strict;
   border-top: 2px dashed var(--b-dependency-color);
-  z-index: 10;
   transform-origin: 0 0;
   pointer-events: none;
+  z-index: var(--b-dependency-connector-z-index);
 }
 .b-sch-dependency-connector.b-removing {
   transition: width 0.2s ease-out;
@@ -1223,6 +1238,10 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/mixin/HeaderDragSelect.css */
+:root,
+:host {
+  --b-header-drag-select-z-index: 100;
+}
 .b-colorize {
   --b-header-drag-select-background: color-mix(in srgb, var(--b-primary), transparent 70%);
 }
@@ -1233,7 +1252,7 @@ div.b-resource-info {
   height: 100%;
   transform-origin: 0 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--b-header-drag-select-z-index);
   background: var(--b-header-drag-select-background);
 }
 
@@ -1524,6 +1543,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-top-canvas-zindex: 1000;
+  --b-timeline-loading-indicator-z-index: 100;
 }
 .b-timeline-base.b-animating .b-grid-row {
   transition:
@@ -1544,7 +1564,7 @@ div.b-resource-info {
   height: max(1px, 100%);
   width: var(--bi-total-column-width);
 }
-.b-sch-foreground-canvas {
+.b-time-axis-sub-grid .b-sch-foreground-canvas {
   z-index: var(--b-events-zindex);
 }
 .b-sch-top-canvas {
@@ -1557,7 +1577,7 @@ div.b-resource-info {
   display: flex;
   width: 100%;
   height: 2px;
-  z-index: 100;
+  z-index: var(--b-timeline-loading-indicator-z-index);
 }
 .b-timeline-loading-indicator-wrap {
   background: color-mix(in srgb, var(--b-color-green), transparent 80%);
@@ -1626,6 +1646,9 @@ div.b-resource-info {
   padding-inline-end: 0.5em;
   margin-top: -0.75em;
 }
+.b-vertical-time-axis .b-sch-header-row.b-lowest .b-sch-header-time-axis-cell:first-child .b-sch-header-text {
+  margin-top: 0;
+}
 .b-vertical-time-axis .b-sch-header-row:not(.b-lowest) {
   --b-grid-header-hover-background: var(--b-vertical-time-axis-background);
 }
@@ -1643,7 +1666,8 @@ div.b-resource-info {
   rotate: 180deg;
 }
 .b-vertical-time-axis .b-sticky-header .b-sch-header-text {
-  inset-inline-start: 0;
+  top: 0;
+  margin-bottom: 1em;
 }
 .b-firefox .b-sticky-headers .b-resource-header {
   contain: style paint layout;
@@ -1699,6 +1723,10 @@ div.b-resource-info {
   --b-sch-milestone-gap: 0.5em;
   --b-sch-milestone-border-width: var(--b-sch-event-border-width);
   --b-sch-event-border-color: var(--b-sch-event-background);
+  --b-sch-event-wrap-z-index: 1;
+  --b-sch-event-z-index: 1;
+  --b-sch-event-active-z-index: 100;
+  --b-sch-milestone-diamond-z-index: 0;
 }
 .b-grid-row {
   --b-resource-event-color: var(--b-primary);
@@ -1713,10 +1741,10 @@ div.b-resource-info {
   contain: layout style;
   align-items: center;
   pointer-events: all;
-  z-index: 1;
   grid-template-areas: "top    top    top    top    top" "before start  body   end  after" "bottom bottom bottom bottom bottom";
   grid-template-columns: 0 auto 1fr auto 0;
   grid-template-rows: min-content auto min-content;
+  z-index: var(--b-sch-event-wrap-z-index);
   opacity: var(--b-sch-event-opacity);
   transition: var(--b-sch-event-transition);
 }
@@ -1778,10 +1806,10 @@ div.b-resource-info {
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap.b-hover,
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap.b-selected,
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap:focus {
-  z-index: 100 !important;
+  z-index: var(--b-sch-event-active-z-index) !important;
 }
 .b-sch-vertical.b-event-layout-mixed .b-sch-event-wrap:focus {
-  z-index: 100 !important;
+  z-index: var(--b-sch-event-active-z-index) !important;
 }
 .b-sch-event-wrap:where(:not(.b-sch-vertical)) {
   max-height: calc(var(--b-event-size) * 1px);
@@ -1805,7 +1833,7 @@ div.b-resource-info {
   min-height: 0;
   height: 100%;
   opacity: 1;
-  z-index: 1;
+  z-index: var(--b-sch-event-z-index);
   transition: opacity var(--b-default-transition-duration);
   border-color: var(--b-sch-event-border-color);
   min-width: var(--b-sch-event-min-size);
@@ -1898,7 +1926,7 @@ div.b-resource-info {
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone .b-sch-event-content {
   justify-content: center;
-  z-index: 1;
+  z-index: var(--b-sch-event-z-index);
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone .b-sch-event-content::before {
   content: none;
@@ -1910,7 +1938,7 @@ div.b-resource-info {
   content: " ";
   height: calc(var(--b-milestone-size) * 0.707107);
   aspect-ratio: 1 / 1;
-  z-index: 0;
+  z-index: var(--b-sch-milestone-diamond-z-index);
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone::before {
   top: 50%;
@@ -2160,6 +2188,11 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/EventDrag.css */
+:root,
+:host {
+  --b-event-drag-z-index: 200;
+  --b-event-drag-main-z-index: 201;
+}
 .b-sch-event-wrap.b-aborting,
 .b-sch-event-wrap.b-drag-unified-animation {
   transition:
@@ -2169,10 +2202,10 @@ div.b-resource-info {
     top 0.2s;
 }
 .b-sch-event-wrap.b-dragging {
-  z-index: 200 !important;
+  z-index: var(--b-event-drag-z-index) !important;
 }
 .b-sch-event-wrap.b-dragging.b-drag-main {
-  z-index: 201 !important;
+  z-index: var(--b-event-drag-main-z-index) !important;
 }
 .b-event-drag-tooltip .b-tooltip-content > div {
   display: flex;
@@ -2192,6 +2225,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/EventResize.css */
 :root,
 :host {
+  --b-event-resize-wrap-resizing-z-index: 2;
   --b-event-resize-handle-other-size: 3px;
   --b-event-resize-handle-hover-other-size: 3px;
   --b-event-resize-handle-border-radius: 3px;
@@ -2298,7 +2332,7 @@ div.b-resource-info {
   pointer-events: none;
 }
 .b-sch-event-wrap-resizing {
-  z-index: 2;
+  z-index: var(--b-event-resize-wrap-resizing-z-index);
 }
 .b-sch-event-resize-tip .b-tooltip-content > div {
   display: flex;
@@ -2700,6 +2734,9 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/view/TimelineHistogram.css */
+.b-timeline-histogram {
+  --b-non-working-time-zindex: calc(var(--b-column-lines-zindex) + 3);
+}
 .b-timeline-histogram .b-grid-row {
   --b-grid-row-zindex: calc(var(--b-column-lines-zindex) + 2);
 }