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

package/lib/esm/appui-react/configurableui/ConfigurableUiContent.scss

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/base/base" as *;
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+#uifw-configurableui-wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: var(--iui-font-size-1);
+}
+
+#uifw-frontstage-composer {
+  width: 100%;
+  height: 100%;
+}
+
+.uifw-unselectable {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.uifw-centered {
+  @include uicore-centered;
+}
+
+.uifw-dragdrop-layer {
+  cursor: grabbing;
+  position: fixed;
+  pointer-events: none;
+  @include uicore-z-index(dragdrop);
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+@layer appui.layout {
+  .uifw-configurableui-portalContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    pointer-events: none;
+
+    > * {
+      pointer-events: all;
+    }
+  }
+}

package/lib/esm/appui-react/content/ContentLayout.scss

@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/base/base" as *;
+
+#uifw-contentlayout-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: auto;
+
+  .Pane2 {
+    height: 100%;
+  }
+
+  .Resizer {
+    background-color: var(--iui-color-border);
+    box-sizing: border-box;
+    background-clip: padding-box;
+    margin: 0;
+    transition: all var(--iui-duration-1) ease;
+
+    &.horizontal {
+      height: 1px;
+      min-height: 1px;
+      width: 100%;
+      cursor: ns-resize;
+
+      > .nz-resizer-grip {
+        height: 5px;
+        width: 100%;
+        top: -2px;
+
+        &:before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 11px;
+        }
+      }
+    }
+
+    &.vertical {
+      width: 1px;
+      min-width: 1px;
+      height: 100%;
+      cursor: ew-resize;
+
+      > .nz-resizer-grip {
+        height: 100%;
+        width: 5px;
+        left: -2px;
+
+        &:before {
+          content: "";
+          position: absolute;
+          width: 11px;
+          height: 100%;
+        }
+      }
+    }
+
+    &.horizontal,
+    &.vertical {
+      > .nz-resizer-grip {
+        background-color: transparent;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        display: flex;
+        z-index: 1;
+        transition: background-color var(--iui-duration-1) ease;
+
+        &:hover {
+          background-color: var(--iui-color-border-accent);
+        }
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      > .nz-resizer-grip {
+        &:hover {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .uifw-contentlayout-full-size {
+    @include uicore-full-size;
+  }
+}
+
+div.uifw-contentlayout-full-size div.SplitPane div.Pane {
+  overflow: hidden;
+}
+
+.uifw-contentlayout-wrapper {
+  width: 100%;
+  height: 100%;
+}

package/lib/esm/appui-react/content/ContentOverlay.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.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-content-contentOverlay {
+  position: relative;
+}
+
+.uifw-content-contentOverlay_activeStrip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+
+  &.uifw-active {
+    background-color: var(--iui-color-border-warning);
+  }
+}

package/lib/esm/appui-react/content/DefaultViewOverlay.scss

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.uifw-view-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(
+    100% - (var(--iui-size-s) * 4) - (40px * 2)
+  ); // TODO: Change iui-size-s to an AppUI global CSS variable, same for 40px
+  position: absolute;
+  inset: auto 0 var(--iui-size-s) 0;
+  margin-inline: auto;
+  pointer-events: none;
+  @include uicore-z-index(view-overlay);
+}
+
+.uifw-animation-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 1000px;
+  background-color: Hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2));
+  -webkit-backdrop-filter: saturate(1.8) blur(20px);
+  backdrop-filter: saturate(1.8) blur(20px);
+  border: 1px solid var(--iui-color-border);
+  border-radius: var(--iui-border-radius-1);
+  transition: background-color var(--iui-duration-1) ease;
+  pointer-events: auto;
+  container: solar-timeline / inline-size;
+
+  &:hover {
+    background-color: Hsl(
+      var(--iui-color-background-hsl) / var(--iui-opacity-1)
+    );
+  }
+}

package/lib/esm/appui-react/cursor/cursorpopup/CursorPopup.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "../../variables" as *;
+
+.uifw-cursorpopup {
+  border: {
+    color: $uifw-popup-border-color;
+    radius: $uifw-popup-border-radius;
+    style: solid;
+    width: $uifw-popup-border-width;
+  }
+
+  background-color: hsl(var(--iui-color-background-hsl) / $uifw-popup-opacity);
+  position: fixed;
+  height: fit-content;
+  width: fit-content;
+  transition: opacity 500ms;
+
+  > .uifw-cursorpopup-title {
+    min-height: $uifw-popup-title-bar-min-height;
+    opacity: $uifw-popup-opacity;
+  }
+
+  > .uifw-cursorpopup-content {
+    padding: $uifw-popup-content-padding;
+  }
+
+  &.uifw-cursorpopup-fadeOut {
+    opacity: 0;
+  }
+}

