@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/lib/image/style/token.less

@@ -1,123 +1,123 @@
-@image-radius: @radius-small;
-// title
-@image-font-size-title: @font-size-title-1;
-@image-font-weight-title: @font-weight-500;
-// description
-@image-font-size-description: @font-size-body-3;
-@image-color-title_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@image-color-title_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
-@image-color-description_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
-@image-color-description_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
-// actions
-@image-spacing-actions-left: @spacing-6;
-// actions item
-@image-font-size-actions-item: 14px;
-@image-padding-actions-item-vertical: @spacing-none;
-@image-padding-actions-item-horizontal: @spacing-none;
-@image-spacing-actions-item-left: @spacing-6;
-@image-radius-actions-item: @radius-small;
-@image-color-actions-item_footer_inner_hover-bg: rgba(0, 0, 0, 0.5);
-@image-color-actions-item_footer_outer_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
-@image-color-actions-item_trigger-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
-@image-color-actions-item_trigger_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
-@image-spacing-actions-trigger-item-vertical: 5px;
-@image-spacing-actions-trigger-item-horizontal: 4px;
-// footer
-@image-color-footer_inner-bg: linear-gradient(
-  360deg,
-  rgba(0, 0, 0, 0.3) 0%,
-  rgba(0, 0, 0, 0) 100%
-);
-@image-color-footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
-@image-padding-footer_inner_vertical: 9px;
-@image-padding-footer_inner_horizontal: 16px;
-
-@image-spacing-footer_inner_simple-vertical: @spacing-6;
-@image-spacing-footer_inner_simple-horizontal: @spacing-7;
-@image-color-footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
-@image-spacing-footer-top: @spacing-2;
-// error
-@image-color-error-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
-@image-color-error-text: var(~'@{arco-cssvars-prefix}-color-neutral-4');
-@image-font-size-error-icon: 60px;
-@image-font-size-error-text: @font-size-body-1;
-@image-line-height-error-text: 1.6667;
-@image-size-error-min-height: 100px;
-@image-spacing-error-padding: @spacing-7;
-// loader
-@image-color-loader-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
-@image-size-loader-min-height: 100px;
-// loader spin
-@image-font-size-loader-spin: 32px;
-@image-color-loader-spin-text: @color-primary-6;
-@image-color-loader-spin-text-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
-@image-font-size-loader-spin-text: @font-size-title-1;
-
-// preview mask
-@image-preview-color-mask-bg: var(~'@{arco-cssvars-prefix}-color-mask-bg');
-// preview scale value
-@image-preview-size-scale-value-height: 32px;
-@image-preview-spacing-scale-value-vertical: 7px;
-@image-preview-spacing-scale-value-horizontal: 10px;
-@image-preview-font-size-scale-value: @font-size-body-1;
-@image-preview-color-scale-value-text: var(~'@{arco-cssvars-prefix}-color-white');
-@image-preview-color-scale-value-bg: rgba(255, 255, 255, 0.08);
-// preview toolbar
-@image-preview-color-toolbar-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@image-preview-radius-toolbar: @radius-medium;
-@image-preview-spacing-toolbar-vertical: @spacing-2;
-@image-preview-spacing-toolbar-horizontal: @spacing-7;
-@image-preview-spacing-toolbar-horizontal_simple: @spacing-2;
-@image-preview-spacing-toolbar-vertical_simple: @spacing-2;
-
-@image-preview-position-toolbar-bottom: 46px;
-// preview toolbar action
-@image-preview-font-size-action: 14px;
-@image-preview-color-action-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
-@image-preview-radius-action: @radius-small;
-@image-preview-color-action-bg: @color-transparent;
-@image-preview-color-action_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
-@image-preview-color-action_hover-text: @color-primary-6;
-@image-preview-color-action_disabled-bg: transparent;
-@image-preview-color-action_disabled-text: var(~'@{arco-cssvars-prefix}-color-text-4');
-@image-preview-font-size-action-name: @font-size-body-1;
-@image-preview-spacing-action-name-right: @spacing-6;
-@image-preview-padding-action-content: 13px;
-@image-preview-margin-action-right: @spacing-none;
-// preview trigger
-@image-preview-spacing-trigger-padding-vertical: @spacing-6;
-@image-preview-spacing-trigger-padding-horizontal: @spacing-7;
-@image-preview-margin-action-bottom: @spacing-none;
-
-// preview loading
-@image-preview-color-loading-text: @color-primary-6;
-@image-preview-color-loading-bg: #232324;
-@image-preview-font-size-loading: 18px;
-@image-preview-spacing-loading-padding: @spacing-5;
-@image-preview-size-loading-width: 48px;
-@image-preview-size-loading-height: 48px;
-@image-preview-radius-loading: @radius-medium;
-// preview close-btn
-@image-preview-size-close-btn-width: 32px;
-@image-preview-size-close-icon: 14px;
-@image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.5);
-@image-preview-color-close-btn-text: var(~'@{arco-cssvars-prefix}-color-white');
-@image-preview-position-close-btn-right: 36px;
-@image-preview-position-close-btn-top: 36px;
-// preview arrow
-@image-preview-arrow-position: @spacing-8;
-@image-preview-arrow-size: @size-8;
-@image-preview-arrow-font-size: @size-4;
-@image-preview-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');
-@image-preview-arrow-color-icon_disabled: rgba(255, 355, 255, 0.3);
-@image-preview-arrow-color-bg: rgba(255, 355, 255, 0.3);
-@image-preview-arrow-color-bg_hover: rgba(255, 355, 255, 0.5);
-@image-preview-arrow-color-bg_disabled: rgba(255, 355, 255, 0.2);
-
-// image trigger
-@image-trigger-spacing-padding-vertical: 6px;
-@image-trigger-spacing-padding-horizontal: 4px;
-@image-trigger-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
-@image-trigger-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@image-trigger-size-border: 1px;
-@image-trigger-radius: 4px;
+@image-radius: @radius-small;
+// title
+@image-font-size-title: @font-size-title-1;
+@image-font-weight-title: @font-weight-500;
+// description
+@image-font-size-description: @font-size-body-3;
+@image-color-title_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@image-color-title_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
+@image-color-description_footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
+@image-color-description_footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
+// actions
+@image-spacing-actions-left: @spacing-6;
+// actions item
+@image-font-size-actions-item: 14px;
+@image-padding-actions-item-vertical: @spacing-none;
+@image-padding-actions-item-horizontal: @spacing-none;
+@image-spacing-actions-item-left: @spacing-6;
+@image-radius-actions-item: @radius-small;
+@image-color-actions-item_footer_inner_hover-bg: rgba(0, 0, 0, 0.5);
+@image-color-actions-item_footer_outer_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
+@image-color-actions-item_trigger-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
+@image-color-actions-item_trigger_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
+@image-spacing-actions-trigger-item-vertical: 5px;
+@image-spacing-actions-trigger-item-horizontal: 4px;
+// footer
+@image-color-footer_inner-bg: linear-gradient(
+  360deg,
+  rgba(0, 0, 0, 0.3) 0%,
+  rgba(0, 0, 0, 0) 100%
+);
+@image-color-footer_inner-text: var(~'@{arco-cssvars-prefix}-color-white');
+@image-padding-footer_inner_vertical: 9px;
+@image-padding-footer_inner_horizontal: 16px;
+
+@image-spacing-footer_inner_simple-vertical: @spacing-6;
+@image-spacing-footer_inner_simple-horizontal: @spacing-7;
+@image-color-footer_outer-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
+@image-spacing-footer-top: @spacing-2;
+// error
+@image-color-error-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
+@image-color-error-text: var(~'@{arco-cssvars-prefix}-color-neutral-4');
+@image-font-size-error-icon: 60px;
+@image-font-size-error-text: @font-size-body-1;
+@image-line-height-error-text: 1.6667;
+@image-size-error-min-height: 100px;
+@image-spacing-error-padding: @spacing-7;
+// loader
+@image-color-loader-bg: var(~'@{arco-cssvars-prefix}-color-neutral-1');
+@image-size-loader-min-height: 100px;
+// loader spin
+@image-font-size-loader-spin: 32px;
+@image-color-loader-spin-text: @color-primary-6;
+@image-color-loader-spin-text-text: var(~'@{arco-cssvars-prefix}-color-neutral-6');
+@image-font-size-loader-spin-text: @font-size-title-1;
+
+// preview mask
+@image-preview-color-mask-bg: var(~'@{arco-cssvars-prefix}-color-mask-bg');
+// preview scale value
+@image-preview-size-scale-value-height: 32px;
+@image-preview-spacing-scale-value-vertical: 7px;
+@image-preview-spacing-scale-value-horizontal: 10px;
+@image-preview-font-size-scale-value: @font-size-body-1;
+@image-preview-color-scale-value-text: var(~'@{arco-cssvars-prefix}-color-white');
+@image-preview-color-scale-value-bg: rgba(255, 255, 255, 0.08);
+// preview toolbar
+@image-preview-color-toolbar-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@image-preview-radius-toolbar: @radius-medium;
+@image-preview-spacing-toolbar-vertical: @spacing-2;
+@image-preview-spacing-toolbar-horizontal: @spacing-7;
+@image-preview-spacing-toolbar-horizontal_simple: @spacing-2;
+@image-preview-spacing-toolbar-vertical_simple: @spacing-2;
+
+@image-preview-position-toolbar-bottom: 46px;
+// preview toolbar action
+@image-preview-font-size-action: 14px;
+@image-preview-color-action-text: var(~'@{arco-cssvars-prefix}-color-neutral-8');
+@image-preview-radius-action: @radius-small;
+@image-preview-color-action-bg: @color-transparent;
+@image-preview-color-action_hover-bg: var(~'@{arco-cssvars-prefix}-color-neutral-2');
+@image-preview-color-action_hover-text: @color-primary-6;
+@image-preview-color-action_disabled-bg: transparent;
+@image-preview-color-action_disabled-text: var(~'@{arco-cssvars-prefix}-color-text-4');
+@image-preview-font-size-action-name: @font-size-body-1;
+@image-preview-spacing-action-name-right: @spacing-6;
+@image-preview-padding-action-content: 13px;
+@image-preview-margin-action-right: @spacing-none;
+// preview trigger
+@image-preview-spacing-trigger-padding-vertical: @spacing-6;
+@image-preview-spacing-trigger-padding-horizontal: @spacing-7;
+@image-preview-margin-action-bottom: @spacing-none;
+
+// preview loading
+@image-preview-color-loading-text: @color-primary-6;
+@image-preview-color-loading-bg: #232324;
+@image-preview-font-size-loading: 18px;
+@image-preview-spacing-loading-padding: @spacing-5;
+@image-preview-size-loading-width: 48px;
+@image-preview-size-loading-height: 48px;
+@image-preview-radius-loading: @radius-medium;
+// preview close-btn
+@image-preview-size-close-btn-width: 32px;
+@image-preview-size-close-icon: 14px;
+@image-preview-color-close-btn-bg: rgba(0, 0, 0, 0.5);
+@image-preview-color-close-btn-text: var(~'@{arco-cssvars-prefix}-color-white');
+@image-preview-position-close-btn-right: 36px;
+@image-preview-position-close-btn-top: 36px;
+// preview arrow
+@image-preview-arrow-position: @spacing-8;
+@image-preview-arrow-size: @size-8;
+@image-preview-arrow-font-size: @size-4;
+@image-preview-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');
+@image-preview-arrow-color-icon_disabled: rgba(255, 355, 255, 0.3);
+@image-preview-arrow-color-bg: rgba(255, 355, 255, 0.3);
+@image-preview-arrow-color-bg_hover: rgba(255, 355, 255, 0.5);
+@image-preview-arrow-color-bg_disabled: rgba(255, 355, 255, 0.2);
+
+// image trigger
+@image-trigger-spacing-padding-vertical: 6px;
+@image-trigger-spacing-padding-horizontal: 4px;
+@image-trigger-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@image-trigger-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@image-trigger-size-border: 1px;
+@image-trigger-radius: 4px;

