@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,294 +0,0 @@
-@import "mixins";
-@import "utils";
-@import "var";
-@import "transition";
-
-@mixin menu-item {
-  height: 56px;
-  line-height: 56px;
-  font-size: $--menu-item-font-size;
-  color: $--menu-item-font-color;
-  font-weight: 600;
-  padding: 0 20px;
-  list-style: none;
-  cursor: pointer;
-  position: relative;
-  transition: border-color .3s, background-color .3s, color .3s;
-  box-sizing: border-box;
-  white-space: nowrap;
-
-  * {
-    vertical-align: baseline;
-  }
-
-  i {
-    color: $--color-text-primary;
-  }
-
-  &:hover,
-  &:focus {
-    outline: none;
-    background-color: $--background-color-base;
-  }
-
-  @include when(disabled) {
-    opacity: 0.25;
-    cursor: not-allowed;
-    background: none !important;
-  }
-}
-
-@include b(menu) {
-  border-right: solid 1px #e6e6e6;
-  list-style: none;
-  position: relative;
-  margin: 0;
-  padding-left: 0;
-  background-color: $--menu-background-color;
-  @include utils-clearfix;
-  &.base-menu--horizontal {
-    border-bottom: solid 1px #e6e6e6;
-  }
-
-  @include m(horizontal) {
-    border-right: none;
-    & > .base-menu-item {
-      float: left;
-      height: 60px;
-      line-height: 60px;
-      margin: 0;
-      border-bottom: 2px solid transparent;
-      color: $--color-text-secondary;
-
-      a,
-      a:hover {
-        color: inherit;
-      }
-
-      &:not(.is-disabled):hover,
-      &:not(.is-disabled):focus{
-        background-color: #fff;
-      }
-    }
-    & > .base-submenu {
-      float: left;
-
-      &:focus,
-      &:hover {
-        outline: none;
-        .base-submenu__title {
-          color: $--color-text-primary;
-        }
-      }
-
-      &.is-active {
-        .base-submenu__title {
-          border-bottom: 2px solid $--color-primary;
-          color: $--color-text-primary;
-        }
-      }
-
-      & .base-submenu__title {
-        height: 60px;
-        line-height: 60px;
-        border-bottom: 2px solid transparent;
-        color: $--color-text-secondary;
-
-        &:hover {
-          background-color: #fff;
-        }
-      }
-      & .base-submenu__icon-arrow {
-        position: static;
-        vertical-align: middle;
-        margin-left: 8px;
-        margin-top: -3px;
-      }
-    }
-    & .base-menu {
-      & .base-menu-item,
-      & .base-submenu__title {
-        background-color: $--color-white;
-        float: none;
-        height: 36px;
-        line-height: 36px;
-        padding: 0 10px;
-        color: $--color-text-secondary;
-      }
-      & .base-menu-item.is-active,
-      & .base-submenu.is-active > .base-submenu__title {
-        color: $--color-text-primary;
-      }
-    }
-    & .base-menu-item:not(.is-disabled):hover,
-    & .base-menu-item:not(.is-disabled):focus {
-      outline: none;
-      color: $--color-text-primary;
-    }
-    & > .base-menu-item.is-active {
-      border-bottom: 2px solid $--color-primary;
-      color: $--color-text-primary;
-    }
-  }
-  @include m(collapse) {
-    width: 64px;
-
-    > .base-menu-item,
-    > .base-submenu > .base-submenu__title {
-      [class^="base-icon-"] {
-        margin: 0;
-        vertical-align: middle;
-        width: 24px;
-        text-align: center;
-      }
-      .base-submenu__icon-arrow {
-        display: none;
-      }
-      span {
-        height: 0;
-        width: 0;
-        overflow: hidden;
-        visibility: hidden;
-        display: inline-block;
-      }
-    }
-
-    > .base-menu-item.is-active {
-      background-color: $--color-primary-light-9;
-      i {
-        color: inherit;
-      }
-    }
-
-    .base-menu .base-submenu {
-      min-width: 200px;
-    }
-
-    .base-submenu {
-      position: relative;
-      & .base-menu {
-        position: absolute;
-        margin-left: 5px;
-        top: 0;
-        left: 100%;
-        z-index: 10;
-        border: 1px solid $--border-color-light;
-        border-radius: $--border-radius-small;
-        box-shadow: $--box-shadow-light;
-      }
-
-      &.is-opened {
-        > .base-submenu__title .base-submenu__icon-arrow {
-          transform: none;
-        }
-      }
-    }
-  }
-  @include m(popup) {
-    z-index: 100;
-    min-width: 200px;
-    border: none;
-    padding: 5px 0;
-    border-radius: $--border-radius-small;
-    box-shadow: $--box-shadow-light;
-
-    &-bottom-start {
-      margin-top: 5px;
-    }
-    &-right-start {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-  }
-}
-@include b(menu-item) {
-  @include menu-item;
-
-  & [class^="base-icon-"] {
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-  @include when(active) {
-    color: $--color-primary;
-    background-color: rgba(0, 102, 255, 0.08);
-    i {
-      color: inherit;
-    }
-  }
-}
-
-@include b(submenu) {
-  list-style: none;
-  margin: 0;
-  padding-left: 0;
-
-  @include e(title) {
-    @include menu-item;
-
-    &:hover {
-      background-color: $--menu-item-hover-fill;
-    }
-  }
-  & .base-menu {
-    border: none;
-  }
-  & .base-menu-item {
-    height: 50px;
-    line-height: 50px;
-    padding: 0 45px;
-    min-width: 200px;
-  }
-  @include e(icon-arrow) {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    margin-top: -7px;
-    transition: transform .3s;
-    font-size: 12px;
-  }
-  @include when(active) {
-    .base-submenu__title {
-      border-bottom-color: $--color-primary;
-    }
-  }
-  @include when(opened) {
-    > .base-submenu__title .base-submenu__icon-arrow {
-      transform: rotateZ(180deg);
-    }
-  }
-  @include when(disabled) {
-    .base-submenu__title,
-    .base-menu-item {
-      opacity: 0.25;
-      cursor: not-allowed;
-      background: none !important;
-    }
-  }
-  [class^="base-icon-"] {
-    vertical-align: middle;
-    margin-right: 5px;
-    width: 24px;
-    text-align: center;
-    font-size: 18px;
-  }
-}
-
-@include b(menu-item-group) {
-  > ul {
-    padding: 0;
-  }
-  @include e(title) {
-    padding: 7px 0 7px 20px;
-    line-height: normal;
-    font-size: 12px;
-    color: $--color-text-secondary;
-  }
-}
-
-.horizontal-collapse-transition .base-submenu__title .base-submenu__icon-arrow {
-  transition: .2s;
-  opacity: 0;
-}

package/src/components/base/ui/style/message-box.scss

@@ -1,231 +0,0 @@
-@import "mixins";
-@import "var";
-@import "popup";
-@import "button";
-@import "input";
-
-@include b(message-box) {
-  display: inline-block;
-  width: $--msgbox-width;
-  padding-bottom: 10px;
-  vertical-align: middle;
-  background-color: $--color-white;
-  border-radius: $--msgbox-border-radius;
-  border: 1px solid $--border-color-lighter;
-  font-size: $--messagebox-font-size;
-  box-shadow: $--box-shadow-light;
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
-    }
-  }
-
-  @include e(header) {
-    position: relative;
-    padding: $--msgbox-padding-primary;
-    padding-bottom: 10px;
-  }
-
-  @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: $--messagebox-font-size;
-    line-height: 1;
-    color: $--messagebox-title-color;
-    font-weight: 600;
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: $--msgbox-padding-primary;
-    right: $--msgbox-padding-primary;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: $--message-close-size;
-    cursor: pointer;
-
-    .base-message-box__close {
-      color: $--color-info;
-    }
-
-    &:focus, &:hover {
-      .base-message-box__close {
-        color: $--color-primary;
-      }
-    }
-
-  }
-
-  @include e(content) {
-    padding: 10px $--msgbox-padding-primary;
-    color: $--messagebox-content-color;
-    font-size: $--messagebox-content-font-size;
-  }
-
-  @include e(container) {
-    position: relative;
-  }
-
-  @include e(input) {
-    padding-top: 15px;
-
-    & input.invalid {
-      border-color: $--color-danger;
-      &:focus {
-        border-color: $--color-danger;
-      }
-    }
-  }
-
-  @include e(status) {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 24px !important;
-
-    &::before {
-      // 防止图标切割
-      padding-left: 1px;
-    }
-
-    + .base-message-box__message {
-      padding-left: 36px;
-      padding-right: 12px;
-    }
-
-    &.base-icon-success {
-      color: $--messagebox-success-color;
-    }
-
-    &.base-icon-info {
-      color: $--messagebox-info-color;
-    }
-
-    &.base-icon-warning {
-      color: $--messagebox-warning-color;
-    }
-
-    &.base-icon-error {
-      color: $--messagebox-danger-color;
-    }
-  }
-
-  @include e(message) {
-    margin: 0;
-
-    & p {
-      margin: 0;
-      line-height: 24px;
-    }
-  }
-
-  @include e(errormsg) {
-    color: $--color-danger;
-    font-size: $--messagebox-error-font-size;
-    min-height: 18px;
-    margin-top: 2px;
-  }
-
-  @include e(btns) {
-    padding: 5px 15px 0;
-    text-align: right;
-
-    & button:nth-child(2) {
-      margin-left: 10px;
-    }
-    .base-button {
-      width: 120px;
-    }
-  }
-
-  @include e(btns-reverse) {
-    flex-direction: row-reverse;
-  }
-
-  // centerAlign 布局
-  @include m(center) {
-    padding-bottom: 30px;
-
-    @include e(header) {
-      padding-top: 30px;
-    }
-
-    @include e(title) {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    @include e(status) {
-      position: relative;
-      top: auto;
-      padding-right: 5px;
-      text-align: center;
-      transform: translateY(-1px);
-    }
-
-    @include e(message) {
-      margin-left: 0;
-    }
-
-    @include e((btns, content)) {
-      text-align: center;
-      padding-top: 10px;
-    }
-
-    @include e(content) {
-      $padding-horizontal: $--msgbox-padding-primary + 12px;
-
-      padding-left: $padding-horizontal;
-      padding-right: $padding-horizontal;
-    }
-  }
-}
-
-.msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
-}
-
-.msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}

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

