ep-craft 0.1.2 → 0.1.3

package/theme-chalk/src/dialog.scss

@@ -0,0 +1,207 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
+
+@include b(dialog) {
+  @include set-component-css-var('dialog', $dialog);
+
+  position: relative;
+  margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
+  box-sizing: border-box;
+  padding: getCssVar('dialog', 'padding-primary');
+  width: var(#{getCssVarName('dialog-width')}, 50%);
+  overflow-wrap: break-word;
+
+  &:focus {
+    outline: none !important;
+  }
+
+  @include when(align-center) {
+    margin: auto;
+  }
+
+  @include when(fullscreen) {
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
+
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto;
+    border-radius: 0px;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  @include e(header) {
+    padding-bottom: getCssVar('dialog', 'padding-primary');
+
+    &.show-close {
+      padding-right: calc(
+        getCssVar('dialog', 'padding-primary') +
+          var(
+            #{getCssVarName('message-close-size')},
+            map.get($message, 'close-size')
+          )
+      );
+    }
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0;
+    width: 48px;
+    height: 48px;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: var(
+      #{getCssVarName('message-close-size')},
+      map.get($message, 'close-size')
+    );
+
+    .#{$namespace}-dialog__close {
+      color: getCssVar('color', 'info');
+      font-size: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      .#{$namespace}-dialog__close {
+        color: getCssVar('color', 'primary');
+      }
+    }
+  }
+
+  @include e(title) {
+    line-height: getCssVar('dialog-font-line-height');
+    font-size: getCssVar('dialog-title-font-size');
+    color: getCssVar('text-color', 'primary');
+  }
+
+  @include e(body) {
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('dialog-content-font-size');
+  }
+
+  @include e(footer) {
+    padding-top: getCssVar('dialog', 'padding-primary');
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+}
+
+.#{$namespace}-modal-dialog {
+  &.is-penetrable {
+    pointer-events: none;
+
+    .#{$namespace}-dialog {
+      pointer-events: auto;
+    }
+  }
+}
+
+.#{$namespace}-overlay-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+
+  @include when(closing) {
+    @include b(dialog) {
+      pointer-events: none;
+    }
+  }
+}
+
+.dialog-fade-enter-active {
+  animation: modal-fade-in getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-in getCssVar('transition-duration');
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-out getCssVar('transition-duration');
+  }
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/theme-chalk/src/display.scss

@@ -0,0 +1,12 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+.hidden {
+  @each $break-point-name, $value in $breakpoints-spec {
+    &-#{$break-point-name} {
+      @include res($break-point-name, $breakpoints-spec) {
+        display: none !important;
+      }
+    }
+  }
+}

package/theme-chalk/src/divider.scss

