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

package/es/select/style/index.less

@@ -1,3 +1,318 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/theme.less';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
 
-@import './index-pure.less';
+@import './single';
+@import './multiple';
+
+@select-prefix-cls: ~'@{ant-prefix}-select';
+@select-height-without-border: @input-height-base - 2 * @border-width-base;
+@select-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
+
+.select-selector() {
+  position: relative;
+  background-color: @select-background;
+  border: @border-width-base @border-style-base @select-border-color;
+  border-radius: @border-radius-base;
+  transition: all 0.3s @ease-in-out;
+
+  input {
+    cursor: pointer;
+  }
+
+  .@{select-prefix-cls}-show-search& {
+    cursor: text;
+
+    input {
+      cursor: auto;
+    }
+  }
+
+  .@{select-prefix-cls}-focused:not(.@{select-prefix-cls}-disabled)& {
+    .active();
+  }
+
+  .@{select-prefix-cls}-disabled& {
+    color: @disabled-color;
+    background: @input-disabled-bg;
+    cursor: not-allowed;
+
+    .@{select-prefix-cls}-multiple& {
+      background: @select-multiple-disabled-background;
+    }
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+}
+
+/* Reset search input style */
+.select-search-input-without-border() {
+  .@{select-prefix-cls}-selection-search-input {
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    appearance: none;
+
+    &::-webkit-search-cancel-button {
+      display: none;
+      -webkit-appearance: none;
+    }
+  }
+}
+
+.@{select-prefix-cls} {
+  .reset-component();
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  &:not(&-customize-input) &-selector {
+    .select-selector();
+    .select-search-input-without-border();
+  }
+
+  &:not(&-disabled):hover &-selector {
+    .hover();
+  }
+
+  // ======================== Selection ========================
+  &-selection-item {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    // IE11 css hack. `*::-ms-backdrop,` is a must have
+    @media all and (-ms-high-contrast: none) {
+      *::-ms-backdrop,
+      & {
+        flex: auto;
+      }
+    }
+  }
+
+  // ======================= Placeholder =======================
+  &-selection-placeholder {
+    flex: 1;
+    overflow: hidden;
+    color: @input-placeholder-color;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+
+    // IE11 css hack. `*::-ms-backdrop,` is a must have
+    @media all and (-ms-high-contrast: none) {
+      *::-ms-backdrop,
+      & {
+        flex: auto;
+      }
+    }
+  }
+
+  // ========================== Arrow ==========================
+  &-arrow {
+    .iconfont-mixin();
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal - 1px;
+    width: @font-size-sm;
+    height: @font-size-sm;
+    margin-top: (-@font-size-sm / 2);
+    color: @disabled-color;
+    font-size: @font-size-sm;
+    line-height: 1;
+    text-align: center;
+    pointer-events: none;
+
+    .@{iconfont-css-prefix} {
+      vertical-align: top;
+      transition: transform 0.3s;
+
+      > svg {
+        vertical-align: top;
+      }
+
+      &:not(.@{select-prefix-cls}-suffix) {
+        pointer-events: auto;
+      }
+    }
+
+    .@{select-prefix-cls}-disabled & {
+      cursor: not-allowed;
+    }
+  }
+
+  // ========================== Clear ==========================
+  &-clear {
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal - 1px;
+    z-index: 1;
+    display: inline-block;
+    width: @font-size-sm;
+    height: @font-size-sm;
+    margin-top: (-@font-size-sm / 2);
+    color: @disabled-color;
+    font-size: @font-size-sm;
+    font-style: normal;
+    line-height: 1;
+    text-align: center;
+    text-transform: none;
+    background: @select-clear-background;
+    cursor: pointer;
+    opacity: 0;
+    transition: color 0.3s ease, opacity 0.15s ease;
+    text-rendering: auto;
+    &::before {
+      display: block;
+    }
+    &:hover {
+      color: @text-color-secondary;
+    }
+
+    .@{select-prefix-cls}:hover & {
+      opacity: 1;
+    }
+  }
+
+  // ========================== Popup ==========================
+  &-dropdown {
+    .reset-component();
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    z-index: @zindex-dropdown;
+    box-sizing: border-box;
+    padding: @select-dropdown-edge-child-vertical-padding 0;
+    overflow: hidden;
+    font-size: @font-size-base;
+    // Fix select render lag of long text in chrome
+    // https://github.com/ant-design/ant-design/issues/11456
+    // https://github.com/ant-design/ant-design/issues/11843
+    font-variant: initial;
+    background-color: @select-dropdown-bg;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
+
+    &.@{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;
+    }
+
+    &-hidden {
+      display: none;
+    }
+
+    &-empty {
+      color: @disabled-color;
+    }
+  }
+
+  // ========================= Options =========================
+  .item() {
+    position: relative;
+    display: block;
+    min-height: @select-dropdown-height;
+    padding: @select-dropdown-vertical-padding @control-padding-horizontal;
+    color: @text-color;
+    font-weight: normal;
+    font-size: @select-dropdown-font-size;
+    line-height: @select-dropdown-line-height;
+  }
+
+  &-item-empty {
+    .item();
+    color: @disabled-color;
+  }
+
+  &-item {
+    .item();
+
+    cursor: pointer;
+    transition: background 0.3s ease;
+
+    // =========== Group ============
+    &-group {
+      color: @text-color-secondary;
+      font-size: @font-size-sm;
+      cursor: default;
+    }
+
+    // =========== Option ===========
+    &-option {
+      display: flex;
+
+      &-content {
+        flex: auto;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &-state {
+        flex: none;
+      }
+
+      &-active:not(&-disabled) {
+        background-color: @select-item-active-bg;
+      }
+
+      &-selected:not(&-disabled) {
+        color: @select-item-selected-color;
+        font-weight: @select-item-selected-font-weight;
+        background-color: @select-item-selected-bg;
+
+        .@{select-prefix-cls}-item-option-state {
+          color: @primary-color;
+        }
+      }
+
+      &-disabled {
+        &.@{select-prefix-cls}-item-option-selected {
+          background-color: @select-multiple-disabled-background;
+        }
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+
+      &-grouped {
+        padding-left: @control-padding-horizontal * 2;
+      }
+    }
+  }
+
+  // ============================================================
+  // ==                          Size                          ==
+  // ============================================================
+  &-lg {
+    font-size: @font-size-lg;
+  }
+
+  // no border style
+  &-borderless &-selector {
+    background-color: transparent !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
+}
+
+@import './rtl';

package/es/skeleton/style/css.js

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

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

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

package/es/skeleton/style/index.js

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

package/es/skeleton/style/index.less

@@ -1,3 +1,279 @@
-@root-entry-name: default;
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
 
-@import './index-pure.less';
+@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
+@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
+@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
+@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';
+@skeleton-button-prefix-cls: ~'@{skeleton-prefix-cls}-button';
+@skeleton-input-prefix-cls: ~'@{skeleton-prefix-cls}-input';
+@skeleton-image-prefix-cls: ~'@{skeleton-prefix-cls}-image';
+@skeleton-block-radius: 4px;
+
+.@{skeleton-prefix-cls} {
+  display: table;
+  width: 100%;
+
+  &-header {
+    display: table-cell;
+    padding-right: @padding-md;
+    vertical-align: top;
+
+    // Avatar
+    .@{skeleton-avatar-prefix-cls} {
+      .skeleton-element-avatar();
+    }
+  }
+
+  &-content {
+    display: table-cell;
+    width: 100%;
+    vertical-align: top;
+
+    // Title
+    .@{skeleton-title-prefix-cls} {
+      width: 100%;
+      height: @skeleton-title-height;
+      margin-top: @margin-md;
+      background: @skeleton-color;
+      border-radius: @skeleton-block-radius;
+
+      + .@{skeleton-paragraph-prefix-cls} {
+        margin-top: @skeleton-title-paragraph-margin-top;
+      }
+    }
+
+    // paragraph
+    .@{skeleton-paragraph-prefix-cls} {
+      padding: 0;
+
+      > li {
+        width: 100%;
+        height: @skeleton-paragraph-li-height;
+        list-style: none;
+        background: @skeleton-color;
+        border-radius: @skeleton-block-radius;
+
+        &:last-child:not(:first-child):not(:nth-child(2)) {
+          width: 61%;
+        }
+
+        + li {
+          margin-top: @skeleton-paragraph-li-margin-top;
+        }
+      }
+    }
+  }
+
+  &-with-avatar &-content {
+    // Title
+    .@{skeleton-title-prefix-cls} {
+      margin-top: @margin-sm;
+
+      + .@{skeleton-paragraph-prefix-cls} {
+        margin-top: @skeleton-paragraph-margin-top;
+      }
+    }
+  }
+
+  &-round &-content {
+    .@{skeleton-title-prefix-cls},
+    .@{skeleton-paragraph-prefix-cls} > li {
+      border-radius: 100px;
+    }
+  }
+
+  // With active animation
+  &.@{skeleton-prefix-cls}-active {
+    & .@{skeleton-prefix-cls}-content {
+      .@{skeleton-title-prefix-cls},
+      .@{skeleton-paragraph-prefix-cls} > li {
+        .skeleton-color();
+      }
+    }
+
+    .@{skeleton-avatar-prefix-cls} {
+      .skeleton-color();
+    }
+
+    .@{skeleton-button-prefix-cls} {
+      .skeleton-color();
+    }
+
+    .@{skeleton-input-prefix-cls} {
+      .skeleton-color();
+    }
+
+    .@{skeleton-image-prefix-cls} {
+      .skeleton-color();
+    }
+  }
+
+  // Skeleton Block Button
+  &.@{skeleton-prefix-cls}-block {
+    width: 100%;
+
+    .@{skeleton-button-prefix-cls} {
+      width: 100%;
+    }
+  }
+
+  // Skeleton element
+  &-element {
+    display: inline-block;
+    width: auto;
+
+    .@{skeleton-button-prefix-cls} {
+      .skeleton-element-button();
+    }
+
+    .@{skeleton-avatar-prefix-cls} {
+      .skeleton-element-avatar();
+    }
+
+    .@{skeleton-input-prefix-cls} {
+      .skeleton-element-input();
+    }
+
+    .@{skeleton-image-prefix-cls} {
+      .skeleton-element-image();
+    }
+  }
+}
+// Button
+.skeleton-element-button() {
+  display: inline-block;
+  vertical-align: top;
+  background: @skeleton-color;
+  border-radius: @border-radius-base;
+
+  .skeleton-element-button-size(@btn-height-base);
+
+  &-lg {
+    .skeleton-element-button-size(@btn-height-lg);
+  }
+
+  &-sm {
+    .skeleton-element-button-size(@btn-height-sm);
+  }
+}
+// Avatar
+.skeleton-element-avatar() {
+  display: inline-block;
+  vertical-align: top;
+  background: @skeleton-color;
+
+  .skeleton-element-avatar-size(@avatar-size-base);
+
+  &-lg {
+    .skeleton-element-avatar-size(@avatar-size-lg);
+  }
+
+  &-sm {
+    .skeleton-element-avatar-size(@avatar-size-sm);
+  }
+}
+
+// Input
+.skeleton-element-input() {
+  display: inline-block;
+  vertical-align: top;
+  background: @skeleton-color;
+
+  .skeleton-element-input-size(@input-height-base);
+
+  &-lg {
+    .skeleton-element-input-size(@input-height-lg);
+  }
+
+  &-sm {
+    .skeleton-element-input-size(@input-height-sm);
+  }
+}
+
+// Image
+.skeleton-element-image() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+  background: @skeleton-color;
+
+  .skeleton-element-image-size(@image-size-base*2);
+
+  &-path {
+    fill: #bfbfbf;
+  }
+
+  &-svg {
+    .skeleton-element-image-size(@image-size-base);
+    max-width: @image-size-base * 4;
+    max-height: @image-size-base * 4;
+  }
+}
+
+.skeleton-element-avatar-size(@size) {
+  width: @size;
+  .skeleton-element-common-size(@size);
+
+  &.@{skeleton-avatar-prefix-cls}-circle {
+    border-radius: 50%;
+  }
+}
+
+.skeleton-element-button-size(@size) {
+  width: @size * 2;
+  min-width: @size * 2;
+  .skeleton-element-common-size(@size);
+
+  &.@{skeleton-button-prefix-cls}-circle {
+    width: @size;
+    min-width: @size;
+    border-radius: 50%;
+  }
+
+  &.@{skeleton-button-prefix-cls}-round {
+    border-radius: @size;
+  }
+}
+
+.skeleton-element-input-size(@size) {
+  width: 100%;
+  .skeleton-element-common-size(@size);
+}
+
+.skeleton-element-image-size(@size) {
+  width: @size;
+  .skeleton-element-common-size(@size);
+
+  &.@{skeleton-image-prefix-cls}-circle {
+    border-radius: 50%;
+  }
+}
+
+.skeleton-element-common-size(@size) {
+  height: @size;
+  line-height: @size;
+}
+
+.skeleton-color() {
+  background: linear-gradient(
+    90deg,
+    @skeleton-color 25%,
+    @skeleton-to-color 37%,
+    @skeleton-color 63%
+  );
+  background-size: 400% 100%;
+  animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
+}
+
+@keyframes ~"@{skeleton-prefix-cls}-loading" {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+@import './rtl';

package/es/slider/style/css.js

@@ -1,4 +1,4 @@
-import '../../style/default.css';
+import '../../style/index.css';
 import './index.css'; // style dependencies
 
 import '../../tooltip/style/css';

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

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

package/es/slider/style/index.js

@@ -1,4 +1,4 @@
-import '../../style/default.less';
+import '../../style/index.less';
 import './index.less'; // style dependencies
 
 import '../../tooltip/style';