@@ -1,120 +0,0 @@
-@import "mixins";
-@import "var";
-
-@include b(message) {
-  min-width: $--message-min-width;
-  box-sizing: border-box;
-  border-radius: $--border-radius-base;
-  border-width: $--border-width-base;
-  border-style: $--border-style-base;
-  border-color: $--border-color-lighter;
-  position: fixed;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  background-color: $--message-background-color;
-  transition: opacity 0.3s, transform .4s, top 0.4s;
-  overflow: hidden;
-  padding: $--message-padding;
-  display: flex;
-  align-items: center;
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @include when(closable) {
-    .base-message__content {
-      padding-right: 16px;
-    }
-  }
-
-  p {
-    margin: 0;
-  }
-
-  @include m(info) {
-    .base-message__content {
-      color: $--message-info-font-color;
-    }
-  }
-
-  @include m(success) {
-    background-color: $--color-success-lighter;
-    border-color: $--color-success-light;
-
-    .base-message__content {
-      color: $--message-success-font-color;
-    }
-  }
-
-  @include m(warning) {
-    background-color: $--color-warning-lighter;
-    border-color: $--color-warning-light;
-
-    .base-message__content {
-      color: $--message-warning-font-color;
-    }
-  }
-
-  @include m(error) {
-    background-color: $--color-danger-lighter;
-    border-color: $--color-danger-light;
-
-    .base-message__content {
-      color: $--message-danger-font-color;
-    }
-  }
-
-  @include e(icon) {
-    margin-right: 10px;
-  }
-
-  @include e(content) {
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    &:focus {
-      outline-width: 0;
-    }
-  }
-
-  @include e(closeBtn) {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: $--message-close-icon-color;
-    font-size: $--message-close-size;
-
-    &:focus {
-      outline-width: 0;
-    }
-    &:hover {
-      color: $--message-close-hover-color;
-    }
-  }
-
-  & .base-icon-success {
-    color: $--message-success-font-color;
-  }
-
-  & .base-icon-error {
-    color: $--message-danger-font-color;
-  }
-
-  & .base-icon-info {
-    color: $--message-info-font-color;
-  }
-
-  & .base-icon-warning {
-    color: $--message-warning-font-color;
-  }
-}
-
-.base-message-fade-enter,
-.base-message-fade-leave-active {
-  opacity: 0;
-  transform: translate(-50%, -100%);
-}