@ebscn/ui 1.0.3-beta.13 → 1.0.3-beta.15

package/cjs/components/alphabet-keyboard/alphabet-keyboard.css

@@ -1,20 +1,38 @@
 :root {
-  --ebscn-color-keyboard-bg: #d2d5d8;
+  --ebscn-color-keyboard-bg: #d3d5d8;
   --ebscn-color-keyboard-key-bg: #fff;
-  --ebscn-color-functionkey-background: #adb3bd;
-  --ebscn-color-keyboard-active-background: #E5E5E5;
+  --ebscn-color-keyboard-fckey-bg: #adb3bd;
+  --ebscn-color-keyboard-key-bg-active: #E5E5E5;
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord {
-  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/keybord_keybord_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-keybord:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete {
-  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
-  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/keybord_shift_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2_dark.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
 }
 .ebscn-alphabet-keyboard {
   position: fixed;
@@ -28,41 +46,37 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-bg);
 }
-.ebscn-alphabet-keyboard-darkkey {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 11.2%;
-  height: 42px;
-  border-radius: 5px;
-  background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  font-size: 17px;
-  font-size: var(--ebscn-font-size-9);
-}
-.ebscn-alphabet-keyboard-darkkey:active {
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
-}
 .ebscn-alphabet-keyboard-shift {
   margin-right: 3.73%;
   background: url(../../assets/images/keybord_shift.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
   background-size: 17px 17px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
+}
+.ebscn-alphabet-keyboard-shift-big {
+  background: url(../../assets/images/keybord_shift2.png) no-repeat center;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
 }
 .ebscn-alphabet-keyboard-delete {
   margin-left: 2.26%;
   background: url(../../assets/images/delete.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-keybord {
   background: url(../../assets/images/keybord_keybord.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 18px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 18px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space {
   display: flex;
@@ -70,12 +84,16 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   justify-content: center;
   width: 48.4%;
   height: 42px;
-  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
   font-size: 16px;
+  background-color: #fff;
+  background: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard-space:active {
-  background: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline,
@@ -84,7 +102,7 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding-top: 3%;
+  padding-top: calc(3% - 1px);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key,
@@ -93,40 +111,57 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
   width: 8.4%;
-  height: 42px;
+  height: 40px;
   background-color: #fff;
-  background-color: var(--ebscn-color-keyboard-key-bg);
+  background: var(--ebscn-color-keyboard-key-bg);
   border-radius: 5px;
   font-size: 23px;
   font-weight: 400;
   text-align: center;
+  color: #333;
   color: var(--ebscn-color-text);
-  margin-right: 1.6%;
+  margin: 0 3px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline-key:active,
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-key:active {
-  background-color: #eee;
-  background-color: var(--ebscn-color-border);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
-.ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firstline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+.ebscn-alphabet-keyboard-darkkey {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11.2%;
+  height: 42px;
+  border-radius: 5px;
+  background-color: #adb3bd;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  font-size: var(--ebscn-font-size-9);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
+}
+.ebscn-alphabet-keyboard-darkkey:active {
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-secondline {
   padding-left: 5.73%;
   padding-right: 5.73%;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-thirdline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline {
-  padding-left: 0.8%;
-  padding-right: 0.8%;
-  padding-bottom: 1.06%;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-bottom: 6px;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm {
   display: flex;
@@ -142,16 +177,18 @@ html[data-prefers-color-scheme='dark'] .ebscn-alphabet-keyboard-shift {
   text-align: center;
   color: #fff;
   line-height: 22.5px;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline-confirm:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 .ebscn-alphabet-keyboard .ebscn-alphabet-keyboard-firthline img {
   height: 20%;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-alphabet-keyboard {
-    height: calc(216px + env(safe-area-inset-bottom));
-    height: calc(216px + constant(safe-area-inset-bottom));
+    height: calc(223px + env(safe-area-inset-bottom));
+    height: calc(223px + constant(safe-area-inset-bottom));
   }
 }

package/cjs/components/alphabet-keyboard/alphabet-keyboard.js

@@ -114,12 +114,11 @@ function AlphabetKeyboard(p) {
   }, (isBig == false ? thirdKeys : thirdKeysBig).map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
+      className: item == '↑' && isBig ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift ").concat(classPrefix, "-shift-big") : item == '↑' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-shift") : item == '×' ? "".concat(classPrefix, "-darkkey ").concat(classPrefix, "-delete") : "".concat(classPrefix, "-thirdline-key"),
       onClick: function () {
         if (visible) {
           onKeyPress(item);
         }
-        ;
       }
     }, imgKeys.includes(item) ? '' : item);
   })), _react.default.createElement("div", {

package/cjs/components/button/selectorButton.css

@@ -3,9 +3,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 14px;
 }
 .ebscn-selectorbutton-icon {
   margin-left: 4px;
+  font-size: 12px;
   display: flex;
   align-items: center;
   transition: transform 0.5s;

package/cjs/components/button/selectorButton.js

@@ -148,10 +148,6 @@ var SelectorButton = function (p) {
     onClick: handleClick
   }, props.children, _react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(classPrefix, "-icon"), (_a = {}, _a["".concat(classPrefix, "-icon-active")] = props.active && props.autoRotate, _a))
-  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, {
-    style: {
-      fontSize: '14px'
-    }
-  }))));
+  }, props.icon ? props.icon : _react.default.createElement(_2.SelectorIcon, null))));
 };
 exports.SelectorButton = SelectorButton;

