@kdcloudjs/kdesign 1.2.0 → 1.2.1

package/lib/radio/style/index.css

@@ -113,9 +113,11 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
-  padding-left: var(--kd-c-radio-square-sizing-width-height, 13px);
+  padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
   margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
   white-space: nowrap;
   cursor: pointer;
@@ -127,8 +129,8 @@
   position: absolute;
   top: 50%;
   left: 0;
-  height: var(--kd-c-radio-square-sizing-width-height, 13px);
-  width: var(--kd-c-radio-square-sizing-width-height, 13px);
+  height: var(--kd-c-radio-square-sizing-width-height, 14px);
+  width: var(--kd-c-radio-square-sizing-width-height, 14px);
   content: '';
   border-radius: 50%;
   -webkit-box-sizing: border-box;
@@ -146,8 +148,8 @@
   position: absolute;
   top: 50%;
   left: 2px;
-  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
-  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
   content: '';
   border-radius: 50%;
   background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -165,7 +167,10 @@
   opacity: 0;
 }
 .kd-radio > span {
-  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 6px);
+  padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
+}
+.kd-radio:hover {
+  color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }
 .kd-radio:hover::before {
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -181,8 +186,8 @@
   position: absolute;
   top: 50%;
   left: 2px;
-  width: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
-  height: calc(var(--kd-c-radio-square-sizing-width-height, 13px) - 4px);
+  width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
+  height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
   content: '';
   border-radius: 50%;
   background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -213,6 +218,13 @@
   -webkit-animation: none;
           animation: none;
 }
+.kd-radio-disabled.kd-radio-checked,
+.kd-radio-disabled:hover.kd-radio-checked {
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+}
+.kd-radio-text {
+  line-height: 1.5;
+}
 .kd-radio-square {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -222,15 +234,17 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  white-space: nowrap;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
-  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
   margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
-  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -314,6 +328,13 @@
   -webkit-animation: none;
           animation: none;
 }
+.kd-radio-square-disabled.kd-radio-square-checked,
+.kd-radio-square-disabled:hover.kd-radio-square-checked {
+  color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
+}
+.kd-radio-square-text {
+  line-height: 1.5;
+}
 .kd-radio-button {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -326,11 +347,11 @@
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
-  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 0px);
-  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 20px);
-  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 0px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
+  padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
+  padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
+  line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
@@ -411,3 +432,10 @@
   border-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   cursor: not-allowed;
 }
+.kd-radio-button-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  line-height: 1.5;
+}

package/lib/radio/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import 'token.less';
+@import '../../style/mixins/index.less';
 @radio-prefix-cls: ~'@{kd-prefix}-radio';
 @radio-square-prefix-cls: ~'@{radio-prefix-cls}-square';
 @radio-button-prefix-cls: ~'@{radio-prefix-cls}-button';
@@ -9,6 +10,7 @@
 // 默认类型（单选项）
 .@{radio-prefix-cls} {
   .reset-component();
+  .ellipsis();
 
   // 默认状态
   position: relative;
@@ -64,7 +66,7 @@
   // 悬停状态
   &:hover {
 
-    // color: @radio-color-theme;
+    color: @radio-color-theme;
     &::before {
       border-color: @radio-color-theme;
     }
@@ -113,6 +115,14 @@
       background-color: @radio-color-disabled;
       animation: none;
     }
+
+    &.@{radio-prefix-cls}-checked {
+      color: @radio-font-color;
+    }
+  }
+
+  &-text {
+    line-height: 1.5;
   }
 }
 
@@ -120,6 +130,8 @@
 .@{radio-square-prefix-cls} {
   .reset-component();
 
+  .ellipsis();
+
   // 默认状态
   position: relative;
   display: inline-block;
@@ -211,6 +223,14 @@
       background-color: @radio-color-disabled;
       animation: none;
     }
+
+    &.@{radio-square-prefix-cls}-checked {
+      color: @radio-font-color;
+    }
+  }
+
+  &-text {
+    line-height: 1.5;
   }
 }
 
@@ -324,4 +344,10 @@
     // background-color: @radio-color-background-disabled;
     cursor: not-allowed;
   }
+
+  &-text {
+    .ellipsis();
+    display: block;
+    line-height: 1.5;
+  }
 }

package/lib/radio/style/token.less

@@ -20,12 +20,12 @@
 @radio-border-width:   var(~'@{radio-prefix}-radius-border-width',1px);
 
 // sizing
-@radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',13px);//单选图标大小
+@radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
 
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);
-@radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',0px); //内间距 纵向
-@radio-square-padding-horizontal: var(~'@{radio-prefix}-square-spacing-padding-horizontal',20px);//内间距 横向   /单选框 宽度
-@radio-padding-left: var(~'@{radio-prefix}-spacing-padding-left',6px);//图标与文字间距
+@radio-square-padding-vertical: var(~'@{radio-prefix}-square-spacing-padding-vertical',6px); //内间距 纵向
+@radio-square-padding-horizontal: var(~'@{radio-prefix}-square-spacing-padding-horizontal',12px);//内间距 横向   /单选框 宽度
+@radio-padding-left: var(~'@{radio-prefix}-spacing-padding-left',4px);//图标与文字间距
 

package/lib/select/option.js

@@ -83,7 +83,7 @@ var InternalOption = function InternalOption(props, ref) {
 
   var titleText = (0, _typeof2.default)(children) !== 'object' ? children : null;
   var checkStyle = {
-    height: '30px',
+    height: '22px',
     background: 'none'
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {

package/lib/select/style/index.css

@@ -330,6 +330,9 @@
 .kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) {
   border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
+.kd-select-bordered .kd-select-suffix {
+  right: 10px;
+}
 .kd-select-wrapper {
   -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -399,6 +402,12 @@
   min-width: 75px;
 }
 .kd-select-item-option-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   -webkit-box-flex: 1;
       -ms-flex: auto;
           flex: auto;
@@ -407,10 +416,10 @@
   text-overflow: ellipsis;
 }
 .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) {
-  background-color: var(--kd-c-select-color-background, var(--kd-g-color-hover, #f5f5f5));
+  background-color: var(--kd-c-select-color-background, #f5f5f5);
 }
 .kd-select-item-option-active:not(.kd-select-item-option-disabled) {
-  background-color: var(--kd-c-select-color-background, var(--kd-g-color-hover, #f5f5f5));
+  background-color: var(--kd-c-select-color-background, #f5f5f5);
 }
 .kd-select-item-option-selected:not(.kd-select-item-option-disabled) {
   color: var(--kd-c-select-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
@@ -440,7 +449,7 @@
   font-size: var(--kd-c-select-font-size-large, 16px);
 }
 .kd-select-suffix {
-  right: 10px;
+  right: 0;
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -456,7 +465,7 @@
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  margin-left: 4px;
+  margin-left: 8px;
 }
 .kd-select-single-focused {
   border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
@@ -594,7 +603,7 @@
   padding-left: 12px;
 }
 .kd-select-multiple-footer-hadSelected > span {
-  color: var(--kd-c-select-footer-color-text-selected, var(--kd-g-color-text-link, #0e5fd8));
+  color: var(--kd-c-select-footer-color-text-selected, #0e5fd8);
   padding: 0 2px;
 }
 .kd-select.topLeft.hidden,