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

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

@@ -1,356 +1,359 @@
-/*---------------------------------------------------------------------------------------------
-* 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";
-
-$top-position: 6px;
-$bottom-position: 4px;
-
-.solar-slider.solar-timeline > .iui-slider-container {
-  height: 28px;
-}
-
-.solar-timeline-wrapper {
-  box-sizing: border-box;
-  background: $buic-background-2;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding: 8px 16px;
-  color: $buic-foreground-body;
-  font-size: 14px;
-
-  > .header {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    > .play-button {
-      width: 26px;
-      height: 26px;
-      background: inherit;
-      border: none;
-      font-size: 20px;
-    }
-
-    > .shadow-settings-button {
-      display: flex;
-      align-items: center;
-      color: $buic-foreground-body;
-      width: 26px;
-      height: 26px;
-      background: inherit;
-      border: none;
-      font-size: 16px;
-      margin-left: 6px;
-      cursor: pointer;
-
-      &:hover {
-        color: $buic-foreground-activehover;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    > .current-date {
-      min-width: 175px;
-      margin-left: 8px;
-      margin-right: 4px;
-      background: inherit;
-      padding: 3px 4px;
-      border: none;
-      display: flex;
-      align-items: center;
-      color: $buic-foreground-body;
-      font-size: 14px;
-      cursor: pointer;
-
-      > span:nth-child(2) {
-        margin: 0 6px;
-      }
-
-      > .icon-calendar {
-        flex-grow: 1;
-        margin-left: auto;
-      }
-    }
-
-    > .speed-container {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-      cursor: pointer;
-
-      > .speed {
-        margin-left: 12px;
-        width: 0;
-        opacity: 0;
-        transition: all 0.2s linear;
-        margin-right: 10px;
-      }
-    }
-
-    > .loop-playback {
-      color: $buic-foreground-primary;
-      font-size: 16px;
-      cursor: pointer;
-
-      &:hover {
-        color: $buic-foreground-primary-tone;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    > .no-loop-playback {
-      color: $buic-foreground-body;
-      font-size: 16px;
-      cursor: pointer;
-
-      &:hover {
-        color: $buic-foreground-activehover;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-
-  .solar-slider {
-    position: relative;
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    flex: 1;
-
-    .rail-outer {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 100%;
-      height: 20px;
-      cursor: pointer;
-    }
-
-    .rail-inner,
-    .rail-solar {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 4px;
-      pointer-events: none;
-    }
-
-    .rail-inner {
-      width: 100%;
-      background: $buic-background-5;
-    }
-
-    .rail-solar {
-      background: $buic-foreground-primary;
-      z-index: 1;
-    }
-
-    .rail-tooltip {
-      position: absolute;
-      margin-left: -11px;
-      top: 0;
-      transform: translateY(-50%);
-      z-index: 1;
-    }
-
-    .solar-handle {
-      position: absolute;
-      top: 50%;
-      z-index: 4;
-      width: 38px;
-      height: 20px;
-      border-radius: var(--iui-border-radius-1);
-      border: 1px solid $buic-background-5;
-      background-image: linear-gradient(
-          to bottom,
-          $buic-background-3,
-          $buic-background-3
-        ),
-        linear-gradient(to bottom, $buic-background-1, $buic-background-1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      transform: translate(-50%, -50%);
-      cursor: pointer;
-
-      > div {
-        width: 1px;
-        height: 10px;
-        opacity: 0.25;
-        margin: 0 1px;
-        background-color: $buic-foreground-body;
-      }
-    }
-
-    .tick-mark {
-      position: absolute;
-      bottom: calc(#{$bottom-position} + 15px);
-      width: 1px;
-      height: 5px;
-      background: rgb(200, 200, 200);
-    }
-
-    .tick-label {
-      position: absolute;
-      bottom: $bottom-position;
-      font-size: 10px;
-      text-align: center;
-    }
-
-    .sunrise,
-    .sunset {
-      font-size: 22px;
-      cursor: default;
-    }
-
-    .sunset {
-      margin: 0px 16px 2px 24px;
-    }
-
-    .sunrise {
-      color: #ffcf00;
-      margin: 0 24px 0 8px;
-    }
-  }
-}
-
-.solar-timeline-wrapper > .header > .speed-container:hover > .speed {
-  opacity: 1;
-  width: 80px;
-}
-
-.solar-timeline-wrapper.expanded .header .expanded-icon {
-  transform: rotate(180deg);
-}
-
-.solar-timeline-wrapper.expanded > .header > .current-date {
-  margin-left: 70px;
-}
-
-.solar-timeline-wrapper .solar-timeline-expanded {
-  display: none;
-  margin-bottom: 8px;
-}
-
-.solar-timeline-wrapper .solar-timeline {
-  display: flex;
-}
-
-.solar-timeline-wrapper.expanded {
-  height: 100px;
-}
-
-.shadow-settings-color-top {
-  display: inline;
-}
-
-.shadow-settings-color-bottom {
-  display: flex;
-  flex-direction: row;
-}
-
-.shadow-settings-popup-container {
-  width: 220px;
-  padding: 10px 10px 0px;
-  display: flex;
-  flex-direction: column;
-
-  .shadow-settings-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 6px;
-  }
-
-  .shadow-settings-color {
-    display: flex;
-    flex-direction: column;
-
-    .shadow-settings-color-top {
-      height: 150px;
-      margin: 1em;
-    }
-
-    .shadow-settings-color-bottom {
-      width: 100%;
-      height: 32px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-
-      .shadow-settings-color-bottom-left {
-        width: calc(100% - 2em - 32px);
-        height: 100%;
-        margin-left: 1em;
-        margin-right: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .shadow-settings-color-bottom-right {
-        width: 32px;
-        height: 100%;
-      }
-    }
-  }
-
-  .shadow-settings-color-presets {
-    width: 100%;
-    height: 24px;
-    padding-top: 10px;
-    margin-bottom: 10px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-column-gap: 2px;
-    border-top: 1px solid $buic-background-5;
-  }
-}
-
-.sunrise-tip {
-  position: absolute;
-  top: -8px;
-  display: inline-block;
-  border-bottom: 1px dotted #222;
-  font-size: 14px;
-}
-
-.solar-tooltip-text {
-  width: 100px;
-  background-color: #222;
-  color: #fff;
-  // opacity: 0.8;
-  text-align: center;
-  border-radius: 6px;
-  padding: 8px 0;
-  position: absolute;
-  z-index: 1;
-  bottom: 150%;
-  left: 50%;
-  margin-left: -60px;
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #222 transparent transparent transparent;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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";
+
+$top-position: 6px;
+$bottom-position: 4px;
+
+.solar-slider.solar-timeline > .iui-slider-container {
+  height: 28px;
+}
+
+.solar-timeline-wrapper {
+  box-sizing: border-box;
+  background: var(--iui-color-background);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 8px 16px;
+  color: var(--iui-color-text);
+  font-size: var(--iui-font-size-1);
+
+  > .header {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    > .play-button {
+      width: 26px;
+      height: 26px;
+      background: inherit;
+      border: none;
+      font-size: 20px;
+    }
+
+    > .shadow-settings-button {
+      display: flex;
+      align-items: center;
+      color: var(--iui-color-icon);
+      width: 26px;
+      height: 26px;
+      background: inherit;
+      border: none;
+      font-size: 16px;
+      margin-left: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--iui-color-icon-hover);
+      }
+
+      &:focus-visible {
+        outline: 1px solid var(--iui-color-border-accent);
+        outline-offset: -1px;
+      }
+    }
+
+    > .current-date {
+      min-width: 175px;
+      margin-left: 8px;
+      margin-right: 4px;
+      background: inherit;
+      padding: 3px 4px;
+      border: none;
+      display: flex;
+      align-items: center;
+      color: var(--iui-color-text);
+      font-size: var(--iui-font-size-1);
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: 1px solid var(--iui-color-border-accent);
+        outline-offset: -1px;
+      }
+
+      > span:nth-child(2) {
+        margin: 0 6px;
+      }
+
+      > .icon-calendar {
+        flex-grow: 1;
+        margin-left: auto;
+      }
+    }
+
+    > .speed-container {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      cursor: pointer;
+
+      > .speed {
+        margin-left: 12px;
+        width: 0;
+        opacity: 0;
+        transition: all 0.2s linear;
+        margin-right: 10px;
+      }
+    }
+
+    > .loop-playback {
+      color: var(--iui-color-icon-accent);
+      font-size: 16px;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    > .no-loop-playback {
+      color: var(--iui-color-icon);
+      font-size: 16px;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--iui-color-icon-hover);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .solar-slider {
+    position: relative;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    flex: 1;
+
+    .rail-outer {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .rail-inner,
+    .rail-solar {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 4px;
+      pointer-events: none;
+    }
+
+    .rail-inner {
+      width: 100%;
+      background: var(--iui-color-background-backdrop);
+    }
+
+    .rail-solar {
+      background: var(--iui-color-background-accent);
+      z-index: 1;
+    }
+
+    .rail-tooltip {
+      position: absolute;
+      margin-left: -11px;
+      top: 0;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
+
+    .solar-handle {
+      position: absolute;
+      top: 50%;
+      z-index: 4;
+      width: 38px;
+      height: 20px;
+      border-radius: var(--iui-border-radius-1);
+      border: 1px solid $buic-background-5;
+      background-image: linear-gradient(
+          to bottom,
+          $buic-background-3,
+          $buic-background-3
+        ),
+        linear-gradient(to bottom, $buic-background-1, $buic-background-1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      transform: translate(-50%, -50%);
+      cursor: pointer;
+
+      > div {
+        width: 1px;
+        height: 10px;
+        opacity: 0.25;
+        margin: 0 1px;
+        background-color: var(--iui-color-text);
+      }
+    }
+
+    .tick-mark {
+      position: absolute;
+      bottom: calc(#{$bottom-position} + 15px);
+      width: 1px;
+      height: 5px;
+      background: rgb(200, 200, 200);
+    }
+
+    .tick-label {
+      position: absolute;
+      bottom: $bottom-position;
+      font-size: 10px;
+      text-align: center;
+    }
+
+    .sunrise,
+    .sunset {
+      font-size: 22px;
+      cursor: default;
+    }
+
+    .sunset {
+      margin: 0px 16px 2px 24px;
+    }
+
+    .sunrise {
+      color: var(--iui-color-icon-warning);
+      margin: 0 24px 0 8px;
+    }
+  }
+}
+
+.solar-timeline-wrapper > .header > .speed-container:hover > .speed {
+  opacity: 1;
+  width: 80px;
+}
+
+.solar-timeline-wrapper.expanded .header .expanded-icon {
+  transform: rotate(180deg);
+}
+
+.solar-timeline-wrapper.expanded > .header > .current-date {
+  margin-left: 70px;
+}
+
+.solar-timeline-wrapper .solar-timeline-expanded {
+  display: none;
+  margin-bottom: 8px;
+}
+
+.solar-timeline-wrapper .solar-timeline {
+  display: flex;
+}
+
+.solar-timeline-wrapper.expanded {
+  height: 100px;
+}
+
+.shadow-settings-color-top {
+  display: inline;
+}
+
+.shadow-settings-color-bottom {
+  display: flex;
+  flex-direction: row;
+}
+
+.shadow-settings-popup-container {
+  width: 220px;
+  padding: 10px 10px 0px;
+  display: flex;
+  flex-direction: column;
+
+  .shadow-settings-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 6px;
+  }
+
+  .shadow-settings-color {
+    display: flex;
+    flex-direction: column;
+
+    .shadow-settings-color-top {
+      height: 150px;
+      margin: 1em;
+    }
+
+    .shadow-settings-color-bottom {
+      width: 100%;
+      height: 32px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+
+      .shadow-settings-color-bottom-left {
+        width: calc(100% - 2em - 32px);
+        height: 100%;
+        margin-left: 1em;
+        margin-right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .shadow-settings-color-bottom-right {
+        width: 32px;
+        height: 100%;
+      }
+    }
+  }
+
+  .shadow-settings-color-presets {
+    width: 100%;
+    height: 24px;
+    padding-top: 10px;
+    margin-bottom: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-column-gap: 2px;
+    border-top: 1px solid var(--iui-color-border-subtle);
+  }
+}
+
+.sunrise-tip {
+  position: absolute;
+  top: -8px;
+  display: inline-block;
+  border-bottom: 1px dotted rgba(0, 0, 0, var(--iui-opacity-3));
+  font-size: 14px;
+}
+
+.solar-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%;
+  left: 50%;
+  margin-left: -60px;
+
+  &: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;
+  }
+}