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

package/lib/cascader/style/index.less

@@ -2,172 +2,38 @@
 @import '../../style/theme.less';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
+@import '../../checkbox/style/mixin';
 
 @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
 
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{cascader-prefix-cls}-checkbox');
+
 .@{cascader-prefix-cls} {
-  .reset-component();
-
-  &-input.@{ant-prefix}-input {
-    // Keep it static for https://github.com/ant-design/ant-design/issues/16738
-    position: static;
-    width: 100%;
-    // https://github.com/ant-design/ant-design/issues/17582
-    padding-right: 24px;
-    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
-    // because input.less will compile after cascader.less
-    background-color: transparent !important;
-    cursor: pointer;
-  }
+  width: 184px;
 
-  &-picker-show-search &-input.@{ant-prefix}-input {
-    position: relative;
+  &-checkbox {
+    top: 0;
+    margin-right: @padding-xs;
   }
 
-  &-picker {
-    .reset-component();
-
-    position: relative;
-    display: inline-block;
-    background-color: @cascader-bg;
-    border-radius: @border-radius-base;
-    outline: 0;
-    cursor: pointer;
-    transition: color 0.3s;
-
-    &-with-value &-label {
-      color: transparent;
-    }
-
-    &-disabled {
-      color: @disabled-color;
-      background: @input-disabled-bg;
-      cursor: not-allowed;
-      .@{cascader-prefix-cls}-input {
-        cursor: not-allowed;
-      }
-    }
-
-    &:focus .@{cascader-prefix-cls}-input {
-      .active();
-    }
-
-    &-borderless .@{cascader-prefix-cls}-input {
-      border-color: transparent !important;
-      box-shadow: none !important;
-    }
-
-    &-show-search&-focused {
-      color: @disabled-color;
-    }
-
-    &-label {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 100%;
-      height: 20px;
-      margin-top: -10px;
-      padding: 0 20px 0 @control-padding-horizontal;
-      overflow: hidden;
-      line-height: 20px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &-clear {
-      position: absolute;
-      top: 50%;
-      right: @control-padding-horizontal;
-      z-index: 2;
-      width: 12px;
-      height: 12px;
-      margin-top: -6px;
-      color: @disabled-color;
-      font-size: @font-size-sm;
-      line-height: 12px;
-      background: @component-background;
-      cursor: pointer;
-      opacity: 0;
-      transition: color 0.3s ease, opacity 0.15s ease;
-      &:hover {
-        color: @text-color-secondary;
+  &-menus {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+
+    &.@{cascader-prefix-cls}-menu-empty {
+      .@{cascader-prefix-cls}-menu {
+        width: 100%;
+        height: auto;
       }
     }
-
-    &:hover &-clear {
-      opacity: 1;
-    }
-
-    // arrow
-    &-arrow {
-      position: absolute;
-      top: 50%;
-      right: @control-padding-horizontal;
-      z-index: 1;
-      width: 12px;
-      height: 12px;
-      margin-top: -6px;
-      color: @disabled-color;
-      font-size: 12px;
-      line-height: 12px;
-    }
   }
 
-  // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
-  &-picker-label:hover + &-input {
-    &:not(.@{cascader-prefix-cls}-picker-disabled &) {
-      .hover();
-    }
-  }
-
-  &-picker-small &-picker-clear,
-  &-picker-small &-picker-arrow {
-    right: @control-padding-horizontal-sm;
-  }
-
-  &-menus {
-    position: absolute;
-    z-index: @zindex-dropdown;
-    font-size: @cascader-dropdown-font-size;
-    white-space: nowrap;
-    background: @cascader-menu-bg;
-    border-radius: @border-radius-base;
-    box-shadow: @box-shadow-base;
-
-    ul,
-    ol {
-      margin: 0;
-      list-style: none;
-    }
-
-    &-empty,
-    &-hidden {
-      display: none;
-    }
-    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
-    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
-      animation-name: antSlideUpIn;
-    }
-
-    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
-    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
-      animation-name: antSlideDownIn;
-    }
-
-    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
-      animation-name: antSlideUpOut;
-    }
-
-    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
-      animation-name: antSlideDownOut;
-    }
-  }
   &-menu {
-    display: inline-block;
     min-width: 111px;
     height: 180px;
     margin: 0;
+    margin: -@dropdown-edge-child-vertical-padding 0;
     padding: @cascader-dropdown-edge-child-vertical-padding 0;
     overflow: auto;
     vertical-align: top;
@@ -176,67 +42,62 @@
       @cascader-menu-border-color-split;
     -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
 
-    &:first-child {
-      border-radius: @border-radius-base 0 0 @border-radius-base;
-    }
-    &:last-child {
-      margin-right: -1px;
-      border-right-color: transparent;
-      border-radius: 0 @border-radius-base @border-radius-base 0;
-    }
-    &:only-child {
-      border-radius: @border-radius-base;
-    }
-  }
-  &-menu-item {
-    padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
-    overflow: hidden;
-    line-height: @cascader-dropdown-line-height;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    transition: all 0.3s;
-    &:hover {
-      background: @item-hover-bg;
-    }
-    &-disabled {
-      color: @disabled-color;
-      cursor: not-allowed;
-      &:hover {
-        background: transparent;
-      }
-    }
-    .@{cascader-prefix-cls}-menu-empty & {
-      color: @disabled-color;
-      cursor: default;
-      pointer-events: none;
-    }
-    &-active:not(&-disabled) {
-      &,
+    &-item {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
+      overflow: hidden;
+      line-height: @cascader-dropdown-line-height;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      transition: all 0.3s;
+
       &:hover {
-        font-weight: @select-item-selected-font-weight;
-        background-color: @cascader-item-selected-bg;
+        background: @item-hover-bg;
       }
-    }
-    &-expand {
-      position: relative;
-      padding-right: 24px;
-    }
 
-    &-expand &-expand-icon,
-    &-loading-icon {
-      position: absolute;
-      right: @control-padding-horizontal;
-      color: @text-color-secondary;
-      font-size: 10px;
+      &-disabled {
+        color: @disabled-color;
+        cursor: not-allowed;
+        &:hover {
+          background: transparent;
+        }
+      }
 
-      .@{cascader-prefix-cls}-menu-item-disabled& {
+      .@{cascader-prefix-cls}-menu-empty & {
         color: @disabled-color;
+        cursor: default;
+        pointer-events: none;
       }
-    }
 
-    & &-keyword {
-      color: @highlight-color;
+      &-active:not(&-disabled) {
+        &,
+        &:hover {
+          font-weight: @select-item-selected-font-weight;
+          background-color: @cascader-item-selected-bg;
+        }
+      }
+
+      &-content {
+        flex: auto;
+      }
+
+      &-expand &-expand-icon,
+      &-loading-icon {
+        margin-left: @padding-xss;
+        color: @text-color-secondary;
+        font-size: 10px;
+
+        .@{cascader-prefix-cls}-menu-item-disabled& {
+          color: @disabled-color;
+        }
+      }
+
+      &-keyword {
+        color: @highlight-color;
+      }
     }
   }
 }

package/lib/cascader/style/rtl.less

@@ -4,93 +4,19 @@
 @import '../../input/style/mixin';
 
 @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
-@picker-rtl-cls: ~'@{cascader-prefix-cls}-picker-rtl';
-@menu-rtl-cls: ~'@{cascader-prefix-cls}-menu-rtl';
 
-.@{cascader-prefix-cls} {
-  &-input.@{ant-prefix}-input {
-    .@{picker-rtl-cls} & {
-      padding-right: @input-padding-horizontal-base;
-      padding-left: 24px;
-      text-align: right;
-    }
-  }
-
-  &-picker {
-    &-rtl {
-      direction: rtl;
-    }
-
-    &-label {
-      .@{picker-rtl-cls} & {
-        padding: 0 @control-padding-horizontal 0 20px;
-        text-align: right;
-      }
-    }
-
-    &-clear {
-      .@{picker-rtl-cls} & {
-        right: auto;
-        left: @control-padding-horizontal;
-      }
-    }
-
-    &-arrow {
-      .@{picker-rtl-cls} & {
-        right: auto;
-        left: @control-padding-horizontal;
-      }
-    }
-  }
-
-  &-picker-small &-picker-clear,
-  &-picker-small &-picker-arrow {
-    .@{picker-rtl-cls}& {
-      right: auto;
-      left: @control-padding-horizontal-sm;
-    }
-  }
-
-  &-menu {
-    &-rtl & {
-      direction: rtl;
-      border-right: none;
-      border-left: @border-width-base @border-style-base @border-color-split;
-      &:first-child {
-        border-radius: 0 @border-radius-base @border-radius-base 0;
-      }
-      &:last-child {
-        margin-right: 0;
-        margin-left: -1px;
-        border-left-color: transparent;
-        border-radius: @border-radius-base 0 0 @border-radius-base;
-      }
-      &:only-child {
-        border-radius: @border-radius-base;
-      }
-    }
-  }
-
-  &-menu-item {
-    &-expand {
-      .@{menu-rtl-cls} & {
-        padding-right: @control-padding-horizontal;
-        padding-left: 24px;
-      }
-    }
-
-    &-expand &-expand-icon,
+.@{cascader-prefix-cls}-rtl {
+  .@{cascader-prefix-cls}-menu-item {
+    &-expand-icon,
     &-loading-icon {
-      .@{menu-rtl-cls} & {
-        right: auto;
-        left: @control-padding-horizontal;
-      }
+      margin-right: @padding-xss;
+      margin-left: 0;
     }
+  }
 
-    &-loading-icon {
-      .@{menu-rtl-cls} & {
-        transform: scaleY(-1);
-      }
-    }
+  .@{cascader-prefix-cls}-checkbox {
+    top: 0;
+    margin-right: 0;
+    margin-left: @padding-xs;
   }
 }

package/lib/drawer/style/index.css

@@ -175,7 +175,7 @@
 }
 .ant-drawer-footer {
   flex-shrink: 0;
-  padding: 10px 16px;
+  padding: 16px 24px;
   border-top: 1px solid #eeeeee;
 }
 .ant-drawer-mask {

package/lib/input-number/style/index.css

@@ -472,7 +472,9 @@ textarea.ant-input-number {
   border-radius: 4px;
   outline: 0;
   transition: all 0.3s linear;
-  -moz-appearance: textfield !important;
+  -webkit-appearance: textfield !important;
+     -moz-appearance: textfield !important;
+          appearance: textfield !important;
 }
 .ant-input-number-input::-moz-placeholder {
   opacity: 1;
@@ -495,7 +497,9 @@ textarea.ant-input-number {
 .ant-input-number-input[type='number']::-webkit-inner-spin-button,
 .ant-input-number-input[type='number']::-webkit-outer-spin-button {
   margin: 0;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: none;
+  appearance: none;
 }
 .ant-input-number-lg {
   padding: 0;
@@ -524,6 +528,9 @@ textarea.ant-input-number {
 }
 .ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-up-inner,
 .ant-input-number-handler-wrap .ant-input-number-handler .ant-input-number-handler-down-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-width: auto;
   margin-right: 0;
   font-size: 7px;
@@ -584,16 +591,23 @@ textarea.ant-input-number {
 .ant-input-number-rtl {
   direction: rtl;
 }
+.ant-input-number-rtl .ant-input-number-handler {
+  border-right: 1px solid #d2d2d2;
+  border-left: 0;
+}
 .ant-input-number-rtl .ant-input-number-handler-wrap {
   right: auto;
   left: 0;
-  border-right: 1px solid #d2d2d2;
-  border-left: 0;
-  border-radius: 4px 0 0 4px;
 }
 .ant-input-number-rtl.ant-input-number-borderless .ant-input-number-handler-wrap {
   border-right-width: 0;
 }
+.ant-input-number-rtl .ant-input-number-handler-up {
+  border-top-right-radius: 0;
+}
+.ant-input-number-rtl .ant-input-number-handler-down {
+  border-bottom-right-radius: 0;
+}
 .ant-input-number-rtl .ant-input-number-input {
   direction: ltr;
   text-align: right;

package/lib/input-number/style/index.less

@@ -14,6 +14,7 @@
   &-group {
     .reset-component();
     .input-group(~'@{input-number-prefix-cls}');
+
     &-wrapper {
       display: inline-block;
       text-align: start;
@@ -38,11 +39,14 @@
     font-weight: bold;
     line-height: 0;
     text-align: center;
-    border-left: @border-width-base @border-style-base @input-number-handler-border-color;
+    border-left: @border-width-base @border-style-base
+      @input-number-handler-border-color;
     transition: all 0.1s linear;
+
     &:active {
       background: @input-number-handler-active-bg;
     }
+
     &:hover &-up-inner,
     &:hover &-down-inner {
       color: @input-number-handler-hover-bg;
@@ -101,13 +105,15 @@
     border-radius: @border-radius-base;
     outline: 0;
     transition: all 0.3s linear;
-    -moz-appearance: textfield !important;
+    appearance: textfield !important;
     .placeholder();
 
     &[type='number']::-webkit-inner-spin-button,
     &[type='number']::-webkit-outer-spin-button {
       margin: 0;
+      /* stylelint-disable-next-line property-no-vendor-prefix */
       -webkit-appearance: none;
+      appearance: none;
     }
   }
 
@@ -146,6 +152,9 @@
     .@{input-number-prefix-cls}-handler {
       .@{input-number-prefix-cls}-handler-up-inner,
       .@{input-number-prefix-cls}-handler-down-inner {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         min-width: auto;
         margin-right: 0;
         font-size: 7px;
@@ -169,11 +178,13 @@
   &-handler-up {
     border-top-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       margin-top: -5px;
       text-align: center;
     }
+
     &:hover {
       height: 60% !important;
     }
@@ -184,11 +195,13 @@
     border-top: @border-width-base @border-style-base @border-color-base;
     border-bottom-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       text-align: center;
       transform: translateY(-50%);
     }
+
     &:hover {
       height: 60% !important;
     }

package/lib/input-number/style/rtl.less

@@ -9,17 +9,34 @@
     direction: rtl;
   }
 
-  &-handler-wrap {
+  &-handler {
     .@{input-number-prefix-cls}-rtl & {
-      right: auto;
-      left: 0;
-      border-right: @border-width-base @border-style-base @input-number-handler-border-color;
+      border-right: @border-width-base @border-style-base
+        @input-number-handler-border-color;
       border-left: 0;
-      border-radius: @border-radius-base 0 0 @border-radius-base;
     }
 
-    .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
-      border-right-width: 0;
+    &-wrap {
+      .@{input-number-prefix-cls}-rtl & {
+        right: auto;
+        left: 0;
+      }
+
+      .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
+        border-right-width: 0;
+      }
+    }
+
+    &-up {
+      .@{input-number-prefix-cls}-rtl & {
+        border-top-right-radius: 0;
+      }
+    }
+
+    &-down {
+      .@{input-number-prefix-cls}-rtl & {
+        border-bottom-right-radius: 0;
+      }
     }
   }
 

package/lib/modal/style/index.css

@@ -64,7 +64,7 @@
   font-size: 16px;
   line-height: 22px;
   word-wrap: break-word;
-  margin-left: 10px;
+  margin-left: 14px;
 }
 .ant-modal-content {
   position: relative;
@@ -93,11 +93,11 @@
 }
 .ant-modal-close-x {
   display: block;
-  width: 49px;
-  height: 49px;
+  width: 63px;
+  height: 63px;
   font-size: 16px;
   font-style: normal;
-  line-height: 49px;
+  line-height: 63px;
   text-align: center;
   text-transform: none;
   text-rendering: auto;
@@ -108,7 +108,7 @@
   color: rgba(0, 0, 0, 0.75);
 }
 .ant-modal-header {
-  padding: 13px 20px;
+  padding: 20px 20px;
   color: #4c4c4c;
   background: #fff;
   border-bottom: 1px solid #eeeeee;
@@ -121,16 +121,17 @@
   height: 15px;
   background: #2c68ff;
   position: absolute;
-  top: 17px;
+  top: 50%;
+  margin-top: -7.5px;
 }
 .ant-modal-body {
-  padding: 20px;
+  padding: 24px;
   font-size: 14px;
   line-height: 1.5715;
   word-wrap: break-word;
 }
 .ant-modal-footer {
-  padding: 10px 16px;
+  padding: 16px 24px;
   text-align: right;
   background: transparent;
   border-top: 1px solid #eeeeee;
@@ -172,7 +173,7 @@
   display: none;
 }
 .ant-modal-confirm .ant-modal-body {
-  padding: 28px 28px 20px;
+  padding: 32px 32px 24px;
 }
 .ant-modal-confirm-body-wrapper::before {
   display: table;

package/lib/modal/style/modal.less

@@ -22,7 +22,7 @@
     font-size: @modal-header-title-font-size;
     line-height: @modal-header-title-line-height;
     word-wrap: break-word;
-    margin-left: 10px;
+    margin-left: 14px;
   }
 
   &-content {
@@ -85,7 +85,8 @@
       height: 15px;
       background: @primary-color;
       position: absolute;
-      top: 17px;
+      top: 50%;
+      margin-top: -7.5px;
     }
   }
 

package/lib/popover/style/index.css

@@ -271,10 +271,10 @@
   background-color: #52c41a;
 }
 .ant-popover-blue .ant-popover-inner {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-blue .ant-popover-arrow-content {
-  background-color: #1890ff;
+  background-color: #2c68ff;
 }
 .ant-popover-geekblue .ant-popover-inner {
   background-color: #2f54eb;