@zkwq/business 0.0.1

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

@@ -0,0 +1,294 @@
+@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

@@ -0,0 +1,231 @@
+@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

@@ -0,0 +1,120 @@
+@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%);
+}