@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/style/tag.scss

@@ -1,174 +0,0 @@
-@import "mixins";
-@import "var";
-
-@mixin genTheme($backgroundColorWeight, $borderColorWeight, $fontColorWeight, $hoverColorWeight) {
-  background-color: mix($--tag-primary-color, $--color-white, $backgroundColorWeight);
-  border-color: mix($--tag-primary-color, $--color-white, $borderColorWeight);
-  color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
-
-  font-weight: 500;
-
-  @include when(hit) {
-    border-color: $--tag-primary-color;
-  }
-  @include when(round) {
-    border-radius: 20px;
-  }
-
-  .base-tag__close {
-    color: mix($--tag-primary-color, $--color-white, $fontColorWeight);
-    &:hover {
-      color: $--color-white;
-      background-color: mix($--tag-primary-color, $--color-white, $hoverColorWeight);
-    }
-  }
-
-  &.base-tag--info {
-    background-color: mix($--tag-info-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-info-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-info-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-info-color;
-    }
-
-    .base-tag__close {
-      color: mix($--tag-info-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-info-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.base-tag--success {
-    background-color: mix($--tag-success-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-success-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-success-color;
-    }
-
-    .base-tag__close {
-      color: mix($--tag-success-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-success-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.base-tag--warning {
-    background-color: mix($--tag-warning-color, $--color-white, $backgroundColorWeight)!important;
-    border-color: mix($--tag-warning-color, $--color-white, $borderColorWeight)!important;
-    color: mix($--tag-warning-color, $--color-white, $fontColorWeight)!important;
-
-    @include when(hit) {
-      border-color: $--tag-warning-color;
-    }
-
-    .base-tag__close {
-      color: mix($--tag-warning-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-warning-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-
-  &.base-tag--danger {
-    background-color: mix($--tag-danger-color, $--color-white, $backgroundColorWeight);
-    border-color: mix($--tag-danger-color, $--color-white, $borderColorWeight);
-    color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-
-    @include when(hit) {
-      border-color: $--tag-danger-color;
-    }
-
-    .base-tag__close {
-      color: mix($--tag-danger-color, $--color-white, $fontColorWeight);
-      &:hover {
-        color: $--color-white;
-        background-color: mix($--tag-danger-color, $--color-white, $hoverColorWeight);
-      }
-    }
-  }
-}
-
-@include b(tag) {
-  @include genTheme(10%, 20%, 100%, 100%);
-  display: inline-block;
-  height: 32px;
-  padding: $--tag-padding;
-  line-height: 30px;
-  font-size: $--tag-font-size;
-  color: $--tag-primary-color;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: $--tag-border-radius;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  .base-icon-close {
-    border-radius: 50%;
-    text-align: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 12px;
-    height: 16px;
-    width: 16px;
-    line-height: 16px;
-    vertical-align: middle;
-    top: -1px;
-    right: -5px;
-
-    &::before {
-      display: block;
-    }
-  }
-
-  @include m(dark) {
-
-    @include genTheme(100%, 100%, 0, 80%);
-
-  }
-
-
-  @include m(plain) {
-    @include genTheme(0, 40%, 100%, 100%);
-    background-color: mix($--tag-primary-color, $--color-white, 0)!important;
-    border-color: mix($--tag-primary-color, $--color-white, 40%)!important;
-    color: mix($--tag-primary-color, $--color-white, 100%)!important;
-  }
-
-  @include m(medium) {
-    height: 28px;
-    line-height: 26px;
-
-    .base-icon-close {
-      transform: scale(.8);
-    }
-  }
-
-  @include m(small) {
-    height: 24px;
-    padding: 0 8px;
-    line-height: 22px;
-
-    .base-icon-close {
-      transform: scale(.8);
-    }
-  }
-
-  @include m(mini) {
-    height: 20px;
-    padding: 0 5px;
-    line-height: 19px;
-
-    .base-icon-close {
-      margin-left: -3px;
-      transform: scale(.7);
-    }
-  }
-}

package/src/components/base/ui/style/tooltip.scss

@@ -1,146 +0,0 @@
-@import "mixins";
-@import "var";
-
-@include b(tooltip) {
-  &:focus:not(.focusing), &:focus:hover {
-    outline-width: 0;
-  }
-  @include e(popper) {
-    position: absolute;
-    border-radius: 4px;
-    z-index: $--index-popper;
-    min-width: 10px;
-    word-wrap: break-word;
-    font-size: 12px;
-    line-height: 1.2;
-    display: inline-block;
-    padding: 8px 10px;
-    text-transform: none;
-    width: auto;
-    pointer-events: none;
-    opacity: .9;
-    .popper__arrow,
-    .popper__arrow::after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-
-    .popper__arrow {
-      border-width: $--tooltip-arrow-size;
-    }
-
-    .popper__arrow::after {
-      content: " ";
-      border-width: 5px;
-    }
-
-    &[x-placement^="top"] {
-      margin-bottom: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="top"] .popper__arrow {
-      bottom: -$--tooltip-arrow-size;
-      border-top-color: $--tooltip-border-color;
-      border-bottom-width: 0;
-
-      &::after {
-        bottom: 1px;
-        margin-left: -5px;
-        border-top-color: $--tooltip-fill;
-        border-bottom-width: 0;
-      }
-    }
-
-    &[x-placement^="bottom"] {
-      margin-top: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="bottom"] .popper__arrow {
-      top: -$--tooltip-arrow-size;
-      border-top-width: 0;
-      border-bottom-color: $--tooltip-border-color;
-
-      &::after {
-        top: 1px;
-        margin-left: -5px;
-        border-top-width: 0;
-        border-bottom-color: $--tooltip-fill;
-      }
-    }
-
-    &[x-placement^="right"] {
-      margin-left: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="right"] .popper__arrow {
-      left: -$--tooltip-arrow-size;
-      border-right-color: $--tooltip-border-color;
-      border-left-width: 0;
-
-      &::after {
-        bottom: -5px;
-        left: 1px;
-        border-right-color: $--tooltip-fill;
-        border-left-width: 0;
-      }
-    }
-
-    &[x-placement^="left"] {
-      margin-right: #{$--tooltip-arrow-size + 6px};
-    }
-
-    &[x-placement^="left"] .popper__arrow {
-      right: -$--tooltip-arrow-size;
-      border-right-width: 0;
-      border-left-color: $--tooltip-border-color;
-
-      &::after {
-        right: 1px;
-        bottom: -5px;
-        margin-left: -5px;
-        border-right-width: 0;
-        border-left-color: $--tooltip-fill;
-      }
-    }
-
-    @include when(dark) {
-      // background: $--tooltip-fill;
-      background: rgba(97,97,97,.9);
-      color: $--tooltip-color;
-    }
-
-    @include when(light) {
-      background: $--tooltip-color;
-      border: 1px solid $--tooltip-fill;
-
-      &[x-placement^="top"] .popper__arrow {
-        border-top-color: $--tooltip-fill;
-        &::after {
-          border-top-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="bottom"] .popper__arrow {
-        border-bottom-color: $--tooltip-fill;
-        &::after {
-          border-bottom-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="left"] .popper__arrow {
-        border-left-color: $--tooltip-fill;
-        &::after {
-          border-left-color: $--tooltip-color;
-        }
-      }
-      &[x-placement^="right"] .popper__arrow {
-        border-right-color: $--tooltip-fill;
-        &::after {
-          border-right-color: $--tooltip-color;
-        }
-      }
-    }
-  }
-}

package/src/components/base/ui/style/transition.scss

@@ -1,138 +0,0 @@
-@import "var";
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.fade-in-linear-enter,
-.fade-in-linear-leave,
-.fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.base-fade-in-linear-enter-active,
-.base-fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
-}
-.base-fade-in-linear-enter,
-.base-fade-in-linear-leave,
-.base-fade-in-linear-leave-active {
-  opacity: 0;
-}
-
-.base-fade-in-enter-active,
-.base-fade-in-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.base-fade-in-enter,
-.base-fade-in-leave-active {
-  opacity: 0;
-}
-
-.base-zoom-in-center-enter-active,
-.base-zoom-in-center-leave-active {
-  transition: all .3s cubic-bezier(.55,0,.1,1);
-}
-.base-zoom-in-center-enter,
-.base-zoom-in-center-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.base-zoom-in-top-enter-active,
-.base-zoom-in-top-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center top;
-}
-.base-zoom-in-top-enter,
-.base-zoom-in-top-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.base-zoom-in-bottom-enter-active,
-.base-zoom-in-bottom-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transition: $--md-fade-transition;
-  transform-origin: center bottom;
-}
-.base-zoom-in-bottom-enter,
-.base-zoom-in-bottom-leave-active {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-.base-zoom-in-left-enter-active,
-.base-zoom-in-left-leave-active {
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: $--md-fade-transition;
-  transform-origin: top left;
-}
-.base-zoom-in-left-enter,
-.base-zoom-in-left-leave-active {
-  opacity: 0;
-  transform: scale(.45, .45);
-}
-
-.base-tooltip-enter-active,
-.base-tooltip-leave-active {
-  opacity: .9;
-  transform: scale(1, 1);
-  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-.base-tooltip-enter,
-.base-tooltip-leave-active {
-  opacity: 0;
-  transform: scale(0);
-}
-.base-tooltip-move {
-  transition: transform .6s
-}
-
-.collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
-}
-.horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
-}
-
-.base-list-enter-active,
-.base-list-leave-active {
-  transition: all 1s;
-}
-.base-list-enter, .base-list-leave-active {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.base-opacity-transition {
-  transition: opacity .3s cubic-bezier(.55,0,.1,1);
-}
-
-.base-slide-y-enter-active,
-.base-slide-y-leave-active {
-  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
-}
-.base-slide-y-move {
-  transition: transform .6s;
-}
-.base-slide-y-enter, .base-slide-y-leave-to {
-  opacity: 0;
-  transform: translateY(-15px);
-}
-
-
-.base-flip-list-enter, .base-flip-list-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-.base-flip-list-leave-active {
-  position: absolute;
-}
-.base-flip-list-move {
-  transition: transform .6s;
-}