@fle-ui/next 2.0.0-alpha.3 → 2.0.0-alpha.6

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

@@ -0,0 +1,51 @@
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@click-animating-true: ~"[@{ant-prefix}-click-animating='true']";
+@click-animating-with-extra-node-true: ~"[@{ant-prefix}-click-animating-without-extra-node='true']";
+
+@{click-animating-true},
+@{click-animating-with-extra-node-true} {
+  position: relative;
+}
+
+html {
+  --antd-wave-shadow-color: @primary-color;
+  --scroll-bar: 0;
+}
+
+@click-animating-with-extra-node-true-after: ~'@{click-animating-with-extra-node-true}::after';
+
+@{click-animating-with-extra-node-true-after},
+.@{ant-prefix}-click-animating-node {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  border-radius: inherit;
+  box-shadow: 0 0 0 0 @primary-color;
+  box-shadow: 0 0 0 0 var(--antd-wave-shadow-color);
+  opacity: 0.2;
+  animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
+  animation-fill-mode: forwards;
+  content: '';
+  pointer-events: none;
+}
+
+@keyframes waveEffect {
+  100% {
+    box-shadow: 0 0 0 @primary-color;
+    box-shadow: 0 0 0 @wave-animation-width var(--antd-wave-shadow-color);
+  }
+}
+
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,129 @@
+.slide-motion(@className, @keyframeName) {
+  @name: ~'@{ant-prefix}-@{className}';
+  .make-motion(@name, @keyframeName);
+  .@{name}-enter,
+  .@{name}-appear {
+    opacity: 0;
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{name}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+
+.slide-motion(slide-up, antSlideUp);
+.slide-motion(slide-down, antSlideDown);
+.slide-motion(slide-left, antSlideLeft);
+.slide-motion(slide-right, antSlideRight);
+
+@keyframes antSlideUpIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes antSlideUpOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes antSlideDownIn {
+  0% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+}
+
+@keyframes antSlideDownOut {
+  0% {
+    transform: scaleY(1);
+    transform-origin: 100% 100%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleY(0.8);
+    transform-origin: 100% 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes antSlideLeftIn {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes antSlideLeftOut {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 0% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 0% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes antSlideRightIn {
+  0% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+}
+
+@keyframes antSlideRightOut {
+  0% {
+    transform: scaleX(1);
+    transform-origin: 100% 0%;
+    opacity: 1;
+  }
+
+  100% {
+    transform: scaleX(0.8);
+    transform-origin: 100% 0%;
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,179 @@
+.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  @name: ~'@{ant-prefix}-@{className}';
+  .make-motion(@name, @keyframeName, @duration);
+  .@{name}-enter,
+  .@{name}-appear {
+    transform: scale(0); // need this by yiminghe
+    opacity: 0;
+    animation-timing-function: @ease-out-circ;
+
+    &-prepare {
+      transform: none;
+    }
+  }
+  .@{name}-leave {
+    animation-timing-function: @ease-in-out-circ;
+  }
+}
+
+// For Modal, Select choosen item
+.zoom-motion(zoom, antZoom);
+// For Popover, Popconfirm, Dropdown
+.zoom-motion(zoom-big, antZoomBig);
+// For Tooltip
+.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);
+
+.zoom-motion(zoom-up, antZoomUp);
+.zoom-motion(zoom-down, antZoomDown);
+.zoom-motion(zoom-left, antZoomLeft);
+.zoom-motion(zoom-right, antZoomRight);
+
+@keyframes antZoomIn {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes antZoomOut {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+}
+
+@keyframes antZoomBigIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes antZoomBigOut {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes antZoomUpIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+}
+
+@keyframes antZoomUpOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+
+@keyframes antZoomLeftIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+}
+
+@keyframes antZoomLeftOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes antZoomRightIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+}
+
+@keyframes antZoomRightOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+
+@keyframes antZoomDownIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+}
+
+@keyframes antZoomDownOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}

package/lib/style/core/motion.less

@@ -0,0 +1,22 @@
+// @import '../mixins/motion'; This has moved to theme/xxx inside.
+@import 'motion/fade';
+@import 'motion/move';
+@import 'motion/other';
+@import 'motion/slide';
+@import 'motion/zoom';
+
+// For common/openAnimation
+.ant-motion-collapse-legacy {
+  overflow: hidden;
+
+  &-active {
+    transition: height @animation-duration-base @ease-in-out,
+      opacity @animation-duration-base @ease-in-out !important;
+  }
+}
+
+.ant-motion-collapse {
+  overflow: hidden;
+  transition: height @animation-duration-base @ease-in-out,
+    opacity @animation-duration-base @ease-in-out !important;
+}

package/lib/style/dark.less

@@ -0,0 +1,4 @@
+@root-entry-name: default;
+
+@import './themes/dark.less';
+@import './core/index';

package/lib/style/default.less

@@ -0,0 +1,4 @@
+// This is same as `index.less` but given `root-entry-name` for `dist/antd.less` usage
+@root-entry-name: default;
+
+@import './index';

package/lib/style/index.d.ts

@@ -0,0 +1,2 @@
+import './index.less';
+import './themes.less';

package/lib/style/index.js

@@ -0,0 +1,2 @@
+import "./index.less";
+import "./themes.less";

package/lib/style/index.less

@@ -0,0 +1,2 @@
+@import './themes/index';
+@import './core/index';

package/lib/style/mixins/box.less

@@ -0,0 +1,7 @@
+.box(@position: absolute) {
+  position: @position;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/lib/style/mixins/clearfix.less

@@ -0,0 +1,16 @@
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+  // https://github.com/ant-design/ant-design/issues/21301#issuecomment-583955229
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    // https://github.com/ant-design/ant-design/issues/21864
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/lib/style/mixins/compact-item-vertical.less

@@ -0,0 +1,41 @@
+.compact-item-vertical-border-radius(@prefix-cls) {
+  &-item:not(&-first-item):not(&-last-item) {
+    border-radius: 0;
+  }
+
+  &-item&-first-item:not(&-last-item) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &-item&-last-item:not(&-first-item) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+.compact-item-vertical-border(@prefix-cls) {
+  // border collapse
+  &-item:not(&-last-item) {
+    margin-bottom: -@border-width-base;
+  }
+
+  &-item {
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+
+    &[disabled] {
+      z-index: 0;
+    }
+  }
+}
+
+.compact-item-vertical(@prefix-cls) {
+  &-compact-vertical {
+    .compact-item-vertical-border(@prefix-cls);
+    .compact-item-vertical-border-radius(@prefix-cls);
+  }
+}

package/lib/style/mixins/compact-item.less

@@ -0,0 +1,133 @@
+.compact-item-border-radius(@prefix-cls, @bordered-item-cls: null) {
+  & when (@bordered-item-cls = null) {
+    // border-radius
+    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} {
+      border-radius: 0;
+    }
+
+    &-item.@{prefix-cls}&-first-item:not(&-last-item):not(&-item-rtl) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &-item.@{prefix-cls}&-last-item:not(&-first-item):not(&-item-rtl) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for first item----------
+    &-item.@{prefix-cls}&-item-rtl&-first-item:not(&-last-item) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for last item----------
+    &-item.@{prefix-cls}&-item-rtl&-last-item:not(&-first-item) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  & when (not (@bordered-item-cls = null)) {
+    // border-radius
+    &-item:not(&-first-item):not(&-last-item).@{prefix-cls} > .@{bordered-item-cls} {
+      border-radius: 0;
+    }
+
+    &-item&-first-item.@{prefix-cls}:not(&-last-item):not(&-item-rtl) > .@{bordered-item-cls} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &-item&-last-item.@{prefix-cls}:not(&-first-item):not(&-item-rtl) > .@{bordered-item-cls} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for first item----------
+    &-item.@{prefix-cls}&-first-item&-item-rtl:not(&-last-item) > .@{bordered-item-cls} {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    // ----------rtl for last item----------
+    &-item.@{prefix-cls}&-last-item&-item-rtl:not(&-first-item) > .@{bordered-item-cls} {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+.compact-item-border(@prefix-cls, @bordered-item-cls: null, @special-open-cls) {
+  & when (@bordered-item-cls = null) {
+    // border collapse
+    &-item:not(&-last-item):not(&-item-rtl) {
+      margin-right: -@border-width-base;
+    }
+
+    // rtl border collapse
+    &-item:not(&-last-item)&-item-rtl {
+      margin-left: -@border-width-base;
+    }
+
+    &-item {
+      &:hover,
+      &:focus,
+      &:active {
+        z-index: 2;
+      }
+
+      // Select has an extra focus className
+      & when (not (@special-item-cls = null)) {
+        &.@{special-item-cls} {
+          z-index: 2;
+        }
+      }
+
+      &[disabled] {
+        z-index: 0;
+      }
+    }
+  }
+
+  & when (not (@bordered-item-cls = null)) {
+    // border collapse
+    &-item:not(&-last-item) {
+      margin-right: -@border-width-base;
+
+      &.@{prefix-cls}-compact-item-rtl {
+        margin-right: 0;
+        margin-left: -@border-width-base;
+      }
+    }
+
+    &-item {
+      &:hover,
+      &:focus,
+      &:active {
+        > * {
+          z-index: 2;
+        }
+      }
+
+      // Select has an special focus-item
+      & when (not (@special-item-cls = null)) {
+        &.@{special-item-cls} > * {
+          z-index: 2;
+        }
+      }
+
+      &[disabled] > * {
+        z-index: 0;
+      }
+    }
+  }
+}
+
+.compact-item(@prefix-cls, @bordered-item-cls: null, @special-item-cls: null) {
+  &-compact {
+    .compact-item-border(@prefix-cls, @bordered-item-cls, @special-item-cls);
+
+    .compact-item-border-radius(@prefix-cls, @bordered-item-cls);
+  }
+}

package/lib/style/mixins/compatibility.less

@@ -0,0 +1,13 @@
+// Compatibility for browsers.
+
+// Placeholder text
+.placeholder(@color: @input-placeholder-color) {
+  &::placeholder {
+    color: @color;
+    user-select: none; // https://github.com/ant-design/ant-design/pull/32639
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}