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

package/lib/cjs/appui-react/frontstage/ModalFrontstageButton.scss

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-frontstage-modalFrontstageButton {
+  block-size: 3.5rem;
+  aspect-ratio: 1;
+
+  border-radius: 0;
+}
+
+.uifw-frontstage-modalFrontstageButton_icon {
+  $size: 2rem;
+
+  font-size: $size;
+
+  svg {
+    block-size: $size;
+    inline-size: $size;
+  }
+}

package/lib/cjs/appui-react/frontstage/ModalSettingsStage.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-settings-container {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--iui-color-background);
+}

package/lib/cjs/appui-react/layers.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.
+ *--------------------------------------------------------------------------------------------*/
+@layer appui {
+  @layer layout, component, preview;
+
+  @layer preview {
+    @layer horizontal-panel-alignment, enable-maximized-widget;
+  }
+}

package/lib/cjs/appui-react/layout/StandardLayout.scss

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@layer appui.component {
+  .nz-standardLayout {
+    position: relative;
+    height: 100%;
+    background-color: var(--iui-color-background-backdrop);
+    overflow: hidden;
+
+    display: grid;
+    grid-template-columns:
+      [lp-start] minmax(0, auto) [lp-end] 1fr [rp-start] minmax(0, auto)
+      [rp-end];
+    grid-template-rows:
+      minmax(0, auto) [ts-end] minmax(0, auto) [tp-end] 1fr [bp-start] minmax(
+        0,
+        auto
+      )
+      [bp-end]
+      minmax(0, auto);
+    grid-template-areas:
+      "ts ts ts"
+      "tp tp tp"
+      "lp cc rp"
+      "bp bp bp"
+      "sb sb sb";
+
+    > .nz-appContent {
+      grid-row: ts-end / bp-end;
+      grid-column: 1 / -1;
+
+      // TODO: clean-up #uifw-contentlayout-div
+      position: relative;
+    }
+
+    > .nz-toolSettings {
+      grid-area: ts;
+    }
+
+    > .nz-centerContent {
+      grid-area: cc;
+
+      pointer-events: none;
+    }
+
+    > .nz-statusBar {
+      grid-area: sb;
+    }
+
+    &.nz-pinned-left {
+      > .nz-appContent {
+        grid-column-start: 2;
+      }
+    }
+
+    &.nz-pinned-right {
+      > .nz-appContent {
+        grid-column-end: -2;
+      }
+    }
+
+    &.nz-pinned-top {
+      > .nz-appContent {
+        grid-row-start: tp-end;
+      }
+    }
+
+    &.nz-pinned-bottom {
+      > .nz-appContent {
+        grid-row-end: bp-start;
+      }
+    }
+  }
+
+  .nz-standardLayout_topPanel {
+    grid-area: tp;
+  }
+
+  .nz-standardLayout_leftPanel {
+    grid-area: lp;
+  }
+
+  .nz-standardLayout_rightPanel {
+    grid-area: rp;
+  }
+
+  .nz-standardLayout_bottomPanel {
+    grid-area: bp;
+  }
+}

package/lib/cjs/appui-react/layout/_prefix.scss

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin nz-backface-visibility($value) {
+  -webkit-backface-visibility: $value;
+  -moz-backface-visibility: $value;
+  backface-visibility: $value;
+}
+
+@mixin nz-transition($value) {
+  -webkit-transition: $value;
+  -moz-transition: $value;
+  -o-transition: $value;
+  transition: $value;
+}
+
+@mixin nz-transform($value) {
+  -moz-transform: $value;
+  -webkit-transform: $value;
+  transform: $value;
+}
+
+@mixin nz-border-radius($value) {
+  -webkit-border-radius: $value;
+  -moz-border-radius: $value;
+  border-radius: $value;
+}
+
+@mixin nz-cursor-grabbing() {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}

package/lib/cjs/appui-react/layout/_safearea.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin nz-safe-area-left($property: padding-left) {
+  @include nz-internal-safe-area($property, safe-area-inset-left);
+}
+
+@mixin nz-safe-area-top($property: padding-top) {
+  @include nz-internal-safe-area($property, safe-area-inset-top);
+}
+
+@mixin nz-safe-area-right($property: padding-right) {
+  @include nz-internal-safe-area($property, safe-area-inset-right);
+}
+
+@mixin nz-safe-area-bottom($property: padding-bottom) {
+  @include nz-internal-safe-area($property, safe-area-inset-bottom);
+}
+
+@mixin nz-internal-safe-area($property, $variable) {
+  /* iOS 11 */
+  #{$property}: constant($variable);
+  /* iOS 11.2+ */
+  #{$property}: env($variable);
+}

package/lib/cjs/appui-react/layout/_scrollbar.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/scrollbar";
+
+@forward "~@itwin/core-react/lib/core-react/scrollbar";
+
+$nz-scrollbar-width: 12px;
+$nz-scrollbar-padding: 2px;
+
+@mixin nz-scrollbar(
+  $color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4)),
+  $width: $nz-scrollbar-width,
+  $padding: $nz-scrollbar-padding
+) {
+  @include scrollbar.uicore-scrollbar($color, $width, $padding);
+}
+
+@mixin nz-hidden-scrollbar {
+  @include scrollbar.uicore-hidden-scrollbar;
+}

package/lib/cjs/appui-react/layout/_target.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.
+ *--------------------------------------------------------------------------------------------*/
+@mixin nz-internal-targeted {
+  &:hover,
+  &.nz-targeted {
+    @content;
+  }
+}

package/lib/cjs/appui-react/layout/_widgetopacity.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+@mixin nz-widget-opacity {
+  opacity: var(--buic-widget-opacity, 0.9);
+  transition: opacity var(--iui-duration-1) ease;
+
+  &:hover,
+  &:focus-within {
+    opacity: 1;
+  }
+}

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/appui-react/layout/footer/snap-mode/Snap.scss

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * 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;
+
+  svg {
+    fill: currentColor;
+  }
+
+  > .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/cjs/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/cjs/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/cjs/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;
+}