@fle-ui/next 1.0.0-alpha.8 → 1.0.0-alpha.9

package/lib/input/style/index.less

@@ -1,3 +1,63 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
+@import './mixin';
+@import './affix';
+@import './allow-clear';
 
-@import './index-pure.less';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
+// Input styles
+.@{input-prefix-cls} {
+  .reset-component();
+  .input();
+
+  //== Style for input-group: input with label, with button or dropdown...
+  &-group {
+    .reset-component();
+    .input-group(~'@{input-prefix-cls}');
+    &-wrapper {
+      display: inline-block;
+      width: 100%;
+      text-align: start;
+      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
+    }
+  }
+
+  &-password-icon {
+    color: @text-color-secondary;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @input-icon-hover-color;
+    }
+  }
+
+  &[type='color'] {
+    height: @input-height-base;
+
+    &.@{input-prefix-cls}-lg {
+      height: @input-height-lg;
+    }
+    &.@{input-prefix-cls}-sm {
+      height: @input-height-sm;
+      padding-top: 3px;
+      padding-bottom: 3px;
+    }
+  }
+
+  &-textarea {
+    &-show-count::after {
+      float: right;
+      color: @text-color-secondary;
+      white-space: nowrap;
+      content: attr(data-count);
+      pointer-events: none;
+    }
+  }
+}
+
+@import './search-input';
+@import './rtl';
+@import './IE11';

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

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.css");
+require("../../style/index.css");
 
 require("./index.css");

package/lib/input-number/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/default.less';
+import '../../style/index.less';
 import './index.less';

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

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.less");
+require("../../style/index.less");
 
 require("./index.less");

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

@@ -1,3 +1,222 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
 
-@import './index-pure.less';
+@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+@form-item-prefix-cls: ~'@{ant-prefix}-form-item';
+
+.@{input-number-prefix-cls} {
+  .reset-component();
+  .input();
+
+  //== Style for input-group: input with label, with button or dropdown...
+  &-group {
+    .reset-component();
+    .input-group(~'@{input-number-prefix-cls}');
+    &-wrapper {
+      display: inline-block;
+      text-align: start;
+      vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
+    }
+  }
+
+  display: inline-block;
+  width: 90px;
+  margin: 0;
+  padding: 0;
+  border: @border-width-base @border-style-base @border-color-base;
+  border-radius: @border-radius-base;
+
+  &-handler {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 50%;
+    overflow: hidden;
+    color: @text-color-secondary;
+    font-weight: bold;
+    line-height: 0;
+    text-align: center;
+    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;
+    }
+  }
+
+  &-handler-up-inner,
+  &-handler-down-inner {
+    .iconfont-mixin();
+
+    position: absolute;
+    right: 4px;
+    width: 12px;
+    height: 12px;
+    color: @text-color-secondary;
+    line-height: 12px;
+    transition: all 0.1s linear;
+    user-select: none;
+  }
+
+  &:hover {
+    .hover(@input-number-hover-border-color);
+    & + .@{form-item-prefix-cls}-children-icon {
+      opacity: 0;
+      transition: opacity 0.24s linear 0.24s;
+    }
+  }
+
+  &-focused {
+    .active();
+  }
+
+  &-disabled {
+    .disabled();
+    .@{input-number-prefix-cls}-input {
+      cursor: not-allowed;
+    }
+    .@{input-number-prefix-cls}-handler-wrap {
+      display: none;
+    }
+  }
+
+  &-readonly {
+    .@{input-number-prefix-cls}-handler-wrap {
+      display: none;
+    }
+  }
+
+  &-input {
+    width: 100%;
+    height: @input-height-base - 2px;
+    padding: 0 @control-padding-horizontal - 1px;
+    text-align: left;
+    background-color: transparent;
+    border: 0;
+    border-radius: @border-radius-base;
+    outline: 0;
+    transition: all 0.3s linear;
+    -moz-appearance: textfield !important;
+    .placeholder();
+
+    &[type='number']::-webkit-inner-spin-button,
+    &[type='number']::-webkit-outer-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+    }
+  }
+
+  &-lg {
+    padding: 0;
+    font-size: @font-size-lg;
+
+    input {
+      height: @input-height-lg - 2px;
+    }
+  }
+
+  &-sm {
+    padding: 0;
+
+    input {
+      height: @input-height-sm - 2px;
+      padding: 0 @control-padding-horizontal-sm - 1px;
+    }
+  }
+
+  &-handler-wrap {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 22px;
+    height: 100%;
+    background: @input-number-handler-bg;
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+    opacity: 0;
+    transition: opacity 0.24s linear 0.1s;
+
+    // Fix input number inside Menu makes icon too large
+    // We arise the selector priority by nest selector here
+    // https://github.com/ant-design/ant-design/issues/14367
+    .@{input-number-prefix-cls}-handler {
+      .@{input-number-prefix-cls}-handler-up-inner,
+      .@{input-number-prefix-cls}-handler-down-inner {
+        min-width: auto;
+        margin-right: 0;
+        font-size: 7px;
+      }
+    }
+
+    .@{input-number-prefix-cls}-borderless & {
+      border-left-width: 0;
+    }
+  }
+
+  &-handler-wrap:hover &-handler {
+    height: 40%;
+  }
+
+  &:hover &-handler-wrap,
+  &-focused &-handler-wrap {
+    opacity: 1;
+  }
+
+  &-handler-up {
+    border-top-right-radius: @border-radius-base;
+    cursor: pointer;
+    &-inner {
+      top: 50%;
+      margin-top: -5px;
+      text-align: center;
+    }
+    &:hover {
+      height: 60% !important;
+    }
+  }
+
+  &-handler-down {
+    top: 0;
+    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;
+    }
+    .@{input-number-prefix-cls}-borderless & {
+      border-top-width: 0;
+    }
+  }
+
+  &-handler-up-disabled,
+  &-handler-down-disabled {
+    cursor: not-allowed;
+  }
+
+  &-handler-up-disabled:hover &-handler-up-inner,
+  &-handler-down-disabled:hover &-handler-down-inner {
+    color: @disabled-color;
+  }
+
+  &-borderless {
+    box-shadow: none;
+  }
+
+  // ===================== Out Of Range =====================
+  &-out-of-range {
+    input {
+      color: @error-color;
+    }
+  }
+}
+
+@import './rtl';

