@fle-ui/next 2.0.0-alpha.11 → 2.0.0-alpha.12

package/es/style/mixins/customize.less

@@ -0,0 +1,181 @@
+// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
+// for dark theme
+.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
+  when
+  (@theme = dark) {
+  @picker-prefix-cls: ~'@{prefix}-picker';
+  @slider-prefix-cls: ~'@{prefix}-slider';
+  @anchor-prefix-cls: ~'@{prefix}-anchor';
+  @collapse-prefix-cls: ~'@{prefix}-collapse';
+  @tab-prefix-cls: ~'@{prefix}-tabs';
+  @timeline-prefix-cls: ~'@{prefix}-timeline';
+  @tree-prefix-cls: ~'@{prefix}-tree';
+  @card-prefix-cls: ~'@{prefix}-card';
+  @badge-prefix-cls: ~'@{prefix}-badge';
+  @transfer-prefix-cls: ~'@{prefix}-transfer';
+  @calendar-prefix-cls: ~'@{prefix}-picker-calendar';
+  @calendar-picker-prefix-cls: ~'@{prefix}-picker';
+  @table-prefix-cls: ~'@{prefix}-table';
+
+  @popover-border: @border-width-base @border-style-base @popover-customize-border-color;
+
+  .@{containerClass} {
+    .@{picker-prefix-cls}-clear,
+    .@{slider-prefix-cls}-handle,
+    .@{anchor-prefix-cls}-wrapper,
+    .@{collapse-prefix-cls}-content,
+    .@{timeline-prefix-cls}-item-head,
+    .@{card-prefix-cls} {
+      background-color: @background;
+    }
+
+    .@{transfer-prefix-cls} {
+      &-list {
+        &-header {
+          background: @background;
+          border-bottom: @popover-border;
+        }
+        &-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
+          background-color: @item-hover-bg;
+        }
+      }
+    }
+
+    tr.@{table-prefix-cls}-expanded-row {
+      &,
+      &:hover {
+        > td {
+          background: #272727;
+        }
+      }
+    }
+    .@{table-prefix-cls}.@{table-prefix-cls}-small {
+      thead {
+        > tr {
+          > th {
+            background-color: @background;
+            border-bottom: @popover-border;
+          }
+        }
+      }
+    }
+    .@{table-prefix-cls} {
+      background-color: @background;
+      .@{table-prefix-cls}-row-expand-icon {
+        border: @popover-border;
+      }
+
+      tfoot {
+        > tr {
+          > th,
+          > td {
+            border-bottom: @popover-border;
+          }
+        }
+      }
+
+      thead {
+        > tr {
+          > th {
+            background-color: #272727;
+            border-bottom: @popover-border;
+          }
+        }
+      }
+
+      tbody {
+        > tr {
+          > td {
+            border-bottom: @popover-border;
+            &.@{table-prefix-cls}-cell-fix-left,
+            &.@{table-prefix-cls}-cell-fix-right {
+              background-color: @background;
+            }
+          }
+          &.@{table-prefix-cls}-row:hover {
+            > td {
+              background: @table-header-sort-active-bg;
+            }
+          }
+        }
+      }
+      &.@{table-prefix-cls}-bordered {
+        .@{table-prefix-cls}-title {
+          border: @popover-border;
+        }
+
+        // ============================= Cell =============================
+        thead > tr > th,
+        tbody > tr > td,
+        tfoot > tr > th,
+        tfoot > tr > td {
+          border-right: @popover-border;
+        }
+
+        // Fixed right should provides additional border
+        .@{table-prefix-cls}-cell-fix-right-first::after {
+          border-right: @popover-border;
+        }
+
+        // ============================ Header ============================
+        table > {
+          thead {
+            > tr:not(:last-child) > th {
+              border-bottom: @border-width-base @border-style-base @border-color-split;
+            }
+          }
+        }
+
+        // =========================== Content ============================
+        .@{table-prefix-cls}-container {
+          border: @popover-border;
+        }
+
+        // ========================== Expandable ==========================
+        .@{table-prefix-cls}-expanded-row-fixed {
+          &::after {
+            border-right: @popover-border;
+          }
+        }
+
+        .@{table-prefix-cls}-footer {
+          border: @popover-border;
+        }
+      }
+      .@{table-prefix-cls}-filter-trigger-container-open {
+        background-color: #525252;
+      }
+    }
+
+    .@{calendar-prefix-cls}-full {
+      background-color: @background;
+      .@{calendar-picker-prefix-cls}-panel {
+        background-color: @background;
+        .@{calendar-prefix-cls}-date {
+          border-top: 2px solid @popover-customize-border-color;
+        }
+      }
+    }
+
+    .@{tab-prefix-cls} {
+      &.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
+        background-color: @background;
+        border-bottom: @border-width-base solid @background;
+      }
+    }
+
+    .@{badge-prefix-cls} {
+      &-count {
+        box-shadow: 0 0 0 1px @background;
+      }
+    }
+
+    .@{tree-prefix-cls} {
+      &-show-line {
+        .@{tree-prefix-cls}-switcher {
+          background: @background;
+        }
+      }
+    }
+  }
+}