package/lib/image/style/trigger.less

@@ -1,14 +1,14 @@
-@image-trigger-prefix-cls: ~'@{prefix}-image-trigger';
-
-.@{image-trigger-prefix-cls} {
-  padding: @image-trigger-spacing-padding-vertical
-    @image-trigger-spacing-padding-horizontal;
-  background: @image-trigger-color-bg;
-  border: @image-trigger-size-border solid @image-trigger-color-border;
-  border-radius: @image-trigger-radius;
-
-  .@{prefix}-trigger-arrow {
-    background-color: @image-trigger-color-bg;
-    border: @image-trigger-size-border solid @image-trigger-color-border;
-  }
-}
+@image-trigger-prefix-cls: ~'@{prefix}-image-trigger';
+
+.@{image-trigger-prefix-cls} {
+  padding: @image-trigger-spacing-padding-vertical
+    @image-trigger-spacing-padding-horizontal;
+  background: @image-trigger-color-bg;
+  border: @image-trigger-size-border solid @image-trigger-color-border;
+  border-radius: @image-trigger-radius;
+
+  .@{prefix}-trigger-arrow {
+    background-color: @image-trigger-color-bg;
+    border: @image-trigger-size-border solid @image-trigger-color-border;
+  }
+}

package/lib/input/style/group.less

