@kdcloudjs/kdesign 1.0.2

package/lib/style/core/motion/other.less

@@ -0,0 +1,126 @@
+@keyframes loadingcircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 6px @theme-color;
+  }
+}
+
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes kdRadioEffect {
+  0% {
+    transform: translateY(-50%) scale(0);
+  }
+  50% {
+    transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+@keyframes kdRadioLeaveEffect {
+  50% {
+    transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    transform: translateY(-50%) scale(0);
+  }
+}
+
+@keyframes kdRadioSquareEffect {
+  0% {
+    transform: rotate(45deg) scale(0);
+  }
+  50% {
+    transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(45deg) scale(1);
+  }
+}
+
+@keyframes kdRadioSquareLeaveEffect {
+  50% {
+    transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(45deg) scale(0);
+  }
+}
+
+@keyframes kdZoomBounceEffect {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform-origin: bottom right;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes kdZoomBounceLeaveEffect {
+  50% {
+    transform-origin: bottom right;
+    transform: scale(1.2);
+  }
+  100% {
+    transform-origin: bottom right;
+    transform: scale(0);
+  }
+}
+
+@keyframes kdZoomBounceDefaultEffect {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform-origin: 45% 77%;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes kdZoomEffect {
+  0% {
+    transform: scale(0);
+    transform-origin: 45% 77%;
+  }
+  100% {
+    transform-origin: 45% 77%;
+    transform: scale(1);
+  }
+}
+
+@keyframes kdZoomLeaveEffect {
+  0% {
+    transform: scale(1);
+    transform-origin: 45% 77%;
+  }
+  100% {
+    transform-origin: 45% 77%;
+    transform: scale(0);
+  }
+}
+
+@keyframes kdNoticeEffect {
+  0% {
+    transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes kdNoticeLeaveEffect {
+  100% {
+    transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}

package/lib/style/core/motion/slide.less

@@ -0,0 +1,120 @@
+.slide-motion(@className, @keyframeName, @componentName, @duration: calc(@transition-duration - 0.1s)) {
+  .@{className} {
+    .@{componentName}&-active {
+      animation-name: ~'@{keyframeName}In';
+      animation-duration: @duration;
+      animation-timing-function: @ease-out;
+    }
+    .@{componentName}&.hidden {
+      animation-name: ~'@{keyframeName}Out';
+      animation-duration: 0.1s;
+      animation-timing-function: @ease-in;
+    }
+  }
+}
+
+.slide-motion(topLeft, kdSlideDown, kd-dropdown);
+.slide-motion(top, kdSlideDown, kd-dropdown);
+.slide-motion(topRight, kdSlideDown, kd-dropdown);
+.slide-motion(leftBottom, kdSlideDown, kd-dropdown);
+.slide-motion(rightBottom, kdSlideDown, kd-dropdown);
+
+.slide-motion(left, kdSlideCenter, kd-dropdown);
+.slide-motion(right, kdSlideCenter, kd-dropdown);
+
+.slide-motion(leftTop, kdSlideUp, kd-dropdown);
+.slide-motion(bottomLeft, kdSlideUp, kd-dropdown);
+.slide-motion(bottom, kdSlideUp, kd-dropdown);
+.slide-motion(bottomRight, kdSlideUp, kd-dropdown);
+.slide-motion(rightTop, kdSlideUp, kd-dropdown);
+
+.slide-motion(topLeft, kdSlideDown, kd-cascader-menus);
+.slide-motion(bottomLeft, kdSlideUp, kd-cascader-menus);
+
+.slide-motion(topLeft, kdSlideDown, kd-select);
+.slide-motion(bottomLeft, kdSlideUp, kd-select);
+
+.slide-motion(topLeft, kdSlideDown, kd-date-picker-panel);
+.slide-motion(bottomLeft, kdSlideUp, kd-date-picker-panel);
+
+@keyframes kdSlideCenterIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scaleY(0.6);
+    transform-origin: 100% 50%;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdSlideCenterOut {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    transform: scaleY(1);
+    transform-origin: 100% 50%;
+  }
+  100% {
+    transform: scaleY(0.6);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@keyframes kdSlideUpIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scaleY(0.6);
+    transform-origin: 0% 0%;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdSlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+@keyframes kdSlideDownIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scaleY(0.6);
+    transform-origin: 100% 100%;
+  }
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes kdSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}

package/lib/style/core/motion/zoom.less

@@ -0,0 +1,247 @@
+.zoom-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
+  .@{className} {
+    &-active {
+      animation-name: ~'@{keyframeName}In';
+      animation-duration: @duration;
+      animation-timing-function: @ease-out;
+    }
+    &.hidden {
+      animation-name: ~'@{keyframeName}Out';
+      animation-duration: .1s;
+      animation-timing-function: @ease-in;
+    }
+  }
+}
+
+.zoom-motion(top, kdZoomBottom);
+.zoom-motion(left, kdZoomRight);
+.zoom-motion(right, kdZoomLeft);
+.zoom-motion(bottom, kdZoomTop);
+
+.zoom-motion(topLeft, kdZoomLeftBottom);
+.zoom-motion(rightBottom, kdZoomLeftBottom);
+
+.zoom-motion(topRight, kdZoomRightBottom);
+.zoom-motion(leftBottom, kdZoomRightBottom);
+
+.zoom-motion(leftTop, kdZoomTopRight);
+.zoom-motion(bottomRight, kdZoomTopRight);
+
+.zoom-motion(rightTop, kdZoomTopLeft);
+.zoom-motion(bottomLeft, kdZoomTopLeft);
+
+@keyframes kdZoomBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 50% 100%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomBottomOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 100% 50%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomRightOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomTopIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 50% 0%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 0% 50%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomLeftOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomLeftBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 0% 100%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomLeftBottomOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 0% 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomRightBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 100% 100%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomRightBottomOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomTopRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 100% 0%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopRightOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes kdZoomTopLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    transform: scale(0.6);
+    transform-origin: 0% 0%;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopLeftOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.6);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}

package/lib/style/core/motion.less

@@ -0,0 +1,3 @@
+@import 'motion/other';
+@import 'motion/zoom';
+@import 'motion/slide';

package/lib/style/core/reset.less

@@ -0,0 +1,235 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/*  normalize.css 和现有产品的结合版本， 根据兼容性进行了调整 */
+/* Document
+   ========================================================================== */
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+html,
+body {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+}
+
+html,
+body,
+input,
+textarea,
+select,
+button {
+  font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB',
+    'WenQuanYi Micro Hei', sans-serif;
+}
+
+body {
+  box-sizing: border-box;
+}
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ */
+input {
+  padding: 0;
+  margin: 0;
+}
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * Reset scrollbar style
+ */
+::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background: 0 0;
+}
+
+::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  height: 5px;
+  min-width: 2px;
+  width: 5px;
+  border-radius: 4px;
+  border: dashed transparent;
+  padding: 100px 0 0;
+  border-width: 1px;
+  background-color: #b2b2b2;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: #999;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #999;
+  border-radius: 6;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
+}

package/lib/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");