@fle-ui/next 1.0.3 → 1.0.4-alpha.0

package/es/cascader/style/css.js

@@ -2,4 +2,4 @@ import '../../style/index.css';
 import './index.css'; // style dependencies
 
 import '../../empty/style/css';
-import '../../input/style/css';
+import '../../select/style/css';

package/es/cascader/style/index.css

@@ -2,7 +2,27 @@
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
 /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.ant-cascader {
+@-webkit-keyframes antCheckboxEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+@keyframes antCheckboxEffect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+.ant-cascader-checkbox {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -12,18 +32,123 @@
   line-height: 1.5715;
   list-style: none;
   font-feature-settings: 'tnum';
+  position: relative;
+  top: 0.2em;
+  line-height: 1;
+  white-space: nowrap;
+  outline: none;
+  cursor: pointer;
+}
+.ant-cascader-checkbox-wrapper:hover .ant-cascader-checkbox-inner,
+.ant-cascader-checkbox:hover .ant-cascader-checkbox-inner,
+.ant-cascader-checkbox-input:focus + .ant-cascader-checkbox-inner {
+  border-color: #2c68ff;
+}
+.ant-cascader-checkbox-checked::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #2c68ff;
+  border-radius: 4px;
+  visibility: hidden;
+  -webkit-animation: antCheckboxEffect 0.36s ease-in-out;
+          animation: antCheckboxEffect 0.36s ease-in-out;
+  -webkit-animation-fill-mode: backwards;
+          animation-fill-mode: backwards;
+  content: '';
+}
+.ant-cascader-checkbox:hover::after,
+.ant-cascader-checkbox-wrapper:hover .ant-cascader-checkbox::after {
+  visibility: visible;
+}
+.ant-cascader-checkbox-inner {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 16px;
+  height: 16px;
+  direction: ltr;
+  background-color: #fff;
+  border: 1px solid #d2d2d2;
+  border-radius: 4px;
+  border-collapse: separate;
+  transition: all 0.3s;
 }
-.ant-cascader-input.ant-input {
-  position: static;
+.ant-cascader-checkbox-inner::after {
+  position: absolute;
+  top: 50%;
+  left: 21.5%;
+  display: table;
+  width: 5.71428571px;
+  height: 9.14285714px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg) scale(0) translate(-50%, -50%);
+  opacity: 0;
+  transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
+  content: ' ';
+}
+.ant-cascader-checkbox-input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
   width: 100%;
-  padding-right: 24px;
-  background-color: transparent !important;
+  height: 100%;
   cursor: pointer;
+  opacity: 0;
 }
