@kdcloudjs/kdesign 1.5.8 → 1.5.9

package/lib/checkbox/checkbox.js

@@ -13,12 +13,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.CheckboxTypes = exports.CheckboxSizes = void 0;
 
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -39,6 +43,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 var CheckboxTypes = (0, _type.tuple)('default', 'square');
 exports.CheckboxTypes = CheckboxTypes;
 var CheckboxSizes = (0, _type.tuple)('large', 'middle', 'small');
@@ -53,6 +70,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       userDefaultProps = _useContext.compDefaultProps;
 
   var CheckboxProps = (0, _utils.getCompProps)('Checkbox', userDefaultProps, props);
+
   var checkboxType = CheckboxProps.checkboxType,
       className = CheckboxProps.className,
       customPrefixcls = CheckboxProps.prefixCls,
@@ -65,7 +83,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       style = CheckboxProps.style,
       value = CheckboxProps.value,
       indeterminate = CheckboxProps.indeterminate,
-      name = CheckboxProps.name;
+      name = CheckboxProps.name,
+      rest = __rest(CheckboxProps, ["checkboxType", "className", "prefixCls", "defaultChecked", "checked", "size", "onChange", "disabled", "children", "style", "value", "indeterminate", "name"]);
 
   var getChecked = function getChecked() {
     return (0, _isBoolean.default)(checked) ? checked : defaultChecked;
@@ -129,11 +148,11 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
-      _react.default.createElement("label", {
+      _react.default.createElement("label", (0, _extends2.default)({
         className: getRootClassName,
         style: style,
         ref: labelRef
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, rest), /*#__PURE__*/_react.default.createElement("span", {
         className: checkedWrapperClassName
       }, selected && /*#__PURE__*/_react.default.createElement("span", {
         className: innerIconClassName

package/lib/city-picker/no-data.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const NoData: () => JSX.Element;
 export default NoData;

package/lib/date-picker/calendar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, PickerMode, SharedTimeProps } from './interface';
 import { RangeShowTimeObject } from './range-picker';
 export interface CalendarProps {

package/lib/date-picker/panel/month/month.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 export declare const monthsNumToText: string[];
 export interface MonthProps {

package/lib/date-picker/panel/quarter/quarter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 interface QuarterProps {
     disabledDate?: (date: DateType) => boolean;

package/lib/date-picker/panel/time/time.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, DisabledTimes, PanelSharedProps, PickerMode } from '../../interface';
 export interface SharedTimeProps extends DisabledTimes {
     format?: string;

package/lib/date-picker/panel/week/week.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, PickerMode } from '../../interface';
 export interface WeekProps {
     day: DateType;

package/lib/date-picker/panel/year/year.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 export interface YearProps {
     yearItemNumber: number;

package/lib/date-picker/utils/get-ranges.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Components, RangeList, InnerLocale } from '../interface';
 export interface RangesProps {
     prefixCls: string;

package/lib/dropdown/dropdown.js

@@ -36,7 +36,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var findItem = function findItem(element) {
-  var isItem = element.className === 'kd-dropdown-menu-item';
+  var isItem = /kd-dropdown-menu-item/.test(element.className);
 
   if (isItem) {
     return element;

package/lib/empty/defaultEmptyImg.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function DefaultEmptyImg(): JSX.Element;
 export default DefaultEmptyImg;

package/lib/empty/illustrationEmptyImg.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function IllustrationEmptyImg(): JSX.Element;
 export default IllustrationEmptyImg;

package/lib/modal/style/index.css

@@ -236,14 +236,8 @@
   font-size: var(--kd-c-modal-footer-font-size, 14px);
   color: var(--kd-c-modal-footer-text-color, var(--kd-g-color-text-secondary, #666));
 }
-.kd-modal-ok-btn,
-.kd-modal-cancel-btn {
-  min-width: 88px;
-  min-height: 32px;
-  font-size: var(--kd-c-modal-footer-font-size, 14px);
-}
 .kd-modal-margin-btn {
-  margin-right: 20px;
+  margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
 }
 .kd-modal-showline .kd-modal-header {
   border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));

package/lib/modal/style/index.less

@@ -113,14 +113,8 @@
     // });
   }
 
-  &-ok-btn,
-  &-cancel-btn {
-    min-width: 88px;
-    min-height: 32px;
-    font-size: @modal-footer-font-size;
-  }
   &-margin-btn {
-    margin-right: 20px;
+    margin-right: @modal-footer-button-spacing;
   }
 }
 

package/lib/modal/style/token.less

@@ -38,9 +38,12 @@
 @icon-circle-radiu: var(~'@{modal-prefix}-icon-circle-sizing', 6px);
 @modal-border-width: var(~'@{modal-prefix}-sizing-border', 1px);
 @modal-close-icon-size: var(~'@{modal-prefix}-close-icon-font-size', 16px);
-@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
-@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
 @modal-header-sizing-height: var(~'@{modal-prefix}-header-sizing-height', 50px);
-@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);
 @modal-footer-sizing-height: var(~'@{modal-prefix}-footer-sizing-height', 50px);
-@modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);
+
+// spacing
+@modal-footer-button-spacing: var(~'@{modal-prefix}-footer-button-spacing', 12px);
+@modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);
+@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
+@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
+@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);

package/lib/progress/progress.js

@@ -93,7 +93,7 @@ var Progress = function Progress(props) {
 
   var progressStatus = getProgressStatus(progressProps);
   var progressPrefixCls = getPrefixCls(prefixCls, 'progress', customPrefixcls);
-  var progressClasses = (0, _classnames.default)(progressPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(progressPrefixCls, "-type-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(progressPrefixCls, "-status-")).call(_context2, progressStatus), true), (0, _defineProperty2.default)(_classNames, "".concat(progressPrefixCls, "-show-info"), showInfo), _classNames));
+  var progressClasses = (0, _classnames.default)(progressPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(progressPrefixCls, "-type-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(progressPrefixCls, "-status-")).call(_context2, progressStatus), true), (0, _defineProperty2.default)(_classNames, "".concat(progressPrefixCls, "-show-info"), showInfo), (0, _defineProperty2.default)(_classNames, "".concat(progressPrefixCls, "-position-bottom"), progressProps.infoPosition !== 'right' && progressStatus === 'normal'), _classNames));
 
   var renderProgressInfo = function renderProgressInfo(prefixCls, progressStatus, props) {
     var _props$type = props.type,

package/lib/progress/style/index.css

@@ -115,9 +115,19 @@
 }
 .kd-progress-type-line {
   width: 100%;
+  color: var(--kd-c-progress-line-color-font, #212121);
+}
+.kd-progress-type-line .kd-progress-special-text {
+  margin-top: var(--kd-c-progress-line-text-spacing-margin-top, 12px);
+  line-height: 24px;
+}
+.kd-progress-type-circle {
+  color: var(--kd-c-progress-circle-color-font, #666);
 }
 .kd-progress-type-circle .kd-progress-special-text {
+  margin-top: var(--kd-c-progress-circle-text-spacing-margin-top, 8px);
   padding: 0;
+  line-height: 24px;
 }
 .kd-progress-outer {
   display: inline-block;
@@ -129,9 +139,9 @@
   padding-right: 0;
   font-size: 0;
 }
-.kd-progress-show-info .kd-progress-outer {
-  margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 3 - 8px);
-  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 3 + 8px);
+.kd-progress-show-info:not(.kd-progress-position-bottom) .kd-progress-outer {
+  margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 2 - 8px);
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
 }
 .kd-progress-inner {
   position: relative;
@@ -165,7 +175,7 @@
   display: inline-block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: calc(var(--kd-c-progress-line-text-font-size, 16px)*3);
+  width: calc(var(--kd-c-progress-line-text-font-size, 16px)*2);
   margin-left: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
   white-space: nowrap;
   text-align: left;
@@ -176,7 +186,10 @@
   font-size: var(--kd-c-progress-line-special-text-font-size, 16px);
   text-align: center;
   overflow: hidden;
-  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*3 + 8px);
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*2 + 8px);
+}
+.kd-progress-position-bottom .kd-progress-special-text {
+  padding-right: 0;
 }
 .kd-progress-status-success .kd-progress-bg {
   background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));

package/lib/progress/style/index.less

@@ -14,11 +14,21 @@
 
   &-type-line {
     width: 100%;
+    color: @progress-line-font-color;
+
+    .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-line-text-margin-top;
+      line-height: 24px;
+    }
   }
 
   &-type-circle {
+    color: @progress-circle-font-color;
+
     .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-circle-text-margin-top;
       padding: 0;
+      line-height: 24px;
     }
   }
 
@@ -31,9 +41,9 @@
     padding-right: 0;
     font-size: 0;
 
-    .@{progress-prefix-cls}-show-info & {
-      margin-right: calc(-1 * @progress-line-text-font-size * 3 - 8px);
-      padding-right: calc(@progress-line-text-font-size * 3 + 8px);
+    .@{progress-prefix-cls}-show-info:not(.@{progress-prefix-cls}-position-bottom) & {
+      margin-right: calc(-1 * @progress-line-text-font-size * 2 - 8px);
+      padding-right: calc(@progress-line-text-font-size * 2 + 8px);
     }
   }
 
@@ -71,7 +81,7 @@
   &-text {
     display: inline-block;
     box-sizing: border-box;
-    width: calc(@progress-line-text-font-size*3);
+    width: calc(@progress-line-text-font-size*2);
     margin-left: @progress-line-text-margin-left;
     // font-size: @progress-line-text-font-size;
     // line-height: 1;
@@ -85,7 +95,11 @@
     font-size: @progress-line-special-text-font-size;
     text-align: center;
     overflow: hidden;
-    padding-right: calc(@progress-line-text-font-size*3 + 8px);
+    padding-right: calc(@progress-line-text-font-size*2 + 8px);
+
+    .@{progress-prefix-cls}-position-bottom & {
+      padding-right: 0;
+    }
   }
 
   &-status-success {

package/lib/progress/style/token.less

@@ -4,6 +4,8 @@
 
 // color
 @progress-remaining-color: var(~'@{progress-prefix}-color-remaining', #e5e5e5);//背景色
+@progress-line-font-color: var(~'@{progress-prefix}-line-color-font', #212121);
+@progress-circle-font-color: var(~'@{progress-prefix}-circle-color-font', #666);
 @progress-default-color: var(~'@{progress-prefix}-color-default', #5582f3);//进度条 默认色
 @progress-success-color: var(~'@{progress-prefix}-color-success', @color-success);//进度条 成功
 @progress-failure-color: var(~'@{progress-prefix}-color-failure', @color-error);//进度条 失败
@@ -27,6 +29,8 @@
 
 
 // spacing
-@progress-circle-unit-margin-top: var(~'@{progress-prefix}-circle-unit-spacing-margin-top', 18px);
+@progress-circle-unit-margin-top: var(~'@{progress-prefix}-circle-unit-spacing-margin-top', 18px); // 百分比符号距离顶部的距离
 @progress-line-text-margin-left: var(~'@{progress-prefix}-line-text-spacing-margin-left', 8px); //进度与文字或者图标的间距
+@progress-line-text-margin-top: var(~'@{progress-prefix}-line-text-spacing-margin-top', 12px);
+@progress-circle-text-margin-top: var(~'@{progress-prefix}-circle-text-spacing-margin-top', 8px);
 

package/lib/slider/track.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface trackProps {
     prefixCls: string;
     vertical: boolean;

package/lib/style/themes/default.less

@@ -31,7 +31,7 @@
 @warning-border-color: #ffcb78; // 警示反馈浮层的容器边框色
 @error-color: #fb2323; // 失败色(深)
 @error-bg-color: #fff2f4; // 失败反馈浮层的底色
-@error-border-color: #ff8088; // 失败反馈浮层的容器边框色
+@error-border-color: #fc808B; // 失败反馈浮层的容器边框色
 @ongoing-color: #276ff5; // 进行中(深)
 @ongoing-bg-color: #f2f9ff; // 进行中反馈浮层的底色
 @ongoing-border-color: #85b8ff; // 进行中反馈浮层的容器边框色

package/lib/table/table.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableProps } from './interface';
 declare function Table(props: TableProps): JSX.Element;
 export default Table;

package/lib/tabs/style/index.css

@@ -155,6 +155,13 @@
 .kd-tabs-left-arrows {
   -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
           box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-tabs-left-arrows-line {
   background-color: #fff;
@@ -166,6 +173,13 @@
 .kd-tabs-right-arrows {
   -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
           box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-tabs-right-arrows-line {
   background-color: #fff;
@@ -191,19 +205,7 @@
 }
 .kd-tabs-left-operations {
   position: relative;
-  line-height: 40px;
-  margin-right: 8px;
-}
-.kd-tabs-left-operations::after {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 28px;
-  right: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  margin-right: 2px;
 }
 .kd-tabs-left-operations-item {
   padding: 0 12px;
@@ -211,21 +213,10 @@
 }
 .kd-tabs-right-operations {
   position: relative;
-  line-height: 40px;
-}
-.kd-tabs-right-operations::before {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 100%;
-  left: 0;
-  top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  padding-right: 18px;
 }
 .kd-tabs-right-operations-item {
-  padding: 0 12px;
+  padding-left: 12px;
   cursor: pointer;
 }
 .kd-tabs-more-btn {
@@ -233,8 +224,6 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
 }
@@ -267,6 +256,20 @@
   height: var(--kd-c-tabs-sizing-height, 48px);
   border-bottom: var(--kd-c-tabs-sizing-border, 1px) solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
+.kd-tabs-navs-line.kd-tabs-navs-middle {
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+}
+.kd-tabs-navs-line.kd-tabs-navs-small {
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px) !important;
+}
+.kd-tabs-navs-line .kd-tab-pane-middle {
+  line-height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
+}
+.kd-tabs-navs-line .kd-tab-pane-small {
+  line-height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
+  height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
+}
 .kd-tabs-navs-line.kd-tabs-navs-bottom {
   border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   border-bottom: unset;
@@ -346,13 +349,13 @@
 .kd-tabs-navs-dynamic {
   background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
   border-bottom: unset;
-  height: 40px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-dynamic .kd-tabs-tab-wrap {
-  height: 40px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-dynamic .kd-tabs-more-btn {
-  line-height: 40px;
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-tabs-navs-small:not(.kd-tabs-navs-left):not(.kd-tabs-navs-right) {
   height: 36px;
@@ -368,8 +371,7 @@
   font-size: var(--kd-c-tabs-pane-font-size, var(--kd-g-font-size-middle, 14px));
   color: var(--kd-c-tabs-color-text, var(--kd-g-color-text-secondary, #666));
   height: var(--kd-c-tabs-pane-sizing-height, 48px);
-  line-height: var(--kd-c-tabs-pane-line-height, 48px);
-  margin-right: var(--kd-c-tabs-pane-spacing-margin-right, 24px);
+  line-height: var(--kd-c-tabs-pane-height, 48px);
   cursor: pointer;
 }
 .kd-tab-pane-text {
@@ -391,11 +393,13 @@
 .kd-tab-pane-disabled:hover {
   color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-tab-pane-type-line {
+  padding: 0 var(--kd-c-tabs-pane-line-paddinng-horizontal, 20px);
+}
 .kd-tab-pane-type-card {
   margin-right: 0;
-}
-.kd-tab-pane-type-card .kd-tab-pane-text {
-  padding: 0 24px;
+  padding: 0 var(--kd-c-tabs-pane-card-paddinng-horizontal, 18px);
+  border: 1px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active {
   background-color: #fff;
@@ -406,25 +410,14 @@
   transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
 }
 .kd-tab-pane-type-card.kd-tab-pane-box-active:first-of-type {
-  border-left: unset;
-}
-.kd-tab-pane-type-card.kd-tab-pane-left,
-.kd-tab-pane-type-card.kd-tab-pane-right {
-  width: 100%;
-  padding: 0;
-  text-align: center;
-  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-}
-.kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
-.kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
-  border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-left-color: transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-left {
-  border-left: 1px solid transparent;
+  border-left: 2px solid transparent;
 }
 .kd-tab-pane-type-card.kd-tab-pane-left.kd-tab-pane-box-active {
-  border-left: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
-  border-right: 1px solid transparent;
+  border-left: 2px solid;
+  border-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent transparent var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tab-pane-type-card.kd-tab-pane-right {
   border-right: 1px solid transparent;
@@ -433,14 +426,40 @@
   border-right: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
   border-left: 1px solid transparent;
 }
+.kd-tab-pane-type-card.kd-tab-pane-left,
+.kd-tab-pane-type-card.kd-tab-pane-right {
+  width: 100%;
+  border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
+.kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
+  border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-bottom {
+  border-top: 1px solid transparent;
+  border-bottom: 2px solid transparent;
+}
 .kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active {
   border-bottom: 2px solid;
   border-color: transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
 }
+.kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active:first-of-type {
+  border-left-color: transparent;
+}
+.kd-tab-pane-type-card.kd-tab-pane-top {
+  border-top: 2px solid transparent;
+}
+.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active {
+  border-top: 2px solid;
+  border-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+}
+.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active:first-of-type {
+  border-left-color: transparent;
+}
 .kd-tab-pane-type-dynamic {
-  height: 40px;
-  line-height: 40px;
-  margin: 0 0 0 8px;
+  height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
+  margin: 0 0 0 4px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -448,17 +467,17 @@
       -ms-flex-align: center;
           align-items: center;
 }
-.kd-tab-pane-type-dynamic:hover .kd-tab-pane-operations span:first-child {
+.kd-tab-pane-type-dynamic:not(.kd-tab-pane-disabled):hover .kd-tab-pane-operations span:first-child {
   opacity: 1;
   cursor: pointer;
 }
 .kd-tab-pane-type-dynamic .kd-tab-pane-operations .kdicon {
-  font-size: 14px;
+  font-size: 16px;
 }
 .kd-tab-pane-type-grid {
   height: 24px;
   line-height: 22px;
-  padding: 0 19px;
+  padding: 0 var(--kd-c-tabs-pane-grid-paddinng-horizontal, 20px);
   border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   margin-right: -1px;
 }
@@ -480,7 +499,7 @@
   color: #fff;
 }
 .kd-tab-pane-type-grid.kd-tab-pane-disabled {
-  background-color: var(--kd-c-tabs-color-background-disabled, var(--kd-g-color-background-2, #f2f2f2));
+  background-color: var(--kd-c-tabs-color-background-disabled, transparent);
 }
 .kd-tab-pane-type-grid:hover {
   color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
@@ -489,7 +508,7 @@
   position: relative;
   display: inline-block;
   line-height: 1;
-  padding: 0 18px 0 8px;
+  padding: 0 4px;
 }
 .kd-tab-pane-operations span:first-child {
   display: inline-block;
@@ -497,18 +516,6 @@
   font-size: 0;
   opacity: 0;
 }
-.kd-tab-pane-operations::after {
-  position: absolute;
-  content: '';
-  width: 1px;
-  height: 14px;
-  background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-  right: 0;
-  top: 50%;
-  opacity: 1;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
 .kd-tab-pane-small {
   height: 36px;
   line-height: 36px;
@@ -531,8 +538,6 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   width: 48px;
-  height: 100%;
-  line-height: 46px;
   text-align: center;
   cursor: pointer;
 }
@@ -544,7 +549,7 @@
 }
 .kd-arrow-button-dynamic {
   width: 24px;
-  line-height: 40px;
+  line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
 }
 .kd-arrow-button-disabled {
   color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));