@kdcloudjs/kdesign 1.2.0 → 1.2.1

package/es/select/style/token.less

@@ -6,7 +6,7 @@
 // color
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', @color-background-contain-disabled);
-@select-item-active-bg: var(~'@{select-custom-prefix}-color-background', @color-hover);
+@select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
 @select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
 @select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
 @select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
@@ -15,7 +15,7 @@
 @select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', @color-text-third);
 @select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
 @select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
-@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', @color-text-link);
+@select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
 @select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
 
 // font

package/es/steps/style/index.css

@@ -108,9 +108,13 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
+}
+.kd-steps .kd-steps-icon {
+  border: 2px solid;
+  padding-top: 1px;
+}
+.kd-steps .kdicon-exclamatory {
+  font-size: 30px;
 }
 .kd-steps-item {
   -webkit-box-flex: 1;
@@ -132,24 +136,24 @@
 }
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-icon,
 .kd-steps-item-clickable.kd-steps-item-wait .kd-steps-item-title {
-  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
-  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s));
+  -webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
+  transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
 }
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-icon {
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-title,
 .kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-description {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item-clickable.kd-steps-item-finish .kd-steps-item-title {
-  -webkit-transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
-  transition: all var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) ease;
+  -webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
+  transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
 }
 .kd-steps-item-clickable.kd-steps-item-finish:hover .kd-steps-item-title {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
 }
 .kd-steps-item-container {
   width: 100%;
@@ -176,13 +180,14 @@
 .kd-steps-item-iconContainer::after {
   content: '';
   width: 100%;
-  height: var(--kd-c-steps-line-sizing-height, 4px);
-  background-color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  height: var(--kd-c-steps-line-sizing-height, 1px);
+  border-bottom: 1px dashed var(--kd-c-steps-color-wait, #999);
+  border-left: 1px dashed var(--kd-c-steps-color-wait, #999);
   position: absolute;
   left: 50%;
-  top: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
-  -webkit-transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
-  transition: width var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-duration-promptly, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  top: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
+  -webkit-transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
+  transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
 }
 .kd-steps-item-iconContainer:last-child::after {
   display: none;
@@ -214,10 +219,10 @@
       -ms-flex-align: center;
           align-items: center;
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   font-size: calc(var(--kd-c-steps-icon-sizing-width, 28px) - 13px);
   border-radius: 50%;
-  border: 2px solid var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-steps-color-wait, #999);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
@@ -227,7 +232,7 @@
 .kd-steps-item-content .kd-steps-item-title {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
@@ -237,7 +242,7 @@
 .kd-steps-item-content .kd-steps-item-description {
   line-height: 20px;
   font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-steps-color-wait, #999);
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
@@ -245,32 +250,35 @@
   -webkit-box-orient: vertical;
   width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
 }
+.kd-steps-item-process {
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+}
 .kd-steps-item-process .kd-steps-icon {
-  background-color: var(--kd-c-steps-icon-color-background, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
+  border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
-.kd-steps-item-process .kd-steps-item-title {
-  color: var(--kd-c-steps-color-wait, var(--kd-g-color-text-secondary, #666));
+.kd-steps-item-process .kd-steps-item-title,
+.kd-steps-item-process .kd-steps-item-description {
+  color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-steps-item:last-child .kd-steps-item-iconContainer::after {
   display: none;
 }
 .kd-steps-item-finish .kd-steps-icon {
   background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-  border: 2px solid var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
+  border-color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-steps-item-finish .kd-steps-item-content .kd-steps-item-title,
 .kd-steps-item-finish .kd-steps-item-content .kd-steps-item-description {
-  color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
-}
-.kd-steps-item-iconContainer-finish::after {
-  background-color: var(--kd-c-steps-color-completed, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
 }
 .kd-steps-item-error .kd-steps-icon {
   color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
-  border: 2px solid var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
+  border-color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
 }
 .kd-steps-item-error .kd-steps-item-content .kd-steps-item-title,
 .kd-steps-item-error .kd-steps-item-content .kd-steps-item-description {
@@ -331,10 +339,10 @@
   margin-right: 4px;
 }
 .kd-steps-vertical .kd-steps-item-iconContainer::after {
-  width: var(--kd-c-steps-line-sizing-height, 4px);
+  width: var(--kd-c-steps-line-sizing-height, 1px);
   height: calc(100% + 44px);
   top: 2px;
-  left: calc(50% - var(--kd-c-steps-line-sizing-height, 4px) / 2);
+  left: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
 }
 .kd-steps-vertical .kd-steps-item-content {
   text-align: left;

package/es/steps/style/index.less

@@ -1,16 +1,19 @@
 @import '../../style/themes/index';
 @import './token.less';
 
-
 @steps-prefix-cls: ~'@{kd-prefix}-steps';
 
 .@{steps-prefix-cls} {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
 
-  &-iconSize {
-    // font-size: @steps-font-size;
+  .@{steps-prefix-cls}-icon {
+    border: 2px solid;
+    padding-top: 1px;
+  }
+
+  .@{kd-prefix}icon-exclamatory {
+    font-size: 30px;
   }
 
   &-item {
@@ -31,25 +34,21 @@
     }
 
     &-clickable&-wait {
-
       .@{steps-prefix-cls}-icon,
       .@{steps-prefix-cls}-item-title {
         transition: all @steps-duration-promptly;
       }
 
-
       &:hover {
         .@{steps-prefix-cls}-icon {
-          // background-color: @steps-color-background-wait-icon-hover;
-
           background-color: @steps-color-white;
-          color: @steps-color-completed;
-          border: 2px solid @steps-color-completed;
+          color: @steps-color-hover;
+          border-color: @steps-color-hover;
         }
 
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
-          color: @steps-color-completed;
+          color: @steps-color-hover;
         }
       }
     }
@@ -82,11 +81,12 @@
         content: '';
         width: 100%;
         height: @steps-line-sizing-height;
-        background-color: @steps-color-wait;
+        border-bottom: 1px dashed @steps-color-wait;
+        border-left: 1px dashed @steps-color-wait;
         position: absolute;
         left: 50%;
         top: calc(50% - @steps-line-sizing-height / 2);
-        transition: width @steps-duration-promptly @steps-transition-fn, background-color @steps-duration-promptly @steps-transition-fn
+        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96)
       }
 
       &:last-child {
@@ -103,7 +103,6 @@
         justify-content: center;
         align-items: center;
 
-        // background-color:@steps-color-white;
         .@{steps-prefix-cls}-icon {
           width: @steps-icon-sizing-width;
           height: @steps-icon-sizing-width;
@@ -114,7 +113,7 @@
           color: @steps-color-wait;
           font-size: calc(@steps-icon-sizing-width - 13px);
           border-radius: 50%;
-          border: 2px solid @steps-color-wait;
+          border-color: @steps-color-wait;
           box-sizing: border-box;
         }
       }
@@ -135,7 +134,6 @@
       }
 
       .@{steps-prefix-cls}-item-description {
-
         line-height: 20px;
         font-size: @steps-font-size;
         color: @steps-color-wait;
@@ -144,19 +142,21 @@
         word-break: break-word;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-
         width: @steps-vertical-description-sizing-width;
-
       }
     }
 
     &-process {
+      color: @steps-color-hover;
+
       .@{steps-prefix-cls}-icon {
-        background-color: @steps-color-background-process-icon;
+        background-color: @steps-color-white;
+        color: @steps-color-hover;
+        border-color: @steps-color-hover;
       }
 
-      .@{steps-prefix-cls}-item-title {
-        color: @steps-color-wait;
+      .@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
+        color: @steps-color-hover;
       }
     }
 
@@ -172,12 +172,11 @@
       .@{steps-prefix-cls}-icon {
         background-color: @steps-color-white;
         color: @steps-color-completed;
-        border: 2px solid @steps-color-completed;
+        border-color: @steps-color-completed;
         box-sizing: border-box;
       }
 
       .@{steps-prefix-cls}-item-content {
-
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
           color: @steps-color-completed;
@@ -185,31 +184,22 @@
       }
     }
 
-    &-iconContainer-finish {
-      &::after {
-        background-color: @steps-color-completed;
-      }
-    }
 
     &-error {
       .@{steps-prefix-cls}-icon {
         color: @steps-color-error;
-        border: 2px solid @steps-color-error;
+        border-color: @steps-color-error;
       }
 
       .@{steps-prefix-cls}-item-content {
-
         .@{steps-prefix-cls}-item-title,
         .@{steps-prefix-cls}-item-description {
           color: @steps-color-error;
         }
       }
-
-
     }
   }
 
-
   &-bottomLable {
     .@{steps-prefix-cls}-item-iconContainer {
       margin-bottom: 4px;

package/es/steps/style/token.less

@@ -2,26 +2,23 @@
 
 @steps-prefix: '--@{kd-prefix}-c-steps';
 
-@steps-duration-promptly: var(~'@{steps-prefix}-duration-promptly', @duration-promptly);
-@steps-transition-fn: cubic-bezier(0.48, 0.04, 0.52, 0.96);
-
-
-
 // color
-@steps-color-completed: var(~'@{steps-prefix}-color-completed', @color-theme);//已经完成
+@steps-color-completed: var(~'@{steps-prefix}-color-completed', @color-success);//已经完成
+@steps-color-hover: var(~'@{steps-prefix}-color-hover', @color-theme);
 @steps-color-error: var(~'@{steps-prefix}-color-error', @color-error);
-@steps-color-wait:  var(~'@{steps-prefix}-color-wait', @color-text-secondary);//未开始  等待
+@steps-color-wait:  var(~'@{steps-prefix}-color-wait', #999);//未开始  等待
 @steps-color-white: var(~'@{steps-prefix}-color-white',@color-white);
 @steps-color-background-process-icon: var(~'@{steps-prefix}-icon-color-background', @color-theme);//图标的颜色
 
-
 // font
 @steps-font-size: var(~'@{steps-prefix}-font-size', @font-size-small); // 文字大小
 
+// motion
+@steps-duration-promptly: var(~'@{steps-prefix}-motion-duration', @duration-promptly);
 
 // sizing
 @steps-icon-sizing-width: var(~'@{steps-prefix}-icon-sizing-width', 28px);//图标的大小
-@steps-line-sizing-height: var(~'@{steps-prefix}-line-sizing-height', 4px);//连接线高度
+@steps-line-sizing-height: var(~'@{steps-prefix}-line-sizing-height', 1px);//连接线高度
 @steps-horizontal-description-sizing-height: var(~'@{steps-prefix}-horizontal-description-sizing-height', 60px);//内容部分高度 横向
 @steps-vertical-description-sizing-width: var(~'@{steps-prefix}-vertical-description-sizing-width', 200px);//内容部分宽度    纵向
 

package/es/tag/style/index.css

@@ -245,32 +245,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
-  border-radius: 50%;
-}
-.kd-tag-shape-text::before {
-  width: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-  height: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-  margin-right: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-}
-.kd-tag-shape-text.kd-tag-size-small::before {
-  width: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-  height: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-  margin-right: var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
-}
-.kd-tag-shape-text.kd-tag-size-middle::before {
-  width: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
-  height: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
-  margin-right: var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
-}
-.kd-tag-shape-text.kd-tag-size-large::before {
-  width: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
-  height: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
-  margin-right: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
-}
 .kd-tag-shape-text.kd-tag-process {
   color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
@@ -282,12 +256,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-process::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-middle {
   color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
@@ -299,12 +267,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-process.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-process.kd-tag-size-large {
   color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
   display: -webkit-inline-box;
@@ -316,12 +278,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-process.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-success {
   color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
@@ -333,12 +289,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-success::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-middle {
   color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
@@ -350,12 +300,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-success.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-success.kd-tag-size-large {
   color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
   display: -webkit-inline-box;
@@ -367,12 +311,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-success.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-warning {
   color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
@@ -384,12 +322,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-warning::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-middle {
   color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
@@ -401,12 +333,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-warning.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-warning.kd-tag-size-large {
   color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
   display: -webkit-inline-box;
@@ -418,12 +344,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-warning.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-error {
   color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
@@ -435,12 +355,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-error::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-middle {
   color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
@@ -452,12 +366,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-error.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-error.kd-tag-size-large {
   color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
   display: -webkit-inline-box;
@@ -469,12 +377,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-error.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-end {
   color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
@@ -486,12 +388,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-end::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-middle {
   color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
@@ -503,12 +399,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-end.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-end.kd-tag-size-large {
   color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
   display: -webkit-inline-box;
@@ -520,12 +410,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-end.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-expired {
   color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
@@ -537,12 +421,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-expired::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-middle {
   color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
@@ -554,12 +432,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-expired.kd-tag-size-middle::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
-  border-radius: 50%;
-}
 .kd-tag-shape-text.kd-tag-expired.kd-tag-size-large {
   color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
   display: -webkit-inline-box;
@@ -571,12 +443,6 @@
   padding: 0;
   border-radius: 0;
 }
-.kd-tag-shape-text.kd-tag-expired.kd-tag-size-large::before {
-  content: '';
-  display: block;
-  background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
-  border-radius: 50%;
-}
 .kd-tag-shape-edit {
   border: 1px solid var(--kd-c-tag-edit-color-border, var(--kd-g-color-text-placeholder, #ccc));
   border-radius: 2px;
@@ -589,11 +455,10 @@
   border-color: var(--kd-c-tag-edit-color-border-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover .kd-tag-closeWrapper {
-  background-color: var(--kd-c-tag-edit-cloesWrapper-color-background-hover, var(--kd-g-color-theme, #5582f3));
-  color: var(--kd-c-tag-edit-cloesWrapper-color-text-hover, var(--kd-g-color-white, #fff));
+  color: var(--kd-c-tag-edit-cloesWrapper-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-tag-shape-edit.kd-tag-closable {
-  padding-right: 0;
+  padding-right: 8px;
 }
 .kd-tag-clickable {
   cursor: pointer;
@@ -613,24 +478,14 @@
 .kd-tag-closable.kd-tag-size-middle {
   line-height: var(--kd-c-tag-sizing-height-middle, 20px);
 }
-.kd-tag-closable.kd-tag-size-middle .kd-tag-closeWrapper {
-  width: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
-  height: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
-}
 .kd-tag-closable.kd-tag-size-large {
   line-height: var(--kd-c-tag-sizing-height-large, 24px);
   padding-left: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
 }
-.kd-tag-closable.kd-tag-size-large .kd-tag-closeWrapper {
-  width: calc(var(--kd-c-tag-sizing-height-large, 24px) - 2px);
-  height: calc(var(--kd-c-tag-sizing-height-large, 24px) - 2px);
-}
 .kd-tag-closable.kd-tag-size-large .kd-tag-closeWrapper .kd-tag-close-icon {
   font-size: 14px;
 }
 .kd-tag-closeWrapper {
-  width: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
-  height: calc(var(--kd-c-tag-sizing-height-middle, 20px) - 2px);
   margin-left: 4px;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;