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

package/lib/esm/core-react/contextmenu/PopupContextMenu.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.
+ *--------------------------------------------------------------------------------------------*/
+.core-contextMenu-popupContextMenu_menu {
+  // Fix an issue where iTwinUI Popover i.e. <Select /> is rendered below ContextMenu.
+  z-index: initial;
+}

package/lib/esm/core-react/dialog/Dialog.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 "../z-index" as *;
+
+.core-dialog {
+  @include uicore-z-index(dialog);
+
+  .core-dialog-main {
+    &.core-align-top-left {
+      top: 0px;
+      left: 0px;
+      transform: none;
+    }
+    &.core-align-top {
+      top: 0px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.core-align-top-right {
+      top: 0px;
+      left: 100%;
+      transform: translateX(-100%);
+    }
+    &.core-align-left {
+      top: 50%;
+      left: 0px;
+      transform: translateY(-50%);
+    }
+    &.core-align-center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    &.core-align-right {
+      top: 50%;
+      left: 100%;
+      transform: translate(-100%, -50%);
+    }
+    &.core-align-bottom-left {
+      top: 100%;
+      left: 0px;
+      transform: translateY(-100%);
+    }
+    &.core-align-bottom {
+      top: 100%;
+      left: 50%;
+      transform: translate(-50%, -100%);
+    }
+    &.core-align-bottom-right {
+      top: 100%;
+      left: 100%;
+      transform: translate(-100%, -100%);
+    }
+  }
+}

package/lib/esm/core-react/elementseparator/ElementSeparator.scss

@@ -0,0 +1,93 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@function background-line($orientation) {
+  @return linear-gradient(
+    $orientation,
+    transparent calc(50% - 1px),
+    var(--iui-color-icon-accent) calc(50%),
+    transparent calc(50% + 1px)
+  );
+}
+
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @-ms-keyframes #{$animation-name} {
+    @content;
+  }
+  @-o-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+@mixin animation($str) {
+  -webkit-animation: #{$str};
+  -moz-animation: #{$str};
+  -ms-animation: #{$str};
+  -o-animation: #{$str};
+  animation: #{$str};
+}
+
+@include keyframes(fade-in) {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@include keyframes(fade-out) {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.core-element-separator {
+  touch-action: none;
+  display: inline-block;
+  border-style: none;
+  padding: 0px;
+  opacity: 0;
+  z-index: 1;
+  user-select: none;
+  -webkit-user-select: none;
+
+  &--vertical {
+    width: 100%;
+    cursor: row-resize;
+    background: background-line(to bottom);
+  }
+
+  &--horizontal {
+    height: 100%;
+    cursor: col-resize;
+    background: background-line(to right);
+  }
+
+  &.core-element-separator-group-hovered {
+    @include animation("fade-in 0.2s");
+    opacity: 1;
+  }
+
+  &.core-element-separator-group-unhovered {
+    @include animation("fade-out 0.2s");
+    opacity: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/core-react/icons/IconComponent.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables" as *;
+
+.core-svg-icon {
+  width: $uicore-icons-small;
+  height: $uicore-icons-small;
+  svg {
+    width: $uicore-icons-small;
+    height: $uicore-icons-small;
+    fill: currentColor;
+  }
+}
+
+.icon.core-menuitem-icon {
+  font-size: 16px;
+}

package/lib/esm/core-react/icons/SvgPath.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.
+ *--------------------------------------------------------------------------------------------*/
+.core-icons-svgPath {
+  display: inline-block;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  padding: auto;
+  overflow: hidden;
+  vertical-align: top;
+  fill: currentColor;
+  stroke: transparent;
+}

package/lib/esm/core-react/icons/WebFontIcon.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.
+ *--------------------------------------------------------------------------------------------*/
+.bui-webfont-icon {
+  font-family: bentley-icons-generic-webfont !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/lib/esm/core-react/icons/classes.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 "./index" as *;
+
+.uicore-icons-large {
+  @include uicore-icons-large;
+}
+.uicore-icons-medium {
+  @include uicore-icons-medium;
+}
+.uicore-icons-small {
+  @include uicore-icons-small;
+}
+.uicore-icons-x-large {
+  @include uicore-icons-x-large;
+}

package/lib/esm/core-react/icons/index.scss

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

package/lib/esm/core-react/icons/mixins.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "./variables";
+
+@forward "./variables";
+
+@mixin uicore-icons-small {
+  width: variables.$uicore-icons-small;
+  height: variables.$uicore-icons-small;
+}
+
+@mixin uicore-icons-medium {
+  width: variables.$uicore-icons-medium;
+  height: variables.$uicore-icons-medium;
+}
+
+@mixin uicore-icons-large {
+  width: variables.$uicore-icons-large;
+  height: variables.$uicore-icons-large;
+}
+
+@mixin uicore-icons-x-large {
+  width: variables.$uicore-icons-x-large;
+  height: variables.$uicore-icons-x-large;
+}

package/lib/esm/core-react/icons/variables.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.
+ *--------------------------------------------------------------------------------------------*/
+
+// Sizes
+$uicore-icons-x-small: 12px;
+$uicore-icons-smaller: 14px;
+$uicore-icons-small: 16px;
+$uicore-icons-medium: 2 * $uicore-icons-small;
+$uicore-icons-large: 3 * $uicore-icons-small;
+$uicore-icons-x-large: 4 * $uicore-icons-small;

package/lib/esm/core-react/imagecheckbox/ImageCheckBox.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.
+ *--------------------------------------------------------------------------------------------*/
+.core-image-checkbox {
+  display: inline-block;
+  font-size: 16px;
+  position: relative;
+  height: 1em;
+  width: 1em;
+  cursor: pointer;
+
+  input[type="checkbox"]:not(:checked),
+  input[type="checkbox"]:checked {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  input[type="checkbox"]:checked + .image {
+    color: var(--iui-color-text-accent);
+  }
+
+  input[type="checkbox"]:not(:checked) + .image {
+    color: var(--iui-color-text);
+  }
+
+  input[type="checkbox"] + .image {
+    opacity: 0.65;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  input[type="checkbox"]:disabled:not(:checked) + .image,
+  input[type="checkbox"]:disabled:checked + .image {
+    opacity: 0.25;
+  }
+
+  /* accessibility */
+  [type="checkbox"]:focus + .image:before {
+    outline: 1px dotted currentColor;
+  }
+}
+.image-checkbox-border {
+  border: 1px solid var(--iui-color-text-disabled);
+  background-color: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  padding: 1px 3px 0 2px;
+}

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