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

package/lib/cjs/core-react/index.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./style/index";
+
+@forward "./_scrollbar";
+@forward "./_z-index";
+@forward "./_geometry";
+@forward "./_math";
+@forward "./_typography";
+
+@forward "./base/index";
+@forward "./icons/index";
+@forward "./inputs/index";
+@forward "./loading/index";
+@forward "./tabs/index";
+@forward "./text/index";

package/lib/cjs/core-react/inputs/classes.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-inputs-input {
+  @include uicore-inputs-input;
+}
+.uicore-inputs-labeled-input {
+  @include uicore-inputs-labeled-input;
+}

package/lib/cjs/core-react/inputs/iconinput/IconInput.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 "../../base/base" as *;
+
+.core-iconInput-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+
+  .core-input {
+    margin: 0;
+    padding-left: 30px;
+  }
+
+  .core-iconInput-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    @include uicore-centered;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+
+      margin-top: 2px;
+      @include uicore-centered;
+    }
+  }
+}

package/lib/cjs/core-react/inputs/index.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "../style/index";
+
+@forward "./variables";
+@forward "./input";
+@forward "./input-label";

package/lib/cjs/core-react/inputs/input-label.scss

@@ -0,0 +1,95 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../style/baseline";
+
+@forward "../style/index";
+
+@mixin uicore-inputs-labeled-input {
+  display: block;
+  padding: 0;
+  margin: 0 0 baseline.$uicore-unbordered-padding;
+  text-align: left;
+  font-size: var(--iui-font-size-1);
+  font-weight: var(--iui-font-weight-normal);
+  cursor: pointer;
+
+  > .uicore-label {
+    padding: 0;
+    margin: 0;
+    border: 0 none transparent;
+    display: block;
+    font-size: var(--iui-font-size-1);
+    font-weight: var(--iui-font-weight-semibold);
+    line-height: var(--iui-size-l);
+    text-align: left;
+    color: var(--iui-color-text);
+  }
+
+  > .input {
+    position: relative;
+    /// Needed to vertically align the icon:
+    display: inline-block;
+    width: 100%;
+
+    &.with-icon {
+      > input {
+        padding-right: calc(
+          #{baseline.$uicore-bordered-padding} + var(--iui-size-l)
+        );
+        margin-right: calc(
+          #{baseline.$uicore-bordered-padding} + var(--iui-size-l)
+        );
+      }
+    }
+
+    > .icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      padding: baseline.$uicore-bordered-padding;
+
+      font-size: var(--iui-font-size-1);
+      font-weight: normal;
+    }
+  }
+
+  > .uicore-message {
+    display: block;
+    font-size: var(--iui-font-size-0);
+    line-height: var(--iui-size-l);
+    color: var(--iui-color-text-muted);
+  }
+
+  /// Status colors ----------------------------------------------------------
+
+  $status-colors: (
+    success: var(--iui-color-positive-hsl),
+    warning: var(--iui-color-warning-hsl),
+    error: var(--iui-color-negative-hsl),
+  );
+
+  @each $status, $color in $status-colors {
+    &.#{$status},
+    &.#{$status} > .uicore-message {
+      color: rgb($color);
+    }
+
+    &.#{$status} > .input {
+      > input,
+      > .uicore-inputs-input {
+        border-color: rgb($color);
+        box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
+
+        &:focus {
+          border-color: rgb($color);
+          box-shadow: rgba($color, var(--iui-opacity-4)) 0px 0px 0px 2px;
+        }
+      }
+    }
+  }
+}

package/lib/cjs/core-react/inputs/input.scss

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables";
+
+@forward "../style/index";
+@forward "./variables";
+
+@mixin uicore-inputs-input {
+  display: block;
+  width: 100%;
+  padding: variables.$uicore-iui-input-padding;
+  margin: variables.$uicore-inputs-margin 0;
+  font-family: var(--iui-font-sans);
+  font-size: var(--iui-font-size-1);
+  line-height: normal;
+  color: var(--iui-color-text);
+  background-color: var(--iui-color-background);
+  background-image: none;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: var(--iui-focus-box-shadow) 0px 1px 1px inset;
+  box-sizing: border-box;
+  transition: border-color var(--iui-duration-1) ease-in-out,
+    box-shadow var(--iui-duration-1) ease-in-out;
+
+  &:-ms-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::-webkit-input-placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+  &::placeholder {
+    color: var(--iui-color-text-disabled);
+  }
+
+  &[disabled] {
+    background-color: var(--iui-color-background-backdrop);
+    border-color: var(--iui-color-text-disabled);
+    color: var(--iui-color-text-disabled);
+    cursor: not-allowed;
+    opacity: var(--iui-opacity-4);
+  }
+
+  &[readonly] {
+    color: var(--iui-color-text-muted);
+    cursor: default;
+  }
+
+  &:focus {
+    outline: 0px;
+    border-color: hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4));
+    box-shadow: variables.$uicore-inputs-focus-boxshadow;
+  }
+}

