@kdcloudjs/kdesign 1.0.2

package/lib/style/index.css

@@ -0,0 +1,1814 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+@import 'icon/kdicon.css';
+@-webkit-keyframes loadingcircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes loadingcircle {
+  100% {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes waveEffect {
+  100% {
+    -webkit-box-shadow: 0 0 0 6px #5582f3;
+            box-shadow: 0 0 0 6px #5582f3;
+  }
+}
+@keyframes waveEffect {
+  100% {
+    -webkit-box-shadow: 0 0 0 6px #5582f3;
+            box-shadow: 0 0 0 6px #5582f3;
+  }
+}
+@-webkit-keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdRadioEffect {
+  0% {
+    -webkit-transform: translateY(-50%) scale(0);
+            transform: translateY(-50%) scale(0);
+  }
+  50% {
+    -webkit-transform: translateY(-50%) scale(1.2);
+            transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) scale(1);
+            transform: translateY(-50%) scale(1);
+  }
+}
+@keyframes kdRadioEffect {
+  0% {
+    -webkit-transform: translateY(-50%) scale(0);
+            transform: translateY(-50%) scale(0);
+  }
+  50% {
+    -webkit-transform: translateY(-50%) scale(1.2);
+            transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) scale(1);
+            transform: translateY(-50%) scale(1);
+  }
+}
+@-webkit-keyframes kdRadioLeaveEffect {
+  50% {
+    -webkit-transform: translateY(-50%) scale(1.2);
+            transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) scale(0);
+            transform: translateY(-50%) scale(0);
+  }
+}
+@keyframes kdRadioLeaveEffect {
+  50% {
+    -webkit-transform: translateY(-50%) scale(1.2);
+            transform: translateY(-50%) scale(1.2);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) scale(0);
+            transform: translateY(-50%) scale(0);
+  }
+}
+@-webkit-keyframes kdRadioSquareEffect {
+  0% {
+    -webkit-transform: rotate(45deg) scale(0);
+            transform: rotate(45deg) scale(0);
+  }
+  50% {
+    -webkit-transform: rotate(45deg) scale(1.2);
+            transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) scale(1);
+            transform: rotate(45deg) scale(1);
+  }
+}
+@keyframes kdRadioSquareEffect {
+  0% {
+    -webkit-transform: rotate(45deg) scale(0);
+            transform: rotate(45deg) scale(0);
+  }
+  50% {
+    -webkit-transform: rotate(45deg) scale(1.2);
+            transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) scale(1);
+            transform: rotate(45deg) scale(1);
+  }
+}
+@-webkit-keyframes kdRadioSquareLeaveEffect {
+  50% {
+    -webkit-transform: rotate(45deg) scale(1.2);
+            transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) scale(0);
+            transform: rotate(45deg) scale(0);
+  }
+}
+@keyframes kdRadioSquareLeaveEffect {
+  50% {
+    -webkit-transform: rotate(45deg) scale(1.2);
+            transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    -webkit-transform: rotate(45deg) scale(0);
+            transform: rotate(45deg) scale(0);
+  }
+}
+@-webkit-keyframes kdZoomBounceEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@keyframes kdZoomBounceEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@-webkit-keyframes kdZoomBounceLeaveEffect {
+  50% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+  100% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@keyframes kdZoomBounceLeaveEffect {
+  50% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+  100% {
+    -webkit-transform-origin: bottom right;
+            transform-origin: bottom right;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@-webkit-keyframes kdZoomBounceDefaultEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@keyframes kdZoomBounceDefaultEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  50% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(1.2);
+            transform: scale(1.2);
+  }
+}
+@-webkit-keyframes kdZoomEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+  }
+  100% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes kdZoomEffect {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+  }
+  100% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes kdZoomLeaveEffect {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+  }
+  100% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@keyframes kdZoomLeaveEffect {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+  }
+  100% {
+    -webkit-transform-origin: 45% 77%;
+            transform-origin: 45% 77%;
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@-webkit-keyframes kdNoticeEffect {
+  0% {
+    -webkit-transform: translateY(-15px) scale(0.8);
+            transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}
+@keyframes kdNoticeEffect {
+  0% {
+    -webkit-transform: translateY(-15px) scale(0.8);
+            transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdNoticeLeaveEffect {
+  100% {
+    -webkit-transform: translateY(-15px) scale(0.8);
+            transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}
+@keyframes kdNoticeLeaveEffect {
+  100% {
+    -webkit-transform: translateY(-15px) scale(0.8);
+            transform: translateY(-15px) scale(0.8);
+    opacity: 0;
+  }
+}
+.top-active {
+  -webkit-animation-name: kdZoomBottomIn;
+          animation-name: kdZoomBottomIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.top.hidden {
+  -webkit-animation-name: kdZoomBottomOut;
+          animation-name: kdZoomBottomOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.left-active {
+  -webkit-animation-name: kdZoomRightIn;
+          animation-name: kdZoomRightIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.left.hidden {
+  -webkit-animation-name: kdZoomRightOut;
+          animation-name: kdZoomRightOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.right-active {
+  -webkit-animation-name: kdZoomLeftIn;
+          animation-name: kdZoomLeftIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.right.hidden {
+  -webkit-animation-name: kdZoomLeftOut;
+          animation-name: kdZoomLeftOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.bottom-active {
+  -webkit-animation-name: kdZoomTopIn;
+          animation-name: kdZoomTopIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.bottom.hidden {
+  -webkit-animation-name: kdZoomTopOut;
+          animation-name: kdZoomTopOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.topLeft-active {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.topLeft.hidden {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.rightBottom-active {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.rightBottom.hidden {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.topRight-active {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.topRight.hidden {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.leftBottom-active {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.leftBottom.hidden {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.leftTop-active {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.leftTop.hidden {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.bottomRight-active {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.bottomRight.hidden {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.rightTop-active {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.rightTop.hidden {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.bottomLeft-active {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.bottomLeft.hidden {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+@-webkit-keyframes kdZoomBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 100%;
+            transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomRightOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomRightOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomTopIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomTopOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomTopOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 50% 0%;
+            transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomLeftOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomLeftOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 50%;
+            transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomLeftBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomLeftBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomLeftBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomLeftBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 100%;
+            transform-origin: 0% 100%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomRightBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomRightBottomIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomRightBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomRightBottomOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomTopRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopRightIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomTopRightOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomTopRightOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 100% 0%;
+            transform-origin: 100% 0%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdZoomTopLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdZoomTopLeftIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+  }
+  100% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdZoomTopLeftOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+@keyframes kdZoomTopLeftOut {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(0.6);
+            transform: scale(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+.kd-dropdown.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.top-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.top.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.topRight-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.topRight.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.leftBottom-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.leftBottom.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.rightBottom-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.rightBottom.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.left-active {
+  -webkit-animation-name: kdSlideCenterIn;
+          animation-name: kdSlideCenterIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.left.hidden {
+  -webkit-animation-name: kdSlideCenterOut;
+          animation-name: kdSlideCenterOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.right-active {
+  -webkit-animation-name: kdSlideCenterIn;
+          animation-name: kdSlideCenterIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.right.hidden {
+  -webkit-animation-name: kdSlideCenterOut;
+          animation-name: kdSlideCenterOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.leftTop-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.leftTop.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.bottom-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.bottom.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.bottomRight-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.bottomRight.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-dropdown.rightTop-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-dropdown.rightTop.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-cascader-menus.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-cascader-menus.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-cascader-menus.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-cascader-menus.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-select.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-select.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-select.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-select.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-date-picker-panel.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-date-picker-panel.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-date-picker-panel.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-date-picker-panel.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+@-webkit-keyframes kdSlideCenterIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@keyframes kdSlideCenterIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdSlideCenterOut {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@keyframes kdSlideCenterOut {
+  0% {
+    opacity: 1;
+  }
+  5% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+  }
+  100% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 50%;
+            transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdSlideUpIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@keyframes kdSlideUpIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdSlideUpOut {
+  0% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+@keyframes kdSlideUpOut {
+  0% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    -webkit-transform-origin: 0% 0%;
+            transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+@-webkit-keyframes kdSlideDownIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@keyframes kdSlideDownIn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    -webkit-transform: scaleY(0.6);
+            transform: scaleY(0.6);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes kdSlideDownOut {
+  0% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+@keyframes kdSlideDownOut {
+  0% {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scaleY(0.8);
+            transform: scaleY(0.8);
+    -webkit-transform-origin: 100% 100%;
+            transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+/*! 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 {
+  -webkit-box-sizing: border-box;
+          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'] {
+  -webkit-box-sizing: border-box;
+          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;
+}