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

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

package/lib/esm/core-react/popup/Popup.scss

@@ -0,0 +1,239 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.core-popup {
+  top: 0;
+  left: 0;
+  display: block;
+  box-sizing: border-box;
+  position: absolute;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
+  background: var(--iui-color-background);
+  color: var(--iui-color-text);
+  animation-duration: var(--iui-duration-1);
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+  cursor: default;
+
+  @include uicore-z-index(dialog-popup);
+
+  &.core-popup-animation-none {
+    animation-duration: 0s;
+  }
+
+  &.core-popup-hidden {
+    display: none;
+  }
+
+  &.core-animation-ended {
+    animation-name: none;
+  }
+}
+
+.core-popup.arrow::after,
+.core-popup.arrow::before {
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  color: var(--iui-color-background);
+}
+
+.core-popup.core-popup-bottom-left.arrow::after,
+.core-popup.core-popup-bottom-left.arrow::before {
+  bottom: 100%;
+  left: 25%;
+}
+
+.core-popup.core-popup-bottom-right.arrow::after,
+.core-popup.core-popup-bottom-right.arrow::before {
+  bottom: 100%;
+  left: 75%;
+}
+
+.core-popup.core-popup-bottom.arrow::after,
+.core-popup.core-popup-bottom.arrow::before {
+  bottom: 100%;
+  left: 50%;
+}
+
+.core-popup.core-popup-top.arrow::after,
+.core-popup.core-popup-top.arrow::before {
+  top: 100%;
+  left: 50%;
+}
+
+.core-popup.core-popup-top-left.arrow::after,
+.core-popup.core-popup-top-left.arrow::before {
+  top: 100%;
+  left: 25%;
+}
+
+.core-popup.core-popup-top-right.arrow::after,
+.core-popup.core-popup-top-right.arrow::before {
+  top: 100%;
+  left: 75%;
+}
+
+.core-popup.core-popup-left.arrow::after,
+.core-popup.core-popup-left.arrow::before {
+  top: 50%;
+  left: 100%;
+}
+
+.core-popup.core-popup-right.arrow::after,
+.core-popup.core-popup-right.arrow::before {
+  top: 50%;
+  right: 100%;
+}
+
+.core-popup.core-popup-bottom.arrow::before,
+.core-popup.core-popup-bottom-left.arrow::before,
+.core-popup.core-popup-bottom-right.arrow::before {
+  border-bottom-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
+}
+
+.core-popup.core-popup-top.arrow::before,
+.core-popup.core-popup-top-left.arrow::before,
+.core-popup.core-popup-top-right.arrow::before {
+  border-top-color: inherit;
+  border-width: 9px;
+  margin-left: -9px;
+}
+
+.core-popup.core-popup-left.arrow::before {
+  border-left-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+.core-popup.core-popup-right.arrow::before {
+  border-right-color: inherit;
+  border-width: 9px;
+  margin-top: -9px;
+}
+
+.core-popup.core-popup-bottom.arrow::after,
+.core-popup.core-popup-bottom-left.arrow::after,
+.core-popup.core-popup-bottom-right.arrow::after {
+  border-bottom-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
+}
+
+.core-popup.core-popup-top.arrow::after,
+.core-popup.core-popup-top-left.arrow::after,
+.core-popup.core-popup-top-right.arrow::after {
+  border-top-color: currentColor;
+  border-width: 8px;
+  margin-left: -8px;
+}
+
+.core-popup.core-popup-left.arrow::after {
+  border-left-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.core-popup.core-popup-right.arrow::after {
+  border-right-color: currentColor;
+  border-width: 8px;
+  margin-top: -8px;
+}
+
+.core-popup-shadow {
+  -webkit-box-shadow: var(--iui-shadow-4);
+  box-shadow: var(--iui-shadow-4);
+  background-clip: padding-box;
+}
+
+.core-popup-top-left {
+  transform-origin: left bottom 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-top-right {
+  transform-origin: right bottom 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-bottom-left {
+  transform-origin: left top 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-bottom-right {
+  transform-origin: right top 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-left {
+  transform-origin: right;
+  animation-name: animate-horizontal;
+}
+
+.core-popup-left-top {
+  transform-origin: right top 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-right {
+  transform-origin: left;
+  animation-name: animate-horizontal;
+}
+
+.core-popup-right-top {
+  transform-origin: left top 0px;
+  animation-name: animate-corner;
+}
+
+.core-popup-top {
+  transform-origin: bottom;
+  animation-name: animate-vertical;
+}
+
+.core-popup-bottom {
+  transform-origin: top;
+  animation-name: animate-vertical;
+}
+
+@keyframes animate-vertical {
+  from {
+    visibility: hidden;
+    transform: scale(1, 0.5);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1);
+  }
+}
+
+@keyframes animate-corner {
+  from {
+    visibility: hidden;
+    transform: scale(0.5, 0.5);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes animate-horizontal {
+  from {
+    visibility: hidden;
+    transform: scale(0.5, 1);
+  }
+  to {
+    visibility: visible;
+    transform: scale(1, 1);
+  }
+}

package/lib/esm/core-react/radialmenu/RadialMenu.scss

@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+@use "../icons/variables" as *;
+
+.core-radial-menu {
+  visibility: hidden;
+  position: fixed;
+
+  @include uicore-z-index(dialog);
+
+  &.opened {
+    visibility: inherit;
+  }
+
+  > .core-radial-menu-container {
+    margin-left: -50%;
+    margin-top: -50%;
+
+    .core-radial-menu-sector {
+      stroke: var(--iui-color-background-disabled);
+      fill: var(--iui-color-background);
+      stroke-width: 1px;
+
+      &.selected {
+        fill: var(--iui-color-background-accent-muted);
+      }
+    }
+
+    .core-radial-menu-button-svg {
+      .core-radial-menu-button-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .core-radial-menu-button-icon {
+          height: $uicore-icons-small;
+          width: $uicore-icons-small;
+          line-height: $uicore-icons-small;
+          color: var(--iui-color-text);
+        }
+
+        .core-radial-menu-button-content {
+          cursor: default;
+          color: var(--iui-color-text);
+          font-size: var(--iui-font-size-0);
+          user-select: none;
+          -webkit-user-select: none;
+        }
+      }
+    }
+  }
+}

package/lib/esm/core-react/searchbox/SearchBox.scss

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-searchbox {
+  font-family: var(--iui-font-sans);
+  display: flex;
+  align-items: center;
+  position: relative;
+  //default values (height, width, font-size, color)
+  height: 28px;
+  width: 12em;
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+
+  input {
+    min-height: 28px;
+    padding: var(--iui-size-3xs) 2em var(--iui-size-3xs) 12px; //12px from design guide
+    height: 100%;
+    margin: 0;
+    color: inherit;
+    font-size: inherit;
+    box-sizing: border-box;
+  }
+
+  .core-searchbox-button {
+    position: absolute;
+    height: 100%;
+    right: 0;
+    width: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover span {
+      color: var(--iui-color-text-accent);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}