package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss

@@ -0,0 +1,88 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../../base/base" as *;
+@use "../variables" as *;
+
+.core-number-input-container {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+
+  input {
+    margin: 0;
+    padding-right: 1.5em;
+
+    &.core-input {
+      padding: $uicore-iui-input-padding;
+    }
+  }
+
+  &.core-number-buttons-for-touch {
+    input {
+      padding-right: 3.5em;
+    }
+  }
+
+  .core-number-input-buttons-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    @include uicore-centered;
+    flex-direction: column;
+
+    .core-number-input-button {
+      font-size: 8px;
+      outline: none;
+      height: 100%;
+      width: 100%;
+      @include uicore-centered;
+      &:hover {
+        color: var(--iui-color-text-accent-hover);
+        transition-duration: 150ms;
+      }
+      &.core-number-input-button-up {
+        padding-top: 1px;
+      }
+      &.core-number-input-button-down {
+        padding-top: 1px;
+      }
+    }
+
+    &.core-number-buttons-for-touch {
+      width: 3.5em;
+      flex-direction: row-reverse;
+
+      .core-number-input-button {
+        font-size: 1em;
+
+        &:hover {
+          color: unset;
+          transition-duration: unset;
+        }
+
+        &.core-number-input-button-up {
+          padding-top: 2px;
+        }
+        &.core-number-input-button-down {
+          padding-top: 2px;
+        }
+      }
+    }
+  }
+  &.core-number-input-disabled {
+    .core-number-input-button-up {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    .core-number-input-button-down {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+  }
+}

package/lib/cjs/core-react/inputs/variables.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "../style/baseline";
+@forward "../style/themecolors";
+
+// cspell:ignore unbordered
+
+$uicore-inputs-height: 22px;
+$uicore-inputs-height-large: 40px;
+$uicore-line-height: calc(var(--iui-size-s) * 1.4);
+
+$uicore-inputs-padding: calc(
+  (#{$uicore-inputs-height} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-large: calc(
+  (#{$uicore-inputs-height-large} - #{$uicore-line-height}) * 0.5
+);
+$uicore-inputs-padding-bordered: calc(#{$uicore-inputs-padding} - 2px);
+$uicore-inputs-padding-bordered-large: calc(
+  #{$uicore-inputs-padding-large} - 2px
+);
+
+$uicore-inputs-margin: calc(
+  (#{$uicore-line-height} * 2 - #{$uicore-inputs-height}) * 0.5
+);
+$uicore-inputs-margin-large: calc(
+  (#{$uicore-line-height} * 3 - #{$uicore-inputs-height-large}) * 0.5
+);
+
+$uicore-inputs-border-color: hsl(
+  var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+);
+
+$uicore-inputs-focus-boxshadow: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-4)
+  )
+  0px 0px 0px 2px;
+
+$uicore-iui-input-padding: var(--iui-size-3xs) var(--iui-size-xs);

package/lib/cjs/core-react/layout-variables.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "./z-index" as *;
+
+:root {
+  /** Default Widget Opacity */
+  --buic-widget-opacity: 0.9;
+  /** Default Toolbar Opacity */
+  --buic-toolbar-opacity: 0.5;
+
+  /** CSS variables for each z-index layer */
+  @include uicore-z-index-variables();
+}

package/lib/cjs/core-react/listbox/Listbox.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 "../index" as *;
+
+$uicore-list-item-height: calc(var(--iui-size-s) * 2);
+
+ul.core-listbox {
+  list-style: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: var(--iui-color-text);
+  border: 1px solid var(--iui-color-border);
+  position: relative; // required to properly set scrollTop position
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+
+  &:focus {
+    border-color: var(--iui-color-border-accent);
+
+    li.core-listbox-item.focused {
+      background-color: var(--iui-color-background-accent-muted);
+      border: 1px solid var(--iui-color-border-accent);
+    }
+  }
+
+  li.core-listbox-item {
+    display: inline-flex;
+    line-height: $uicore-list-item-height;
+    padding-left: 4px;
+
+    &[aria-selected="true"] {
+      background-color: var(--iui-color-background-accent-muted);
+    }
+
+    &[aria-disabled="true"] {
+      pointer-events: none;
+      color: var(--iui-color-text-disabled);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-hover);
+    }
+  }
+}

package/lib/cjs/core-react/loading/LoadingBar.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-lb {
+  display: flex;
+  align-items: center;
+
+  > .lb-container {
+    background-color: var(--iui-color-background-disabled);
+    flex: 1;
+
+    > .fill {
+      height: 100%;
+      background-color: var(--iui-color-icon-accent);
+      transition: width 0.3s linear;
+    }
+  }
+
+  > .percent {
+    flex: initial;
+    opacity: 0.85;
+    width: 3em;
+    font-size: 0.9em;
+    margin-left: 0.3em;
+  }
+}

package/lib/cjs/core-react/loading/LoadingPrompt.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.
+ *--------------------------------------------------------------------------------------------*/
+.core-loadingprompt {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--iui-color-text);
+  }
+
+  .message {
+    font-size: 14px;
+    margin-bottom: 1.75em;
+    color: var(--iui-color-text);
+  }
+}
+
+/* cancel button */
+.loading-prompt-cancel {
+  margin-top: 2em;
+}

package/lib/cjs/core-react/loading/LoadingSpinner.scss

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-ls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .ls-message {
+    color: var(--iui-color-text);
+  }
+
+  .ls-message-top {
+    @extend .ls-message;
+    margin-bottom: var(--iui-size-s);
+  }
+
+  .ls-message-bottom {
+    @extend .ls-message;
+    margin-top: var(--iui-size-s);
+  }
+}

