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

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

package/lib/cjs/core-react/settings/SettingsContainer.scss

@@ -0,0 +1,65 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+div.core-settings-container {
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  .core-settings-container-left {
+    min-width: 15em;
+    height: 100%;
+    overflow: auto;
+    border-right: 2px solid var(--iui-color-border);
+
+    > .uicore-tabs-vertical {
+      font-size: 16px;
+    }
+  }
+  .core-settings-container-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--iui-color-background);
+    align-content: center;
+
+    .core-settings-container-right-header {
+      display: flex;
+      width: 100%;
+      height: calc(var(--iui-font-size-4) * 2);
+      font-size: var(--iui-font-size-4);
+      font-weight: var(--iui-font-weight-semibold);
+      padding-left: 15px;
+      align-items: center;
+
+      .core-settings-container-main-sub-header {
+        position: relative;
+        padding-left: 20px;
+
+        &::before {
+          content: "-";
+          position: absolute;
+          left: 10px;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .core-settings-container-right-contents {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}

package/lib/cjs/core-react/style/baseline.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$uicore-baseline: var(--iui-size-s);
+$uicore-line-height: var(--iui-size-l); ///  22px; /// ~1.618;
+
+$uicore-bordered-padding: calc(var(--iui-size-s) - 1px);
+$uicore-bordered-padding-large: calc(var(--iui-size-s) * 2 - 1px);
+$uicore-unbordered-padding: var(--iui-size-s);
+$uicore-unbordered-padding-large: calc(var(--iui-size-s) * 2);

package/lib/cjs/core-react/style/breakpoints.scss

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/* Breakpoints */
+@mixin for-phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-down {
+  @media (max-width: 799px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 800px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-down {
+  @media (max-width: 1099px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1100px) {
+    @content;
+  }
+}
+
+@mixin for-small-desktop-down {
+  @media (max-width: 1299px) {
+    @content;
+  }
+}
+
+@mixin for-medium-desktop-up {
+  @media (min-width: 1300px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}

package/lib/cjs/core-react/style/colors.scss

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+/// Variables ------------------------------------------------------------------
+
+/// Primary colors:
+
+$uicore-green: #56aa1c;
+$uicore-blue: #008be1;
+$uicore-gray: #9ba5ae;
+$uicore-text-color: #2a2f34;
+
+/// Other colors:
+
+$uicore-black: #000;
+$uicore-white: #fff;
+$uicore-yellow: #ffcf00;
+$uicore-orange: #ff6600;
+$uicore-red: #cc0000;
+$uicore-teal: #2b9b7f;
+
+/// Highlights:
+
+$uicore-blue-highlight: #e5f5fd;
+$uicore-green-highlight: #eef6e8;
+$uicore-red-highlight: #fae5e5;
+
+/// Gray:
+
+$uicore-gray-1: #070809;
+$uicore-gray-3: #3c434a;
+$uicore-gray-4: #4d575f;
+$uicore-gray-5: #677480;
+$uicore-gray-6: #85929d;
+$uicore-gray-8: #a6afb7;
+$uicore-gray-9: #c7ccd1;
+$uicore-gray-a: #dce0e3;
+$uicore-gray-b: #eef0f3;
+$uicore-gray-c: #f8f9fb;
+
+/// Blue:
+
+$uicore-blue-3: #00426b;
+$uicore-blue-4: #005a92;
+$uicore-blue-5: #0073ba;
+$uicore-blue-6: $uicore-blue;
+$uicore-blue-8: #58bfff;
+$uicore-blue-a: #a6ddff;
+
+/// Green:
+
+$uicore-green-3: #23450b;
+$uicore-green-4: #346711;
+$uicore-green-5: #448615;
+
+$uicore-green-new: #53a21a;
+
+/// Teal:
+
+$uicore-teal-0: $uicore-green;
+$uicore-teal-1: #2b9b1b;
+$uicore-teal-2: #2b9b2f;
+$uicore-teal-3: #2b9b43;
+$uicore-teal-4: #2b9b57;
+$uicore-teal-5: #2b9b6b;
+$uicore-teal-6: #2b9b7f;
+$uicore-teal-7: #2b9b93;
+$uicore-teal-8: #2b9ba7;
+$uicore-teal-9: #2b9bbb;
+$uicore-teal-a: #2b9bcf;
+$uicore-teal-b: #2b9be3;
+$uicore-teal-c: $uicore-blue-6;
+$uicore-teal-d: $uicore-blue-5;
+$uicore-teal-e: $uicore-blue-4;
+$uicore-teal-f: $uicore-blue-3;

package/lib/cjs/core-react/style/index.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.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./baseline";
+@forward "./breakpoints";
+@forward "./themecolors";
+@forward "./colors";
+@forward "./mixins";
+@forward "./opacity";

package/lib/cjs/core-react/style/mixins.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+@mixin no-link {
+  text-decoration: none;
+  color: var(--iui-color-text);
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: var(--iui-color-text);
+    text-decoration: none;
+  }
+}
+
+@mixin firefox-only {
+  @supports (-moz-appearance: none) {
+    @content;
+  }
+}

package/lib/cjs/core-react/style/opacity.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/// Opacity stops:
+
+$uicore-opacity-1: var(--iui-opacity-1);
+$uicore-opacity-2: var(--iui-opacity-2);
+$uicore-opacity-3: var(--iui-opacity-3);
+$uicore-opacity-4: var(--iui-opacity-4);
+$uicore-opacity-5: var(--iui-opacity-5);
+$uicore-opacity-6: var(--iui-opacity-6);
+
+$uicore-opacity-muted: $uicore-opacity-3;
+$uicore-opacity-disabled: $uicore-opacity-4;
+$uicore-opacity-boxshadow: $uicore-opacity-4;