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

package/lib/esm/appui-react/layout/backstage/Backstage.scss

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
+@use "../prefix" as *;
+@use "../safearea" as *;
+@use "../scrollbar" as *;
+@use "variables" as *;
+
+.nz-backstage-backstage {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: $nz-backstage-width;
+  height: 100%;
+  font-size: $nz-backstage-item-font-size;
+  color: var(--iui-color-text);
+  background-color: var(--iui-color-background);
+  border-right: 1px solid var(--iui-color-border);
+  transform: translateX(-100%);
+  box-sizing: border-box;
+
+  @include uicore-z-index(backstage);
+  @include nz-transition(transform 0.25s ease);
+
+  &.nz-open {
+    @include nz-transform(translateX(0%));
+  }
+
+  @include for-tablet-landscape-down {
+    font-size: var(--iui-font-size-1);
+  }
+
+  @include for-phone-only {
+    font-size: var(--iui-font-size-0);
+  }
+
+  > ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: auto;
+
+    @include nz-scrollbar;
+  }
+
+  > .nz-header {
+    border-bottom: $nz-backstage-header-divider-width solid
+      var(--iui-color-border-subtle);
+  }
+
+  > .nz-footer {
+    margin-top: auto;
+  }
+
+  &.nz-safe-area-top {
+    @include nz-safe-area-top;
+  }
+
+  &.nz-safe-area-bottom {
+    @include nz-safe-area-bottom;
+  }
+}
+
+.nz-backstage-backstage_overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  background: transparent;
+  @include uicore-z-index(backstage);
+  @include nz-transition(0.25s ease);
+
+  &.nz-open {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &.nz-overlay {
+    background-color: $nz-backstage-overlay-background;
+  }
+}

package/lib/esm/appui-react/layout/backstage/Item.scss