package/lib/layout/style/css.js

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.css");
+require("../../style/index.css");
 
 require("./index.css");

package/lib/layout/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/default.less';
+import '../../style/index.less';
 import './index.less';

package/lib/layout/style/index.js

@@ -1,5 +1,5 @@
 "use strict";
 
-require("../../style/default.less");
+require("../../style/index.less");
 
 require("./index.less");

package/lib/layout/style/index.less

@@ -1,3 +1,144 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@layout-prefix-cls: ~'@{ant-prefix}-layout';
+@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
+
+.@{layout-prefix-cls} {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;
+  background: @layout-body-background;
+
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
+  &&-has-sider {
+    flex-direction: row;
+
+    > .@{layout-prefix-cls},
+    > .@{layout-prefix-cls}-content {
+      width: 0; // https://segmentfault.com/a/1190000019498300
+    }
+  }
+
+  &-header,
+  &-footer {
+    flex: 0 0 auto;
+  }
+
+  &-header {
+    height: @layout-header-height;
+    padding: @layout-header-padding;
+    color: @layout-header-color;
+    line-height: @layout-header-height;
+    background: @layout-header-background;
+  }
+
+  &-footer {
+    padding: @layout-footer-padding;
+    color: @text-color;
+    font-size: @font-size-base;
+    background: @layout-footer-background;
+  }
+
+  &-content {
+    flex: auto;
+    /* fix firefox can't set height smaller than content on flex item */
+    min-height: 0;
+  }
+
+  &-sider {
+    position: relative;
+
+    /* fix firefox can't set width smaller than content on flex item */
+    min-width: 0;
+    background: @layout-sider-background;
+    transition: all 0.2s;
+
+    &-children {
+      height: 100%;
+      margin-top: -0.1px;
+      // Hack for fixing margin collaspe bug
+      // https://github.com/ant-design/ant-design/issues/7967
+      // solution from https://stackoverflow.com/a/33132624/3040605
+      padding-top: 0.1px;
+
+      .@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
+        width: auto;
+      }
+    }
+
+    &-has-trigger {
+      padding-bottom: @layout-trigger-height;
+    }
+
+    &-right {
+      order: 1;
+    }
+
+    &-trigger {
+      position: fixed;
+      bottom: 0;
+      z-index: 1;
+      height: @layout-trigger-height;
+      color: @layout-trigger-color;
+      line-height: @layout-trigger-height;
+      text-align: center;
+      background: @layout-trigger-background;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    &-zero-width {
+      > * {
+        overflow: hidden;
+      }
+
+      &-trigger {
+        position: absolute;
+        top: @layout-header-height;
+        right: -@layout-zero-trigger-width;
+        z-index: 1;
+        width: @layout-zero-trigger-width;
+        height: @layout-zero-trigger-height;
+        color: @layout-trigger-color;
+        font-size: (@layout-zero-trigger-width / 2);
+        line-height: @layout-zero-trigger-height;
+        text-align: center;
+        background: @layout-sider-background;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+        cursor: pointer;
+        transition: background 0.3s ease;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: transparent;
+          transition: all 0.3s;
+          content: '';
+        }
+
+        &:hover::after {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &-right {
+          left: -@layout-zero-trigger-width;
+          border-radius: @border-radius-base 0 0 @border-radius-base;
+        }
+      }
+    }
+  }
+}
+
+@import './light';
+@import './rtl';

package/lib/list/style/css.js

@@ -1,6 +1,6 @@
 "use strict";
 
-require("../../style/default.css");
+require("../../style/index.css");
 
 require("./index.css");
 

package/lib/list/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/default.less';
+import '../../style/index.less';
 import './index.less';
 import '../../empty/style';
 import '../../spin/style';

package/lib/list/style/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-require("../../style/default.less");
+require("../../style/index.less");
 
 require("./index.less");