@itwin/imodel-components-react 4.0.0-dev.20 → 4.0.0-dev.21

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

@@ -1,178 +1,178 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
-$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;
-            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;
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+
+$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;
+            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;
+    }
+  }
+}