package/lib/cjs/core-react/loading/LoadingStatus.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.loading-status-container {
+  display: flex;
+  align-items: center;
+  opacity: 0.9;
+  font-size: 12px;
+}
+
+.loading-status-message {
+  flex: 1;
+}
+
+.loading-status-percent {
+  flex: initial;
+  margin-right: auto;
+}

package/lib/cjs/core-react/loading/index.scss

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./mixins";

package/lib/cjs/core-react/loading/mixins.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "../style/index";
+
+@mixin uicore-spinner(
+  $size,
+  $borderSize: $size * 0.125,
+  $activeColor: var(--iui-color-icon-accent),
+  $selector: "&::after",
+  $time: 1.5s
+) {
+  // Animation Keyframes
+  @keyframes uicoreSpinner {
+    0% {
+      transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    }
+    100% {
+      transform: translate3d(-50%, -50%, 0) rotate(360deg);
+    }
+  }
+
+  display: inline-block;
+  position: relative;
+
+  width: $size;
+  height: $size;
+
+  // Styles to fade out spinner when loaded
+  &.-loaded {
+    opacity: 0;
+    transition: opacity linear 0.1s;
+  }
+
+  // Spinner
+  #{$selector} {
+    height: $size;
+    width: $size;
+
+    border: solid $borderSize var(--iui-color-background-disabled);
+    border-bottom-color: #{$activeColor};
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    content: "";
+    opacity: inherit;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    animation: $time 0.1s linear infinite uicoreSpinner;
+    transform: translate3d(-50%, -50%, 0);
+    transform-origin: center;
+    will-change: transform;
+  }
+}

package/lib/cjs/core-react/messagebox/MessageBox.scss

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../icons/variables" as *;
+@use "../style/baseline" as *;
+
+.core-message-box-container {
+  display: flex;
+  color: var(--iui-color-text);
+  gap: var(--iui-size-m);
+
+  .core-message-box-icon {
+    font-size: $uicore-icons-medium;
+  }
+
+  .core-message-box-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    a {
+      // iTwinUI anchor link style
+      color: var(--iui-color-text-accent);
+      -webkit-tap-highlight-color: hsl(
+        var(--iui-color-accent-hsl) / var(--iui-opacity-6)
+      );
+      border-radius: var(--iui-border-radius-1);
+      cursor: pointer;
+      text-decoration: none;
+    }
+  }
+}
+
+.core-message-box-success {
+  color: var(--iui-color-text-positive);
+}
+.core-message-box-information,
+.core-message-box-question {
+  color: var(--iui-color-text-informational);
+}
+.core-message-box-warning {
+  color: var(--iui-color-text-warning);
+}
+.core-message-box-error,
+.core-message-box-fatal {
+  color: var(--iui-color-text-negative);
+}
+
+.notifymessage-icon {
+  margin-right: 6px;
+}