@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/es/transfer/style/index.less

@@ -1,294 +1,294 @@
-@import './token.less';
-@import '../../style/mixins/index.less';
-
-@transfer-prefix-cls: ~'@{prefix}-transfer';
-
-.@{transfer-prefix-cls} {
-  display: flex;
-  align-items: center;
-
-  &-view {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: @transfer-width;
-    height: @transfer-height;
-    border: @transfer-border-width solid @transfer-border-color;
-    border-radius: @transfer-border-radius;
-
-    &-search {
-      padding: @transfer-search-padding-top @transfer-search-padding-right
-        @transfer-search-padding-bottom @transfer-search-padding-left;
-    }
-
-    &-list {
-      flex: 1;
-    }
-
-    &-custom-list {
-      flex: 1;
-      overflow: auto;
-    }
-
-    &-header {
-      display: flex;
-      align-items: center;
-      padding: 0 @transfer-item-padding-horizontal;
-    }
-
-    &-header > *:first-child {
-      flex: 1;
-      .text-ellipsis();
-
-      &:not(:last-child) {
-        margin-right: 8px;
-      }
-    }
-
-    &-header {
-      height: @transfer-height-title;
-      color: @transfer-color-text-header;
-      font-weight: @transfer-font-weight-header;
-      font-size: @transfer-font-size-header;
-      line-height: $height;
-      background-color: @transfer-color-bg-header;
-
-      &-title {
-        display: flex;
-        align-items: center;
-
-        .@{prefix}-checkbox {
-          .text-ellipsis();
-
-          font-size: inherit;
-
-          &-text {
-            color: inherit;
-          }
-          // fix the title in checkbox-label ellipsis not work
-          &-label {
-            .text-ellipsis();
-          }
-        }
-        // fix simple mode the title  ellipsis not work
-        &-simple {
-          .text-ellipsis();
-        }
-      }
-
-      &-clear-btn {
-        color: @transfer-color-icon;
-        font-size: @transfer-font-size-icon;
-        cursor: pointer;
-
-        &:hover::before {
-          background-color: @transfer-color-bg-icon;
-        }
-      }
-
-      &-count {
-        margin-right: 2px;
-        color: @transfer-color-text-header-unit;
-        font-weight: normal;
-        font-size: @transfer-font-size-header-unit;
-      }
-    }
-
-    &-body {
-      flex: 1 1 auto;
-      overflow: hidden;
-
-      .@{transfer-prefix-cls}-view-empty {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-      }
-    }
-
-    .@{prefix}-scrollbar {
-      height: 100%;
-
-      &-container {
-        height: 100%;
-        overflow: auto;
-      }
-    }
-
-    .@{prefix}-list {
-      border-radius: 0;
-
-      &-footer {
-        position: relative;
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        height: @transfer-height-footer;
-        padding: 0 @transfer-padding-horizontal-footer;
-      }
-
-      .@{prefix}-pagination {
-        position: absolute;
-        top: 50%;
-        right: @transfer-padding-horizontal-footer;
-        margin: 0;
-        transform: translateY(-50%);
-
-        &-jumper-input {
-          width: @transfer-pagination-width-input;
-        }
-
-        &-jumper-separator {
-          padding: 0 @transfer-pagination-gap-separator;
-        }
-      }
-    }
-
-    .@{prefix}-checkbox {
-      padding-left: 6px;
-
-      &-wrapper {
-        display: inline;
-      }
-
-      .@{prefix}-icon-hover:hover::before {
-        background-color: @transfer-color-bg-icon;
-      }
-    }
-  }
-
-  &-list-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: @transfer-item-height;
-    padding: 0 @transfer-item-padding-horizontal;
-    color: @transfer-item-color_default;
-    line-height: $height;
-    list-style: none;
-    background-color: @transfer-item-color-bg_default;
-    cursor: default;
-
-    &-content {
-      font-size: @transfer-item-font-size;
-      .text-ellipsis();
-    }
-
-    &-checkbox {
-      .@{prefix}-checkbox-label {
-        .text-ellipsis();
-      }
-    }
-
-    &-disabled {
-      color: @transfer-item-color_disabled;
-      background-color: @transfer-item-color-bg_disabled;
-      cursor: not-allowed;
-    }
-
-    &:not(&-disabled):hover {
-      color: @transfer-item-color_hover;
-      background-color: @transfer-item-color-bg_hover;
-    }
-
-    .@{prefix}-checkbox {
-      width: 100%;
-
-      &-text {
-        color: inherit;
-      }
-    }
-
-    &-remove-btn {
-      margin-left: auto;
-      color: @transfer-color-icon;
-      font-size: @transfer-font-size-icon;
-      cursor: pointer;
-
-      &:hover::before {
-        background-color: @transfer-color-bg-icon;
-      }
-    }
-
-    // 拖动样式
-    &-draggable::before {
-      position: absolute;
-      right: 0;
-      left: 0;
-      display: block;
-      height: @transfer-item-draggable-height-gap;
-      border-radius: ($height / 2);
-      content: '';
-    }
-
-    &-gap-bottom::before {
-      bottom: -@transfer-item-draggable-height-gap;
-      background-color: @transfer-item-draggable-color-bg-gap;
-    }
-
-    &-gap-top::before {
-      top: -@transfer-item-draggable-height-gap;
-      background-color: @transfer-item-draggable-color-bg-gap;
-    }
-
-    &-dragging {
-      color: @transfer-item-draggable-color_dragging !important;
-      background-color: @transfer-item-draggable-color-bg_dragging !important;
-    }
-
-    &-dragged {
-      animation: ~'@{prefix}-transfer-drag-item-blink' 0.4s;
-      animation-timing-function: @transition-timing-function-linear;
-    }
-  }
-
-  &-operations {
-    padding: 0 @transfer-operation-padding-horizontal;
-
-    .@{prefix}-btn {
-      display: block;
-
-      &:last-child {
-        margin-top: @transfer-operation-gap-buttons;
-      }
-    }
-
-    &-words {
-      .@{prefix}-btn {
-        width: 100%;
-        padding: 0 12px;
-        text-align: left;
-      }
-    }
-  }
-
-  &-simple {
-    .@{transfer-prefix-cls}-view-source {
-      border-right: none;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .@{transfer-prefix-cls}-view-target {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  &-disabled {
-    .@{transfer-prefix-cls}-view-header {
-      color: @transfer-item-color_disabled;
-    }
-  }
-}
-
-@keyframes ~ '@{prefix}-transfer-drag-item-blink' {
-  0% {
-    background-color: @transfer-item-draggable-color_blink;
-  }
-
-  100% {
-    background-color: transparent;
-  }
-}
+@import './token.less';
+@import '../../style/mixins/index.less';
+
+@transfer-prefix-cls: ~'@{prefix}-transfer';
+
+.@{transfer-prefix-cls} {
+  display: flex;
+  align-items: center;
+
+  &-view {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: @transfer-width;
+    height: @transfer-height;
+    border: @transfer-border-width solid @transfer-border-color;
+    border-radius: @transfer-border-radius;
+
+    &-search {
+      padding: @transfer-search-padding-top @transfer-search-padding-right
+        @transfer-search-padding-bottom @transfer-search-padding-left;
+    }
+
+    &-list {
+      flex: 1;
+    }
+
+    &-custom-list {
+      flex: 1;
+      overflow: auto;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      padding: 0 @transfer-item-padding-horizontal;
+    }
+
+    &-header > *:first-child {
+      flex: 1;
+      .text-ellipsis();
+
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+
+    &-header {
+      height: @transfer-height-title;
+      color: @transfer-color-text-header;
+      font-weight: @transfer-font-weight-header;
+      font-size: @transfer-font-size-header;
+      line-height: $height;
+      background-color: @transfer-color-bg-header;
+
+      &-title {
+        display: flex;
+        align-items: center;
+
+        .@{prefix}-checkbox {
+          .text-ellipsis();
+
+          font-size: inherit;
+
+          &-text {
+            color: inherit;
+          }
+          // fix the title in checkbox-label ellipsis not work
+          &-label {
+            .text-ellipsis();
+          }
+        }
+        // fix simple mode the title  ellipsis not work
+        &-simple {
+          .text-ellipsis();
+        }
+      }
+
+      &-clear-btn {
+        color: @transfer-color-icon;
+        font-size: @transfer-font-size-icon;
+        cursor: pointer;
+
+        &:hover::before {
+          background-color: @transfer-color-bg-icon;
+        }
+      }
+
+      &-count {
+        margin-right: 2px;
+        color: @transfer-color-text-header-unit;
+        font-weight: normal;
+        font-size: @transfer-font-size-header-unit;
+      }
+    }
+
+    &-body {
+      flex: 1 1 auto;
+      overflow: hidden;
+
+      .@{transfer-prefix-cls}-view-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    }
+
+    .@{prefix}-scrollbar {
+      height: 100%;
+
+      &-container {
+        height: 100%;
+        overflow: auto;
+      }
+    }
+
+    .@{prefix}-list {
+      border-radius: 0;
+
+      &-footer {
+        position: relative;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        height: @transfer-height-footer;
+        padding: 0 @transfer-padding-horizontal-footer;
+      }
+
+      .@{prefix}-pagination {
+        position: absolute;
+        top: 50%;
+        right: @transfer-padding-horizontal-footer;
+        margin: 0;
+        transform: translateY(-50%);
+
+        &-jumper-input {
+          width: @transfer-pagination-width-input;
+        }
+
+        &-jumper-separator {
+          padding: 0 @transfer-pagination-gap-separator;
+        }
+      }
+    }
+
+    .@{prefix}-checkbox {
+      padding-left: 6px;
+
+      &-wrapper {
+        display: inline;
+      }
+
+      .@{prefix}-icon-hover:hover::before {
+        background-color: @transfer-color-bg-icon;
+      }
+    }
+  }
+
+  &-list-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: @transfer-item-height;
+    padding: 0 @transfer-item-padding-horizontal;
+    color: @transfer-item-color_default;
+    line-height: $height;
+    list-style: none;
+    background-color: @transfer-item-color-bg_default;
+    cursor: default;
+
+    &-content {
+      font-size: @transfer-item-font-size;
+      .text-ellipsis();
+    }
+
+    &-checkbox {
+      .@{prefix}-checkbox-label {
+        .text-ellipsis();
+      }
+    }
+
+    &-disabled {
+      color: @transfer-item-color_disabled;
+      background-color: @transfer-item-color-bg_disabled;
+      cursor: not-allowed;
+    }
+
+    &:not(&-disabled):hover {
+      color: @transfer-item-color_hover;
+      background-color: @transfer-item-color-bg_hover;
+    }
+
+    .@{prefix}-checkbox {
+      width: 100%;
+
+      &-text {
+        color: inherit;
+      }
+    }
+
+    &-remove-btn {
+      margin-left: auto;
+      color: @transfer-color-icon;
+      font-size: @transfer-font-size-icon;
+      cursor: pointer;
+
+      &:hover::before {
+        background-color: @transfer-color-bg-icon;
+      }
+    }
+
+    // 拖动样式
+    &-draggable::before {
+      position: absolute;
+      right: 0;
+      left: 0;
+      display: block;
+      height: @transfer-item-draggable-height-gap;
+      border-radius: ($height / 2);
+      content: '';
+    }
+
+    &-gap-bottom::before {
+      bottom: -@transfer-item-draggable-height-gap;
+      background-color: @transfer-item-draggable-color-bg-gap;
+    }
+
+    &-gap-top::before {
+      top: -@transfer-item-draggable-height-gap;
+      background-color: @transfer-item-draggable-color-bg-gap;
+    }
+
+    &-dragging {
+      color: @transfer-item-draggable-color_dragging !important;
+      background-color: @transfer-item-draggable-color-bg_dragging !important;
+    }
+
+    &-dragged {
+      animation: ~'@{prefix}-transfer-drag-item-blink' 0.4s;
+      animation-timing-function: @transition-timing-function-linear;
+    }
+  }
+
+  &-operations {
+    padding: 0 @transfer-operation-padding-horizontal;
+
+    .@{prefix}-btn {
+      display: block;
+
+      &:last-child {
+        margin-top: @transfer-operation-gap-buttons;
+      }
+    }
+
+    &-words {
+      .@{prefix}-btn {
+        width: 100%;
+        padding: 0 12px;
+        text-align: left;
+      }
+    }
+  }
+
+  &-simple {
+    .@{transfer-prefix-cls}-view-source {
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .@{transfer-prefix-cls}-view-target {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &-disabled {
+    .@{transfer-prefix-cls}-view-header {
+      color: @transfer-item-color_disabled;
+    }
+  }
+}
+
+@keyframes ~ '@{prefix}-transfer-drag-item-blink' {
+  0% {
+    background-color: @transfer-item-draggable-color_blink;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}

package/es/transfer/style/token.less

@@ -1,48 +1,48 @@
-@import '../../style/theme/index.less';
-
-@transfer-width: 200px;
-@transfer-height: 224px;
-@transfer-height-title: @size-10;
-@transfer-height-footer: @size-10;
-@transfer-padding-horizontal-footer: @spacing-4;
-@transfer-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@transfer-border-width: @border-1;
-@transfer-border-radius: @radius-small;
-
-@transfer-font-size-header: @font-size-body-3;
-@transfer-font-size-header-unit: @font-size-body-1;
-@transfer-font-size-icon: @font-size-body-1;
-@transfer-font-weight-header: @font-weight-500;
-
-@transfer-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');
-@transfer-color-text-header-unit: var(~'@{arco-cssvars-prefix}-color-text-3');
-@transfer-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@transfer-color-bg-icon: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@transfer-color-bg-header: var(~'@{arco-cssvars-prefix}-color-fill-1');
-
-@transfer-search-padding-left: 12px;
-@transfer-search-padding-right: 12px;
-@transfer-search-padding-top: 8px;
-@transfer-search-padding-bottom: 4px;
-
-@transfer-item-color-bg_default: @color-transparent;
-@transfer-item-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@transfer-item-color-bg_disabled: @color-transparent;
-@transfer-item-color_default: var(~'@{arco-cssvars-prefix}-color-text-1');
-@transfer-item-color_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
-@transfer-item-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@transfer-item-height: @size-9;
-@transfer-item-padding-horizontal: @spacing-5;
-@transfer-item-font-size: @font-size-body-3;
-
-@transfer-item-draggable-height-gap: 2px;
-@transfer-item-draggable-color-bg-gap: @color-primary-6;
-@transfer-item-draggable-color-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');
-@transfer-item-draggable-color_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');
-@transfer-item-draggable-color_blink: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
-
-@transfer-pagination-width-input: @size-6;
-@transfer-pagination-gap-separator: @spacing-4;
-
-@transfer-operation-padding-horizontal: @spacing-8;
-@transfer-operation-gap-buttons: @spacing-6;
+@import '../../style/theme/index.less';
+
+@transfer-width: 200px;
+@transfer-height: 224px;
+@transfer-height-title: @size-10;
+@transfer-height-footer: @size-10;
+@transfer-padding-horizontal-footer: @spacing-4;
+@transfer-border-color: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@transfer-border-width: @border-1;
+@transfer-border-radius: @radius-small;
+
+@transfer-font-size-header: @font-size-body-3;
+@transfer-font-size-header-unit: @font-size-body-1;
+@transfer-font-size-icon: @font-size-body-1;
+@transfer-font-weight-header: @font-weight-500;
+
+@transfer-color-text-header: var(~'@{arco-cssvars-prefix}-color-text-1');
+@transfer-color-text-header-unit: var(~'@{arco-cssvars-prefix}-color-text-3');
+@transfer-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@transfer-color-bg-icon: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@transfer-color-bg-header: var(~'@{arco-cssvars-prefix}-color-fill-1');
+
+@transfer-search-padding-left: 12px;
+@transfer-search-padding-right: 12px;
+@transfer-search-padding-top: 8px;
+@transfer-search-padding-bottom: 4px;
+
+@transfer-item-color-bg_default: @color-transparent;
+@transfer-item-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@transfer-item-color-bg_disabled: @color-transparent;
+@transfer-item-color_default: var(~'@{arco-cssvars-prefix}-color-text-1');
+@transfer-item-color_hover: var(~'@{arco-cssvars-prefix}-color-text-1');
+@transfer-item-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@transfer-item-height: @size-9;
+@transfer-item-padding-horizontal: @spacing-5;
+@transfer-item-font-size: @font-size-body-3;
+
+@transfer-item-draggable-height-gap: 2px;
+@transfer-item-draggable-color-bg-gap: @color-primary-6;
+@transfer-item-draggable-color-bg_dragging: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@transfer-item-draggable-color_dragging: var(~'@{arco-cssvars-prefix}-color-text-4');
+@transfer-item-draggable-color_blink: var(~'@{arco-cssvars-prefix}-color-primary-light-1');
+
+@transfer-pagination-width-input: @size-6;
+@transfer-pagination-gap-separator: @spacing-4;
+
+@transfer-operation-padding-horizontal: @spacing-8;
+@transfer-operation-gap-buttons: @spacing-6;