@zkwq/business 0.0.46 → 0.0.48

package/dist/scss/animations.scss

@@ -0,0 +1,65 @@
+@keyframes linear-double {
+  0% {
+    -webkit-transform: translateX(-56%);
+    transform: translateX(-56%)
+  }
+
+  to {
+    -webkit-transform: translateX(56%);
+    transform: translateX(56%)
+  }
+}
+@keyframes Bounce {
+  0%,to {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%)
+  }
+  50% {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%)
+  }
+}
+@keyframes BounceUp {
+  25% {
+    transform: translateY(-3px)
+  }
+  50% {
+    transform: translateY(0)
+  }
+  75% {
+    transform: translateY(3px)
+  }
+  100% {
+    transform: translateY(0)
+  }
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.fade-fast-enter-active, .fade-fast-leave-active {
+  transition: opacity .2s linear;
+}
+.fade-fast-enter, .fade-fast-leave-to {
+  opacity: 0;
+}
+
+@keyframes fadeInOut {
+  0%{opacity:0}
+  25%{opacity:.25}
+  to{opacity:1}
+}
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.fade-fast-enter-active, .fade-fast-leave-active {
+  transition: opacity .2s linear;
+}
+.fade-fast-enter, .fade-fast-leave-to {
+  opacity: 0;
+}

package/dist/scss/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'base';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/dist/scss/drawer.scss

@@ -0,0 +1,218 @@
+@import "mixins";
+@import "var";
+
+@keyframes base-drawer-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@mixin drawer-animation($direction) {
+
+  @keyframes #{$direction}-drawer-in {
+    0% {
+
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+
+  @keyframes #{$direction}-drawer-out {
+    0% {
+      @if $direction == ltr {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(0px, 0px);;
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, 0px);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 0);
+      }
+    }
+
+    100% {
+      @if $direction == ltr {
+        transform: translate(-100%, 0px);
+      }
+
+      @if $direction == rtl {
+        transform: translate(100%, 0px);
+      }
+
+      @if $direction == ttb {
+        transform: translate(0px, -100%);
+      }
+
+      @if $direction == btt {
+        transform: translate(0px, 100%);
+      }
+    }
+  }
+}
+
+@mixin animation-in($direction) {
+  .base-drawer__open &.#{$direction} {
+    animation: #{$direction}-drawer-in .3s 1ms;
+  }
+}
+
+@mixin animation-out($direction) {
+  &.#{$direction} {
+    animation: #{$direction}-drawer-out .3s;
+  }
+}
+
+@include drawer-animation(rtl);
+@include drawer-animation(ltr);
+@include drawer-animation(ttb);
+@include drawer-animation(btt);
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: $--dialog-background-color;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+  0 16px 24px 2px rgba(0, 0, 0, 0.14),
+  0 6px 30px 5px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+
+  @each $direction in $directions {
+    @include animation-out($direction);
+    @include animation-in($direction);
+  }
+
+  &__wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  &__header {
+    align-items: center;
+    color: $--color-text-primary;
+    display: flex;
+    margin-bottom: 28px;
+    padding: $--dialog-padding-primary;
+    padding-bottom: 0;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem;
+  }
+
+  &__close-btn {
+    border: none;
+    cursor: pointer;
+    font-size: $--font-size-extra-large;
+    color: $--color-text-secondary;
+    background-color: transparent;
+  }
+
+  &__body {
+    flex: 1;
+    padding-bottom: 60px;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  &.ltr, &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+  }
+
+  &.ttb, &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  &.ltr {
+    left: 0;
+  }
+
+  &.rtl {
+    right: 0;
+  }
+
+  &.ttb {
+    top: 0;
+  }
+
+  &.btt {
+    bottom: 0;
+  }
+}
+
+.base-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.base-drawer-fade-enter-active {
+  animation: base-drawer-fade-in .3s;
+}
+
+.base-drawer-fade-leave-active {
+  animation: base-drawer-fade-in .3s reverse;
+}

package/dist/scss/function.scss

@@ -0,0 +1,43 @@
+@import "config";
+
+
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true
+  } @else {
+    @return false
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}

package/dist/scss/mixins.scss

@@ -0,0 +1,196 @@
+@import "function";
+@import "var";
+
+/* Break-points
+ -------------------------- */
+@mixin res($key, $map: $--breakpoints) {
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+  $--scrollbar-thumb-background: #b4bccc;
+  $--scrollbar-track-background: #fff;
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+
+    &:horizontal {
+      height: 6px;
+    }
+
+    &-thumb {
+      border-radius: 5px;
+      width: 6px;
+      background: $--scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $--scrollbar-track-background;
+    }
+
+    &-track {
+      background: $--scrollbar-track-background;
+
+      &-piece {
+        background: $--scrollbar-track-background;
+        width: 6px;
+      }
+    }
+  }
+}
+
+/* Placeholder
+ -------------------------- */
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content
+  }
+
+  &::-moz-placeholder {
+    @content
+  }
+
+  &:-ms-input-placeholder {
+    @content
+  }
+}
+
+/* BEM
+ -------------------------- */
+@mixin b($block) {
+  $B: $namespace+'-'+$block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B+$interpolation+$modifier-separator+$modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
+      @content
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$block+$element-separator+$element+$modifierCombo} {
+        @content
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin must($state1, $state2) {
+  @at-root {
+    &.#{$state-prefix + $state1}.#{$state-prefix + $state2} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-'+$name};
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-'+$name;
+
+  @at-root #{$rule-name} {
+    @content
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content
+  }
+}

package/dist/scss/transition.scss

@@ -0,0 +1,138 @@
+@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;
+}