@itwin/core-react 4.0.0-dev.8 → 4.0.0

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

@@ -1,240 +1,240 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../inputs/variables";
-@import "../z-index";
-@import "~@itwin/itwinui-css/scss/style/elevation";
-
-.core-popup {
- top: 0;
- left: 0;
- display: block;
- box-sizing: border-box;
- position: absolute;
- border-radius: 4px;
- border: 1px solid $buic-background-panel-stroke;
- background: $buic-background-panel;
- color: $buic-text-color;
- animation-duration: .2s;
- 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: $buic-background-panel;
-}
-
-.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: $iui-elevation-16;
- box-shadow: $iui-elevation-16;
- 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,.5);
- }
- to {
-   visibility: visible;
-   transform: scale(1);
- }
-}
-
-@keyframes animate-corner {
- from {
-   visibility: hidden;
-   transform: scale(.5,.5);
- }
- to {
-   visibility: visible;
-   transform: scale(1,1);
- }
-}
-
-@keyframes animate-horizontal {
- from {
-   visibility: hidden;
-   transform: scale(.5,1);
- }
- to {
-   visibility: visible;
-   transform: scale(1,1);
- }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../inputs/variables";
+@import "../z-index";
+
+.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/Annulus.d.ts

@@ -1,55 +1,55 @@
-/** @packageDocumentation
- * @module RadialMenu
- */
-import { Point } from "../utils/Point";
-/**
- * 2D Line consisting of a start point, and an end point
- * @internal
- */
-export declare class Line {
-    p1: Point;
-    p2: Point;
-    constructor(p1?: Point, p2?: Point);
-    /** checks for equality with the components of this, and line parameter */
-    equals: (line: Line) => boolean;
-}
-/** @internal
- * 2D Circle
- */
-export declare class Circle {
-    center: Point;
-    radius: number;
-    constructor(center?: Point, radius?: number);
-}
-/** @internal
- * 2D Annulus (2D doughnut shape/flattened torus) defined by an inner and outer circle with a shared center point.
- */
-export declare class Annulus {
-    center: Point;
-    inner: Circle;
-    outer: Circle;
-    constructor(center?: Point, innerRadius?: number, outerRadius?: number);
-}
-/** @internal
- * 2D Sector of an Annulus, defined by both a parent annulus, a startAngle, and an endAngle.
- */
-export declare class AnnularSector {
-    parent: Annulus;
-    startAngle: number;
-    endAngle: number;
-    path: string;
-    innerStart: Point;
-    outerStart: Point;
-    start: Line;
-    innerEnd: Point;
-    outerEnd: Point;
-    end: Line;
-    /**
-     * initialize AnnularSector on parent annulus, and generate SVG Path to store in this.path
-     * @param parent parent annulus to initialize sector on.
-     * @param startAngle angle to begin the annular sector on.
-     * @param endAngle angle to end the annular sector on.
-     */
-    constructor(parent: Annulus, startAngle: number, endAngle: number);
-}
+/** @packageDocumentation
+ * @module RadialMenu
+ */
+import { Point } from "../utils/Point";
+/**
+ * 2D Line consisting of a start point, and an end point
+ * @internal
+ */
+export declare class Line {
+    p1: Point;
+    p2: Point;
+    constructor(p1?: Point, p2?: Point);
+    /** checks for equality with the components of this, and line parameter */
+    equals: (line: Line) => boolean;
+}
+/** @internal
+ * 2D Circle
+ */
+export declare class Circle {
+    center: Point;
+    radius: number;
+    constructor(center?: Point, radius?: number);
+}
+/** @internal
+ * 2D Annulus (2D doughnut shape/flattened torus) defined by an inner and outer circle with a shared center point.
+ */
+export declare class Annulus {
+    center: Point;
+    inner: Circle;
+    outer: Circle;
+    constructor(center?: Point, innerRadius?: number, outerRadius?: number);
+}
+/** @internal
+ * 2D Sector of an Annulus, defined by both a parent annulus, a startAngle, and an endAngle.
+ */
+export declare class AnnularSector {
+    parent: Annulus;
+    startAngle: number;
+    endAngle: number;
+    path: string;
+    innerStart: Point;
+    outerStart: Point;
+    start: Line;
+    innerEnd: Point;
+    outerEnd: Point;
+    end: Line;
+    /**
+     * initialize AnnularSector on parent annulus, and generate SVG Path to store in this.path
+     * @param parent parent annulus to initialize sector on.
+     * @param startAngle angle to begin the annular sector on.
+     * @param endAngle angle to end the annular sector on.
+     */
+    constructor(parent: Annulus, startAngle: number, endAngle: number);
+}
 //# sourceMappingURL=Annulus.d.ts.map