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

package/lib/cjs/appui-react/accudraw/Calculator.scss

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$button-size: 36px;
+$button-operator-size: $button-size + 10px;
+
+.uifw-position-popup.uifw-calculator-host {
+  background-color: var(--iui-color-background-hover);
+}
+
+.uifw-calculator {
+  max-width: 173px;
+
+  &:focus {
+    border-color: transparent;
+    outline: 0px;
+  }
+
+  > .uifw-calculator-top {
+    margin-bottom: 8px;
+
+    > .uifw-calculator-top-input {
+      width: 100%;
+    }
+
+    input {
+      text-align: right;
+      color: var(--iui-color-text);
+      background-color: var(--iui-color-background);
+      cursor: default;
+    }
+  }
+
+  > .uifw-calculator-button-grid {
+    display: grid;
+    grid-template-columns: $button-size $button-size $button-size $button-operator-size;
+    grid-gap: 6px;
+    gap: 6px;
+    justify-items: end;
+
+    .uifw-calculator-item {
+      width: $button-size;
+      height: $button-size;
+    }
+  }
+
+  > .uifw-calculator-bottom-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0;
+
+    > .uifw-calculator-large-button {
+      width: 70px;
+      font-size: 20px;
+    }
+
+    > .uifw-calculator-cancel-button {
+      &,
+      &:active,
+      &:focus {
+        border: none;
+        background-color: var(--iui-color-background-negative);
+        color: var(--iui-color-white);
+      }
+
+      &:hover {
+        background-color: var(--iui-color-background-negative-hover);
+        color: var(--iui-color-white);
+      }
+    }
+  }
+
+  .uifw-calculator-button-svg {
+    width: 100%;
+    height: 18px;
+  }
+
+  .uifw-calculator-large-font {
+    font-size: 22px;
+  }
+}

package/lib/cjs/appui-react/accudraw/MenuButton.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 "~@itwin/core-react/lib/core-react/inputs/variables" as *;
+
+.uifw-menu-button {
+  position: absolute;
+  pointer-events: auto;
+
+  .icon {
+    line-height: 2;
+  }
+
+  > .context-menu {
+    top: $uicore-inputs-padding-bordered;
+  }
+}

package/lib/cjs/appui-react/accudraw/SquareButton.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.
+ *--------------------------------------------------------------------------------------------*/
+
+$button-size: 32px;
+
+.uifw-square-button {
+  display: flex;
+  justify-content: center;
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-text);
+  border-color: var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  border-width: 1px;
+  border-style: solid;
+  opacity: var(--iui-opacity-2);
+  pointer-events: auto;
+  margin: 0;
+  width: $button-size;
+  height: $button-size;
+
+  &:focus,
+  &:hover {
+    background-color: var(--iui-color-background-hover);
+    color: var(--iui-color-text-hover);
+    border-color: var(--iui-color-border-foreground-hover);
+    opacity: var(--iui-opacity-1);
+  }
+}

package/lib/cjs/appui-react/accudraw/angle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>angle</title><path d="M16,10H14a4.9509,4.9509,0,0,0-1.2325-3.2723L14.23,5.2655l-3.4651-.8,2.0773-2.1153-.7139-.7012L0,14H15.9971V13H14.125ZM2.3838,13,9.8974,5.3488l.7967,3.4522,1.3621-1.362A3.95363,3.95363,0,0,1,13,10H11l1.875,3Z"/></svg>

package/lib/cjs/appui-react/accudraw/backspace.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path d="M5,2L0,7.5L5,13h11V2H5z M12.21,8.79c0.39,0.39,0.39,1.03,0,1.42c-0.19,0.19-0.44,0.29-0.71,0.29
+	c-0.27,0-0.52-0.1-0.71-0.29L9.5,8.91l-1.29,1.3c-0.38,0.37-1.04,0.37-1.42,0c-0.39-0.39-0.39-1.03,0-1.42l1.3-1.29l-1.3-1.29
+	c-0.39-0.39-0.39-1.03,0-1.42c0.39-0.39,1.03-0.39,1.42,0l1.29,1.3l1.29-1.3c0.39-0.39,1.03-0.39,1.42,0c0.39,0.39,0.39,1.03,0,1.42
+	l-1.3,1.29L12.21,8.79z"/>
+</svg>

package/lib/cjs/appui-react/accudraw/constraint-2d.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<polygon points="7,15 7,1 0,15 	"/>
+	<g>
+		<path d="M10,5.2361L14.382,14H10V5.2361 M9,1v14h7L9,1L9,1z"/>
+	</g>
+</g>
+</svg>

package/lib/cjs/appui-react/accudraw/distance.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>distance</title><rect y="11" width="16" height="1"/><polygon points="15 4 15 5.875 12 4 12 6 4 6 4 4 1 5.875 1 4 0 4 0 9 1 9 1 7.125 4 9 4 7 12 7 12 9 15 7.125 15 9 16 9 16 4 15 4"/></svg>

package/lib/cjs/appui-react/accudraw/height-2.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<title>distance</title>
+<g>
+	<polygon points="16,15 14.125,15 16,12 14,12 14,4 16,4 14.125,1 16,1 16,0 11,0 11,1 12.875,1 11,4 13,4 13,12 11,12 12.875,15
+		0,15 0,16 16,16 	"/>
+</g>
+</svg>

package/lib/cjs/appui-react/accudraw/height.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<title>distance</title>
+<g>
+	<rect x="4" width="1" height="16"/>
+	<polygon points="12,15 10.125,15 12,12 10,12 10,4 12,4 10.125,1 12,1 12,0 7,0 7,1 8.875,1 7,4 9,4 9,12 7,12 8.875,15 7,15 7,16 
+		12,16 	"/>
+</g>
+</svg>

package/lib/cjs/appui-react/childwindow/ChildWindowRenderer.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.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-child-window-container-host {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.uifw-child-window-container {
+  height: 100%;
+  width: 100%;
+}
+
+.uifw-childwindow-internalChildWindowManager_portalContainer {
+  position: fixed;
+}

package/lib/cjs/appui-react/childwindow/ChildWindowWidget.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.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-popout-widget-filled-container {
+  height: 100%;
+  width: 100%;
+}

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/appui-react/frontstage/ModalFrontstage.scss

@@ -0,0 +1,76 @@
+/*---------------------------------------------------------------------------------------------
+ * 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;
+    }
+  }
+
+  .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);
+}