@@ -0,0 +1,48 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@include b(divider) {
+  position: relative;
+
+  @include m(horizontal) {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 24px 0;
+    border-top: 1px getCssVar('border-color') getCssVar('border-style');
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+    position: relative;
+    border-left: 1px getCssVar('border-color') getCssVar('border-style');
+  }
+
+  @include e(text) {
+    position: absolute;
+    background-color: getCssVar('bg-color');
+    padding: 0 20px;
+    font-weight: 500;
+    color: getCssVar('text-color', 'primary');
+    font-size: 14px;
+
+    @include when(left) {
+      left: 20px;
+      transform: translateY(-50%);
+    }
+
+    @include when(center) {
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    @include when(right) {
+      right: 20px;
+      transform: translateY(-50%);
+    }
+  }
+}

package/theme-chalk/src/drawer.scss

@@ -0,0 +1,251 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$directions: rtl, ltr, ttb, btt;
+
+.#{$namespace}-overlay.is-drawer {
+  overflow: hidden;
+}
+
+@include b(drawer) {
+  @include set-component-css-var('drawer', $drawer);
+}
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: getCssVar('drawer', 'bg-color');
+  display: flex;
+  flex-direction: column;
+  box-shadow: getCssVar('box-shadow', 'dark');
+  transition: all getCssVar('transition-duration');
+
+  @each $direction in $directions {
+    .#{$direction} {
+      transform: translate(0, 0);
+    }
+  }
+
+  &__sr-focus:focus {
+    outline: none !important;
+  }
+
+  &__header {
+    align-items: center;
+    color: getCssVar('text-color', 'primary');
+    display: flex;
+    margin-bottom: 32px;
+    padding: getCssVar('drawer-padding-primary');
+    padding-bottom: 0;
+    overflow: hidden;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 16px;
+  }
+
+  @include e(footer) {
+    padding: getCssVar('drawer-padding-primary');
+    padding-top: 10px;
+    text-align: right;
+    overflow: hidden;
+  }
+
+  &__close-btn {
+    display: inline-flex;
+    border: none;
+    cursor: pointer;
+    font-size: getCssVar('font-size-extra-large');
+    color: inherit;
+    background-color: transparent;
+    outline: none;
+    &:focus,
+    &:hover {
+      i {
+        color: getCssVar('color-primary');
+      }
+    }
+  }
+
+  &__body {
+    flex: 1;
+    padding: getCssVar('drawer-padding-primary');
+    overflow: auto;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  @include when(dragging) {
+    transition: none;
+  }
+
+  @include e(dragger) {
+    position: absolute;
+    background-color: transparent;
+    user-select: none;
+    transition: all 0.2s;
+
+    &::before {
+      content: '';
+      position: absolute;
+      background-color: transparent;
+      transition: all 0.2s;
+    }
+
+    &:hover::before {
+      background-color: getCssVar('color-primary');
+    }
+  }
+
+  &.ltr,
+  &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      height: 100%;
+      width: getCssVar('drawer-dragger-size');
+      top: 0;
+      bottom: 0;
+      cursor: ew-resize;
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        width: 3px;
+      }
+    }
+  }
+
+  &.ttb,
+  &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      width: 100%;
+      height: getCssVar('drawer-dragger-size');
+      left: 0;
+      right: 0;
+      cursor: ns-resize;
+
+      &::before {
+        left: 0;
+        right: 0;
+        height: 3px;
+      }
+    }
+  }
+
+  &.ltr {
+    left: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      right: 0;
+
+      &::before {
+        right: -2px;
+      }
+    }
+  }
+
+  &.rtl {
+    right: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      left: 0;
+
+      &::before {
+        left: -2px;
+      }
+    }
+  }
+
+  &.ttb {
+    top: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      bottom: 0;
+
+      &::before {
+        bottom: -2px;
+      }
+    }
+  }
+
+  &.btt {
+    bottom: 0;
+
+    > .#{$namespace}-drawer__dragger {
+      top: 0;
+
+      &::before {
+        top: -2px;
+      }
+    }
+  }
+}
+
+.#{$namespace}-modal-drawer {
+  &.is-penetrable {
+    pointer-events: none;
+
+    .#{$namespace}-drawer {
+      pointer-events: auto;
+    }
+  }
+}
+
+.#{$namespace}-drawer-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: all getCssVar('transition-duration');
+  }
+
+  &-enter-from,
+  &-enter-active,
+  &-enter-to,
+  &-leave-from,
+  &-leave-active,
+  &-leave-to {
+    overflow: hidden !important;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    background-color: transparent !important;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    @each $direction in $directions {
+      .#{$direction} {
+        @if $direction == ltr {
+          transform: translateX(-100%);
+        }
+
+        @if $direction == rtl {
+          transform: translateX(100%);
+        }
+
+        @if $direction == ttb {
+          transform: translateY(-100%);
+        }
+
+        @if $direction == btt {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/dropdown.scss

@@ -0,0 +1,208 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$dropdown-item-line-height: () !default;
+$dropdown-item-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px,
+  ),
+  $dropdown-item-line-height
+);
+
+$dropdown-item-padding: () !default;
+$dropdown-item-padding: map.merge(
+  (
+    'large': 7px 20px,
+    'default': 5px 16px,
+    'small': 2px 12px,
+  ),
+  $dropdown-item-padding
+);
+
+$dropdown-item-divided-margin: () !default;
+$dropdown-item-divided-margin: map.merge(
+  (
+    'large': 8px 0,
+    'default': 6px 0,
+    'small': 4px 0,
+  ),
+  $dropdown-item-divided-margin
+);
+
+$dropdown-caret-width: () !default;
+$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
+
+$dropdown-divider-width: 1px !default;
+
+@include b(dropdown) {
+  @include set-component-css-var('dropdown', $dropdown);
+
+  display: inline-flex;
+  position: relative;
+  color: getCssVar('text-color', 'regular');
+  font-size: getCssVar('font-size', 'base');
+  line-height: 1;
+  vertical-align: top;
+
+  &.is-disabled {
+    color: getCssVar('text-color', 'placeholder');
+    cursor: not-allowed;
+  }
+
+  @include e(popper) {
+    @include set-component-css-var('dropdown', $dropdown);
+
+    // using attributes selector to override
+
+    @include picker-popper(
+      getCssVar('bg-color', 'overlay'),
+      1px solid getCssVar('border-color-light'),
+      getCssVar('dropdown-menu-box-shadow')
+    );
+
+    .#{$namespace}-dropdown-menu {
+      border: none;
+    }
+
+    #{& + '-selfdefine'} {
+      outline: none;
+    }
+
+    @include b(scrollbar__bar) {
+      z-index: calc(#{getCssVar('dropdown', 'menu-index')} + 1);
+    }
+
+    @include b(dropdown__list) {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  & .#{$namespace}-dropdown__caret-button {
+    padding-left: 0;
+    padding-right: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: map.get($dropdown-caret-width, 'default');
+    border-left: none;
+
+    > span {
+      display: inline-flex;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      top: -1px;
+      bottom: -1px;
+      left: 0;
+      background: getCssVar('overlay-color', 'lighter');
+    }
+
+    &.#{$namespace}-button::before {
+      background: getCssVar('border-color');
+      opacity: 0.5;
+    }
+
+    & .#{$namespace}-dropdown__icon {
+      font-size: inherit;
+      padding-left: 0;
+    }
+  }
+
+  .#{$namespace}-dropdown-selfdefine {
+    // 自定义
+    outline: none;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      .#{$namespace}-dropdown__caret-button {
+        width: map.get($dropdown-caret-width, $size);
+      }
+    }
+  }
+}
+
+$dropdown-menu-padding-vertical: () !default;
+$dropdown-menu-padding-vertical: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $dropdown-menu-padding-vertical
+);
+
+@include b(dropdown-menu) {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: getCssVar('dropdown-menu-index');
+  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
+  margin: 0;
+  background-color: getCssVar('bg-color', 'overlay');
+  border: none;
+  border-radius: getCssVar('border-radius-base');
+  box-shadow: none;
+  list-style: none;
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: map.get($dropdown-item-line-height, 'default');
+    padding: map.get($dropdown-item-padding, 'default');
+    margin: 0;
+    font-size: getCssVar('font-size', 'base');
+    color: getCssVar('text-color', 'regular');
+    cursor: pointer;
+    outline: none;
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      background-color: getCssVar('dropdown-menuItem-hover-fill');
+      color: getCssVar('dropdown-menuItem-hover-color');
+    }
+
+    i {
+      margin-right: 5px;
+    }
+
+    @include m(divided) {
+      margin: map.get($dropdown-item-divided-margin, 'default');
+      border-top: 1px solid getCssVar('border-color-lighter');
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+      color: getCssVar('text-color-disabled');
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
+
+      @include e(item) {
+        padding: map.get($dropdown-item-padding, $size);
+        line-height: map.get($dropdown-item-line-height, $size);
+        font-size: map.get($input-font-size, $size);
+
+        @include m(divided) {
+          margin: map.get($dropdown-item-divided-margin, $size);
+        }
+      }
+    }
+  }
+}