@aloudata/aloudata-design 1.10.13 → 2.0.0-beta.1

package/dist/Input/style/index.less

@@ -1,573 +1,12 @@
 /* stylelint-disable no-descending-specificity */
 @import '../../style/index.less';
 @import '../../Icon/index.less';
-
-@ald-prefix: ant;
-
-// size===large
-@input-height-large: 36px;
-@input-padding-large: 5px 11px;
-@input-font-size-large: 16px;
-@input-border-radius-large: 4px;
-@input-prefix-margin-right-large: 8px;
-@input-clear-icon-large: 20px;
-// size===middle
-@input-height-middle: 32px;
-@input-padding-middle: 5px 7px;
-@input-font-size-middle: 13px;
-@input-border-radius-middle: 2px;
-@input-prefix-margin-right-middle: 4px;
-@input-clear-icon-middle: 16px;
-// size===small
-@input-height-small: 28px;
-@input-padding-small: 5px 7px;
-@input-font-size-small: 12px;
-@input-border-radius-small: 2px;
-@input-prefix-margin-right-small: 4px;
-@input-clear-icon-small: 14px;
-//custom status
-@input-border-color: @BG60;
-@input-fontColor: @NL0;
-@input-placeholder-color: @NL50;
-@input-prefix-color: @NL40;
-@input-bg-color: @BG100;
-// active status
-@input-active-border-color: @B40;
-// @input-box-shadow-active: @shadow-xs;
-// disabled status
-@input-disabled-border-color: @BG60;
-@input-disabled-bg-color: @BG90;
-@input-disabled-font-color: @NL40;
-
-.ant-input.ald-input.ald-input,
-.ant-input-affix-wrapper.ald-input.ald-input,
-.ald-input.ald-input .ant-input {
-  color: @NL0;
-  font-weight: 400;
-  background-color: @input-bg-color;
-  border-color: @input-border-color;
-  border-radius: @input-border-radius-middle;
-  // box-shadow: @shadow-xs;
-  caret-color: @B60;
-
-  .ant-input-suffix .ant-input-clear-icon {
-    display: none;
-  }
-
-  &:hover {
-    border-color: @input-border-color;
-
-    .ant-input-suffix .ant-input-clear-icon {
-      display: block;
-    }
-  }
-
-  &.ant-input-affix-wrapper-focused {
-    .ant-input-suffix .ant-input-clear-icon {
-      display: block;
-    }
-  }
-
-  &::placeholder {
-    color: @input-placeholder-color;
-  }
-
-  &-prefix {
-    color: @input-prefix-color;
-    font-size: inherit;
-  }
-
-  &-suffix {
-    color: @NL60;
-  }
-
-  &:focus,
-  &-focused {
-    border-color: @input-active-border-color;
-    box-shadow: none;
-    // box-shadow: @input-box-shadow-active;
-  }
-
-  &[disabled].ald-input {
-    color: @input-disabled-font-color;
-    background-color: @input-disabled-bg-color;
-    border-color: @input-disabled-border-color;
-    box-shadow: none;
-    cursor: default;
-
-    &::placeholder {
-      color: @input-placeholder-color;
-    }
-  }
-
-  &-affix-wrapper {
-    // height: 28px;
-    // padding: 0 12px;
-    // border-radius: @border-radius-base;
-
-    &-hover,
-    &-focused,
-    &:hover {
-      box-shadow: unset;
-    }
-
-    .ant-input {
-      height: 100%;
-      border-radius: 0;
-    }
-  }
-
-  .ant-input {
-    font-size: inherit;
-  }
-}
-
-.ant-input-affix-wrapper.ant-input-affix-wrapper.ant-input-affix-wrapper {
-  background-color: @input-bg-color;
-  border-color: @input-border-color;
-  border-radius: 2px;
-
-  // &:hover,
-  &-focused {
-    &:not(.ant-input-affix-wrapper-disabled) {
-      border-color: @input-active-border-color;
-      // box-shadow: @input-box-shadow-active;
-      box-shadow: none;
-      cursor: initial;
-    }
-  }
-
-  .ant-input {
-    color: @NL0;
-    background-color: @input-bg-color;
-    border-radius: 0;
-    box-shadow: none;
-    caret-color: @B60;
-
-    &::placeholder {
-      color: @input-placeholder-color;
-    }
-  }
-
-  .ald-input {
-    height: 1.5715em; //和行高一致
-  }
-
-  .ant-input-prefix {
-    color: #858585;
-  }
-
-  .ant-input-suffix {
-    color: #858585;
-
-    .ant-input-clear-icon {
-      color: #858585;
-      font-size: inherit;
-    }
-
-    .ant-input-password-icon {
-      color: #858585;
-    }
-  }
-}
-
-.ant-input-affix-wrapper-focused {
-  &.ant-input-password {
-    border-color: @input-active-border-color;
-    // box-shadow: @input-box-shadow-active;
-  }
-
-  // &:hover {
-  //   border-color: @input-active-border-color;
-  //   // box-shadow: @input-box-shadow-active;
-  // }
-
-  .ant-input:hover {
-    box-shadow: none;
-  }
-}
-
-.ald-input {
-  &.ald-input-small {
-    height: @input-height-small;
-    padding: @input-padding-small;
-    font-size: @input-font-size-small;
-    border-radius: @input-border-radius-small;
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-small;
-    }
-
-    .ant-input-suffix .ant-input-clear-icon {
-      font-size: @input-clear-icon-small;
-    }
-  }
-
-  &.ald-input-middle {
-    height: @input-height-middle;
-    padding: @input-padding-middle;
-    font-size: @input-font-size-middle;
-    border-radius: @input-border-radius-middle;
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-middle;
-    }
-
-    .ant-input-suffix .ant-input-clear-icon {
-      font-size: @input-clear-icon-middle;
-    }
-  }
-
-  &.ald-input-large {
-    height: @input-height-large;
-    padding: @input-padding-large;
-    font-size: @input-font-size-large;
-    border-radius: @input-border-radius-large;
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-large;
-    }
-
-    .ant-input-suffix .ant-input-clear-icon {
-      font-size: @input-clear-icon-small;
-    }
-  }
-}
-
-.ald-input-group {
-  .ald-input {
-    margin: 0;
-  }
-}
-
-.ald-input-group-large {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-large;
-    padding: @input-padding-large;
-    font-size: @input-font-size-large;
-
-    &.ant-input {
-      border-radius: @input-border-radius-large;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-large;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-large !important;
-    border-end-start-radius: @input-border-radius-large !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-large !important;
-    border-end-end-radius: @input-border-radius-large !important;
-  }
-}
-
-.ald-input-group-middle {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-middle;
-    padding: @input-padding-middle;
-    font-size: @input-font-size-middle;
-    border-radius: @input-border-radius-middle;
-
-    &.ant-input {
-      border-radius: @input-border-radius-middle;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-middle;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-middle !important;
-    border-end-start-radius: @input-border-radius-middle !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-middle !important;
-    border-end-end-radius: @input-border-radius-middle !important;
-  }
-}
-
-.ald-input-group-small {
-  &:not(.ant-input-group-compact) .ald-input {
-    height: @input-height-small;
-    padding: @input-padding-small;
-    font-size: @input-font-size-small;
-    border-radius: @input-border-radius-small;
-
-    &.ant-input {
-      border-radius: @input-border-radius-small;
-    }
-
-    .ant-input-prefix {
-      margin-right: @input-prefix-margin-right-small;
-    }
-  }
-
-  &.ant-input-group-compact {
-    .ald-input,
-    .ald-select,
-    .ald-btn.ant-btn {
-      border-radius: 0;
-    }
-  }
-
-  &.ant-input-group-compact > *:first-child {
-    border-radius: 0 !important;
-    border-start-start-radius: @input-border-radius-small !important;
-    border-end-start-radius: @input-border-radius-small !important;
-  }
-
-  &.ant-input-group-compact > *:last-child {
-    border-radius: 0 !important;
-    border-inline-end-width: 1px;
-    border-start-end-radius: @input-border-radius-small !important;
-    border-end-end-radius: @input-border-radius-small !important;
-  }
-}
-
-.ald-textarea-large {
-  padding: 5px 11px;
-  font-size: @font-size-large;
-  line-height: @line-height-large;
-  border-radius: @border-radius-large;
-}
-
-.ald-textarea-middle {
-  padding: 5px 11px;
-  font-size: @font-size-middle;
-  line-height: @line-height-middle;
-  border-radius: @border-radius-middle;
-}
-
-.ald-textarea-small {
-  padding: 5px 7px;
-  font-size: @font-size-small;
-  line-height: @line-height-small;
-  border-radius: @border-radius-small;
-}
-
-textarea.ald-input-textarea-large.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-large .ant-input {
-  .ald-textarea-large();
-}
-
-textarea.ald-input-textarea-middle.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-middle .ant-input {
-  .ald-textarea-middle();
-}
-
-textarea.ald-input-textarea-small.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea-small .ant-input {
-  .ald-textarea-small();
-}
-
-textarea.ald-input-textarea.ald-input-textarea,
-.ald-input-textarea.ald-input-textarea .ant-input {
-  color: @NL0;
-  background: @input-bg-color;
-  caret-color: @B60;
-  border-color: @input-border-color;
-
-  // &:hover,
-  &:active,
-  &:focus {
-    border-color: @B40;
-    box-shadow: none;
-  }
-
-  ::placeholder {
-    color: @NL80;
-  }
-
-  &.ant-input-disabled {
-    color: #858585;
-    background: #f8f8f8;
-    cursor: initial;
-
-    // &:hover,
-    &:active,
-    &:focus {
-      border-color: #dbdbdb;
-      box-shadow: none;
-    }
-  }
-}
-
-.ant-input-textarea-show-count::after {
-  color: @NL50;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.ant-input-group-wrapper {
-  .ant-input-group-addon {
-    color: #858585 !important;
-    border-color: @input-border-color;
-  }
-
-  &.ald-input-large {
-    .ant-input-group-addon {
-      padding: 4px 14px;
-      font-size: @input-font-size-large;
-    }
-
-    .ant-input {
-      height: @input-height-large;
-      padding: @input-padding-large;
-      font-size: @input-font-size-large;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-large;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-small;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-large 0 0 @input-border-radius-large;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-large @input-border-radius-large 0;
-    }
-  }
-
-  &.ald-input-middle {
-    .ant-input-group-addon {
-      padding: 4px 8px;
-      font-size: @input-font-size-middle;
-    }
-
-    .ant-input {
-      height: @input-height-middle;
-      padding: @input-padding-middle;
-      font-size: @input-font-size-middle;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-middle;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-middle;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-middle 0 0 @input-border-radius-middle;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-middle @input-border-radius-middle 0;
-    }
-  }
-
-  &.ald-input-small {
-    .ant-input-group-addon {
-      padding: 3px 8px;
-      font-size: @input-font-size-small;
-    }
-
-    .ant-input {
-      height: @input-height-small;
-      padding: @input-padding-small;
-      font-size: @input-font-size-small;
-
-      .ant-input-prefix {
-        margin-right: @input-prefix-margin-right-small;
-      }
-
-      .ant-input-suffix .ant-input-clear-icon {
-        font-size: @input-clear-icon-small;
-      }
-    }
-
-    .ant-input:first-child,
-    .ant-input-group-addon:first-child {
-      border-radius: @input-border-radius-small 0 0 @input-border-radius-small;
-    }
-
-    .ant-input:last-child,
-    .ant-input-group-addon:last-child {
-      border-radius: 0 @input-border-radius-small @input-border-radius-small 0;
-    }
-  }
-
-  /* stylelint-disable-next-line no-duplicate-selectors */
-  .ant-input-group-addon[class][class] {
-    background-color: #f8f8f8;
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-}
-
-.ant-input-group.ant-input-group-compact {
-  & > {
-    .ald-select,
-    .ald-input,
-    .ant-input,
-    .ant-input-number {
-      &:hover {
-        position: relative;
-        z-index: 2;
-      }
-    }
-  }
-
-  & > .ald-select.ald-select-open {
-    position: relative;
-    z-index: 1;
-  }
-
-  .ant-input-number.ant-input-number-focused {
-    position: relative;
-    z-index: 1;
-  }
-}
+@import './reset.less';
+@import './size.less';
+@import './status.less';
 
 .ant-input-status-error:not(.ant-input-disabled):not(
     .ant-input-borderless
   ).ant-input.ant-input {
-  border-color: @error-color;
+  border-color: var(--alias-colors-border-danger, #dc2626);
 }

package/dist/Input/style/reset.less

@@ -0,0 +1,22 @@
+.ald-input.ald-input {
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    box-shadow: none;
+  }
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    box-shadow: none;
+    // 输入框
+    .ant-input.ant-input {
+      color: inherit;
+      font-size: inherit;
+    }
+    // 后缀
+    .ant-input-suffix {
+      .ant-input-clear-icon {
+        display: grid;
+        place-items: center;
+      }
+    }
+  }
+}

package/dist/Input/style/size.less

@@ -0,0 +1,82 @@
+// size===large
+@input-height-large: 36px;
+@input-padding-large: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-large: 16px;
+@input-border-radius-large: 8px;
+@input-prefix-margin-right-large: var(--alias-spacing-100, 8px);
+@input-clear-icon-large: 20px;
+// size===middle
+@input-height-middle: 32px;
+@input-padding-middle: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-middle: 14px;
+@input-border-radius-middle: var(--alias-radius-75, 6px);
+@input-prefix-margin-right-middle: var(--alias-spacing-75, 6px);
+@input-clear-icon-middle: 20px;
+// size===small
+@input-height-small: 28px;
+@input-padding-small: var(--alias-padding-75-minus-1, 6px)
+  var(--alias-padding-150-minus-1, 12px);
+@input-font-size-small: 12px;
+@input-border-radius-small: var(--alias-radius-50, 4px);
+@input-prefix-margin-right-small: var(--alias-spacing-50, 4px);
+@input-clear-icon-small: 20px;
+
+.ald-input-wrap {
+  &.ald-input-small {
+    height: @input-height-small;
+    padding: @input-padding-small;
+    font-size: @input-font-size-small;
+    border-radius: @input-border-radius-small;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-small;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-small;
+    }
+  }
+
+  &.ald-input-middle {
+    height: @input-height-middle;
+    padding: @input-padding-middle;
+    font-size: @input-font-size-middle;
+    border-radius: @input-border-radius-middle;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-middle;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-middle;
+    }
+  }
+
+  &.ald-input-large {
+    height: @input-height-large;
+    padding: @input-padding-large;
+    font-size: @input-font-size-large;
+    border-radius: @input-border-radius-large;
+
+    .ant-input-prefix {
+      margin-right: @input-prefix-margin-right-large;
+    }
+
+    .ant-input-suffix .ant-input-clear-icon {
+      font-size: @input-clear-icon-small;
+    }
+  }
+}
+
+.ald-input.ald-input {
+  // 带有其他内容的输入框，比如带 allowClear图标、prefix、suffix、密码图标等。
+  &.ant-input-affix-wrapper {
+    .ald-input-wrap();
+  }
+  // 纯input 输入框，比如普通的<Input /> <Input.textarea />
+  &:not(.ant-input-affix-wrapper) {
+    .ald-input-wrap();
+  }
+}