rw-admin-ui 1.0.0

package/packages/theme-chalk/src/drawer.scss

@@ -0,0 +1,229 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@keyframes el-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) {
+  .el-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;
+  outline: 0;
+
+  @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: rgb(114, 118, 123);
+    display: flex;
+    // margin-bottom: 32px;
+    // padding: $--dialog-padding-primary;
+    // padding-bottom: 0;
+    padding: 17px $--dialog-padding-primary;
+
+    font-size: $--font-size-base;
+    background-color: $--dialog-header-background-color;
+
+    &> :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: inherit;
+    background-color: transparent;
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+
+    &>* {
+      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;
+  }
+}
+
+.el-drawer__container {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.el-drawer-fade-enter-active {
+  animation: el-drawer-fade-in .3s;
+}
+
+.el-drawer-fade-leave-active {
+  animation: el-drawer-fade-in .3s reverse;
+}

package/packages/theme-chalk/src/dropdown.scss

@@ -0,0 +1,209 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "./popper";
+
+@include b(dropdown) {
+  display: inline-block;
+  position: relative;
+  color: $--color-text-regular;
+  font-size: $--font-size-base;
+
+  .el-button-group {
+    display: block;
+
+    .el-button {
+      float: none;
+    }
+  }
+
+  & .el-dropdown__caret-button {
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    border-left: none;
+
+    &::before {
+      $gap: 5px;
+
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      top: $gap;
+      bottom: $gap;
+      left: 0;
+      background: mix(white, transparent, 50%);
+    }
+
+    &.el-button--default::before {
+      background: mix($--button-default-border-color, transparent, 50%);
+    }
+
+    &:hover {
+      &:not(.is-disabled)::before {
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    & .el-dropdown__icon {
+      padding-left: 0;
+    }
+  }
+
+  @include e(icon) {
+    font-size: $--font-size-base;
+    margin: 0 3px;
+  }
+
+  .el-dropdown-selfdefine {
+
+    // 自定义
+    &:focus:active,
+    &:focus:not(.focusing) {
+      outline-width: 0;
+    }
+  }
+
+  [disabled] {
+    cursor: not-allowed;
+    color: $--font-color-disabled-base;
+  }
+}
+
+@include b(dropdown-menu) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  padding: 6px 0;
+  margin: 5px 0;
+  background-color: $--color-white;
+  border: 1px solid $--border-color-lighter;
+  border-radius: $--border-radius-base;
+  box-shadow: $--dropdown-menu-box-shadow;
+
+  @include e(item) {
+    list-style: none;
+    line-height: 40px;
+    padding: 0 20px;
+    margin: 0;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    outline: none;
+
+    &:not(.is-disabled):hover,
+    &:focus {
+      background-color: $--dropdown-menuItem-hover-fill;
+      color: $--dropdown-menuItem-hover-color;
+    }
+
+    i {
+      margin-right: 5px;
+    }
+
+    @include m(divided) {
+      $divided-offset: 6px;
+
+      position: relative;
+      margin-top: $divided-offset;
+      border-top: 1px solid $--border-color-lighter;
+
+      &:before {
+        content: '';
+        height: $divided-offset;
+        display: block;
+        margin: 0 -20px;
+        background-color: $--color-white;
+      }
+    }
+
+    @include when(disabled) {
+      cursor: default;
+      color: $--font-color-disabled-base;
+      pointer-events: none;
+    }
+  }
+
+  @include m(large) {
+    padding: 10px 0;
+
+    // @include e(item) {
+    //   line-height: 30px;
+    //   padding: 0 17px;
+    //   font-size: 14px;
+
+    //   &.el-dropdown-menu__item--divided {
+    //     $divided-offset: 6px;
+    //     margin-top: $divided-offset;
+
+    //     &:before {
+    //       height: $divided-offset;
+    //       margin: 0 -17px;
+    //     }
+    //   }
+    // }
+  }
+
+  @include m(medium) {
+    padding: 8px 0;
+
+    // @include e(item) {
+    //   line-height: 30px;
+    //   padding: 0 17px;
+    //   font-size: 14px;
+
+    //   &.el-dropdown-menu__item--divided {
+    //     $divided-offset: 6px;
+    //     margin-top: $divided-offset;
+
+    //     &:before {
+    //       height: $divided-offset;
+    //       margin: 0 -17px;
+    //     }
+    //   }
+    // }
+  }
+
+  @include m(small) {
+    padding: 6px 0;
+
+    // @include e(item) {
+    //   line-height: 27px;
+    //   padding: 0 15px;
+    //   font-size: 13px;
+
+    //   &.el-dropdown-menu__item--divided {
+    //     $divided-offset: 4px;
+    //     margin-top: $divided-offset;
+
+    //     &:before {
+    //       height: $divided-offset;
+    //       margin: 0 -15px;
+    //     }
+    //   }
+    // }
+  }
+
+  @include m(mini) {
+    padding: 3px 0;
+
+    // @include e(item) {
+    //   line-height: 24px;
+    //   padding: 0 10px;
+    //   font-size: 12px;
+
+    //   &.el-dropdown-menu__item--divided {
+    //     $divided-offset: 3px;
+    //     margin-top: $divided-offset;
+
+    //     &:before {
+    //       height: $divided-offset;
+    //       margin: 0 -10px;
+    //     }
+    //   }
+    // }
+  }
+}

package/packages/theme-chalk/src/empty.scss

@@ -0,0 +1,45 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(empty) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+  padding: $--empty-padding;
+
+  @include e(image) {
+    width: $--empty-image-width;
+
+    img {
+      user-select: none;
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+      object-fit: contain;
+    }
+
+    svg {
+      fill: $--svg-monochrome-grey;
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+    }
+  }
+
+  @include e(description) {
+    margin-top: $--empty-description-margin-top;
+
+    p {
+      margin: 0;
+      font-size: $--font-size-base;
+      color: $--color-text-secondary;
+    }
+  }
+
+  @include e(bottom) {
+    margin-top: $--empty-bottom-margin-top;
+  }
+}

package/packages/theme-chalk/src/footer.scss

@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(footer) {
+  padding: $--footer-padding;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}

package/packages/theme-chalk/src/form.scss

@@ -0,0 +1,192 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(form) {
+  @include m(label-left) {
+    & .el-form-item__label {
+      text-align: left;
+    }
+  }
+
+  @include m(label-top) {
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+      text-align: left;
+      padding: 0 0 10px 0;
+    }
+  }
+
+  @include m(inline) {
+    & .el-form-item {
+      display: inline-block;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    & .el-form-item__label {
+      float: none;
+      display: inline-block;
+    }
+
+    & .el-form-item__content {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    &.el-form--label-top .el-form-item__content {
+      display: block;
+    }
+  }
+}
+
+@include b(form-item) {
+  margin-bottom: 14px;
+  @include utils-clearfix;
+
+  & .el-form-item {
+    margin-bottom: 0;
+  }
+
+  & .el-input__validateIcon {
+    display: none;
+  }
+
+  @include m(medium) {
+    .el-form-item__label {
+      line-height: $--input-medium-height;
+
+    }
+
+    .el-form-item__content {
+      line-height: $--input-medium-height;
+    }
+  }
+
+  @include m(small) {
+    .el-form-item__label {
+      line-height: $--input-small-height;
+    }
+
+    .el-form-item__content {
+      line-height: $--input-small-height;
+    }
+
+    &.el-form-item {
+      margin-bottom: 14px;
+    }
+
+    .el-form-item__error {
+      padding-top: 1px;
+    }
+  }
+
+  @include m(mini) {
+    .el-form-item__label {
+      line-height: $--input-mini-height;
+    }
+
+    .el-form-item__content {
+      line-height: $--input-mini-height;
+    }
+
+    &.el-form-item {
+      margin-bottom: 14px;
+    }
+
+    .el-form-item__error {
+      padding-top: 1px;
+    }
+  }
+
+  @include e(label-wrap) {
+    float: left;
+
+    .el-form-item__label {
+      display: inline-block;
+      float: none;
+    }
+  }
+
+  @include e(label) {
+    text-align: right;
+    vertical-align: middle;
+    float: left;
+    font-size: $--form-label-font-size;
+    color: $--color-text-regular;
+    line-height: $--input-height;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+
+  @include e(content) {
+    line-height: $--input-height;
+    position: relative;
+    // font-size: $--form-label-font-size;
+    @include utils-clearfix;
+
+    .el-input-group {
+      vertical-align: top;
+    }
+  }
+
+  @include e(error) {
+    color: $--color-danger;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 1px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  @include when(required) {
+    @include pseudo('not(.is-no-asterisk)') {
+
+      &>.el-form-item__label:before,
+      & .el-form-item__label-wrap>.el-form-item__label:before {
+        content: '*';
+        color: $--color-danger;
+        margin-right: 4px;
+      }
+    }
+  }
+
+  @include when(error) {
+
+    & .el-input__inner,
+    & .el-textarea__inner {
+
+      &,
+      &:focus {
+        border-color: $--color-danger;
+      }
+    }
+
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+
+    .el-input__validateIcon {
+      color: $--color-danger;
+    }
+  }
+
+  @include m(feedback) {
+    .el-input__validateIcon {
+      display: inline-block;
+    }
+  }
+}

package/packages/theme-chalk/src/header.scss

@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(header) {
+  padding: $--header-padding;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}