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

package/lib/cjs/appui-react/layout/footer/tool-assistance/NewDot.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-footer-toolAssistance-newDot {
+  height: 5px;
+  width: 5px;
+  background-color: var(--iui-color-text-positive);
+  border-radius: 50%;
+  display: inline-block;
+}

package/lib/cjs/appui-react/layout/footer/tool-assistance/Separator.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/typography" as *;
+
+.nz-footer-toolAssistance-separator {
+  margin-top: 18px;
+  margin-bottom: 8px;
+
+  > .nz-label {
+    @include title;
+  }
+
+  > .nz-separator {
+    height: 1px;
+    width: 100%;
+    background-color: var(--iui-color-border-subtle);
+  }
+}

package/lib/cjs/appui-react/layout/outline/PanelOutline.scss

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-outline-panelOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  transform: scale(1);
+  transition: transform var(--iui-duration-1) ease-in;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+  &.nz-hidden {
+    transition: none;
+  }
+
+  &.nz-left,
+  &.nz-right {
+    height: 100%;
+  }
+
+  &.nz-left {
+    transform-origin: left;
+
+    &.nz-hidden {
+      transform: scale(0, 1);
+    }
+  }
+
+  &.nz-right {
+    right: 0;
+    transform-origin: right;
+
+    &.nz-hidden {
+      transform: scale(0, 1);
+    }
+  }
+
+  &.nz-top,
+  &.nz-bottom {
+    width: 100%;
+  }
+
+  &.nz-top {
+    transform-origin: top;
+
+    &.nz-hidden {
+      transform: scale(1, 0);
+    }
+  }
+
+  &.nz-bottom {
+    bottom: 0;
+    transform-origin: bottom;
+
+    &.nz-hidden {
+      transform: scale(1, 0);
+    }
+  }
+}

package/lib/cjs/appui-react/layout/outline/SectionOutline.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-outline-sectionOutline {
+  background-color: $nz-outline-color;
+
+  &.nz-horizontal {
+    transition: width var(--iui-duration-1) ease-in;
+    height: 100%;
+    width: 50%;
+    top: 0;
+
+    &.nz-0 {
+      left: 0;
+    }
+
+    &.nz-1 {
+      right: 0;
+    }
+
+    &.nz-hidden {
+      width: 0;
+    }
+  }
+
+  &.nz-vertical {
+    transition: height var(--iui-duration-1) ease-in;
+    width: 100%;
+    height: 50%;
+    left: 0;
+
+    &.nz-0 {
+      top: 0;
+    }
+
+    &.nz-1 {
+      bottom: 0;
+    }
+
+    &.nz-hidden {
+      height: 0;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/outline/TabOutline.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.nz-outline-tabOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  max-width: 6em;
+
+  &.nz-hidden {
+    display: none;
+  }
+}

package/lib/cjs/appui-react/layout/outline/WidgetOutline.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-outline-widgetOutline {
+  background-color: $nz-outline-color;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  &.nz-hidden {
+    display: none;
+  }
+}

package/lib/cjs/appui-react/layout/outline/_variables.scss

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+$nz-outline-color: rgba(140, 210, 255, var(--iui-opacity-3));
+$nz-opaque-outline-color: rgb(140, 210, 255);

package/lib/cjs/appui-react/layout/popup/Tooltip.scss

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-popup-tooltip {
+  position: absolute;
+  background-color: hsl(var(--iui-color-background-hsl) / 0.9);
+  color: var(--iui-color-text);
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 5px;
+  align-items: center;
+  padding: 5px 10px;
+
+  @include uicore-z-index(tooltip);
+
+  > .nz-content {
+    white-space: nowrap;
+  }
+}

package/lib/cjs/appui-react/layout/target/MergeTarget.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 "variables" as *;
+
+.nz-target-mergeTarget {
+  @include nz-widget-target;
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  &.nz-targeted {
+    @include nz-targeted-widget-target;
+  }
+}

package/lib/cjs/appui-react/layout/target/PanelTarget.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-panelTarget {
+  $length: 6em;
+
+  @include nz-widget-target;
+
+  &.nz-horizontal {
+    width: $length;
+  }
+
+  &.nz-vertical {
+    height: $length;
+  }
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  &.nz-targeted {
+    @include nz-targeted-widget-target;
+  }
+}

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;
+      }
+    }
+  }
+}