-.ant-cascader-picker-show-search .ant-cascader-input.ant-input {
-  position: relative;
+.ant-cascader-checkbox-checked .ant-cascader-checkbox-inner::after {
+  position: absolute;
+  display: table;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  opacity: 1;
+  transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+  content: ' ';
+}
+.ant-cascader-checkbox-checked .ant-cascader-checkbox-inner {
+  background-color: #2c68ff;
+  border-color: #2c68ff;
 }
-.ant-cascader-picker {
+.ant-cascader-checkbox-disabled {
+  cursor: not-allowed;
+}
+.ant-cascader-checkbox-disabled.ant-cascader-checkbox-checked .ant-cascader-checkbox-inner::after {
+  border-color: #a9a9a9;
+  -webkit-animation-name: none;
+          animation-name: none;
+}
+.ant-cascader-checkbox-disabled .ant-cascader-checkbox-input {
+  cursor: not-allowed;
+}
+.ant-cascader-checkbox-disabled .ant-cascader-checkbox-inner {
+  background-color: #f1f1f1;
+  border-color: #d2d2d2 !important;
+}
+.ant-cascader-checkbox-disabled .ant-cascader-checkbox-inner::after {
+  border-color: #f1f1f1;
+  border-collapse: separate;
+  -webkit-animation-name: none;
+          animation-name: none;
+}
+.ant-cascader-checkbox-disabled + span {
+  color: #a9a9a9;
+  cursor: not-allowed;
+}
+.ant-cascader-checkbox-disabled:hover::after,
+.ant-cascader-checkbox-wrapper:hover .ant-cascader-checkbox-disabled::after {
+  visibility: hidden;
+}
+.ant-cascader-checkbox-wrapper {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -33,134 +158,88 @@
   line-height: 1.5715;
   list-style: none;
   font-feature-settings: 'tnum';
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  border-radius: 4px;
-  outline: 0;
+  display: inline-flex;
+  align-items: baseline;
+  line-height: unset;
   cursor: pointer;
-  transition: color 0.3s;
 }
-.ant-cascader-picker-with-value .ant-cascader-picker-label {
-  color: transparent;
+.ant-cascader-checkbox-wrapper::after {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  content: '\a0';
 }
-.ant-cascader-picker-disabled {
-  color: #a9a9a9;
-  background: #f1f1f1;
+.ant-cascader-checkbox-wrapper.ant-cascader-checkbox-wrapper-disabled {
   cursor: not-allowed;
 }
-.ant-cascader-picker-disabled .ant-cascader-input {
-  cursor: not-allowed;
+.ant-cascader-checkbox-wrapper + .ant-cascader-checkbox-wrapper {
+  margin-left: 8px;
 }
-.ant-cascader-picker:focus .ant-cascader-input {
-  border-color: #548aff;
-  box-shadow: 0 0 0 2px rgba(44, 104, 255, 0.2);
-  border-right-width: 1px !important;
-  outline: 0;
+.ant-cascader-checkbox + span {
+  padding-right: 8px;
+  padding-left: 8px;
 }
-.ant-cascader-picker-borderless .ant-cascader-input {
-  border-color: transparent !important;
-  box-shadow: none !important;
+.ant-cascader-checkbox-group {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #4c4c4c;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: inline-block;
 }
-.ant-cascader-picker-show-search.ant-cascader-picker-focused {
-  color: #a9a9a9;
+.ant-cascader-checkbox-group-item {
+  margin-right: 8px;
 }
-.ant-cascader-picker-label {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  margin-top: -10px;
-  padding: 0 20px 0 12px;
-  overflow: hidden;
-  line-height: 20px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.ant-cascader-checkbox-group-item:last-child {
+  margin-right: 0;
 }
-.ant-cascader-picker-clear {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  z-index: 2;
-  width: 12px;
-  height: 12px;
-  margin-top: -6px;
-  color: #a9a9a9;
-  font-size: 12px;
-  line-height: 12px;
-  background: #fff;
-  cursor: pointer;
-  opacity: 0;
-  transition: color 0.3s ease, opacity 0.15s ease;
+.ant-cascader-checkbox-group-item + .ant-cascader-checkbox-group-item {
+  margin-left: 0;
 }
-.ant-cascader-picker-clear:hover {
-  color: #a9a9a9;
+.ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner {
+  background-color: #fff;
+  border-color: #d2d2d2;
 }
-.ant-cascader-picker:hover .ant-cascader-picker-clear {
+.ant-cascader-checkbox-indeterminate .ant-cascader-checkbox-inner::after {
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background-color: #2c68ff;
+  border: 0;
+  transform: translate(-50%, -50%) scale(1);
   opacity: 1;
+  content: ' ';
 }
-.ant-cascader-picker-arrow {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  z-index: 1;
-  width: 12px;
-  height: 12px;
-  margin-top: -6px;
-  color: #a9a9a9;
-  font-size: 12px;
-  line-height: 12px;
+.ant-cascader-checkbox-indeterminate.ant-cascader-checkbox-disabled .ant-cascader-checkbox-inner::after {
+  background-color: #a9a9a9;
+  border-color: #a9a9a9;
 }
-.ant-cascader-picker-label:hover + .ant-cascader-input:not(.ant-cascader-picker-disabled .ant-cascader-picker-label:hover + .ant-cascader-input) {
-  border-color: #548aff;
-  border-right-width: 1px !important;
+.ant-cascader {
+  width: 184px;
 }
-.ant-cascader-picker-small .ant-cascader-picker-clear,
-.ant-cascader-picker-small .ant-cascader-picker-arrow {
-  right: 8px;
+.ant-cascader-checkbox {
+  top: 0;
+  margin-right: 8px;
 }
 .ant-cascader-menus {
-  position: absolute;
-  z-index: 1050;
-  font-size: 14px;
-  white-space: nowrap;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
 }
-.ant-cascader-menus ul,
-.ant-cascader-menus ol {
-  margin: 0;
-  list-style: none;
-}
-.ant-cascader-menus-empty,
-.ant-cascader-menus-hidden {
-  display: none;
-}
-.ant-cascader-menus.ant-slide-up-enter.ant-slide-up-enter-active.ant-cascader-menus-placement-bottomLeft,
-.ant-cascader-menus.ant-slide-up-appear.ant-slide-up-appear-active.ant-cascader-menus-placement-bottomLeft {
-  -webkit-animation-name: antSlideUpIn;
-          animation-name: antSlideUpIn;
-}
-.ant-cascader-menus.ant-slide-up-enter.ant-slide-up-enter-active.ant-cascader-menus-placement-topLeft,
-.ant-cascader-menus.ant-slide-up-appear.ant-slide-up-appear-active.ant-cascader-menus-placement-topLeft {
-  -webkit-animation-name: antSlideDownIn;
-          animation-name: antSlideDownIn;
-}
-.ant-cascader-menus.ant-slide-up-leave.ant-slide-up-leave-active.ant-cascader-menus-placement-bottomLeft {
-  -webkit-animation-name: antSlideUpOut;
-          animation-name: antSlideUpOut;
-}
-.ant-cascader-menus.ant-slide-up-leave.ant-slide-up-leave-active.ant-cascader-menus-placement-topLeft {
-  -webkit-animation-name: antSlideDownOut;
-          animation-name: antSlideDownOut;
+.ant-cascader-menus.ant-cascader-menu-empty .ant-cascader-menu {
+  width: 100%;
+  height: auto;
 }
 .ant-cascader-menu {
-  display: inline-block;
   min-width: 111px;
   height: 180px;
   margin: 0;
+  margin: -4px 0;
   padding: 4px 0;
   overflow: auto;
   vertical-align: top;
@@ -168,18 +247,10 @@
   border-right: 1px solid #eeeeee;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 }
-.ant-cascader-menu:first-child {
-  border-radius: 4px 0 0 4px;
-}
-.ant-cascader-menu:last-child {
-  margin-right: -1px;
-  border-right-color: transparent;
-  border-radius: 0 4px 4px 0;
-}
-.ant-cascader-menu:only-child {
-  border-radius: 4px;
-}
 .ant-cascader-menu-item {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
   padding: 5px 12px;
   overflow: hidden;
   line-height: 22px;
@@ -208,14 +279,12 @@
   font-weight: 600;
   background-color: #f0f7ff;
 }
-.ant-cascader-menu-item-expand {
-  position: relative;
-  padding-right: 24px;
+.ant-cascader-menu-item-content {
+  flex: auto;
 }
 .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon,
 .ant-cascader-menu-item-loading-icon {
-  position: absolute;
-  right: 12px;
+  margin-left: 4px;
   color: #a9a9a9;
   font-size: 10px;
 }
@@ -223,60 +292,16 @@
 .ant-cascader-menu-item-disabled.ant-cascader-menu-item-loading-icon {
   color: #a9a9a9;
 }
-.ant-cascader-menu-item .ant-cascader-menu-item-keyword {
+.ant-cascader-menu-item-keyword {
   color: #ff4d4f;
 }
-.ant-cascader-picker-rtl .ant-cascader-input.ant-input {
-  padding-right: 11px;
-  padding-left: 24px;
-  text-align: right;
-}
-.ant-cascader-picker-rtl {
-  direction: rtl;
-}
-.ant-cascader-picker-rtl .ant-cascader-picker-label {
-  padding: 0 12px 0 20px;
-  text-align: right;
-}
-.ant-cascader-picker-rtl .ant-cascader-picker-clear {
-  right: auto;
-  left: 12px;
-}
-.ant-cascader-picker-rtl .ant-cascader-picker-arrow {
-  right: auto;
-  left: 12px;
-}
-.ant-cascader-picker-rtl.ant-cascader-picker-small .ant-cascader-picker-clear,
-.ant-cascader-picker-rtl.ant-cascader-picker-small .ant-cascader-picker-arrow {
-  right: auto;
-  left: 8px;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu {
-  direction: rtl;
-  border-right: none;
-  border-left: 1px solid #eeeeee;
+.ant-cascader-rtl .ant-cascader-menu-item-expand-icon,
+.ant-cascader-rtl .ant-cascader-menu-item-loading-icon {
+  margin-right: 4px;
+  margin-left: 0;
 }
-.ant-cascader-menu-rtl .ant-cascader-menu:first-child {
-  border-radius: 0 4px 4px 0;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu:last-child {
+.ant-cascader-rtl .ant-cascader-checkbox {
+  top: 0;
   margin-right: 0;
-  margin-left: -1px;
-  border-left-color: transparent;
-  border-radius: 4px 0 0 4px;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu:only-child {
-  border-radius: 4px;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu-item-expand {
-  padding-right: 12px;
-  padding-left: 24px;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon,
-.ant-cascader-menu-rtl .ant-cascader-menu-item-loading-icon {
-  right: auto;
-  left: 12px;
-}
-.ant-cascader-menu-rtl .ant-cascader-menu-item-loading-icon {
-  transform: scaleY(-1);
+  margin-left: 8px;
 }

package/es/cascader/style/index.d.ts

@@ -1,4 +1,4 @@
 import '../../style/index.less';
 import './index.less';
 import '../../empty/style';
-import '../../input/style';
+import '../../select/style';

package/es/cascader/style/index.js

@@ -2,4 +2,4 @@ import '../../style/index.less';
 import './index.less'; // style dependencies
 
 import '../../empty/style';
-import '../../input/style';
+import '../../select/style';