@@ -0,0 +1,107 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/style/breakpoints" as *;
+@use "../prefix" as *;
+@use "../safearea" as *;
+@use "variables" as *;
+
+.nz-backstage-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-bottom: $nz-backstage-item-spacing;
+  padding-top: $nz-backstage-item-spacing;
+  cursor: pointer;
+
+  @include nz-transition(0.2s ease);
+
+  @include for-tablet-landscape-down {
+    padding-bottom: $nz-backstage-item-spacing-medium;
+    padding-top: $nz-backstage-item-spacing-medium;
+  }
+
+  @include for-phone-only {
+    padding-bottom: $nz-backstage-item-spacing-small;
+    padding-top: $nz-backstage-item-spacing-small;
+  }
+
+  &:hover {
+    background: var(--iui-color-background-hover);
+    color: var(--iui-color-text-hover);
+  }
+
+  &.nz-active {
+    background: var(--iui-color-background-accent-muted);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      margin-left: $nz-backstage-highlight-bar-spacing-left;
+      width: $nz-backstage-highlight-bar-spacing-left;
+      background: var(--iui-color-border-accent);
+    }
+  }
+
+  &.nz-disabled {
+    color: var(--iui-color-text-disabled);
+    pointer-events: none;
+  }
+
+  > .nz-icon {
+    display: flex;
+    padding-left: $nz-backstage-icon-spacing-left;
+    padding-right: $nz-backstage-icon-spacing-right;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  > div:last-child {
+    display: flex;
+    flex-direction: column;
+    padding-right: var(--iui-size-s);
+    overflow: hidden;
+
+    > span {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    > span:nth-child(2) {
+      margin-top: var(--iui-size-xs);
+      font-size: $nz-backstage-subtitle-font-size;
+      color: var(--iui-color-text-muted);
+
+      @include for-tablet-landscape-down {
+        font-size: var(--iui-font-size-0);
+      }
+
+      @include for-phone-only {
+        font-size: var(--iui-font-size-0) - 1px;
+      }
+    }
+  }
+
+  > .nz-badge {
+    position: absolute;
+    top: 1px;
+    left: 5px;
+  }
+
+  &.nz-safe-area-left {
+    @include nz-safe-area-left;
+
+    &.nz-active {
+      &:before {
+        @include nz-safe-area-left(left);
+      }
+    }
+  }
+}

package/lib/esm/appui-react/layout/backstage/Separator.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.nz-backstage-separator {
+  height: $nz-backstage-divider-height;
+  background-color: var(--iui-color-border-subtle);
+}

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

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+// backstage common values
+$nz-backstage-width: 300px;
+$nz-backstage-overlay-background: rgba(0, 0, 0, var(--iui-opacity-4));
+
+$nz-backstage-item-font-size: var(--iui-font-size-2);
+$nz-backstage-subtitle-font-size: var(--iui-font-size-1);
+
+$nz-backstage-item-spacing: 24px;
+$nz-backstage-item-spacing-medium: 20px;
+$nz-backstage-item-spacing-small: 16px;
+
+$nz-backstage-icon-spacing-left: 24px;
+$nz-backstage-icon-spacing-right: 16px;
+
+$nz-backstage-highlight-bar-width: 2px;
+$nz-backstage-highlight-bar-spacing-left: 2px;
+$nz-backstage-divider-height: 1px;
+$nz-backstage-header-divider-width: 2px;
+
+$nz-backstage-background: var(--iui-color-background-hover);
+$nz-backstage-item-color: var(--iui-color-text);
+$nz-backstage-item-color-disabled: var(--iui-color-text-disabled);
+$nz-backstage-item-active-background: var(--iui-color-background-backdrop);
+$nz-backstage-item-hover-background: var(--iui-color-background-hover);
+$nz-backstage-highlight-bar-background: var(--iui-color-icon-accent);
+$nz-backstage-divider-color: var(--iui-color-background-backdrop-hover);

package/lib/esm/appui-react/layout/footer/dialog/Dialog.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-footer-dialog-dialog {
+  border-radius: var(--iui-border-radius-1);
+  background-color: var(--iui-color-background);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  position: relative;
+}

package/lib/esm/appui-react/layout/footer/dialog/TitleBar.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/typography" as *;
+@use "variables" as *;
+
+.nz-footer-dialog-titleBar {
+  $horizontal-padding: $nz-dialog-padding;
+  $vertical-padding: 12px;
+
+  background-color: var(--iui-color-background-backdrop);
+  border-bottom: 1px solid var(--iui-color-border-subtle);
+  min-height: $nz-footer-title-bar-height;
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  grid-gap: $horizontal-padding;
+  padding-left: $horizontal-padding;
+  padding-right: $horizontal-padding;
+
+  > .nz-title {
+    @include title;
+    color: var(--iui-color-text);
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}

package/lib/esm/appui-react/layout/footer/dialog/_variables.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-dialog-padding: 16px;
+$nz-dialog-border-width: 1px;
+
+$nz-footer-title-bar-height: 36px;

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-snapMode-panel {
+  background-color: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  overflow: hidden;
+
+  > .nz-snaps {
+    display: grid;
+    grid-gap: 8px;
+    padding: 8px;
+
+    @include body1;
+  }
+}

package/lib/esm/appui-react/layout/footer/snap-mode/Snap.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-footer-snapMode-snap {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 8px;
+  padding: 4px 8px;
+  align-items: center;
+  cursor: pointer;
+  color: var(--iui-color-text);
+  position: relative;
+
+  > .nz-icon {
+    grid-row: 1;
+    color: var(--iui-color-icon);
+  }
+
+  > .nz-label {
+    grid-row: 1;
+  }
+
+  &.nz-active {
+    color: var(--iui-color-text-accent);
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      background-color: currentColor;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+    }
+  }
+
+  &:hover {
+    color: var(--iui-color-text-accent-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Dialog.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-dialog {
+  min-width: 300px;
+  min-height: 75px;
+  color: var(--iui-color-border);
+
+  .nz-content {
+    color: var(--iui-color-text);
+    min-width: 250px;
+    max-width: 360px;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Instruction.scss

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-instruction {
+  display: grid;
+  align-items: center;
+  grid-gap: 6px;
+  grid-auto-flow: column;
+  grid-template-columns: 48px 1fr;
+  line-height: 16px;
+  position: relative;
+
+  > .nz-image {
+    margin: auto;
+
+    > .nz-footer-toolAssistance-newDot {
+      position: absolute;
+      top: 12px;
+      left: -2px;
+    }
+  }
+
+  > .nz-text-new {
+    font-weight: bold;
+  }
+}

package/lib/esm/appui-react/layout/footer/tool-assistance/Item.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-footer-toolAssistance-item {
+  min-height: 27px;
+  padding-left: 5px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+
+  display: grid;
+  align-items: center;
+}

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