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

package/lib/cjs/appui-react/layout/widget/tools/button/Button.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 "variables" as *;
+
+.nz-toolbar-button-button {
+  box-sizing: border-box;
+  width: $mls-button-width;
+  height: $mls-button-height;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  background: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  border: {
+    width: 1px;
+    color: var(--iui-color-border-foreground);
+    radius: var(--iui-border-radius-1);
+    style: solid;
+  }
+  pointer-events: auto;
+
+  &.nz-toolbar-button-icon-small {
+    width: $mls-small-button-width;
+    height: $mls-small-button-height;
+  }
+
+  > .nz-gradient {
+    background: linear-gradient(
+      to bottom,
+      var(--iui-color-background),
+      var(--iui-color-background-zebra)
+    );
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.nz-toolbar-button-background:hover {
+  background-color: var(--iui-color-background-hover);
+}

package/lib/cjs/appui-react/layout/widget/tools/button/Expandable.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
+
+.nz-widget-tools-button-expandable {
+  $triangle-width: 6px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 5px;
+  $arrow-shadow: $icon-shadow;
+
+  position: relative;
+  pointer-events: auto;
+
+  &:hover {
+    > .nz-triangle {
+      @include triangle-bottom-right-color($hovered-icon-color);
+    }
+  }
+
+  &:active {
+    > .nz-triangle {
+      filter: $no-shadow;
+
+      @include triangle-bottom-right-color($pressed-icon-color);
+    }
+  }
+
+  > .nz-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: var(--iui-color-text)
+    );
+  }
+}

package/lib/cjs/appui-react/layout/widget/tools/button/Icon.scss

