misp-ui-library-test 0.0.1

package/dist/theme-chalk/row/index.scss

@@ -0,0 +1,88 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(row) {
+  position: relative;
+  box-sizing: border-box;
+
+  @include when(flex) {
+    display: flex;
+  }
+
+  @include e(flex) {
+    display: flex;
+
+    @include m(start) {
+      justify-content: flex-start;
+    }
+
+    @include m(end) {
+      justify-content: flex-end;
+    }
+
+    @include m(center) {
+      justify-content: center;
+    }
+
+    @include m(space-around) {
+      justify-content: space-around;
+    }
+
+    @include m(space-between) {
+      justify-content: space-between;
+    }
+
+    @include m(space-evenly) {
+      justify-content: space-evenly;
+    }
+
+    @include m(top) {
+      align-items: flex-start;
+    }
+
+    @include m(middle) {
+      align-items: center;
+    }
+
+    @include m(bottom) {
+      align-items: flex-end;
+    }
+  }
+
+  @include m(justify-start) {
+    justify-content: flex-start;
+  }
+
+  @include m(justify-end) {
+    justify-content: flex-end;
+  }
+
+  @include m(justify-center) {
+    justify-content: center;
+  }
+
+  @include m(justify-space-around) {
+    justify-content: space-around;
+  }
+
+  @include m(justify-space-between) {
+    justify-content: space-between;
+  }
+
+  @include m(justify-space-evenly) {
+    justify-content: space-evenly;
+  }
+
+  @include m(align-top) {
+    align-items: flex-start;
+  }
+
+  @include m(align-middle) {
+    align-items: center;
+  }
+
+  @include m(align-bottom) {
+    align-items: flex-end;
+  }
+}

package/dist/theme-chalk/scrollbar/index.scss