package/es/style/mixins/iconfont.less

@@ -0,0 +1,28 @@
+.iconfont-mixin() {
+  display: inline-block;
+  color: @icon-color;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  > * {
+    line-height: 1;
+  }
+
+  svg {
+    display: inline-block;
+  }
+
+  &::before {
+    display: none; // dont display old icon.
+  }
+
+  & &-icon {
+    display: block;
+  }
+}

package/es/style/mixins/index.less

@@ -0,0 +1,16 @@
+// Mixins
+// --------------------------------------------------
+@import 'size';
+@import 'compatibility';
+@import 'clearfix';
+@import 'iconfont';
+@import 'typography';
+@import 'customize';
+@import 'box';
+@import 'modal-mask';
+@import 'motion';
+@import 'reset';
+@import 'operation-unit';
+@import 'rounded-arrow';
+@import 'compact-item';
+@import 'compact-item-vertical';

package/es/style/mixins/modal-mask.less

@@ -0,0 +1,30 @@
+@import 'box';
+
+.modal-mask() {
+  pointer-events: none;
+
+  &.@{ant-prefix}-zoom-enter,
+  &.@{ant-prefix}-zoom-appear {
+    transform: none; // reset scale avoid mousePosition bug
+    opacity: 0;
+    animation-duration: @animation-duration-slow;
+    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
+  }
+
+  &-mask {
+    .box(fixed);
+    z-index: @zindex-modal-mask;
+    height: 100%;
+    background-color: @modal-mask-bg;
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  &-wrap {
+    .box(fixed);
+    overflow: auto;
+    outline: 0;
+  }
+}

package/es/style/mixins/motion.less

@@ -0,0 +1,33 @@
+.motion-common(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.motion-common-leave(@duration: @animation-duration-base) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
+  .@{className}-enter,
+  .@{className}-appear {
+    .motion-common(@duration);
+
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .motion-common-leave(@duration);
+
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active,
+  .@{className}-appear.@{className}-appear-active {
+    animation-name: ~'@{keyframeName}In';
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~'@{keyframeName}Out';
+    animation-play-state: running;
+    pointer-events: none;
+  }
+}

package/es/style/mixins/operation-unit.less

@@ -0,0 +1,15 @@
+.operation-unit() {
+  color: @link-color;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:focus-visible,
+  &:hover {
+    color: @link-hover-color;
+  }
+
+  &:active {
+    color: @link-active-color;
+  }
+}

package/es/style/mixins/reset.less

@@ -0,0 +1,11 @@
+.reset-component() {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: @text-color;
+  font-size: @font-size-base;
+  font-variant: @font-variant-base;
+  line-height: @line-height-base;
+  list-style: none;
+  font-feature-settings: @font-feature-settings-base;
+}

package/es/style/mixins/rounded-arrow.less

@@ -0,0 +1,44 @@
+.roundedArrow(@width, @outer-radius, @bg-color: var(--antd-arrow-background-color)) {
+  @corner-height: unit(((@outer-radius) * (1 - 1 / sqrt(2))));
+
+  @width-without-unit: unit(@width);
+  @outer-radius-without-unit: unit(@outer-radius);
+  @inner-radius-without-unit: unit(@arrow-border-radius);
+
+  @a-x: @width-without-unit - @corner-height;
+  @a-y: 2 * @width-without-unit + @corner-height;
+  @b-x: @a-x + @outer-radius-without-unit * (1 / sqrt(2));
+  @b-y: 2 * @width-without-unit;
+  @c-x: 2 * @width-without-unit - @inner-radius-without-unit;
+  @c-y: 2 * @width-without-unit;
+  @d-x: 2 * @width-without-unit;
+  @d-y: 2 * @width-without-unit - @inner-radius-without-unit;
+  @e-x: 2 * @width-without-unit;
+  @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
+  @f-x: 2 * @width-without-unit + @corner-height;
+  @f-y: @width-without-unit - @corner-height;
+  @g-x: @f-x - 1;
+  @g-y: @f-y;
+  @h-x: @a-x;
+  @h-y: @a-y - 1;
+
+  border-radius: 0 0 @arrow-border-radius;
+  pointer-events: none;
+
+  &::before {
+    position: absolute;
+    top: -@width;
+    left: -@width;
+    width: @width * 3;
+    height: @width * 3;
+    background: @bg-color;
+    // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
+    background-repeat: no-repeat;
+    background-position: ceil(-@width + 1px) ceil(-@width + 1px);
+    content: '';
+    clip-path: inset(33% 33%); // For browsers that do not support path()
+    clip-path: path(
+      'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
+    );
+  }
+}

package/es/style/mixins/size.less

@@ -0,0 +1,10 @@
+// Sizing shortcuts
+
+.size(@width; @height) {
+  width: @width;
+  height: @height;
+}
+
+.square(@size) {
+  .size(@size; @size);
+}

package/es/style/mixins/typography.less

@@ -0,0 +1,58 @@
+// =============== Common ===============
+.typography-paragraph() {
+  margin-bottom: 1em;
+}
+
+.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
+  margin-bottom: @headingMarginBottom;
+  color: @headingColor;
+  font-weight: @fontWeight;
+  font-size: @fontSize;
+  line-height: @lineHeight;
+}
+
+.typography-title-1() {
+  .typography-title(
+    @heading-1-size,
+    @typography-title-font-weight,
+    1.23,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-2() {
+  .typography-title(
+    @heading-2-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-3() {
+  .typography-title(
+    @heading-3-size,
+    @typography-title-font-weight,
+    1.35,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-4() {
+  .typography-title(
+    @heading-4-size,
+    @typography-title-font-weight,
+    1.4,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}
+.typography-title-5() {
+  .typography-title(
+    @heading-5-size,
+    @typography-title-font-weight,
+    1.5,
+    @heading-color,
+    @typography-title-margin-bottom
+  );
+}

package/es/style/theme.less

@@ -0,0 +1,34 @@
+@primary-color: #2c68ff;
+@info-color: @primary-color;
+@success-color: #36c626;
+@warning-color: #ffab00;
+@error-color: #f42d2d;
+
+@heading-color: #262626;
+@text-color: #4c4c4c;
+@text-color-secondary: #a9a9a9;
+
+@border-color-split: #eeeeee;
+
+@border-radius-base: 4px;
+@border-color-base: #d2d2d2;
+@disabled-color: @text-color-secondary;
+@disabled-bg: #f1f1f1;
+
+@modal-header-padding: 20px 20px;
+// @modal-body-padding: 20px;
+// @modal-confirm-body-padding: 28px 28px 20px;
+@modal-header-close-size: 63px;
+@modal-footer-padding: 20px 20px;
+@modal-footer-padding-vertical: 16px;
+@modal-footer-padding-horizontal: 24px;
+
+@pagination-item-bg-active: @primary-color;
+@pagination-item-color-active: #ffffff;
+@pagination-font-weight-active: 400;
+@pagination-ellipsis-color: #d2d2d2;
+
+@table-header-cell-split-color: @border-color-split;
+
+@divider-color: @border-color-split;
+