@itwin/imodel-components-react 5.0.0-dev.2 → 5.0.0

package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.scss

@@ -0,0 +1,177 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$cube-outer-width: 96px;
+$button-width: 20px;
+$nav-cube-width: 64px;
+$nav-cube-side-width: 14px;
+
+$grad-start: var(--iui-color-background);
+$grad-end: var(--iui-color-background-zebra);
+
+$arrow-margin: -3px;
+
+.components-cube-container {
+  position: relative;
+  width: $cube-outer-width;
+  height: $cube-outer-width;
+
+  .cube-element-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $cube-outer-width;
+    height: $cube-outer-width;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .nav-cube {
+      width: $nav-cube-width;
+      height: $nav-cube-width;
+
+      .nav-cube-face {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        font-size: var(--iui-font-size-1);
+        font-weight: var(--iui-font-weight-semibold);
+        color: var(--iui-color-text);
+        box-shadow: inset 0px 0px 1px 0.2px var(--iui-color-border);
+
+        .face-row {
+          display: flex;
+          flex-direction: row;
+          height: $nav-cube-side-width;
+          width: 100%;
+
+          &.cube-center {
+            height: auto;
+            flex-grow: 1;
+          }
+
+          .face-cell {
+            cursor: pointer;
+            user-select: none;
+            -webkit-user-select: none;
+            width: $nav-cube-side-width;
+
+            &.cube-center {
+              width: auto;
+              flex-grow: 1;
+            }
+
+            &.cube-hover {
+              height: auto;
+              background-color: var(--iui-color-background-accent-muted);
+            }
+
+            &.cube-active {
+              background-color: var(--iui-color-background-accent-muted);
+            }
+          }
+
+          &.cube-center .face-cell.cube-center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+
+      .cube-left,
+      .cube-right,
+      .cube-front,
+      .cube-back {
+        background: linear-gradient(#{$grad-start}, #{$grad-end});
+      }
+
+      .cube-top {
+        background: $grad-start;
+      }
+
+      .cube-bottom {
+        background: $grad-end;
+      }
+
+      &.cube-dragging {
+        .face-row .face-cell {
+          &.cube-hover,
+          &.cube-active {
+            background: transparent;
+          }
+        }
+
+        .cube-left,
+        .cube-right,
+        .cube-front,
+        .cube-back {
+          background: linear-gradient(
+            var(--iui-color-background),
+            var(--iui-color-background-backdrop)
+          );
+        }
+
+        .cube-top {
+          background: var(--iui-color-background);
+        }
+
+        .cube-bottom {
+          background: var(--iui-color-background-backdrop);
+        }
+      }
+    }
+  }
+
+  .cube-pointer {
+    position: absolute;
+    height: $button-width;
+    width: $button-width;
+    font-size: $button-width;
+    color: var(--iui-color-background);
+    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    cursor: pointer;
+
+    &:not(.cube-visible) {
+      display: none;
+    }
+
+    &:hover {
+      color: var(--iui-color-background-hover);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &.cube-up {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      top: 0px;
+    }
+
+    &.cube-down {
+      margin: $arrow-margin auto;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+    }
+
+    &.cube-left {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+    }
+
+    &.cube-right {
+      margin: auto $arrow-margin;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+    }
+  }
+}

package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.scss

@@ -0,0 +1,133 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index" as *;
+
+#components-drawing-portal {
+  @include uicore-z-index(dragged-widget);
+}
+
+.components-drawing-navigation-aid {
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--iui-color-border-foreground),
+    0 0 0 2px var(--iui-color-text);
+  height: 96px;
+  width: 96px;
+
+  .drawing-canvas {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    min-width: 96px;
+    min-height: 96px;
+  }
+
+  .drawing-container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+
+    .drawing-view-window {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      border: white 1px solid;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .unrotate-button {
+      position: absolute;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
+      cursor: pointer;
+      border-radius: var(--iui-border-radius-1);
+      top: 10px;
+      left: 0px;
+      right: 0px;
+      margin: auto;
+      font-size: 13px;
+      height: 20px;
+      width: 64px;
+      line-height: 20px;
+      text-align: center;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .close {
+      position: absolute;
+      cursor: pointer;
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-background-disabled);
+      border-radius: var(--iui-border-radius-1);
+      right: 10px;
+      top: 10px;
+
+      .close-icon {
+        height: 32px;
+        width: 32px;
+        line-height: 32px;
+        text-align: center;
+        font-size: 18px;
+        transform: rotate(45deg);
+      }
+    }
+
+    .toggle-rotate-style {
+      position: absolute;
+      cursor: pointer;
+      background-color: var(--iui-color-background);
+      opacity: 0.5;
+      color: var(--iui-color-text);
+      border-radius: var(--iui-border-radius-1);
+      bottom: 10px;
+      left: 10px;
+      height: 16px;
+      width: 16px;
+      font-size: 12px;
+      line-height: 16px;
+      text-align: center;
+
+      &.checked {
+        color: var(--iui-color-text-accent);
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    .zoom {
+      position: absolute;
+      border: 1px solid var(--iui-color-background-disabled);
+      border-radius: var(--iui-border-radius-1);
+      right: 10px;
+      bottom: 10px;
+
+      .zoom-button {
+        cursor: pointer;
+        background-color: var(--iui-color-background);
+        height: 32px;
+        width: 32px;
+        line-height: 32px;
+        text-align: center;
+
+        &:first-child {
+          border-bottom: 1px solid var(--iui-color-background-disabled);
+        }
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+}

package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.scss

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-quantityFormat-panel {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: 0;
+  column-gap: 6px;
+  align-items: center;
+
+  > .uicore-label {
+    font-size: var(--iui-font-size-1);
+    margin: 4.4px 0;
+
+    /* match margin on other select controls so it spaces properly in grid */
+    &.uicore-disabled {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > span.components-inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+  }
+
+  > button.components-quantityFormat-more-button {
+    grid-column: 1 / span 2;
+    border: none;
+    outline: none;
+    background: none;
+  }
+
+  .components-quantityFormat-more-button-label {
+    margin-right: 0.25em;
+  }
+
+  > a.components-quantityFormat-more-less {
+    font-size: var(--iui-font-size-1);
+    color: var(--iui-color-text-negative);
+    -webkit-transition: text-decoration 1s ease;
+    -moz-transition: text-decoration 1s ease;
+    -o-transition: text-decoration 1s ease;
+    transition: text-decoration 0.1s ease;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}

package/lib/cjs/imodel-components-react/timeline/InlineEdit.scss

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.inline-edit-input {
+  color: var(--iui-color-text);
+  background: inherit;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  padding: 0px;
+
+  &:hover {
+    border: 1px solid var(--iui-color-background-disabled);
+  }
+
+  &:focus {
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-background-disabled);
+    outline: none;
+    color: var(--iui-color-text-hover);
+  }
+}

package/lib/cjs/imodel-components-react/timeline/Scrubber.scss

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/z-index" as *;
+
+.components-timeline-thumb {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--iui-color-background);
+  box-sizing: border-box;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  border: 1px solid var(--iui-color-border);
+  transform: translateX(-19.2px);
+}
+
+.components-timeline-rail-marker-container {
+  position: absolute;
+  width: 100%;
+  top: 0;
+
+  .components-timeline-tooltip {
+    @include uicore-z-index(tooltip);
+    position: absolute;
+    top: -8px;
+    display: inline-block;
+    transform: translateX(-50px);
+    border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
+    font-size: 14px;
+
+    .tooltip-text {
+      width: 100px;
+      background-color: rgba(0, 0, 0, var(--iui-opacity-3));
+      color: #fff;
+      // opacity: 0.8;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px 0;
+      position: absolute;
+      z-index: 1;
+      bottom: 150%;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin-left: -5px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, var(--iui-opacity-3)) transparent
+          transparent transparent;
+      }
+    }
+  }
+}
+
+.scrubber-handle {
+  pointer-events: none;
+  position: absolute;
+  width: 38px;
+  height: 20px;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    width: 1px;
+    height: 10px;
+    margin: 0 1px;
+    background-color: var(--iui-color-border-subtle);
+  }
+}
+
+.scrubber-track {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.components-timeline-date-marker {
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(50%);
+}
+
+.date-marker-default {
+  height: 12px;
+  width: 3px;
+  border-radius: var(--iui-border-radius-1);
+  transform: translateY(1px);
+  background-color: var(--iui-color-border);
+}

package/lib/cjs/imodel-components-react/timeline/SolarTimeline.scss

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.solar-timeline-wrapper {
+  width: 100%;
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "solar-timeline-start solar-timeline solar-timeline-end";
+}
+
+@container solar-timeline (width < 600px) {
+  .solar-timeline-wrapper {
+    grid-template-columns: auto auto;
+    grid-template-areas: "solar-timeline solar-timeline" "solar-timeline-start solar-timeline-end";
+  }
+}
+
+@container solar-timeline (width < 320px) {
+  .solar-timeline-date-time {
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    position: absolute !important;
+    white-space: nowrap !important;
+    block-size: 1px !important;
+    inline-size: 1px !important;
+  }
+}
+
+.solar-timeline {
+  grid-area: solar-timeline;
+  margin-inline: var(--iui-size-2xs);
+}
+
+.solar-timeline-start {
+  grid-area: solar-timeline-start;
+}
+
+.solar-timeline-end {
+  grid-area: solar-timeline-end;
+}

package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.scss

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.speed-timeline {
+  position: relative;
+  height: 25px;
+
+  .railOuter {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .railInner {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    height: 2px;
+    pointer-events: none;
+    background: var(--iui-color-background-disabled);
+  }
+
+  .scrubberHandle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 4;
+    width: 12px;
+    height: 12px;
+    cursor: pointer;
+    border: none;
+    border-radius: 50%;
+    background: var(--iui-color-icon-accent);
+  }
+}