@kdcloudjs/kdesign 1.0.2 → 1.1.0

package/lib/input/style/index.css

@@ -92,6 +92,15 @@
 /* -----------  Avatar  ——————---- end */
 /* -----------  AdvancedSelector  ——————---- start */
 /* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 textarea {
   margin: 0;
   padding: 0;
@@ -106,29 +115,29 @@ textarea {
 .kd-input {
   width: 100%;
   min-width: 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  color: #666;
+  border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
   display: inline-block;
   font-variant: tabular-nums;
   list-style: none;
   background-image: none;
   -webkit-font-feature-settings: "tnum";
           font-feature-settings: "tnum";
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-input::-webkit-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input::-moz-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input::-ms-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input:focus {
   -webkit-box-shadow: none;
@@ -136,11 +145,11 @@ textarea {
   outline: none;
 }
 .kd-input:not(.kd-input-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input:not(.kd-input-disabled):focus {
   color: #212121;
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-countWrapper {
   position: relative;
@@ -150,32 +159,32 @@ textarea {
 .kd-input-textarea {
   width: 100%;
   min-width: 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  color: #666;
+  border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
   display: inline-block;
   font-variant: tabular-nums;
   list-style: none;
   background-image: none;
   -webkit-font-feature-settings: "tnum";
           font-feature-settings: "tnum";
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
   max-width: 100%;
   height: auto;
   vertical-align: bottom;
 }
 .kd-input-textarea::-webkit-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-textarea::-moz-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-textarea::-ms-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-textarea:focus {
   -webkit-box-shadow: none;
@@ -183,19 +192,19 @@ textarea {
   outline: none;
 }
 .kd-input-textarea:not(.kd-input-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-textarea:not(.kd-input-disabled):focus {
   color: #212121;
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-textarea-mark {
   position: absolute;
   right: 0;
   top: calc(100% + 1px);
   z-index: 1;
-  color: #999;
-  font-size: 12px;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999));
+  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-input-no-resize {
   resize: none;
@@ -209,55 +218,55 @@ textarea {
 }
 .kd-input-underline {
   border: none;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0;
   padding-left: 0 !important;
 }
 .kd-input-disabled {
-  background-color: #f5f5f5;
-  border-color: #d9d9d9;
-  color: #b2b2b2;
+  background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-input-underline.kd-input-disabled {
-  background-color: #fff;
-  border-color: #d9d9d9;
+  background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
+  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
 }
 .kd-input-size-small {
-  height: 20px;
-  line-height: 12px;
-  font-size: 12px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-small-sizing-height, 20px);
+  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
 }
 .kd-input-size-middle {
-  height: 30px;
-  line-height: 22px;
-  font-size: 14px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-middle-sizing-height, 30px);
+  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
 }
 .kd-input-size-large {
-  height: 36px;
-  line-height: 28px;
-  font-size: 16px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-large-sizing-height, 36px);
+  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
 }
 .kd-input-wrapper {
   width: 100%;
   min-width: 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  color: #666;
+  border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
   display: inline-block;
   font-variant: tabular-nums;
   list-style: none;
   background-image: none;
   -webkit-font-feature-settings: "tnum";
           font-feature-settings: "tnum";
-  -webkit-transition: border-color 0.3s;
-  transition: border-color 0.3s;
+  -webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -267,13 +276,13 @@ textarea {
   overflow: hidden;
 }
 .kd-input-wrapper::-webkit-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper::-moz-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper::-ms-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper:focus {
   -webkit-box-shadow: none;
@@ -281,11 +290,11 @@ textarea {
   outline: none;
 }
 .kd-input-wrapper:not(.kd-input-wrapper-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper:not(.kd-input-wrapper-disabled):focus {
   color: #212121;
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper .kd-input {
   border: none;
@@ -316,43 +325,43 @@ textarea {
   margin-right: 4px;
 }
 .kd-input-wrapper-size-small {
-  height: 20px;
-  line-height: 12px;
-  font-size: 12px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-small-sizing-height, 20px);
+  line-height: calc(var(--kd-c-input-small-sizing-height, 20px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-small-font-size, var(--kd-g-font-size-small, 12px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-small-spacing-padding-horizontal, 9px);
 }
 .kd-input-wrapper-size-middle {
-  height: 30px;
-  line-height: 22px;
-  font-size: 14px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-middle-sizing-height, 30px);
+  line-height: calc(var(--kd-c-input-middle-sizing-height, 30px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-middle-font-size, var(--kd-g-font-size-middle, 14px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-middle-spacing-padding-horizontal, 9px);
 }
 .kd-input-wrapper-size-large {
-  height: 36px;
-  line-height: 28px;
-  font-size: 16px;
-  padding: 3px 9px;
+  height: var(--kd-c-input-large-sizing-height, 36px);
+  line-height: calc(var(--kd-c-input-large-sizing-height, 36px) - (var(--kd-c-input-small-spacing-padding-vertical, 3px) * 2) - (1px * 2));
+  font-size: var(--kd-c-input-large-font-size, var(--kd-g-font-size-large, 16px));
+  padding: var(--kd-c-input-small-spacing-padding-vertical, 3px) var(--kd-c-input-large-spacing-padding-horizontal, 9px);
 }
 .kd-input-wrapper-borderless {
   border: none !important;
 }
 .kd-input-wrapper-underline {
   border: none;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
 }
 .kd-input-wrapper-focused {
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-textarea {
   width: 100%;
   min-width: 0;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-  color: #666;
+  border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
+  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  background-color: #fff;
+  background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
   font-variant: tabular-nums;
   list-style: none;
   background-image: none;
@@ -364,13 +373,13 @@ textarea {
   display: inline-block;
 }
 .kd-input-wrapper-textarea::-webkit-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper-textarea::-moz-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper-textarea::-ms-input-placeholder {
-  color: #999 !important;
+  color: var(--kd-c-input-color-placeholder, var(--kd-g-color-text-third, #999)) !important;
 }
 .kd-input-wrapper-textarea:focus {
   -webkit-box-shadow: none;
@@ -378,11 +387,11 @@ textarea {
   outline: none;
 }
 .kd-input-wrapper-textarea:not(.kd-input-disabled):hover {
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-textarea:not(.kd-input-disabled):focus {
   color: #212121;
-  border-color: #5582f3;
+  border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-wrapper-textarea .kd-input-textarea-clear-icon {
   position: absolute;
@@ -392,7 +401,7 @@ textarea {
 .kd-input-clear-icon,
 .kd-input-textarea-clear-icon {
   cursor: pointer;
-  color: #5582f3;
+  color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-clear-icon i,
 .kd-input-textarea-clear-icon i {
@@ -443,13 +452,13 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
   position: relative;
-  color: #666;
+  color: var(--kd-c-input-color, var(--kd-g-color-text-secondary, #666));
   padding: 0 9px;
   font-weight: 400;
   font-size: 14px;
   text-align: center;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
+  border: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
   white-space: nowrap;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -459,7 +468,7 @@ textarea {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 30px;
+  height: var(--kd-c-input-middle-sizing-height, 30px);
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon:first-child {
   border-top-right-radius: 0;
@@ -476,23 +485,23 @@ textarea {
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon-underline {
   border: none;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--kd-c-input-color-border, #999);
   border-radius: 0 !important;
 }
 .kd-input-group-wrapper .kd-input-group .kd-input-group-addon-disabled {
-  background-color: #f5f5f5;
-  border-color: #d9d9d9;
-  color: #b2b2b2;
+  background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
+  border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
+  color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
   cursor: not-allowed;
 }
 .kd-input-group-wrapper .kd-input-group-size-small .kd-input-group-addon {
-  height: 20px;
+  height: var(--kd-c-input-small-sizing-height, 20px);
 }
 .kd-input-group-wrapper .kd-input-group-middle-small .kd-input-group-addon {
-  height: 30px;
+  height: var(--kd-c-input-middle-sizing-height, 30px);
 }
 .kd-input-group-wrapper .kd-input-group-large-small .kd-input-group-addon {
-  height: 36px;
+  height: var(--kd-c-input-large-sizing-height, 36px);
 }
 .kd-input-allowClear-spacing {
   padding-right: 20px;

package/lib/input/style/index.less

@@ -1,7 +1,10 @@
 @import '../../style/themes/index';
 @import './mixin.less';
+
 @input-prefix-cls: ~'@{kd-prefix}-input';
 @wrapper-prefix-cls: ~'@{input-prefix-cls}-wrapper';
+
+
 textarea {
 	margin: 0;
 	padding: 0;
@@ -15,7 +18,7 @@ textarea {
 }
 .@{input-prefix-cls} {
 	.input(@input-prefix-cls);
-	transition: border-color @transition-duration;
+	transition: border-color @transition-duration-inner;
 	&-countWrapper {
 		position: relative;
 		display: inline-block;
@@ -23,7 +26,7 @@ textarea {
 	}
 	&-textarea {
 		.input(@input-prefix-cls);
-		transition: border-color @transition-duration;
+		transition: border-color @transition-duration-inner;
 		max-width: 100%;
 		height: auto;
 		vertical-align: bottom;
@@ -32,8 +35,8 @@ textarea {
 			right: 0;
 			top: ~'calc(100% + 1px)';
 			z-index: 1;
-			color: @third-text-color;
-			font-size: @small-font-size;
+			color: @input-placeholder-color-inner;
+			font-size: @input-small-font-size-inner;
 		}
 	}
 	&-no-resize {
@@ -48,32 +51,32 @@ textarea {
 	}
 	&-underline {
 		border: none;
-		border-bottom: 1px solid @input-color;
+		border-bottom: 1px solid @input-color-border;
 		border-radius: 0;
 		padding-left: 0 !important;
 	}
 	&-disabled {
-		background-color: @disabled-contain-bg;
-		border-color: @strong-border-color;
-		color: @disabled-color;
+		background-color: @input-background-color-disabled-inner;
+		border-color: @input-border-color-disabled-inner;
+		color: @input-color-disabled-inner;
 		cursor: not-allowed;
 	}
 	&-underline&-disabled {
-		background-color: @input-background-color;
-		border-color: @strong-border-color;
+		background-color: @input-background-color-inner;
+		border-color: @input-border-color-disabled-inner;
 	}
 	&-size-small {
-		.input-size(@input-small-height, @input-small-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
 	}
 	&-size-middle {
-		.input-size(@input-middle-height, @input-middle-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		.input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
 	}
 	&-size-large {
-		.input-size(@input-large-height, @input-large-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+		.input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
 	}
 	&-wrapper {
 		.input(@wrapper-prefix-cls);
-		transition: border-color @transition-duration;
+		transition: border-color @transition-duration-inner;
 		display: inline-flex;
 		position: relative;
 		padding-top: 0 !important;
@@ -99,13 +102,13 @@ textarea {
 			}
 		}
 		&-size-small {
-			.input-size(@input-small-height, @input-small-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+			.input-size(@input-small-height-inner, @input-small-font-size-inner, @input-small-padding-vertical-inner, @input-small-padding-horizontal-inner);
 		}
 		&-size-middle {
-			.input-size(@input-middle-height, @input-middle-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+			.input-size(@input-middle-height-inner, @input-middle-font-size-inner, @input-small-padding-vertical-inner, @input-middle-padding-horizontal-inner);
 		}
 		&-size-large {
-			.input-size(@input-large-height, @input-large-font-size, @input-small-padding-vertical, @input-small-padding-horizontal);
+			.input-size(@input-large-height-inner, @input-large-font-size-inner, @input-small-padding-vertical-inner, @input-large-padding-horizontal-inner);
 		}
 		&-borderless {
 			.border-less;
@@ -113,9 +116,9 @@ textarea {
 		&-underline {
 			.underline;
 		}
-		
+
 		&-focused {
-			border-color: @theme-color;
+			border-color: @input-border-color-focused;
 		}
 	}
 	&-wrapper-textarea {
@@ -178,18 +181,18 @@ textarea {
 				}
 				.@{input-prefix-cls}-group-addon {
 					position: relative;
-					color: @input-font-color;
+					color: @input-font-color-inner;
 					padding: 0 9px;
 					font-weight: 400;
 					font-size: 14px;
 					text-align: center;
-					border: 1px solid @strong-border-color;
-					border-radius: @radius-size;
+					border: 1px solid @input-border-color-disabled-inner;
+					border-radius: @input-border-radius-inner;
 					white-space: nowrap;
 					box-sizing: border-box;
 					display: flex;
 					align-items: center;
-					height: @input-middle-height;
+					height: @input-middle-height-inner;
 					&:first-child {
 						border-top-right-radius: 0;
 						border-bottom-right-radius: 0;
@@ -200,7 +203,7 @@ textarea {
 						border-bottom-left-radius: 0;
 						border-left: none;
 					}
-					
+
 					&-borderless {
 						.border-less;
 					}
@@ -208,26 +211,26 @@ textarea {
 						.underline;
 					}
 					&-disabled {
-						background-color: @disabled-contain-bg;
-						border-color: @strong-border-color;
-						color: @disabled-color;
+						background-color: @input-background-color-disabled-inner;
+						border-color: @input-border-color-disabled-inner;
+						color: @input-color-disabled-inner;
 						cursor: not-allowed;
 					}
 				}
 			}
 			&-group-size-small {
 				.@{input-prefix-cls}-group-addon {
-					height: @input-small-height;
+					height: @input-small-height-inner;
 				}
 			}
 			&-group-middle-small {
 				.@{input-prefix-cls}-group-addon {
-					height: @input-middle-height;
+					height: @input-middle-height-inner;
 				}
 			}
 			&-group-large-small {
 				.@{input-prefix-cls}-group-addon {
-					height: @input-large-height;
+					height: @input-large-height-inner;
 				}
 			}
 		}
@@ -235,4 +238,4 @@ textarea {
 	&-allowClear-spacing {
 		padding-right: 20px;
 	}
-}
+}