package/cjs/components/divider/divider.css

@@ -3,9 +3,10 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--color);
+  border-color: var(--ebscn-color-split-line);
   border-style: solid;
-  color: var(--ebscn-color-weak);
+  color: #ebebeb;
+  color: var(--ebscn-color-split-line);
   font-size: 14px;
 }
 .ebscn-divider-left.ebscn-divider-horizontal::before {
@@ -35,5 +36,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--color);
+  border-left: 1px solid var(--ebscn-color-split-line);
 }

package/cjs/components/number-keyboard/number-keyboard.css

@@ -1,6 +1,6 @@
 html[data-prefers-color-scheme='dark'] .ebscn-number-keyboard-delete {
-  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
 }
 .ebscn-number-keyboard {
   display: none;
@@ -16,67 +16,71 @@ html[data-prefers-color-scheme='dark'] .ebscn-number-keyboard-delete {
   padding: 3px;
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-bg);
+  box-sizing: border-box;
   transition: all 0.5s;
   align-content: flex-start;
 }
-.ebscn-number-keyboard-key,
-.ebscn-number-keyboard-confirmKey {
-  width: calc(25% - 7.5px);
-  height: 48.5px;
-  line-height: 48.5px;
+.ebscn-number-keyboard-key {
+  width: calc(25% - 8.25px);
+  height: 46px;
+  line-height: 46px;
   border-radius: 4.17px;
   margin: 3px;
   text-align: center;
   font-weight: 400;
-}
-.ebscn-number-keyboard-key {
   font-size: 23px;
   color: #333;
   color: var(--ebscn-color-text);
   background-color: #fff;
   background-color: var(--ebscn-color-keyboard-key-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-number-keyboard-key:active {
   background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
+}
+.ebscn-number-keyboard-ABC {
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
 }
 .ebscn-number-keyboard-option {
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
   color: #333;
   color: var(--ebscn-color-text);
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-option:active {
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-number-keyboard-delete {
   background: url(../../assets/images/delete.png) no-repeat center;
   background-color: #adb3bd;
-  background-color: var(--ebscn-color-functionkey-background);
-  background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  background-size: 25px 25px;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-delete:active {
   background: url(../../assets/images/delete.png) no-repeat center;
-  background-color: #e5e5e5;
-  background-color: var(--ebscn-color-keyboard-active-background);
-  background-size: 24px 24px;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
+  background-size: 25px 25px;
 }
 .ebscn-number-keyboard-confirmKey {
   background-color: #e84225;
   background-color: var(--ebscn-color-primary);
-  width: calc(25% - 6px);
-  font-size: 18px;
-  font-size: var(--ebscn-font-size-10);
+  font-size: 19px;
+  font-size: var(--ebscn-font-size-11);
   color: #fff;
   color: var(--ebscn-color-white);
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-number-keyboard-confirmKey:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-number-keyboard {

package/cjs/components/number-keyboard/number-keyboard.js

@@ -83,7 +83,7 @@ function NumberKeyboard(p) {
   }, keys.map(function (item, index) {
     return _react.default.createElement("div", {
       key: item || index,
-      className: (0, _classnames.default)(item !== '确定' ? "".concat(classPrefix, "-key") : "".concat(classPrefix, "-confirmKey"), typeof item !== 'number' && item.length && item !== '.' && item !== '确定' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
+      className: (0, _classnames.default)("".concat(classPrefix, "-key"), item === 'ABC' ? "".concat(classPrefix, "-ABC") : '', typeof item !== 'number' && item.length && item !== '.' && item !== '确定' && item !== 'ABC' ? "".concat(classPrefix, "-option") : item == '确定' ? "".concat(classPrefix, "-confirmKey") : "".concat(classPrefix, "-number-key"), item === 'X' && "".concat(classPrefix, "-delete")),
       onClick: function () {
         if (visible) {
           onKeyPress(item);

package/cjs/components/skeleton/skeleton.css

@@ -2,14 +2,14 @@
   --width: 100%;
   --height: 0;
   --border-radius: 3px;
-  background-color: rgba(190, 190, 190, 0.2);
+  background-color: #f8f9fc;
   border-radius: var(--border-radius);
   width: var(--width);
   height: var(--height);
   display: block;
 }
 .ebscn-skeleton.ebscn-skeleton-animated {
-  background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
+  background: linear-gradient(90deg, #f8f9fc 25%, #f8f9fc 37%, #f8f9fc 63%);
   background-size: 400% 100%;
   animation: ebscn-skeleton-loading 1.3s ease infinite;
 }

package/cjs/components/stock-count-keyboard/stock-count-keyboard.css

@@ -1,9 +1,14 @@
 html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
-  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-functionkey-background) no-repeat center;
+  background: url(../../assets/images/delete_dark.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
   background-size: 24px 24px;
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+}
+html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete:active {
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-stock-count-keyboard {
   display: none;
+  box-sizing: border-box;
   position: fixed;
   z-index: 999;
   bottom: 0;
@@ -20,12 +25,14 @@ html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
 .ebscn-stock-count-keyboard-key,
 .ebscn-stock-count-keyboard-confirmKey {
   border-radius: 4.17px;
-  width: calc(20% - 7.5px);
+  width: calc(20% - 8px);
   margin: 3px;
-  height: 48px;
+  height: 46px;
   text-align: center;
   line-height: 48px;
   font-weight: 400;
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-key-border);
 }
 .ebscn-stock-count-keyboard-key {
   font-size: 23px;
@@ -33,24 +40,30 @@ html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
   background: var(--ebscn-color-keyboard-key-bg);
 }
 .ebscn-stock-count-keyboard-key:active {
-  background: var(--ebscn-color-keyboard-active-background);
+  background-color: #e5e5e5;
+  background-color: var(--ebscn-color-keyboard-key-bg-active);
 }
 .ebscn-stock-count-keyboard-option {
+  font-size: 18px;
   font-size: var(--ebscn-font-size-10);
   color: var(--ebscn-color-text);
-  background-color: var(--ebscn-color-functionkey-background);
+  background-color: var(--ebscn-color-keyboard-fckey-bg);
+  border: 0.5px solid #888;
+  border-color: var(--ebscn-color-keyboard-fckey-border);
 }
 .ebscn-stock-count-keyboard-option:active {
-  font-size: var(--ebscn-font-size-10);
-  background-color: var(--ebscn-color-keyboard-active-background);
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-stock-count-keyboard-delete {
-  background: url(../../assets/images/delete.png) var(--ebscn-color-functionkey-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-fckey-bg) no-repeat center;
+  background-size: 25px 25px;
 }
 .ebscn-stock-count-keyboard-delete:active {
-  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-active-background) no-repeat center;
-  background-size: 24px 24px;
+  background: url(../../assets/images/delete.png) var(--ebscn-color-keyboard-key-bg-active) no-repeat center;
+  background-size: 25px 25px;
+  background-color: #252525;
+  background-color: var(--ebscn-color-keyboard-fckey-bg-active);
 }
 .ebscn-stock-count-keyboard-confirmKey {
   background-color: var(--ebscn-color-primary);
@@ -58,7 +71,7 @@ html[data-prefers-color-scheme='dark'] .ebscn-stock-count-keyboard-delete {
   color: var(--ebscn-color-white);
 }
 .ebscn-stock-count-keyboard-confirmKey:active {
-  background-color: #D03B21;
+  background-color: #d13c21;
 }
 @supports (bottom: env(safe-area-inset-bottom)) or (constant(safe-area-inset-bottom)) {
   .ebscn-stock-count-keyboard {