bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/tag/tag.css

@@ -1,4 +1,4 @@
-.bk-tag {
+:where(.bk-tag) {
   display: inline-flex;
   align-items: center;
   height: 22px;
@@ -11,121 +11,121 @@
   border-color: rgba(151, 155, 165, 0.3);
   box-sizing: border-box;
 }
-.bk-tag.bk-tag-success {
+:where(.bk-tag).bk-tag-success {
   color: #14a568;
   border-color: rgba(20, 165, 104, 0.3);
-  background-color: #E4FAF0;
+  background-color: #e4faf0;
 }
-.bk-tag.bk-tag-success.bk-tag-filled {
-  background-color: #14A568;
+:where(.bk-tag).bk-tag-success.bk-tag-filled {
+  background-color: #14a568;
 }
-.bk-tag.bk-tag-success.bk-tag-filled:hover {
-  background-color: #42B685;
+:where(.bk-tag).bk-tag-success.bk-tag-filled:hover {
+  background-color: #42b685;
 }
-.bk-tag.bk-tag-success:hover:not(.bk-tag-filled) {
-  background-color: #C9F5E2;
+:where(.bk-tag).bk-tag-success:hover:not(.bk-tag-filled) {
+  background-color: #c9f5e2;
 }
-.bk-tag.bk-tag-info {
+:where(.bk-tag).bk-tag-info {
   color: #3a84ff;
   border-color: rgba(58, 132, 255, 0.3);
-  background-color: #EDF4FF;
+  background-color: #edf4ff;
 }
-.bk-tag.bk-tag-info.bk-tag-filled {
-  background-color: #3A84FF;
+:where(.bk-tag).bk-tag-info.bk-tag-filled {
+  background-color: #3a84ff;
 }
-.bk-tag.bk-tag-info.bk-tag-filled:hover {
-  background-color: #609CFE;
+:where(.bk-tag).bk-tag-info.bk-tag-filled:hover {
+  background-color: #609cfe;
 }
-.bk-tag.bk-tag-info:hover:not(.bk-tag-filled) {
-  background-color: #E1ECFF;
+:where(.bk-tag).bk-tag-info:hover:not(.bk-tag-filled) {
+  background-color: #e1ecff;
 }
-.bk-tag.bk-tag-warning {
+:where(.bk-tag).bk-tag-warning {
   color: #fe9c00;
   border-color: rgba(254, 165, 0, 0.3);
-  background-color: #FFF1DB;
+  background-color: #fff1db;
 }
-.bk-tag.bk-tag-warning.bk-tag-filled {
-  background-color: #FE9C00;
+:where(.bk-tag).bk-tag-warning.bk-tag-filled {
+  background-color: #fe9c00;
 }
-.bk-tag.bk-tag-warning.bk-tag-filled:hover {
-  background-color: #FDAF32;
+:where(.bk-tag).bk-tag-warning.bk-tag-filled:hover {
+  background-color: #fdaf32;
 }
-.bk-tag.bk-tag-warning:hover:not(.bk-tag-filled) {
-  background-color: #FFE8C3;
+:where(.bk-tag).bk-tag-warning:hover:not(.bk-tag-filled) {
+  background-color: #ffe8c3;
 }
-.bk-tag.bk-tag-danger {
+:where(.bk-tag).bk-tag-danger {
   color: #ea3636;
   border-color: rgba(234, 53, 54, 0.3);
-  background-color: #FEEBEA;
+  background-color: #feebea;
 }
-.bk-tag.bk-tag-danger.bk-tag-filled {
-  background-color: #EA3536;
+:where(.bk-tag).bk-tag-danger.bk-tag-filled {
+  background-color: #ea3536;
 }
-.bk-tag.bk-tag-danger.bk-tag-filled:hover {
-  background-color: #ED5C5D;
+:where(.bk-tag).bk-tag-danger.bk-tag-filled:hover {
+  background-color: #ed5c5d;
 }
-.bk-tag.bk-tag-danger:hover:not(.bk-tag-filled) {
-  background-color: #FEDDDC;
+:where(.bk-tag).bk-tag-danger:hover:not(.bk-tag-filled) {
+  background-color: #fedddc;
 }
-.bk-tag:hover {
+:where(.bk-tag):hover {
   background-color: #dcdee5;
 }
-.bk-tag.bk-tag-filled {
+:where(.bk-tag).bk-tag-filled {
   color: #fff;
-  background-color: #979BA5;
+  background-color: #979ba5;
 }
-.bk-tag.bk-tag-filled:hover {
-  background-color: #ACAFB6;
+:where(.bk-tag).bk-tag-filled:hover {
+  background-color: #acafb6;
 }
-.bk-tag.bk-tag-stroke {
+:where(.bk-tag).bk-tag-stroke {
   padding: 0 9px;
   line-height: 20px;
   border-style: solid;
   border-width: 1px;
 }
-.bk-tag.bk-tag-closable {
+:where(.bk-tag).bk-tag-closable {
   padding: 0 4px 0 10px;
 }
-.bk-tag.bk-tag-checkable {
+:where(.bk-tag).bk-tag-checkable {
   cursor: pointer;
   background: none;
 }
-.bk-tag.bk-tag-checkable:hover {
-  background: #F0F1F5;
+:where(.bk-tag).bk-tag-checkable:hover {
+  background: #f0f1f5;
 }
-.bk-tag.bk-tag-check {
+:where(.bk-tag).bk-tag-check {
   color: #fff;
   background: #3a84ff;
 }
-.bk-tag.bk-tag-check:hover {
+:where(.bk-tag).bk-tag-check:hover {
   color: #fff;
   background: #3a84ff;
   opacity: 1;
 }
-.bk-tag--defaul {
+:where(.bk-tag--defaul) {
   padding: 0 8px;
 }
-.bk-tag--small {
+:where(.bk-tag--small) {
   height: 16px;
   padding: 0 4px;
   line-height: 16px;
 }
-.bk-tag--small .bk-tag-text {
+:where(.bk-tag--small) .bk-tag-text {
   font-size: 10px;
 }
-.bk-tag-text {
+:where(.bk-tag-text) {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tag-icon {
+:where(.bk-tag-icon) {
   flex-shrink: 0;
   margin-right: 4px;
   font-size: 14px;
   line-height: 0;
 }
-.bk-tag-close {
+:where(.bk-tag-close) {
   flex-shrink: 0;
   margin-left: 4px;
   font-size: 12px;

package/lib/tag/tag.less

@@ -6,37 +6,37 @@
 @tag-warning-color: #fe9c00;
 @tag-danger-color: @danger-color;
 
-@tag-success-bg-color: #E4FAF0;
-@tag-info-bg-color: #EDF4FF;
-@tag-warning-bg-color: #FFF1DB;
-@tag-danger-bg-color: #FEEBEA;
-@tag-stroke-bg-color: #FAFBFD;
-@tag-filled-bg-color: #979BA5;
-@tag-filled-success-bg-color: #14A568;
-@tag-filled-info-bg-color: #3A84FF;
-@tag-filled-warning-bg-color: #FE9C00;
-@tag-filled-danger-bg-color: #EA3536;
-
-@tag-success-border-color: rgba(20,165,104,.3);
-@tag-info-border-color: rgba(58,132,255,.3);
-@tag-warning-border-color: rgba(254,165,0,.3);
-@tag-danger-border-color: rgba(234,53,54,.3);
-
-@tag-success-hover-bg-color: #C9F5E2;
-@tag-info-hover-bg-color: #E1ECFF;
-@tag-warning-hover-bg-color: #FFE8C3;
-@tag-danger-hover-bg-color: #FEDDDC;
-@tag-stroke-hover-bg-color: #F0F1F5;
-@tag-filled-hover-bg-color: #ACAFB6;
-@tag-filled-success-hover-bg-color: #42B685;
-@tag-filled-info-hover-bg-color: #609CFE;
-@tag-filled-warning-hover-bg-color: #FDAF32;
-@tag-filled-danger-hover-bg-color: #ED5C5D;
-@tag-checkable-hover-bg-color: #F0F1F5;
+@tag-success-bg-color: #e4faf0;
+@tag-info-bg-color: #edf4ff;
+@tag-warning-bg-color: #fff1db;
+@tag-danger-bg-color: #feebea;
+@tag-stroke-bg-color: #fafbfd;
+@tag-filled-bg-color: #979ba5;
+@tag-filled-success-bg-color: #14a568;
+@tag-filled-info-bg-color: #3a84ff;
+@tag-filled-warning-bg-color: #fe9c00;
+@tag-filled-danger-bg-color: #ea3536;
+
+@tag-success-border-color: rgba(20, 165, 104, 0.3);
+@tag-info-border-color: rgba(58, 132, 255, 0.3);
+@tag-warning-border-color: rgba(254, 165, 0, 0.3);
+@tag-danger-border-color: rgba(234, 53, 54, 0.3);
+
+@tag-success-hover-bg-color: #c9f5e2;
+@tag-info-hover-bg-color: #e1ecff;
+@tag-warning-hover-bg-color: #ffe8c3;
+@tag-danger-hover-bg-color: #fedddc;
+@tag-stroke-hover-bg-color: #f0f1f5;
+@tag-filled-hover-bg-color: #acafb6;
+@tag-filled-success-hover-bg-color: #42b685;
+@tag-filled-info-hover-bg-color: #609cfe;
+@tag-filled-warning-hover-bg-color: #fdaf32;
+@tag-filled-danger-hover-bg-color: #ed5c5d;
+@tag-checkable-hover-bg-color: #f0f1f5;
 
 @themeSelectors: success, info, warning, danger;
 
-.@{bk-prefix}-tag {
+:where(.@{bk-prefix}-tag) {
   display: inline-flex;
   align-items: center;
   height: 22px;
@@ -46,7 +46,7 @@
   color: @default-color;
   cursor: default;
   background-color: #f0f1f5;
-  border-color: rgba(151,155,165,.3);
+  border-color: rgba(151, 155, 165, 0.3);
   box-sizing: border-box;
 
   each(@themeSelectors, {
@@ -117,11 +117,11 @@
   }
 }
 
-.@{bk-prefix}-tag--defaul {
+:where(.@{bk-prefix}-tag--defaul) {
   padding: 0 8px;
 }
 
-.@{bk-prefix}-tag--small {
+:where(.@{bk-prefix}-tag--small) {
   height: 16px;
   padding: 0 4px;
   line-height: 16px;
@@ -131,21 +131,21 @@
   }
 }
 
-.@{bk-prefix}-tag-text {
+:where(.@{bk-prefix}-tag-text) {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.@{bk-prefix}-tag-icon {
+:where(.@{bk-prefix}-tag-icon) {
   flex-shrink: 0;
   margin-right: 4px;
   font-size: 14px;
   line-height: 0;
 }
 
-.@{bk-prefix}-tag-close {
+:where(.@{bk-prefix}-tag-close) {
   flex-shrink: 0;
   margin-left: 4px;
   font-size: 12px;

package/lib/tag/tag.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-tag {
+:where(.bk-tag) {
   display: inline-flex;
   align-items: center;
   height: 22px;
@@ -140,121 +140,121 @@
   border-color: rgba(151, 155, 165, 0.3);
   box-sizing: border-box;
 }
-.bk-tag.bk-tag-success {
+:where(.bk-tag).bk-tag-success {
   color: #14a568;
   border-color: rgba(20, 165, 104, 0.3);
-  background-color: #E4FAF0;
+  background-color: #e4faf0;
 }
-.bk-tag.bk-tag-success.bk-tag-filled {
-  background-color: #14A568;
+:where(.bk-tag).bk-tag-success.bk-tag-filled {
+  background-color: #14a568;
 }
-.bk-tag.bk-tag-success.bk-tag-filled:hover {
-  background-color: #42B685;
+:where(.bk-tag).bk-tag-success.bk-tag-filled:hover {
+  background-color: #42b685;
 }
-.bk-tag.bk-tag-success:hover:not(.bk-tag-filled) {
-  background-color: #C9F5E2;
+:where(.bk-tag).bk-tag-success:hover:not(.bk-tag-filled) {
+  background-color: #c9f5e2;
 }
-.bk-tag.bk-tag-info {
+:where(.bk-tag).bk-tag-info {
   color: var(--primary-color);
   border-color: rgba(58, 132, 255, 0.3);
-  background-color: #EDF4FF;
+  background-color: #edf4ff;
 }
-.bk-tag.bk-tag-info.bk-tag-filled {
-  background-color: #3A84FF;
+:where(.bk-tag).bk-tag-info.bk-tag-filled {
+  background-color: #3a84ff;
 }
-.bk-tag.bk-tag-info.bk-tag-filled:hover {
-  background-color: #609CFE;
+:where(.bk-tag).bk-tag-info.bk-tag-filled:hover {
+  background-color: #609cfe;
 }
-.bk-tag.bk-tag-info:hover:not(.bk-tag-filled) {
-  background-color: #E1ECFF;
+:where(.bk-tag).bk-tag-info:hover:not(.bk-tag-filled) {
+  background-color: #e1ecff;
 }
-.bk-tag.bk-tag-warning {
+:where(.bk-tag).bk-tag-warning {
   color: #fe9c00;
   border-color: rgba(254, 165, 0, 0.3);
-  background-color: #FFF1DB;
+  background-color: #fff1db;
 }
-.bk-tag.bk-tag-warning.bk-tag-filled {
-  background-color: #FE9C00;
+:where(.bk-tag).bk-tag-warning.bk-tag-filled {
+  background-color: #fe9c00;
 }
-.bk-tag.bk-tag-warning.bk-tag-filled:hover {
-  background-color: #FDAF32;
+:where(.bk-tag).bk-tag-warning.bk-tag-filled:hover {
+  background-color: #fdaf32;
 }
-.bk-tag.bk-tag-warning:hover:not(.bk-tag-filled) {
-  background-color: #FFE8C3;
+:where(.bk-tag).bk-tag-warning:hover:not(.bk-tag-filled) {
+  background-color: #ffe8c3;
 }
-.bk-tag.bk-tag-danger {
+:where(.bk-tag).bk-tag-danger {
   color: var(--danger-color);
   border-color: rgba(234, 53, 54, 0.3);
-  background-color: #FEEBEA;
+  background-color: #feebea;
 }
-.bk-tag.bk-tag-danger.bk-tag-filled {
-  background-color: #EA3536;
+:where(.bk-tag).bk-tag-danger.bk-tag-filled {
+  background-color: #ea3536;
 }
-.bk-tag.bk-tag-danger.bk-tag-filled:hover {
-  background-color: #ED5C5D;
+:where(.bk-tag).bk-tag-danger.bk-tag-filled:hover {
+  background-color: #ed5c5d;
 }
-.bk-tag.bk-tag-danger:hover:not(.bk-tag-filled) {
-  background-color: #FEDDDC;
+:where(.bk-tag).bk-tag-danger:hover:not(.bk-tag-filled) {
+  background-color: #fedddc;
 }
-.bk-tag:hover {
+:where(.bk-tag):hover {
   background-color: #dcdee5;
 }
-.bk-tag.bk-tag-filled {
+:where(.bk-tag).bk-tag-filled {
   color: #fff;
-  background-color: #979BA5;
+  background-color: #979ba5;
 }
-.bk-tag.bk-tag-filled:hover {
-  background-color: #ACAFB6;
+:where(.bk-tag).bk-tag-filled:hover {
+  background-color: #acafb6;
 }
-.bk-tag.bk-tag-stroke {
+:where(.bk-tag).bk-tag-stroke {
   padding: 0 9px;
   line-height: 20px;
   border-style: solid;
   border-width: 1px;
 }
-.bk-tag.bk-tag-closable {
+:where(.bk-tag).bk-tag-closable {
   padding: 0 4px 0 10px;
 }
-.bk-tag.bk-tag-checkable {
+:where(.bk-tag).bk-tag-checkable {
   cursor: pointer;
   background: none;
 }
-.bk-tag.bk-tag-checkable:hover {
-  background: #F0F1F5;
+:where(.bk-tag).bk-tag-checkable:hover {
+  background: #f0f1f5;
 }
-.bk-tag.bk-tag-check {
+:where(.bk-tag).bk-tag-check {
   color: #fff;
   background: var(--primary-color);
 }
-.bk-tag.bk-tag-check:hover {
+:where(.bk-tag).bk-tag-check:hover {
   color: #fff;
   background: var(--primary-color);
   opacity: 1;
 }
-.bk-tag--defaul {
+:where(.bk-tag--defaul) {
   padding: 0 8px;
 }
-.bk-tag--small {
+:where(.bk-tag--small) {
   height: 16px;
   padding: 0 4px;
   line-height: 16px;
 }
-.bk-tag--small .bk-tag-text {
+:where(.bk-tag--small) .bk-tag-text {
   font-size: 10px;
 }
-.bk-tag-text {
+:where(.bk-tag-text) {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-tag-icon {
+:where(.bk-tag-icon) {
   flex-shrink: 0;
   margin-right: 4px;
   font-size: 14px;
   line-height: 0;
 }
-.bk-tag-close {
+:where(.bk-tag-close) {
   flex-shrink: 0;
   margin-left: 4px;
   font-size: 12px;