@@ -1,63 +1,63 @@
-@import './token.less';
-
-.@{input-prefix-cls}-group {
-  display: inline-flex;
-  align-items: center;
-
-  > * {
-    border-radius: 0;
-
-    &.@{input-prefix-cls}-outer > :last-child,
-    &.@{input-prefix-cls}-outer > :first-child {
-      border-radius: 0;
-    }
-
-    &:not(:last-child) {
-      position: relative;
-      box-sizing: border-box;
-    }
-
-    &:first-child,
-    &:first-child .@{input-prefix-cls}-group > *:first-child {
-      border-top-left-radius: @input-group-border-radius_compact;
-      border-bottom-left-radius: @input-group-border-radius_compact;
-
-      .@{prefix}-select-view {
-        border-top-left-radius: @input-group-border-radius_compact;
-        border-bottom-left-radius: @input-group-border-radius_compact;
-      }
-    }
-
-    &:last-child,
-    &:last-child .@{input-prefix-cls}-outer > *:last-child {
-      border-top-right-radius: @input-group-border-radius_compact;
-      border-bottom-right-radius: @input-group-border-radius_compact;
-
-      .@{prefix}-select-view {
-        border-top-right-radius: @input-group-border-radius_compact;
-        border-bottom-right-radius: @input-group-border-radius_compact;
-      }
-    }
-  }
-
-  // 针对input边框颜色处理
-  > .@{input-prefix-cls}-wrapper:not(:last-child),
-  > .@{input-prefix-cls}-outer:not(:last-child),
-  > .@{prefix}-input-tag:not(:last-child),
-  > .@{prefix}-select-view:not(:last-child) {
-    margin-right: -@input-group-border-separator-width;
-    border-right: @input-group-border-separator-width solid
-      @input-group-color-separator-border;
-
-    &:focus-within {
-      border-right-color: @input-color-border_focus;
-    }
-  }
-
-  // 针对Error状态的input边框颜色处理
-  > .@{input-prefix-cls}-wrapper.@{input-prefix-cls}-error:not(:last-child) {
-    &:focus-within {
-      border-right-color: @input-color-border_error_focus;
-    }
-  }
-}
+@import './token.less';
+
+.@{input-prefix-cls}-group {
+  display: inline-flex;
+  align-items: center;
+
+  > * {
+    border-radius: 0;
+
+    &.@{input-prefix-cls}-outer > :last-child,
+    &.@{input-prefix-cls}-outer > :first-child {
+      border-radius: 0;
+    }
+
+    &:not(:last-child) {
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    &:first-child,
+    &:first-child .@{input-prefix-cls}-group > *:first-child {
+      border-top-left-radius: @input-group-border-radius_compact;
+      border-bottom-left-radius: @input-group-border-radius_compact;
+
+      .@{prefix}-select-view {
+        border-top-left-radius: @input-group-border-radius_compact;
+        border-bottom-left-radius: @input-group-border-radius_compact;
+      }
+    }
+
+    &:last-child,
+    &:last-child .@{input-prefix-cls}-outer > *:last-child {
+      border-top-right-radius: @input-group-border-radius_compact;
+      border-bottom-right-radius: @input-group-border-radius_compact;
+
+      .@{prefix}-select-view {
+        border-top-right-radius: @input-group-border-radius_compact;
+        border-bottom-right-radius: @input-group-border-radius_compact;
+      }
+    }
+  }
+
+  // 针对input边框颜色处理
+  > .@{input-prefix-cls}-wrapper:not(:last-child),
+  > .@{input-prefix-cls}-outer:not(:last-child),
+  > .@{prefix}-input-tag:not(:last-child),
+  > .@{prefix}-select-view:not(:last-child) {
+    margin-right: -@input-group-border-separator-width;
+    border-right: @input-group-border-separator-width solid
+      @input-group-color-separator-border;
+
+    &:focus-within {
+      border-right-color: @input-color-border_focus;
+    }
+  }
+
+  // 针对Error状态的input边框颜色处理
+  > .@{input-prefix-cls}-wrapper.@{input-prefix-cls}-error:not(:last-child) {
+    &:focus-within {
+      border-right-color: @input-color-border_error_focus;
+    }
+  }
+}

package/lib/input/style/index.less

@@ -1,121 +1,121 @@
-@import '../../style/mixins/index.less';
-@import './input.less';
-@import './token.less';
-
-@input-prefix-cls: ~'@{prefix}-input';
-
-.get-padding(@input-size-height, @input-font-size) {
-  /* prettier-ignore */
-  padding-top: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);
-
-  /* prettier-ignore */
-  padding-bottom: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);
-}
-
-.disabled-style() {
-  color: @input-color-text_disabled;
-  background-color: @input-color-bg_disabled;
-  border-color: @input-color-border_disabled;
-  cursor: not-allowed;
-
-  &:hover {
-    color: @input-color-text_disabled;
-    background-color: @input-color-bg_disabled;
-    border-color: @input-color-border_disabled;
-  }
-
-  &::placeholder {
-    color: @input-color-text_disabled;
-  }
-}
-
-.@{input-prefix-cls}-wrapper {
-  .input-wrapper-style(@input-prefix-cls);
-
-  .@{input-prefix-cls} {
-    .input-style();
-
-    &.@{input-prefix-cls}-size-mini {
-      .input-size(mini);
-    }
-
-    &.@{input-prefix-cls}-size-small {
-      .input-size(small);
-    }
-
-    &.@{input-prefix-cls}-size-medium {
-      .input-size(medium);
-    }
-
-    &.@{input-prefix-cls}-size-large {
-      .input-size(large);
-    }
-  }
-
-  .@{input-prefix-cls}-word-limit {
-    color: @input-color-tip-text;
-    font-size: @input-font-tip-size;
-  }
-}
-
-.@{input-prefix-cls}-outer {
-  display: inline-flex;
-  width: 100%;
-
-  > .@{input-prefix-cls}-wrapper {
-    border-radius: 0;
-  }
-
-  > :first-child {
-    border-top-left-radius: @input-border-radius;
-    border-bottom-left-radius: @input-border-radius;
-  }
-
-  > :last-child {
-    border-top-right-radius: @input-border-radius;
-    border-bottom-right-radius: @input-border-radius;
-  }
-
-  .outer-size();
-
-  &-disabled {
-    cursor: not-allowed;
-  }
-}
-
-.@{input-prefix-cls}-prepend,
-.@{input-prefix-cls}-append {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 @input-padding-horizontal;
-  color: @input-color-text;
-  white-space: nowrap;
-  background-color: @input-color-addon-bg;
-  border: 1px solid @input-color-addon-border_default;
-
-  > svg {
-    font-size: @input-size-default-icon-addon-size;
-  }
-}
-
-.@{input-prefix-cls}-prepend {
-  border-right: @input-border-addon-separator-width solid
-    @input-color-addon-border;
-
-  .addon(before, @input-size-default-height, @input-size-default-font-size);
-}
-
-.@{input-prefix-cls}-append {
-  border-left: @input-border-addon-separator-width solid
-    @input-color-addon-border;
-
-  .addon(after, @input-size-default-height, @input-size-default-font-size);
-}
-
-@import './group.less';
-@import './size.less';
-@import './textarea.less';
-@import './search.less';
-@import './password.less';
+@import '../../style/mixins/index.less';
+@import './input.less';
+@import './token.less';
+
+@input-prefix-cls: ~'@{prefix}-input';
+
+.get-padding(@input-size-height, @input-font-size) {
+  /* prettier-ignore */
+  padding-top: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);
+
+  /* prettier-ignore */
+  padding-bottom: (round(@input-size-height - @input-border-width * 2 - @line-height-base * @input-font-size) / 2);
+}
+
+.disabled-style() {
+  color: @input-color-text_disabled;
+  background-color: @input-color-bg_disabled;
+  border-color: @input-color-border_disabled;
+  cursor: not-allowed;
+
+  &:hover {
+    color: @input-color-text_disabled;
+    background-color: @input-color-bg_disabled;
+    border-color: @input-color-border_disabled;
+  }
+
+  &::placeholder {
+    color: @input-color-text_disabled;
+  }
+}
+
+.@{input-prefix-cls}-wrapper {
+  .input-wrapper-style(@input-prefix-cls);
+
+  .@{input-prefix-cls} {
+    .input-style();
+
+    &.@{input-prefix-cls}-size-mini {
+      .input-size(mini);
+    }
+
+    &.@{input-prefix-cls}-size-small {
+      .input-size(small);
+    }
+
+    &.@{input-prefix-cls}-size-medium {
+      .input-size(medium);
+    }
+
+    &.@{input-prefix-cls}-size-large {
+      .input-size(large);
+    }
+  }
+
+  .@{input-prefix-cls}-word-limit {
+    color: @input-color-tip-text;
+    font-size: @input-font-tip-size;
+  }
+}
+
+.@{input-prefix-cls}-outer {
+  display: inline-flex;
+  width: 100%;
+
+  > .@{input-prefix-cls}-wrapper {
+    border-radius: 0;
+  }
+
+  > :first-child {
+    border-top-left-radius: @input-border-radius;
+    border-bottom-left-radius: @input-border-radius;
+  }
+
+  > :last-child {
+    border-top-right-radius: @input-border-radius;
+    border-bottom-right-radius: @input-border-radius;
+  }
+
+  .outer-size();
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+}
+
+.@{input-prefix-cls}-prepend,
+.@{input-prefix-cls}-append {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 @input-padding-horizontal;
+  color: @input-color-text;
+  white-space: nowrap;
+  background-color: @input-color-addon-bg;
+  border: 1px solid @input-color-addon-border_default;
+
+  > svg {
+    font-size: @input-size-default-icon-addon-size;
+  }
+}
+
+.@{input-prefix-cls}-prepend {
+  border-right: @input-border-addon-separator-width solid
+    @input-color-addon-border;
+
+  .addon(before, @input-size-default-height, @input-size-default-font-size);
+}
+
+.@{input-prefix-cls}-append {
+  border-left: @input-border-addon-separator-width solid
+    @input-color-addon-border;
+
+  .addon(after, @input-size-default-height, @input-size-default-font-size);
+}
+
+@import './group.less';
+@import './size.less';
+@import './textarea.less';
+@import './search.less';
+@import './password.less';