@itwin/appui-react 5.0.0-dev.2 → 5.0.0-dev.3

package/lib/esm/appui-react/layout/target/PanelTargets.scss

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-target-panelTargets {
+  $offset: 0.75em;
+
+  position: absolute;
+  justify-content: center;
+
+  &.nz-wide {
+    gap: 6em;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    grid-row: 2/3;
+    height: 100%;
+    top: 0;
+  }
+
+  &.nz-left {
+    grid-column: 1;
+    left: $offset;
+  }
+
+  &.nz-right {
+    grid-column: 3;
+    right: $offset;
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    grid-column: 2/3;
+    width: 100%;
+    left: 0;
+
+    &.nz-span {
+      grid-column: 1/4;
+    }
+  }
+
+  &.nz-top {
+    grid-row: 1;
+    top: $offset;
+  }
+
+  &.nz-bottom {
+    grid-row: 3;
+    bottom: $offset;
+  }
+}

package/lib/esm/appui-react/layout/target/SectionTarget.scss

@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.nz-target-sectionTarget {
+  @include nz-widget-target;
+
+  &.nz-horizontal {
+    flex-direction: row;
+  }
+
+  &.nz-vertical {
+    flex-direction: column;
+  }
+
+  > .nz-section {
+    flex: 1;
+    background-color: var(--iui-color-background);
+    pointer-events: none;
+
+    &.nz-target {
+      background-color: $nz-widget-target-background;
+    }
+  }
+
+  > .nz-border {
+    flex: 0 0 $nz-widget-target-border-size;
+    background-color: $nz-widget-target-border-color;
+    pointer-events: none;
+  }
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  &.nz-targeted {
+    @include nz-targeted-widget-target;
+
+    > .nz-section {
+      &.nz-target {
+        background-color: $nz-opaque-outline-color;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/target/SectionTargets.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-target-sectionTargets {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}

package/lib/esm/appui-react/layout/target/TabTarget.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "../outline/variables" as *;
+
+.nz-target-tabTarget {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  @include uicore-z-index(drop-target);
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  &.nz-targeted {
+    background-color: $nz-outline-color;
+
+    > .nz-section {
+      &.nz-target {
+        background-color: $nz-outline-color;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/target/TargetContainer.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-target-targetContainer {
+  display: flex;
+  gap: 1em;
+  pointer-events: none;
+
+  &.nz-horizontal {
+    flex-direction: row;
+  }
+
+  &.nz-vertical {
+    flex-direction: column;
+  }
+}

package/lib/esm/appui-react/layout/target/TitleBarTarget.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+.nz-target-titleBarTarget {
+  flex: 1 1 0;
+  position: relative;
+  overflow: hidden;
+
+  @include uicore-z-index(drop-target);
+
+  &.nz-hidden {
+    display: none;
+  }
+}

package/lib/esm/appui-react/layout/target/WidgetTarget.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-target-widgetTarget {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}

package/lib/esm/appui-react/layout/target/_variables.scss

@@ -0,0 +1,66 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index";
+@use "../outline/variables";
+
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+@forward "~@itwin/core-react/lib/core-react/z-index";
+@forward "../outline/variables";
+
+$nz-widget-target-border-color: var(--iui-color-background-disabled);
+$nz-widget-target-background: var(--iui-color-background-backdrop-hover);
+$nz-widget-target-border-size: 2px;
+
+@mixin nz-widget-target {
+  $length: 4em;
+
+  height: $length;
+  width: $length;
+  border: $nz-widget-target-border-size solid $nz-widget-target-border-color;
+  border-radius: var(--iui-border-radius-1);
+  box-sizing: border-box;
+  background-color: $nz-widget-target-background;
+  transition: transform var(--iui-duration-1) ease-in;
+  pointer-events: all;
+  display: flex;
+  box-shadow: var(--iui-shadow-3);
+  animation: nz-grow var(--iui-duration-1) ease-in-out,
+    nz-pulse 3s ease-in-out 2s infinite;
+
+  @include z-index.uicore-z-index(drop-target);
+
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes nz-pulse {
+      from {
+        transform: scale3d(1, 1, 1);
+      }
+
+      50% {
+        transform: scale3d(1.1, 1.1, 1.1);
+      }
+
+      to {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+
+    @keyframes nz-grow {
+      from {
+        transform: scale3d(0, 0, 0);
+      }
+
+      to {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  }
+}
+
+@mixin nz-targeted-widget-target {
+  transform: scale(1.2);
+  background-color: variables.$nz-opaque-outline-color;
+  box-shadow: var(--iui-shadow-4);
+  animation-iteration-count: 0, 0;
+}

package/lib/esm/appui-react/layout/tool-settings/Docked.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-toolSettings-docked {
+  display: flex;
+  height: 100%;
+  gap: var(--iui-size-m);
+}
+
+.uifw-toolSettings-docked_container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--iui-size-2xs);
+  align-items: flex-start;
+}
+
+.toolsettings-appear {
+  opacity: var(--iui-opacity-6);
+  transition: opacity var(--iui-duration-1) ease-in-out;
+  transform: translateY(-100%);
+
+  &-active {
+    opacity: var(--iui-opacity-2);
+    transform: translateY(0);
+    transition: opacity var(--iui-duration-1) ease-in-out,
+      transform var(--iui-duration-2) ease-out;
+  }
+}

package/lib/esm/appui-react/layout/tool-settings/Handle.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-toolSettings-handle {
+  height: var(--iui-component-height);
+  width: var(--iui-component-height);
+  display: grid;
+  place-items: center;
+  cursor: grab;
+  flex-shrink: 0;
+
+  &:active {
+    cursor: grabbing;
+  }
+}

package/lib/esm/appui-react/layout/tool-settings/Overflow.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-overflow {
+  margin-left: auto;
+
+  &.nz-hidden {
+    visibility: hidden;
+  }
+}

package/lib/esm/appui-react/layout/tool-settings/Panel.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-toolSettings-panel {
+  background: var(--iui-color-background);
+  padding: 0.5em;
+}

package/lib/esm/appui-react/layout/tool-settings/Setting.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolSettings-setting {
+  height: 100%;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}

package/lib/esm/appui-react/layout/widget/Buttons.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-buttons {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  height: 100%;
+}

package/lib/esm/appui-react/layout/widget/Content.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../scrollbar" as *;
+
+.nz-widget-content {
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+
+  @include nz-scrollbar;
+}

package/lib/esm/appui-react/layout/widget/ContentContainer.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-contentContainer {
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  display: flex;
+
+  > .nz-content {
+    flex: 1;
+    display: flex;
+    min-width: 0;
+  }
+}
+
+.nz-widget-floatingWidget {
+  .nz-widget-contentContainer.nz-minimized {
+    flex-basis: 0;
+    overflow: hidden;
+  }
+}

package/lib/esm/appui-react/layout/widget/ContentRenderer.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-contentRenderer {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.nz-widget-panelWidget {
+  &.nz-horizontal {
+    .nz-minimized {
+      .nz-widget-contentRenderer {
+        position: absolute;
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/FloatingTab.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "variables" as *;
+
+.nz-widget-floatingTab {
+  position: absolute;
+  padding: 0 1em;
+  display: flex;
+  align-items: center;
+  background: var(--iui-color-background-backdrop-hover);
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  height: $nz-widget-tab-height;
+  border-radius: $nz-widget-tab-border-radius;
+  color: var(--iui-color-text-disabled);
+  pointer-events: none;
+  opacity: $nz-dragged-widget-opacity;
+  gap: 6px;
+
+  @include uicore-z-index(drag-preview);
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > span {
+    max-width: 12em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: $nz-widget-tab-font-size;
+  }
+}

package/lib/esm/appui-react/layout/widget/FloatingWidget.scss

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "../widgetopacity" as *;
+@use "variables" as *;
+
+@layer appui.component {
+  .nz-widget-floatingWidget {
+    position: absolute;
+    border: 1px solid var(--iui-color-background-disabled);
+    border-radius: var(--iui-border-radius-1);
+    min-width: 200px;
+    min-height: 120px;
+    transition: opacity var(--iui-duration-2) ease;
+
+    @include uicore-z-index(dragged-widget);
+    @include nz-widget-opacity;
+
+    &.nz-floating-toolSettings {
+      min-height: 60px;
+    }
+
+    &.nz-minimized {
+      flex-grow: 0;
+
+      > .nz-content {
+        width: 0;
+      }
+    }
+
+    &.nz-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &.nz-dragged {
+      pointer-events: none;
+      opacity: $nz-dragged-widget-opacity;
+
+      @include uicore-z-index(drag-preview);
+    }
+
+    &.nz-minimized {
+      min-height: 30px;
+
+      .nz-widget-floatingWidget_handle {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .nz-widget-floatingWidget_handle {
+    $size: 0.5em;
+    $cornerSize: 1em;
+
+    position: absolute;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &.nz-left,
+    &.nz-right {
+      height: 100%;
+      width: $size;
+      cursor: ew-resize;
+    }
+
+    &.nz-top,
+    &.nz-bottom {
+      width: 100%;
+      height: $size;
+      cursor: ns-resize;
+    }
+
+    &.nz-left {
+      left: -$size * 0.5;
+      top: 0;
+    }
+
+    &.nz-right {
+      right: -$size * 0.5;
+      top: 0;
+    }
+
+    &.nz-top {
+      left: 0;
+      top: -$size * 0.5;
+    }
+
+    &.nz-bottom {
+      left: 0;
+      bottom: -$size * 0.5;
+    }
+
+    &.nz-topLeft,
+    &.nz-topRight,
+    &.nz-bottomLeft,
+    &.nz-bottomRight {
+      height: $cornerSize;
+      width: $cornerSize;
+    }
+
+    &.nz-topLeft {
+      left: -$cornerSize * 0.3333;
+      top: -$cornerSize * 0.3333;
+      cursor: nwse-resize;
+    }
+
+    &.nz-topRight {
+      right: -$cornerSize * 0.3333;
+      top: -$cornerSize * 0.3333;
+      cursor: nesw-resize;
+    }
+
+    &.nz-bottomLeft {
+      left: -$cornerSize * 0.3333;
+      bottom: -$cornerSize * 0.3333;
+      cursor: nesw-resize;
+    }
+
+    &.nz-bottomRight {
+      right: -$cornerSize * 0.3333;
+      bottom: -$cornerSize * 0.3333;
+      cursor: nwse-resize;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/Menu.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-menu {
+  background: var(--iui-color-background);
+}
+
+.nz-widget-menu_tabs {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}

package/lib/esm/appui-react/layout/widget/MenuTab.scss

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-menuTab {
+  display: flex;
+  line-height: 2em;
+  height: 2em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  padding-right: 3em;
+  padding-left: 0.5em;
+
+  &.nz-no-icon {
+    padding-left: 1.25em;
+  }
+
+  > .nz-icon {
+    width: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  > .nz-badge {
+    position: absolute;
+    left: 0.25em;
+  }
+
+  > span {
+    max-width: 15em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > .nz-checkmark {
+    position: absolute;
+    right: 0.75em;
+    border-style: solid;
+    border-color: var(--iui-color-border-accent);
+    border-width: 0 0.15em 0.15em 0;
+    width: 0.5em;
+    height: 1em;
+    transform: rotate(45deg);
+
+    &.nz-hidden {
+      display: none;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--iui-color-text-accent);
+    }
+  }
+}