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

package/lib/esm/appui-react/layout/widget/NavigationArea.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 "./tools/button/variables" as *;
+@use "../widgetopacity" as *;
+
+.nz-widget-navigationArea {
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  display: grid;
+  box-sizing: border-box;
+  height: 100%;
+  grid-gap: 6px;
+  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
+  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
+  justify-items: end;
+  grid-template-areas: "htools button" ". vtools";
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  > .nz-navigation-aid-container {
+    margin-bottom: 6px;
+    pointer-events: auto;
+    grid-area: button;
+
+    @include nz-widget-opacity;
+  }
+
+  > .nz-vertical-toolbar-container {
+    grid-area: vtools;
+    height: calc(100% - 60px);
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-end;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-horizontal-toolbar-container {
+    grid-area: htools;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    min-width: 0;
+
+    @include nz-widget-opacity;
+
+    > .components-toolbar-overflow-sizer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/Overflow.scss

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-overflow {
+  width: 2em;
+  position: relative;
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > .nz-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+
+    > .nz-icon {
+      background: var(--iui-color-background-hover);
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: "";
+        display: block;
+        border-color: var(--iui-color-text-disabled);
+        border-style: solid;
+        border-width: 0.15em 0.15em 0 0;
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: -0.15em;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:hover {
+      > .nz-icon {
+        &:after {
+          border-color: var(--iui-color-text);
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/PanelWidget.scss

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-panelWidget {
+  $border-width: 1px;
+  border: 0px solid var(--iui-color-border);
+
+  &.nz-border-top {
+    border-top-width: $border-width;
+  }
+
+  &.nz-border-bottom {
+    border-bottom-width: $border-width;
+  }
+
+  &.nz-border-left {
+    border-left-width: $border-width;
+  }
+
+  &.nz-border-right {
+    border-right-width: $border-width;
+  }
+
+  &.nz-widget-widget,
+  &.nz-init,
+  &.nz-transition {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &.nz-horizontal {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &:not(.nz-horizontal) {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &.nz-fit {
+    flex: 0 1 auto;
+  }
+
+  &.nz-fill {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0px;
+    min-height: 0;
+  }
+
+  &:not(.nz-minimized) {
+    > .nz-content {
+      min-height: 0;
+      min-width: 0;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/Tab.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 "sass:math";
+@use "variables" as *;
+
+.nz-widget-tab {
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 1em 0;
+  position: relative;
+  border: 0 solid var(--iui-color-border);
+  max-width: 9em;
+  background: var(--iui-color-background-backdrop);
+
+  > .nz-icon {
+    svg {
+      width: #{math.div(14, 16)}rem;
+      height: #{math.div(14, 16)}rem;
+      fill: currentColor;
+    }
+  }
+
+  > .nz-label {
+    font-size: $nz-widget-tab-font-size;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  > .nz-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-active {
+      background: var(--iui-color-background);
+      color: var(--iui-color-text-accent);
+      padding-bottom: 1px;
+      margin-bottom: -1px;
+
+      &:before {
+        $padding: 0.25em;
+        content: "";
+        position: absolute;
+        background: currentColor;
+        left: $padding;
+        top: 1px;
+        border-radius: 0.2em;
+        width: calc(100% - #{2 * $padding});
+        height: 0.15em;
+      }
+
+      &.nz-last {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.nz-active),
+  &.nz-minimized {
+    color: var(--iui-color-text-muted);
+    border-right-width: 1px;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-first-inactive {
+      border-left-width: 1px;
+    }
+  }
+
+  &.nz-first {
+    border-top-left-radius: $nz-widget-tab-border-radius;
+  }
+
+  &:hover {
+    background: var(--iui-color-background);
+
+    &:not(.nz-active) {
+      color: var(--iui-color-text);
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/TabBar.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 "variables" as *;
+
+@layer appui.component {
+  .nz-widget-tabBar {
+    background: var(--iui-color-background-backdrop);
+    display: flex;
+    border-radius: $nz-widget-tab-border-radius $nz-widget-tab-border-radius 0 0;
+    flex: 0 0 auto;
+    position: relative;
+    height: $nz-widget-tab-height;
+
+    &.nz-separator {
+      border-bottom: 1px solid var(--iui-color-border);
+    }
+
+    > .nz-handle {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      cursor: auto;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+}

package/lib/esm/appui-react/layout/widget/Tabs.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-tabs {
+  display: flex;
+  flex: 1;
+  max-width: 100%;
+  min-width: 0;
+}

package/lib/esm/appui-react/layout/widget/ToolsArea.scss

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../widgetopacity" as *;
+
+.nz-tools-widget {
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  box-sizing: border-box;
+  height: 100%;
+  grid-column: 1;
+
+  display: grid;
+  grid-gap: 6px;
+  grid-template:
+    "appButton htools" auto
+    "vtools ." 1fr / auto 1fr;
+  align-items: start;
+  justify-items: start;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  > .nz-app-button {
+    grid-area: appButton;
+
+    pointer-events: auto;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-vertical-toolbar-container {
+    grid-area: vtools;
+
+    height: calc(100% - 60px);
+    display: inline-flex;
+    flex-direction: column;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-horizontal-toolbar-container {
+    grid-area: htools;
+
+    width: 100%;
+    min-width: 0;
+
+    @include nz-widget-opacity;
+  }
+}

package/lib/esm/appui-react/layout/widget/Widget.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-widget-widget {
+  background: var(--iui-color-background);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/lib/esm/appui-react/layout/widget/_variables.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/breakpoints";
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+$nz-tab-height: 60px;
+$nz-tab-width: 32px;
+$nz-tab-strip-width: 2px;
+$nz-tab-strip-margin: 2px;
+$nz-tab-background-color: var(--iui-color-background-backdrop);
+$nz-tab-color: var(--iui-color-text);
+
+$nz-active-tab-width: 36px;
+
+$nz-collapsed-tab-width: 6px;
+
+$nz-hovered-tab-color: var(--iui-color-text-accent-hover);
+$nz-active-tab-color: var(--iui-color-icon-accent);
+$nz-tab-shadow: drop-shadow(
+  (-0.4px) 0.9px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$nz-active-tab-shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$nz-tab-no-shadow: drop-shadow(0 0 0 transparent);
+
+$nz-resize-grip-size: 8px;
+$nz-resize-grip-size-large: 14px;
+
+$nz-widget-background-color: var(--iui-color-background-hover);
+$nz-widget-border-color: var(--iui-color-background-disabled);
+$nz-widget-border-width: 1px;
+$nz-widget-border-radius: var(--iui-border-radius-1);
+$nz-widget-min-size: $nz-tab-height + 10px;
+
+@mixin nz-internal-grip-offset($property) {
+  #{$property}: -$nz-resize-grip-size * 0.5;
+
+  @include for-tablet-landscape-down {
+    #{$property}: -$nz-resize-grip-size-large * 0.5;
+  }
+}
+
+$nz-widget-tab-font-size: 0.9em;
+$nz-widget-tab-height: 2.1em;
+$nz-widget-tab-border-radius: 2px;
+
+$nz-dragged-widget-opacity: 0.6;

package/lib/esm/appui-react/layout/widget/tools/button/Back.scss

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+ * 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-back {
+  border-radius: $mls-button-width * 0.5;
+}

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