@@ -0,0 +1,67 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(scrollbar) {
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+
+  @include e(wrap) {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &--hidden-default {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  @include e(view) {
+    width: 100%;
+    height: auto;
+  }
+
+  @include e(bar) {
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    z-index: $index-normal;
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.is-vertical {
+      top: 2px;
+      width: 6px;
+
+      @include e(thumb) {
+        width: 100%;
+        min-height: 20px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    &.is-horizontal {
+      left: 2px;
+      height: 6px;
+
+      @include e(thumb) {
+        height: 100%;
+        min-width: 20px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+}

package/dist/theme-chalk/select/index.scss

@@ -0,0 +1,223 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@import '../input/index.scss';
+@import '../tag/index.scss';
+
+@include b(select) {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  .ui-select__tags
+    >span {
+      display: contents;
+    }
+  &:hover {
+    .ui-input__inner {
+      border-color: var(--primary-line);
+    }
+  }
+  .ui-input__inner {
+    cursor: pointer;
+    padding-right: 35px;
+    &:focus {
+      border-color: var(--primary-line);
+    }
+  }
+  .ui-input {
+    & .ui-select__caret {
+      color: var(--sd-text);
+      font-size: 1.1em;
+      transition: transform .3s;
+      transform: rotateZ(180deg);
+      cursor: pointer;
+      @include when(reverse) {
+        transform: rotateZ(0deg);
+      }
+      @include when(show-close) {
+        text-align: center;
+        transform: rotateZ(180deg);
+        border-radius: 4px;
+        color: var(--sd-text);
+        transition: color .2s cubic-bezier(.645,.045,.355,1);
+        &:hover {
+          color: var(--blue-4);
+        }
+      }
+    }
+    &.is-disabled {
+      & .ui-select__caret {
+        cursor: not-allowed;
+      }
+      & .ui-input__inner {
+        cursor: not-allowed;
+        &:hover {
+          border-color: var(--primary-line);
+        }
+      }
+    }
+    &:hover .ui-input__inner {
+      border-color: var(--blue-4);
+    }
+    &:focus .ui-input__inner {
+      outline: none;
+      border-color: var(--blue-4);
+    }
+  }
+  > .ui-input {
+    display: block;
+  }
+  @include when(autosize) {
+    > .ui-input {
+      .ui-input__inner {
+        border: none;
+        padding-left: 0;
+      }
+    }
+  }
+  @include e(input) {
+    border: none;
+    outline: none;
+    padding: 0;
+    margin-left: 15px;
+    color: var(--primary-text);
+    font-size: 0.8em;
+    appearance: none;
+    height: 28px;
+    background-color: transparent;
+    @include when(mini) {
+      height: 14px;
+    }
+  }
+  @include e(close) {
+    cursor: pointer;
+    position: absolute;
+    top: 8px;
+    z-index: 1000;
+    right: 25px;
+    color: var(--sd-text);
+    line-height: 18px;
+    font-size: 1.1em;
+    &:hover {
+      color: var(--blue-4);
+    }
+  }
+  @include e(tags) {
+    position: absolute;
+    line-height: normal;
+    white-space: normal;
+    z-index: 1;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  @include e(tags-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &.multi-count {
+      padding-bottom: 1px;
+    }
+  }
+  .ui-tag {
+    box-sizing: border-box;
+    border-color: transparent;
+    margin: 2px 0 2px 6px;
+    background-color: #f0f2f5;
+    display: flex;
+    max-width: 100%;
+    align-items: center;
+    &__close.ui-icon-close {
+      background-color: var(--fr-bg);
+      top: 0;
+      color: var(--white);
+      flex-shrink: 0;
+      &::before {
+        display: block;
+        transform: translate(0, .5px);
+      }
+    }
+  }
+}
+
+@include b(select-dropdown) {
+  position: absolute;
+  z-index: 1001;
+  border: 1px solid var(--primary-line);
+  border-radius: 4px;
+  background-color: var(--base-bg);
+  box-shadow: var(--box-shadow-3);
+  box-sizing: border-box;
+  margin: 5px 0;
+  @include when(multiple) {
+    & .el-select-dropdown__item {
+      padding-right: 40px;
+    }
+    & .el-select-dropdown__item.selected {
+      color: var(--primary-blue);
+      background-color: var(--white);
+      &.hover {
+        background-color: var(--blue-5);
+      }
+      &::after {
+        position: absolute;
+        right: 20px;
+        content: "e6da";
+        font-size: 12px;
+        font-weight: bold;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    }
+  }
+  .el-scrollbar.is-empty .el-select-dropdown__list{
+    padding: 0;
+  }
+  @include e(item) {
+    padding: 0 20px;
+    margin-bottom: 0;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--sd-text);
+    height: 34px;
+    line-height: 34px;
+    box-sizing: border-box;
+    cursor: pointer;
+    &:has(+ .ui-select-dropdown__item) {
+      margin-bottom: 2px;
+    }
+    @include when(disabled) {
+      color: var(--fr-bg);
+      cursor: not-allowed;
+      &:hover {
+        background-color: var(--blue-bg);
+      }
+    }
+    &.hover, &:hover {
+      background-color: var(--blue-bg);
+    }
+    &.selected {
+      color: var(--primary-blue);
+      font-weight: bold;
+    }
+  }
+}
+@include b(select-dropdown__empty) {
+  padding: 10px 0;
+  margin: 0;
+  text-align: center;
+  color: var(--disable-text);
+}
+@include b(select-dropdown__wrap) {
+  max-height: 274px;
+}
+@include b(select-dropdown__list) {
+  list-style: none;
+  padding: 6px 0;
+  margin: 0;
+  box-sizing: border-box;
+}

package/dist/theme-chalk/skeleton/index.scss

@@ -0,0 +1,30 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(skeleton) {
+  width: 100%;
+
+  &.is-animated {
+    animation: ui-skeleton-loading 1.4s ease infinite;
+  }
+
+  @include e(paragraph) {
+    &.is-first {
+      margin-bottom: 16px;
+    }
+
+    &.is-last {
+      margin-top: 16px;
+    }
+  }
+}
+
+@keyframes ui-skeleton-loading {
+  0% {
+    background-position: -460px 0;
+  }
+  100% {
+    background-position: 460px 0;
+  }
+}

package/dist/theme-chalk/skeleton-item/index.scss

@@ -0,0 +1,49 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(skeleton-item) {
+  display: block;
+  width: 100%;
+
+  @include e(item) {
+    background: $base-bg;
+    border-radius: 4px;
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: 16px;
+    margin-bottom: 8px;
+  }
+
+  @include e(circle) {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+  }
+
+  @include e(rect) {
+    width: 100%;
+    height: 100px;
+    border-radius: 0;
+  }
+
+  @include e(round) {
+    width: 100%;
+    height: 100px;
+    border-radius: 8px;
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100px;
+    overflow: hidden;
+
+    .ui-skeleton__image {
+      width: 100%;
+      height: 100%;
+      background: $base-bg;
+    }
+  }
+}

package/dist/theme-chalk/slider/index.scss

@@ -0,0 +1,113 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(slider) {
+  @include e(runway) {
+    width: 100%;
+    height: 6px;
+    margin: 16px 0;
+    background-color: $fr-bg;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+
+    &.show-input {
+      margin-right: 160px;
+      width: auto;
+    }
+
+    &.disabled {
+      cursor: default;
+
+      .ui-slider__bar {
+        background-color: $disable-text;
+      }
+
+      .ui-slider__button {
+        border-color: $disable-text;
+      }
+    }
+  }
+
+  @include e(input) {
+    float: right;
+    margin-top: 3px;
+    width: 130px;
+  }
+
+  @include e(bar) {
+    height: 6px;
+    background-color: $primary-blue;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    position: absolute;
+  }
+
+  @include e(button-wrapper) {
+    height: 20px;
+    width: 20px;
+    position: absolute;
+    z-index: 1001;
+    top: -7px;
+    transform: translateX(-50%);
+    background-color: transparent;
+    text-align: center;
+    user-select: none;
+
+    &:hover,
+    &.hover {
+      cursor: grab;
+    }
+
+    &.dragging {
+      cursor: grabbing;
+    }
+  }
+
+  @include e(button) {
+    width: 16px;
+    height: 16px;
+    border: 2px solid $primary-blue;
+    background-color: $white;
+    border-radius: 50%;
+    transition: .2s;
+    user-select: none;
+
+    &:hover,
+    &.hover,
+    &.dragging {
+      transform: scale(1.2);
+    }
+  }
+
+  @include e(stop) {
+    position: absolute;
+    height: 6px;
+    width: 6px;
+    border-radius: 50%;
+    background-color: $white;
+    box-shadow: 0 0 0 2px $fr-bg;
+    transform: translateX(-50%);
+  }
+
+  @include when(vertical) {
+    position: relative;
+    .ui-slider__runway {
+      width: 6px;
+      height: 100%;
+      margin: 0 16px;
+    }
+    .ui-slider__bar {
+      width: 6px;
+      height: auto;
+      border-radius: 0 0 3px 3px;
+    }
+    .ui-slider__button-wrapper {
+      top: auto;
+      left: -7px;
+      transform: translateY(50%);
+    }
+  }
+}

package/dist/theme-chalk/spinner/index.scss

@@ -0,0 +1,40 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(spinner) {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@include b(spinner-inner) {
+  animation: rotating 1.5s linear infinite;
+
+  @include e(path) {
+    animation: dash 1.5s ease-in-out infinite;
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}

package/dist/theme-chalk/statistic/index.scss

@@ -0,0 +1,38 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(statistic) {
+  @include e(head) {
+    margin-bottom: 8px;
+  }
+
+  @include e(title) {
+    font-size: 14px;
+    color: $td-text;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(prefix) {
+    margin-right: 4px;
+    font-size: 14px;
+    color: $sd-text;
+  }
+
+  @include e(number) {
+    font-size: 24px;
+    font-weight: 500;
+    color: $primary-text;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  @include e(suffix) {
+    margin-left: 4px;
+    font-size: 14px;
+    color: $sd-text;
+  }
+}

package/dist/theme-chalk/status-timeline-chart/index.scss

@@ -0,0 +1,23 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(status-timeline-chart) {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+  position: relative;
+  @include e(inner) {
+    width: 100%;
+    height: 100%;
+    min-height: 280px;
+  }
+  @include e(empty) {
+    width: 100%;
+    height: 100%;
+    min-height: 280px;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}