@@ -0,0 +1,54 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-toolbar-button-icon {
+  font-size: $mls-icon-size;
+
+  > .nz-icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--iui-color-icon);
+
+    svg {
+      fill: var(--iui-color-icon);
+    }
+
+    > * {
+      width: $mls-icon-size;
+      height: $mls-icon-size;
+      color: var(--iui-color-icon);
+      filter: $icon-shadow;
+      display: inline-block;
+    }
+    > .icon.core-svg-icon {
+      & svg {
+        width: $mls-icon-size;
+        height: $mls-icon-size;
+      }
+    }
+  }
+
+  &.nz-toolbar-button-icon-small {
+    font-size: $mls-small-button-icon-size;
+    > .nz-icon {
+      > * {
+        width: $mls-small-button-icon-size;
+        height: $mls-small-button-icon-size;
+      }
+    }
+  }
+
+  &:hover {
+    > .nz-icon {
+      > * {
+        color: var(--iui-color-icon-hover);
+      }
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/tools/button/_variables.scss

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+
+// Common
+$button-stroke-width: 2px;
+$button-background-color: var(--iui-color-background-hover);
+$button-stroke-color: var(--iui-color-background-disabled);
+$button-stroke-radius: 3px;
+
+$icon-color: var(--iui-color-text);
+$pressed-icon-color: hsl(
+  var(--iui-color-background-hsl) / var(--iui-opacity-2)
+);
+$hovered-icon-color: var(--iui-color-text-accent-hover);
+$icon-shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$bar-width: 8px;
+$bar-height: 2px;
+$bar-right-corner-radius: 1px;
+
+// Mouse + Large screen
+$mls-button-width: 60px;
+$mls-button-height: 60px;
+
+$mls-navigation-aid-width: 60px;
+$mls-navigation-aid-height: 60px;
+
+$mls-icon-size: 36px;
+
+// For ui20 - include 2px for border 40+2=42 due to box-sizing:border-box.
+$mls-small-button-width: 42px;
+$mls-small-button-height: 42px;
+$mls-small-button-icon-size: 24px;
+$mls-small-button-gap: 6px;
+$small-bar-width: 4px;
+$small-bar-height: 2px;

package/lib/cjs/appui-react/layout/widget-panels/CursorOverlay.scss

@@ -0,0 +1,25 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$nz-cursors: (nwse-resize, nesw-resize, ew-resize, ns-resize, grabbing);
+
+body {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      * {
+        cursor: $cursor !important;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+    }
+  }
+}
+
+.nz-widgetPanels-cursorOverlay_cursor {
+  @each $cursor in $nz-cursors {
+    &.nz-#{$cursor} {
+      cursor: $cursor;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/Expander.scss

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widgetPanels-expander {
+  $size: 1em;
+
+  position: absolute;
+
+  &.nz-left {
+    width: $size;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-right {
+    width: $size;
+    height: 100%;
+    top: 0;
+    right: 0;
+  }
+
+  &.nz-top {
+    width: 100%;
+    height: $size;
+    top: 0;
+    left: 0;
+  }
+
+  &.nz-bottom {
+    width: 100%;
+    height: $size;
+    bottom: 0;
+    left: 0;
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/Grip.scss

@@ -0,0 +1,141 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+$line-grip-translate: 1px;
+$full-bar-width: calc(#{$nz-grip-width} * 0.5);
+$handle-width: calc(#{$nz-grip-width} + 1px);
+$line-grip-width: calc(#{$nz-grip-width} - 2px);
+
+@layer appui.component {
+  .nz-widgetPanels-grip {
+    background-color: transparent;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    display: flex;
+    transition: 0.2s ease-out;
+    user-select: none;
+    -webkit-user-select: none;
+
+    > .nz-handle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.nz-left {
+      transition-property: background-color, right;
+    }
+    &.nz-right {
+      transition-property: background-color, left;
+    }
+    &.nz-top {
+      transition-property: background-color, bottom;
+    }
+
+    &.nz-left,
+    &.nz-right {
+      flex-direction: column;
+      cursor: ew-resize;
+      width: $full-bar-width;
+      height: 100%;
+
+      > .nz-handle {
+        height: 100%;
+        width: $handle-width;
+      }
+    }
+
+    &.nz-top,
+    &.nz-bottom {
+      cursor: ns-resize;
+      width: 100%;
+      height: $full-bar-width;
+
+      > .nz-handle {
+        height: $handle-width;
+        width: 100%;
+      }
+    }
+
+    &:hover,
+    &.nz-resizing {
+      background-color: var(--iui-color-icon-accent);
+    }
+  }
+
+  .nz-line-grip {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease-out, height 0.2s ease-out, width 0.2s ease-out;
+
+    .nz-captured &,
+    .nz-widgetPanels-grip.nz-resizing &,
+    .nz-collapsed .nz-widgetPanels-grip:hover & {
+      opacity: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .nz-collapsed & {
+      display: flex;
+      background-color: var(--iui-color-background-disabled);
+      border: 1px solid var(--iui-color-border-subtle);
+      border-radius: 999px;
+      box-sizing: border-box;
+      opacity: 1;
+    }
+
+    .nz-left & {
+      transform: translateX($line-grip-translate);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .nz-right & {
+      transform: translateX(calc(#{$line-grip-translate} * -1));
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .nz-top & {
+      transform: translateY($line-grip-translate);
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+    .nz-bottom & {
+      transform: translateY(calc(#{$line-grip-translate} * -1));
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .nz-left &,
+    .nz-right & {
+      height: 20%;
+      width: $line-grip-width;
+
+      .nz-line-grip-detail {
+        width: 1px;
+        height: 70%;
+      }
+    }
+
+    .nz-top &,
+    .nz-bottom & {
+      height: $line-grip-width;
+      width: 20%;
+
+      .nz-line-grip-detail {
+        width: 70%;
+        height: 1px;
+      }
+    }
+
+    .nz-line-grip-detail {
+      background-color: var(--iui-color-border-subtle);
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/Panel.scss

@@ -0,0 +1,258 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+@layer appui.component {
+  .nz-widgetPanels-panel {
+    position: relative;
+
+    > .nz-grip-container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      pointer-events: none;
+
+      > .nz-grip {
+        pointer-events: all;
+        position: absolute;
+        z-index: 1;
+      }
+    }
+
+    > .nz-content {
+      display: flex;
+      position: relative;
+      background: var(--iui-color-background-hover);
+    }
+
+    &.nz-transition {
+      transition-duration: var(--iui-duration-2);
+      transition-timing-function: ease-in;
+    }
+
+    &.nz-left,
+    &.nz-right {
+      max-width: 100%;
+      min-height: 0;
+      height: 100%;
+
+      > .nz-content {
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+      }
+
+      > .nz-grip-container {
+        top: 0;
+        min-width: $nz-grip-width * 0.5;
+
+        > .nz-grip {
+          top: 50%;
+        }
+      }
+
+      &.nz-transition {
+        transition-property: width;
+      }
+
+      &.nz-span-top {
+        grid-row-start: 2;
+      }
+
+      &:not(.nz-span-top) {
+        grid-row-start: 1;
+      }
+
+      &.nz-span-bottom {
+        grid-row-end: 3;
+      }
+
+      &:not(.nz-span-bottom) {
+        grid-row-end: 4;
+      }
+    }
+
+    &.nz-left {
+      > .nz-grip-container {
+        left: 0;
+
+        > .nz-grip.nz-grip {
+          right: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
+        }
+      }
+
+      &.nz-transition {
+        > .nz-content {
+          position: absolute;
+          right: 0;
+        }
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              width: unset;
+              right: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          right: 0;
+        }
+      }
+    }
+
+    &.nz-right {
+      > .nz-grip-container {
+        right: 0;
+
+        > .nz-grip.nz-grip {
+          left: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(0, -50%);
+        }
+      }
+
+      > .nz-content {
+        left: 0;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              width: unset;
+              left: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          left: 0;
+        }
+      }
+    }
+
+    &.nz-top,
+    &.nz-bottom {
+      max-height: 100%;
+      min-width: 0;
+
+      &.nz-transition {
+        transition-property: height;
+      }
+
+      > .nz-grip-container {
+        left: 0;
+        min-height: $nz-grip-width * 0.5;
+
+        > .nz-grip {
+          left: 50%;
+        }
+      }
+
+      > .nz-content {
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &.nz-top {
+      > .nz-grip-container {
+        top: 0;
+
+        > .nz-grip.nz-grip {
+          bottom: calc(#{$nz-grip-width} * -0.5);
+          transform: translate(-50%, 0);
+        }
+      }
+
+      &.nz-transition {
+        > .nz-content {
+          position: absolute;
+          bottom: 0;
+        }
+      }
+
+      &.nz-span {
+        grid-column: 1/4;
+      }
+
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              bottom: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+
+        > .nz-grip-container > .nz-grip {
+          bottom: 0;
+        }
+      }
+    }
+
+    &.nz-bottom {
+      > .nz-grip-container {
+        bottom: 0;
+
+        > .nz-grip {
+          top: 0;
+          transform: translate(-50%, 0);
+        }
+      }
+
+      &.nz-span {
+        grid-column: 1/4;
+      }
+
+      &:not(.nz-span) {
+        grid-column: 2/3;
+      }
+
+      &.nz-collapsed {
+        &.nz-captured {
+          &:not(.nz-transition) {
+            > .nz-content {
+              position: absolute;
+              height: unset;
+              top: -$nz-grip-width * 0.5;
+            }
+          }
+        }
+      }
+    }
+
+    &.nz-collapsed {
+      > .nz-content {
+        overflow: hidden;
+      }
+    }
+
+    &:not(.nz-collapsed) {
+      > .nz-content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .nz-widgetPanels_panelContainer {
+    position: relative;
+    height: 100%;
+  }
+}

package/lib/cjs/appui-react/layout/widget-panels/PanelSections.scss

@@ -0,0 +1,60 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-widgetPanels-vertical {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 100px;
+
+    /* if only one panel section set flex:1 */
+    &:first-child.nz-panel-section-full-size {
+      flex: 1;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+  .nz-vertical-panel-splitter {
+    position: absolute;
+    bottom: -5px;
+    background-color: transparent;
+    display: flex;
+    width: 100%;
+    height: 10px;
+    cursor: row-resize;
+    z-index: 1;
+  }
+
+  .nz-widgetPanels-horizontal {
+    position: relative;
+    display: flex;
+    min-width: 100px;
+
+    /* if only one panel section set flex:1 */
+    &:first-child.nz-panel-section-full-size {
+      flex: 1;
+    }
+
+    &:not(:first-child) {
+      flex: 1;
+    }
+  }
+
+  .nz-horizontal-panel-splitter {
+    position: absolute;
+    right: -5px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 10px;
+    cursor: col-resize;
+    z-index: 1;
+  }
+}