package/lib/esm/appui-react/cursor/cursorprompt/CursorPrompt.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/icons/variables" as *;
+
+.uifw-cursor-prompt {
+  padding: 5px;
+
+  color: var(--iui-color-text);
+  min-width: 100px;
+  max-width: 340px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  > .uifw-cursor-prompt-icon {
+    padding-left: 3px;
+    padding-right: 3px;
+
+    width: $uicore-icons-small;
+    height: $uicore-icons-small;
+  }
+
+  > .uifw-cursor-prompt-text {
+    padding-left: 3px;
+    padding-right: 3px;
+  }
+}

package/lib/esm/appui-react/dialog/DialogManagerBase.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+
+.uifw-dialog-dialogManagerBase_renderer {
+  position: relative;
+
+  @include uicore-z-index(dialog);
+}

package/lib/esm/appui-react/feedback/ElementTooltip.scss

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.uifw-feedback-elementTooltip {
+  pointer-events: none;
+  width: max-content;
+  font-size: var(--iui-font-size-1);
+  border: {
+    color: $uifw-popup-border-color;
+    radius: $uifw-popup-border-radius;
+    style: solid;
+    width: $uifw-popup-border-width;
+  }
+}
+
+.uifw-feedback-elementTooltip_container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+
+  @include uicore-z-index(tooltip);
+}

package/lib/esm/appui-react/feedback/ValidationTextbox.scss

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/inputs/variables" as *;
+@use "~@itwin/core-react/lib/core-react/style/baseline" as *;
+
+.uifw-ValidationTextbox {
+  font-family: var(--iui-font-sans);
+  position: relative;
+  padding: $uicore-unbordered-padding;
+  width: 12em;
+  height: 1em;
+
+  .ValidationTextbox-input {
+    position: absolute;
+    min-height: 28px;
+    padding: $uicore-iui-input-padding;
+    width: 12em;
+    left: 0px;
+    top: 0px;
+  }
+
+  .ValidationTextbox-invalid {
+    border-color: var(--iui-color-text-negative);
+  }
+
+  .ValidationTextbox-invalid:focus {
+    border-color: var(--iui-color-text-negative);
+  }
+
+  .ValidationTextbox-icon {
+    position: absolute;
+    padding: $uicore-bordered-padding;
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
+    line-height: var(--iui-size-l);
+    font-size: var(--iui-font-size-2);
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+    text-align: center;
+    color: var(--iui-color-text);
+
+    &:hover {
+      color: var(--iui-color-text-accent);
+    }
+  }
+}

package/lib/esm/appui-react/frontstage/ModalFrontstage.scss

@@ -0,0 +1,81 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.uifw-modal-frontstage {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+  transition: all 0.5s ease;
+  pointer-events: none;
+  visibility: hidden;
+  overflow: hidden;
+  background: transparent;
+  transition: background 0.25s ease, visibility 0s ease 0.275s;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  @include uicore-z-index(modal-frontstage);
+
+  .uifw-modal-app-bar {
+    transition: transform 0.125s;
+    padding: 10px;
+    background: var(--iui-color-background-backdrop);
+    height: 60px;
+    transform: translateY(-100%);
+    box-sizing: initial;
+
+    > .uifw-headline {
+      display: inline-block;
+      line-height: 60px;
+      vertical-align: top;
+      padding: 0 15px;
+    }
+
+    .uifw-modal-app-bar-right {
+      color: var(--iui-color-text);
+      line-height: 60px;
+      vertical-align: center;
+      float: right;
+      margin-right: 20px;
+    }
+
+    > :first-child {
+      display: inline-block;
+      border-radius: 0; // Turn off circular border from Back.scss in ui-ninezone
+    }
+  }
+
+  .uifw-modal-stage-content {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  &.uifw-modal-open {
+    visibility: visible;
+    pointer-events: unset;
+    transition: background 0.25s ease;
+
+    .uifw-modal-app-bar {
+      transform: translateY(0%);
+      transition: transform 0.125s ease;
+    }
+  }
+}
+
+.uifw-modal-frontstage-overlay {
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  top: 0px;
+  height: 100%;
+  opacity: 0.95;
+  background: var(--iui-color-background-backdrop);
+
+  @include uicore-z-index(modal-frontstage-overlay);
+}

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