feffery_antd_components 0.4.3-rc6 → 0.4.3

package/src/lib/components/styles.css

@@ -1,514 +1,514 @@
-/* 屏蔽浏览器默认的margin */
-body {
-    margin: 0;
-}
-
-.editable-cell {
-    position: relative;
-}
-
-.editable-cell-value-wrap {
-    padding: 5px 5px;
-    cursor: pointer;
-    height: 100%;
-}
-
-.editable-row:hover .editable-cell-value-wrap {
-    padding: 4px 4px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    height: 100%;
-}
-
-[data-theme="dark"] .editable-row:hover .editable-cell-value-wrap {
-    border: 1px solid #434343;
-}
-
-.ant-table-thead>tr>th,
-.ant-table-tbody>tr>td,
-.ant-table tfoot>tr>th,
-.ant-table tfoot>tr>td {
-    position: relative;
-    padding: 5px 5px;
-    overflow-wrap: break-word;
-}
-
-.ant-table-tbody>tr {
-    height: 36px;
-}
-
-.ant-steps-item-icon .ant-steps-icon {
-    position: relative;
-    top: -1px;
-    color: #1890ff;
-    line-height: 1;
-}
-
-.comment-action {
-    padding-left: 8px;
-    cursor: "auto";
-}
-
-[class*="-col-rtl"] .comment-action {
-    padding-right: 8px;
-    padding-left: 0;
-}
-
-.feffery-paste-image-container {
-    height: 400px;
-    overflow: auto;
-    border: 1px solid #d9d9d9;
-    transition: all 0.3s, height 0s;
-    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=),
-        auto;
-}
-
-.feffery-paste-image-container:hover {
-    border: 1px solid rgb(64, 169, 255);
-}
-
-/* AntdTable自定义角标模式 */
-.ant-corner-mark-top-right {
-    position: relative;
-    height: 100%;
-}
-
-.ant-corner-mark-top-right:after {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    width: 0;
-    height: 0;
-    border: 6px solid var(--ant-corner-mark-color);
-    border-bottom: 6px solid transparent;
-    border-left: 6px solid transparent;
-    border-top-right-radius: 2px;
-    content: "";
-    transform: var(--ant-corner-mark-transform);
-}
-
-.ant-corner-mark-top-left {
-    position: relative;
-    height: 100%;
-}
-
-.ant-corner-mark-top-left:after {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 0;
-    height: 0;
-    border: 6px solid var(--ant-corner-mark-color);
-    border-bottom: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top-left-radius: 2px;
-    content: "";
-    transform: var(--ant-corner-mark-transform);
-}
-
-.ant-corner-mark-bottom-left {
-    position: relative;
-    height: 100%;
-}
-
-.ant-corner-mark-bottom-left:after {
-    position: absolute;
-    bottom: 2px;
-    left: 2px;
-    width: 0;
-    height: 0;
-    border: 6px solid var(--ant-corner-mark-color);
-    border-top: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom-left-radius: 2px;
-    content: "";
-    transform: var(--ant-corner-mark-transform);
-}
-
-.ant-corner-mark-bottom-right {
-    position: relative;
-    height: 100%;
-}
-
-.ant-corner-mark-bottom-right:after {
-    position: absolute;
-    bottom: 2px;
-    right: 2px;
-    width: 0;
-    height: 0;
-    border: 6px solid var(--ant-corner-mark-color);
-    border-top: 6px solid transparent;
-    border-left: 6px solid transparent;
-    border-bottom-right-radius: 2px;
-    content: "";
-    transform: var(--ant-corner-mark-transform);
-}
-
-/* 修复AntdTabs开启tabPane切换动画后滚动条异常问题 */
-.ant-tabs {
-    overflow-x: hidden;
-}
-
-.ant-modal-wrap-overwrite {
-    pointer-events: none;
-}
-
-.ant-tree-draggable-icon {
-    cursor: grab;
-}
-
-/* 确保spin容器高度继承自wrapperClassName */
-.ant-spin-nested-loading>.ant-spin-container {
-    height: inherit;
-}
-
-/* 为AntdButton内嵌元素设置间距 */
-.ant-btn>*:not(:last-child) {
-    margin-right: 0.25em;
-}
-
-.ant-tree-title .ant-rate {
-    font-size: 16px;
-}
-
-/* 针对上传组件允许按钮block模式 */
-.ant-upload-button-block .ant-upload {
-    display: block;
-}
-
-/* 为AntdTag图标元素设置间距 */
-.ant-tag span:not(:first-child) {
-    margin-inline-start: 5px;
-}
-
-/* AntdPopupCard、AntdModal内置显隐动效补丁 */
-@keyframes antZoomBigIn {
-    0% {
-        transform: scale(.8);
-        opacity: 0
-    }
-
-    to {
-        transform: scale(1);
-        opacity: 1
-    }
-}
-
-@keyframes antZoomBigOut {
-    0% {
-        transform: scale(1)
-    }
-
-    to {
-        transform: scale(.8);
-        opacity: 0
-    }
-}
-
-.ant-zoom-big-appear,
-.ant-zoom-big-enter,
-.ant-zoom-big-leave {
-    animation-duration: .2s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-zoom-big-appear.ant-zoom-big-appear-active,
-.ant-zoom-big-enter.ant-zoom-big-enter-active {
-    animation-name: antZoomBigIn;
-    animation-play-state: running
-}
-
-.ant-zoom-big-leave.ant-zoom-big-leave-active {
-    animation-name: antZoomBigOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-zoom-big-appear,
-.ant-zoom-big-enter {
-    transform: scale(0);
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
-}
-
-.ant-zoom-big-appear-prepare,
-.ant-zoom-big-enter-prepare {
-    transform: none
-}
-
-.ant-zoom-big-leave {
-    animation-timing-function: cubic-bezier(.78, .14, .15, .86)
-}
-
-.ant-zoom-big-fast-appear,
-.ant-zoom-big-fast-enter,
-.ant-zoom-big-fast-leave {
-    animation-duration: .1s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-zoom-big-fast-appear.ant-zoom-big-fast-appear-active,
-.ant-zoom-big-fast-enter.ant-zoom-big-fast-enter-active {
-    animation-name: antZoomBigIn;
-    animation-play-state: running
-}
-
-.ant-zoom-big-fast-leave.ant-zoom-big-fast-leave-active {
-    animation-name: antZoomBigOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-zoom-big-fast-appear,
-.ant-zoom-big-fast-enter {
-    transform: scale(0);
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
-}
-
-.ant-zoom-big-fast-appear-prepare,
-.ant-zoom-big-fast-enter-prepare {
-    transform: none
-}
-
-.ant-zoom-big-fast-leave {
-    animation-timing-function: cubic-bezier(.78, .14, .15, .86)
-}
-
-@keyframes antSlideLeftIn {
-    0% {
-        transform: scaleX(.8);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-
-    to {
-        transform: scaleX(1);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-}
-
-@keyframes antSlideLeftOut {
-    0% {
-        transform: scaleX(1);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-
-    to {
-        transform: scaleX(.8);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-}
-
-.ant-slide-left-appear,
-.ant-slide-left-enter,
-.ant-slide-left-leave {
-    animation-duration: .2s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-slide-left-appear.ant-slide-left-appear-active,
-.ant-slide-left-enter.ant-slide-left-enter-active {
-    animation-name: antSlideLeftIn;
-    animation-play-state: running
-}
-
-.ant-slide-left-leave.ant-slide-left-leave-active {
-    animation-name: antSlideLeftOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-slide-left-appear,
-.ant-slide-left-enter {
-    transform: scale(0);
-    transform-origin: 0 0;
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.23, 1, .32, 1)
-}
-
-.ant-slide-left-leave {
-    animation-timing-function: cubic-bezier(.755, .05, .855, .06)
-}
-
-@keyframes antSlideRightIn {
-    0% {
-        transform: scaleX(.8);
-        transform-origin: 100% 0;
-        opacity: 0
-    }
-
-    to {
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-        opacity: 1
-    }
-}
-
-@keyframes antSlideRightOut {
-    0% {
-        transform: scaleX(1);
-        transform-origin: 100% 0;
-        opacity: 1
-    }
-
-    to {
-        transform: scaleX(.8);
-        transform-origin: 100% 0;
-        opacity: 0
-    }
-}
-
-.ant-slide-right-appear,
-.ant-slide-right-enter,
-.ant-slide-right-leave {
-    animation-duration: .2s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-slide-right-appear.ant-slide-right-appear-active,
-.ant-slide-right-enter.ant-slide-right-enter-active {
-    animation-name: antSlideRightIn;
-    animation-play-state: running
-}
-
-.ant-slide-right-leave.ant-slide-right-leave-active {
-    animation-name: antSlideRightOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-slide-right-appear,
-.ant-slide-right-enter {
-    transform: scale(0);
-    transform-origin: 0 0;
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.23, 1, .32, 1)
-}
-
-.ant-slide-right-leave {
-    animation-timing-function: cubic-bezier(.755, .05, .855, .06)
-}
-
-@keyframes antMoveLeftIn {
-    0% {
-        transform: translateX(-100%);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-
-    to {
-        transform: translateX(0);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-}
-
-@keyframes antMoveLeftOut {
-    0% {
-        transform: translateX(0);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-
-    to {
-        transform: translateX(-100%);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-}
-
-.ant-move-left-appear,
-.ant-move-left-enter,
-.ant-move-left-leave {
-    animation-duration: .2s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-move-left-appear.ant-move-left-appear-active,
-.ant-move-left-enter.ant-move-left-enter-active {
-    animation-name: antMoveLeftIn;
-    animation-play-state: running
-}
-
-.ant-move-left-leave.ant-move-left-leave-active {
-    animation-name: antMoveLeftOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-move-left-appear,
-.ant-move-left-enter {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
-}
-
-.ant-move-left-leave {
-    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
-}
-
-@keyframes antMoveRightIn {
-    0% {
-        transform: translateX(100%);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-
-    to {
-        transform: translateX(0);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-}
-
-@keyframes antMoveRightOut {
-    0% {
-        transform: translateX(0);
-        transform-origin: 0 0;
-        opacity: 1
-    }
-
-    to {
-        transform: translateX(100%);
-        transform-origin: 0 0;
-        opacity: 0
-    }
-}
-
-.ant-move-right-appear,
-.ant-move-right-enter,
-.ant-move-right-leave {
-    animation-duration: .2s;
-    animation-fill-mode: both;
-    animation-play-state: paused
-}
-
-.ant-move-right-appear.ant-move-right-appear-active,
-.ant-move-right-enter.ant-move-right-enter-active {
-    animation-name: antMoveRightIn;
-    animation-play-state: running
-}
-
-.ant-move-right-leave.ant-move-right-leave-active {
-    animation-name: antMoveRightOut;
-    animation-play-state: running;
-    pointer-events: none
-}
-
-.ant-move-right-appear,
-.ant-move-right-enter {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
-}
-
-.ant-move-right-leave {
-    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
+/* 屏蔽浏览器默认的margin */
+body {
+    margin: 0;
+}
+
+.editable-cell {
+    position: relative;
+}
+
+.editable-cell-value-wrap {
+    padding: 5px 5px;
+    cursor: pointer;
+    height: 100%;
+}
+
+.editable-row:hover .editable-cell-value-wrap {
+    padding: 4px 4px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    height: 100%;
+}
+
+[data-theme="dark"] .editable-row:hover .editable-cell-value-wrap {
+    border: 1px solid #434343;
+}
+
+.ant-table-thead>tr>th,
+.ant-table-tbody>tr>td,
+.ant-table tfoot>tr>th,
+.ant-table tfoot>tr>td {
+    position: relative;
+    padding: 5px 5px;
+    overflow-wrap: break-word;
+}
+
+.ant-table-tbody>tr {
+    height: 36px;
+}
+
+.ant-steps-item-icon .ant-steps-icon {
+    position: relative;
+    top: -1px;
+    color: #1890ff;
+    line-height: 1;
+}
+
+.comment-action {
+    padding-left: 8px;
+    cursor: "auto";
+}
+
+[class*="-col-rtl"] .comment-action {
+    padding-right: 8px;
+    padding-left: 0;
+}
+
+.feffery-paste-image-container {
+    height: 400px;
+    overflow: auto;
+    border: 1px solid #d9d9d9;
+    transition: all 0.3s, height 0s;
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=),
+        auto;
+}
+
+.feffery-paste-image-container:hover {
+    border: 1px solid rgb(64, 169, 255);
+}
+
+/* AntdTable自定义角标模式 */
+.ant-corner-mark-top-right {
+    position: relative;
+    height: 100%;
+}
+
+.ant-corner-mark-top-right:after {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 0;
+    height: 0;
+    border: 6px solid var(--ant-corner-mark-color);
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid transparent;
+    border-top-right-radius: 2px;
+    content: "";
+    transform: var(--ant-corner-mark-transform);
+}
+
+.ant-corner-mark-top-left {
+    position: relative;
+    height: 100%;
+}
+
+.ant-corner-mark-top-left:after {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 0;
+    height: 0;
+    border: 6px solid var(--ant-corner-mark-color);
+    border-bottom: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top-left-radius: 2px;
+    content: "";
+    transform: var(--ant-corner-mark-transform);
+}
+
+.ant-corner-mark-bottom-left {
+    position: relative;
+    height: 100%;
+}
+
+.ant-corner-mark-bottom-left:after {
+    position: absolute;
+    bottom: 2px;
+    left: 2px;
+    width: 0;
+    height: 0;
+    border: 6px solid var(--ant-corner-mark-color);
+    border-top: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom-left-radius: 2px;
+    content: "";
+    transform: var(--ant-corner-mark-transform);
+}
+
+.ant-corner-mark-bottom-right {
+    position: relative;
+    height: 100%;
+}
+
+.ant-corner-mark-bottom-right:after {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    width: 0;
+    height: 0;
+    border: 6px solid var(--ant-corner-mark-color);
+    border-top: 6px solid transparent;
+    border-left: 6px solid transparent;
+    border-bottom-right-radius: 2px;
+    content: "";
+    transform: var(--ant-corner-mark-transform);
+}
+
+/* 修复AntdTabs开启tabPane切换动画后滚动条异常问题 */
+.ant-tabs {
+    overflow-x: hidden;
+}
+
+.ant-modal-wrap-overwrite {
+    pointer-events: none;
+}
+
+.ant-tree-draggable-icon {
+    cursor: grab;
+}
+
+/* 确保spin容器高度继承自wrapperClassName */
+.ant-spin-nested-loading>.ant-spin-container {
+    height: inherit;
+}
+
+/* 为AntdButton内嵌元素设置间距 */
+.ant-btn>*:not(:last-child) {
+    margin-right: 0.25em;
+}
+
+.ant-tree-title .ant-rate {
+    font-size: 16px;
+}
+
+/* 针对上传组件允许按钮block模式 */
+.ant-upload-button-block .ant-upload {
+    display: block;
+}
+
+/* 为AntdTag图标元素设置间距 */
+.ant-tag span:not(:first-child) {
+    margin-inline-start: 5px;
+}
+
+/* AntdPopupCard、AntdModal内置显隐动效补丁 */
+@keyframes antZoomBigIn {
+    0% {
+        transform: scale(.8);
+        opacity: 0
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1
+    }
+}
+
+@keyframes antZoomBigOut {
+    0% {
+        transform: scale(1)
+    }
+
+    to {
+        transform: scale(.8);
+        opacity: 0
+    }
+}
+
+.ant-zoom-big-appear,
+.ant-zoom-big-enter,
+.ant-zoom-big-leave {
+    animation-duration: .2s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-zoom-big-appear.ant-zoom-big-appear-active,
+.ant-zoom-big-enter.ant-zoom-big-enter-active {
+    animation-name: antZoomBigIn;
+    animation-play-state: running
+}
+
+.ant-zoom-big-leave.ant-zoom-big-leave-active {
+    animation-name: antZoomBigOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-zoom-big-appear,
+.ant-zoom-big-enter {
+    transform: scale(0);
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
+}
+
+.ant-zoom-big-appear-prepare,
+.ant-zoom-big-enter-prepare {
+    transform: none
+}
+
+.ant-zoom-big-leave {
+    animation-timing-function: cubic-bezier(.78, .14, .15, .86)
+}
+
+.ant-zoom-big-fast-appear,
+.ant-zoom-big-fast-enter,
+.ant-zoom-big-fast-leave {
+    animation-duration: .1s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-zoom-big-fast-appear.ant-zoom-big-fast-appear-active,
+.ant-zoom-big-fast-enter.ant-zoom-big-fast-enter-active {
+    animation-name: antZoomBigIn;
+    animation-play-state: running
+}
+
+.ant-zoom-big-fast-leave.ant-zoom-big-fast-leave-active {
+    animation-name: antZoomBigOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-zoom-big-fast-appear,
+.ant-zoom-big-fast-enter {
+    transform: scale(0);
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
+}
+
+.ant-zoom-big-fast-appear-prepare,
+.ant-zoom-big-fast-enter-prepare {
+    transform: none
+}
+
+.ant-zoom-big-fast-leave {
+    animation-timing-function: cubic-bezier(.78, .14, .15, .86)
+}
+
+@keyframes antSlideLeftIn {
+    0% {
+        transform: scaleX(.8);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+
+    to {
+        transform: scaleX(1);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+}
+
+@keyframes antSlideLeftOut {
+    0% {
+        transform: scaleX(1);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+
+    to {
+        transform: scaleX(.8);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+}
+
+.ant-slide-left-appear,
+.ant-slide-left-enter,
+.ant-slide-left-leave {
+    animation-duration: .2s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-slide-left-appear.ant-slide-left-appear-active,
+.ant-slide-left-enter.ant-slide-left-enter-active {
+    animation-name: antSlideLeftIn;
+    animation-play-state: running
+}
+
+.ant-slide-left-leave.ant-slide-left-leave-active {
+    animation-name: antSlideLeftOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-slide-left-appear,
+.ant-slide-left-enter {
+    transform: scale(0);
+    transform-origin: 0 0;
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.23, 1, .32, 1)
+}
+
+.ant-slide-left-leave {
+    animation-timing-function: cubic-bezier(.755, .05, .855, .06)
+}
+
+@keyframes antSlideRightIn {
+    0% {
+        transform: scaleX(.8);
+        transform-origin: 100% 0;
+        opacity: 0
+    }
+
+    to {
+        transform: scaleX(1);
+        transform-origin: 100% 0;
+        opacity: 1
+    }
+}
+
+@keyframes antSlideRightOut {
+    0% {
+        transform: scaleX(1);
+        transform-origin: 100% 0;
+        opacity: 1
+    }
+
+    to {
+        transform: scaleX(.8);
+        transform-origin: 100% 0;
+        opacity: 0
+    }
+}
+
+.ant-slide-right-appear,
+.ant-slide-right-enter,
+.ant-slide-right-leave {
+    animation-duration: .2s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-slide-right-appear.ant-slide-right-appear-active,
+.ant-slide-right-enter.ant-slide-right-enter-active {
+    animation-name: antSlideRightIn;
+    animation-play-state: running
+}
+
+.ant-slide-right-leave.ant-slide-right-leave-active {
+    animation-name: antSlideRightOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-slide-right-appear,
+.ant-slide-right-enter {
+    transform: scale(0);
+    transform-origin: 0 0;
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.23, 1, .32, 1)
+}
+
+.ant-slide-right-leave {
+    animation-timing-function: cubic-bezier(.755, .05, .855, .06)
+}
+
+@keyframes antMoveLeftIn {
+    0% {
+        transform: translateX(-100%);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+
+    to {
+        transform: translateX(0);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+}
+
+@keyframes antMoveLeftOut {
+    0% {
+        transform: translateX(0);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+
+    to {
+        transform: translateX(-100%);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+}
+
+.ant-move-left-appear,
+.ant-move-left-enter,
+.ant-move-left-leave {
+    animation-duration: .2s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-move-left-appear.ant-move-left-appear-active,
+.ant-move-left-enter.ant-move-left-enter-active {
+    animation-name: antMoveLeftIn;
+    animation-play-state: running
+}
+
+.ant-move-left-leave.ant-move-left-leave-active {
+    animation-name: antMoveLeftOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-move-left-appear,
+.ant-move-left-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
+}
+
+.ant-move-left-leave {
+    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
+}
+
+@keyframes antMoveRightIn {
+    0% {
+        transform: translateX(100%);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+
+    to {
+        transform: translateX(0);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+}
+
+@keyframes antMoveRightOut {
+    0% {
+        transform: translateX(0);
+        transform-origin: 0 0;
+        opacity: 1
+    }
+
+    to {
+        transform: translateX(100%);
+        transform-origin: 0 0;
+        opacity: 0
+    }
+}
+
+.ant-move-right-appear,
+.ant-move-right-enter,
+.ant-move-right-leave {
+    animation-duration: .2s;
+    animation-fill-mode: both;
+    animation-play-state: paused
+}
+
+.ant-move-right-appear.ant-move-right-appear-active,
+.ant-move-right-enter.ant-move-right-enter-active {
+    animation-name: antMoveRightIn;
+    animation-play-state: running
+}
+
+.ant-move-right-leave.ant-move-right-leave-active {
+    animation-name: antMoveRightOut;
+    animation-play-state: running;
+    pointer-events: none
+}
+
+.ant-move-right-appear,
+.ant-move-right-enter {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(.08, .82, .17, 1)
+}
+
+.ant-move-right-leave {
+    animation-timing-function: cubic-bezier(.6, .04, .98, .34)
 }