evui 3.3.36 → 3.3.39

package/src/components/chart/style/chart.scss

@@ -1,312 +1,312 @@
-@import '../../../style/index.scss';
-
-.ev-chart-wrapper {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.ev-chart-container {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.ev-chart-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding-left: 10px;
-  word-wrap: normal;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  user-select: none;
-}
-
-.ev-chart-legend {
-  position: absolute;
-  overflow: hidden;
-  padding: 5px 0 0 0;
-}
-
-.ev-chart-legend-container {
-  position: relative;
-}
-
-.ev-chart-legend-color {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translate(0, -50%);
-  width: 18px;
-  height: 4px;
-
-  &--point-line {
-    @extend .ev-chart-legend-color;
-
-    &::after {
-      display: inline-block;
-      position: absolute;
-      top: -2px;
-      left: 5px;
-      width: 8px;
-      height: 8px;
-      content: ' ';
-      border-radius: 50%;
-      background-color: inherit;
-    }
-  }
-}
-
-.ev-chart-legend-name {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: 12px;
-  margin-left: 24px;
-  padding-right: 16px;
-  user-select: none;
-  font-weight: 400;
-  transform: translate(0, -50%);
-
-  &:hover {
-    font-weight: bold;
-  }
-}
-
-.ev-chart-legend-value {
-  float: right;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.ev-chart-legend--table {
-  $ev-chart-legend-table-row-padding: 3px;
-  $ev-chart-legend-table-color-width: 18px;
-
-  width: 100%;
-  font-size: 12px;
-  user-select: none;
-  border-collapse: collapse;
-
-  td, th {
-    padding: $ev-chart-legend-table-row-padding;
-    text-align: center;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__row {
-    cursor: pointer;
-    min-height: 18px;
-
-    &:hover {
-      font-weight: bold;
-    }
-  }
-
-  &__color {
-    width: 18px;
-
-    &-wrapper {
-      position: relative;
-      min-width: 18px;
-    }
-
-    &--line {
-      height: 4px;
-    }
-
-    &--point-line {
-      position: absolute;
-      top: 50%;
-      left: $ev-chart-legend-table-row-padding;
-      transform: translate(0, -50%);
-      height: 4px;
-
-      &::after {
-        display: inline-block;
-        position: absolute;
-        top: -2px;
-        left: 5px;
-        width: 8px;
-        height: 8px;
-        content: ' ';
-        border-radius: 50%;
-        background-color: inherit;
-      }
-    }
-  }
-
-  &__name {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &__value {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.ev-chart-legend-line {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-  background-color: #E3E3E3;
-
-  &-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.ev-chart-legend-thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-  color: #000000;
-}
-
-.ev-chart-legend-handle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: pointer;
-
-  &.dragging,
-  &:hover {
-    transform: scale(1.2);
-  }
-
-  &-btn {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: $color-white;
-    transition: transform 0.1s ease-in-out;
-    box-sizing: border-box;
-    border: 2px solid #979797;
-
-    &-color {
-      position: absolute;
-      top: 4px;
-      left: 4px;
-      width: calc(100% - 8px);
-      height: calc(100% - 8px);
-      border-radius: 50%;
-    }
-  }
-}
-
-.ev-chart-legend-label {
-  position: absolute;
-  font-size: 12px;
-  line-height: 1.4em;
-
-  &-text {
-    display: block;
-    white-space: nowrap;
-  }
-}
-
-.ev-chart-legend-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  .ev-chart-legend-overlay-item {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    border-radius: 50%;
-    border: 1px solid #FFFFFF;
-    background-color: transparent;
-  }
-
-  .ev-chart-legend-overlay-tooltip {
-    position: absolute;
-    font-size: 12px;
-    line-height: 1.4em;
-  }
-}
-
-.ev-chart-resize-bar {
-  position: absolute;
-  background: transparent;
-  opacity: 0.5;
-  z-index: 10;
-}
-
-.ev-chart-resize-bar:hover {
-  background-color: #E2E2E2;
-}
-
-.ev-chart-resize-ghost {
-  position: absolute;
-  width: 4px;
-  height: 100%;
-  cursor: col-resize;
-  opacity: 0.5;
-  background-color: #E2E2E2;
-}
-
-.ev-chart-resize-ghost.horizontal {
-  width: 100%;
-  height: 4px;
-  cursor: row-resize;
-}
-
-.ev-chart-tooltip {
-  position: absolute;
-  z-index: 850;
-  top: 0;
-  left: 0;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  border-radius: 8px;
-
-  .ev-chart-tooltip-header {
-    padding: 8px 16px 0 16px;
-    overflow: hidden;
-    font-size: 16px;
-
-    &--wrap {
-      word-wrap: break-word;
-    }
-
-    &--ellipsis {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-
-  .ev-chart-tooltip-body {
-    overflow-x: hidden;
-    overflow-y: hidden;
-  }
-}
+@import '../../../style/index.scss';
+
+.ev-chart-wrapper {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.ev-chart-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.ev-chart-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-left: 10px;
+  word-wrap: normal;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.ev-chart-legend {
+  position: absolute;
+  overflow: hidden;
+  padding: 5px 0 0 0;
+}
+
+.ev-chart-legend-container {
+  position: relative;
+}
+
+.ev-chart-legend-color {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  width: 18px;
+  height: 4px;
+
+  &--point-line {
+    @extend .ev-chart-legend-color;
+
+    &::after {
+      display: inline-block;
+      position: absolute;
+      top: -2px;
+      left: 5px;
+      width: 8px;
+      height: 8px;
+      content: ' ';
+      border-radius: 50%;
+      background-color: inherit;
+    }
+  }
+}
+
+.ev-chart-legend-name {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 12px;
+  margin-left: 24px;
+  padding-right: 16px;
+  user-select: none;
+  font-weight: 400;
+  transform: translate(0, -50%);
+
+  &:hover {
+    font-weight: bold;
+  }
+}
+
+.ev-chart-legend-value {
+  float: right;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.ev-chart-legend--table {
+  $ev-chart-legend-table-row-padding: 3px;
+  $ev-chart-legend-table-color-width: 18px;
+
+  width: 100%;
+  font-size: 12px;
+  user-select: none;
+  border-collapse: collapse;
+
+  td, th {
+    padding: $ev-chart-legend-table-row-padding;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__row {
+    cursor: pointer;
+    min-height: 18px;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
+
+  &__color {
+    width: 18px;
+
+    &-wrapper {
+      position: relative;
+      min-width: 18px;
+    }
+
+    &--line {
+      height: 4px;
+    }
+
+    &--point-line {
+      position: absolute;
+      top: 50%;
+      left: $ev-chart-legend-table-row-padding;
+      transform: translate(0, -50%);
+      height: 4px;
+
+      &::after {
+        display: inline-block;
+        position: absolute;
+        top: -2px;
+        left: 5px;
+        width: 8px;
+        height: 8px;
+        content: ' ';
+        border-radius: 50%;
+        background-color: inherit;
+      }
+    }
+  }
+
+  &__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__value {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.ev-chart-legend-line {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  background-color: #E3E3E3;
+
+  &-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ev-chart-legend-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  color: #000000;
+}
+
+.ev-chart-legend-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+
+  &.dragging,
+  &:hover {
+    transform: scale(1.2);
+  }
+
+  &-btn {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: $color-white;
+    transition: transform 0.1s ease-in-out;
+    box-sizing: border-box;
+    border: 2px solid #979797;
+
+    &-color {
+      position: absolute;
+      top: 4px;
+      left: 4px;
+      width: calc(100% - 8px);
+      height: calc(100% - 8px);
+      border-radius: 50%;
+    }
+  }
+}
+
+.ev-chart-legend-label {
+  position: absolute;
+  font-size: 12px;
+  line-height: 1.4em;
+
+  &-text {
+    display: block;
+    white-space: nowrap;
+  }
+}
+
+.ev-chart-legend-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .ev-chart-legend-overlay-item {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    border-radius: 50%;
+    border: 1px solid #FFFFFF;
+    background-color: transparent;
+  }
+
+  .ev-chart-legend-overlay-tooltip {
+    position: absolute;
+    font-size: 12px;
+    line-height: 1.4em;
+  }
+}
+
+.ev-chart-resize-bar {
+  position: absolute;
+  background: transparent;
+  opacity: 0.5;
+  z-index: 10;
+}
+
+.ev-chart-resize-bar:hover {
+  background-color: #E2E2E2;
+}
+
+.ev-chart-resize-ghost {
+  position: absolute;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  opacity: 0.5;
+  background-color: #E2E2E2;
+}
+
+.ev-chart-resize-ghost.horizontal {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.ev-chart-tooltip {
+  position: absolute;
+  z-index: 850;
+  top: 0;
+  left: 0;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  border-radius: 8px;
+
+  .ev-chart-tooltip-header {
+    padding: 8px 16px 0 16px;
+    overflow: hidden;
+    font-size: 16px;
+
+    &--wrap {
+      word-wrap: break-word;
+    }
+
+    &--ellipsis {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+
+  .ev-chart-tooltip-body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+}